Fix accessibility

tweedegolf · May 28, 2024 · 4f0bbcd · 4f0bbcd
1 parent da2a380
commit 4f0bbcd
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
diff --git a/src/ExperienceRow.tsx b/src/ExperienceRow.tsx
@@ -52,6 +52,7 @@ export default function ExperienceRow({
                 value={levelIndex + 1}
                 onChange={() => onSelect(levelIndex + 1)}
                 checked={levelIndex + 1 === selected}
+                aria-label={level}
               />
             </label>
           </td>
@@ -69,6 +70,7 @@ export default function ExperienceRow({
             name={`check-${themeIndex}-${index}`}
             checked={marked}
             onChange={(e) => onMark((e.target as HTMLInputElement).checked)}
+            aria-label="markeren"
           />
         </label>
       </td>

diff --git a/src/Marked.tsx b/src/Marked.tsx
@@ -20,6 +20,7 @@ export default function Marked({ state, mark }: MarkedProps) {
               name={`check-${index}`}
               checked={true}
               onChange={() => mark(themeIndex, index, false)}
+              aria-label="Verwijderen"
             />
             {experience.name}
           </li>

diff --git a/src/Results.tsx b/src/Results.tsx
@@ -34,6 +34,7 @@ export default function Results({ state, mark, note }: ResultProps) {
       <textarea
         value={state.notes}
         onChange={(event) => note((event.target as HTMLTextAreaElement).value)}
+        aria-label="Notities"
       />
     </>
   );

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -14,11 +14,11 @@ export default function Table({ state, select, mark }: TableProps) {
         <tr>
           <th style={{ border: 'none' }}></th>
           {state.levels.map((level, levelIndex) => (
-            <th key={level} data-tooltip={level}>
+            <th key={level} data-tooltip={level} role="columnheader">
               {levelIndex + 1}
             </th>
           ))}
-          <th data-tooltip="markeren">
+          <th data-tooltip="markeren" role="columnheader">
             <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
               <path d="M451.47 125.404l-70.904-70.902a13.11 13.11 0 00-17.746-.733L164.999 221.372l119.603 119.602 167.6-197.822a13.11 13.11 0 00-.733-17.748zM116.153 267.658l29.002-29.001 122.16 122.16-29.001 29.002zM94.552 363.73l47.69 47.69c18.523-11.008 40.65-15.58 63.161-17.391l-93.46-93.46c-1.811 22.511-6.383 44.638-17.39 63.162zm-35.938 39.898a6.574 6.574 0 00-1.273 7.501l22.375 46.487a6.575 6.575 0 0010.572 1.796l31.411-31.41-43.728-43.73z" />
             </svg>

diff --git a/src/data.json b/src/data.json
@@ -368,7 +368,7 @@
     },
     {
       "name": "Praktijkmanagement",
-      "color": "#a5c3cb",
+      "color": "#699DA5",
       "experiences": [
         {
           "name": "Formuleert een persoonlijke en een praktijkvisie op de huisartsenzorg.",