-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
WAVE reporting errors on Likert component #1037
Comments
Vi har merket med NVDA at den leser opp spørsmål/svar dobbelt så mange ganger når man tabber seg gjennom Likert-skala'en. Dette tror jeg er fordi den først skal lese opp posisjonen i tabellen og deretter radioknappen. Idag ser strukturen til likerten slik ut: <table>
<thead>
<tr>
<th id="header-1">Spørsmål</th>
<th id="header-2">Mindre</th>
<th id="header-3">Mye</th>
<th id="header-4">Mest</th>
</tr>
</thead>
<tbody>
<tr aria-labelledby="row-1-question">
<th scope="row" id="row-1-question">Hvor mye trives du?</td>
<td><input type="radio" aria-labelledby="row-1-question header-2" /></td>
<td><input type="radio" aria-labelledby="row-1-question header-3" /></td>
<td><input type="radio" aria-labelledby="row-1-question header-4" /></td>
</tr>
</tbody>
</table> Jeg har undersøkt microsft forms og de overskriver role på hver rad slik: <table>
<thead>
<tr>
<th id="header-1">Spørsmål</th>
<th id="header-2">Mindre</th>
<th id="header-3">Mye</th>
<th id="header-4">Mest</th>
</tr>
</thead>
<tbody>
<tr role="radiogroup" aria-labelledby="row-1-question">
<th scope="row" id="row-1-question">Hvor mye trives du?</td>
<td><input type="radio" aria-labelledby="row-1-question header-2" /></td>
<td><input type="radio" aria-labelledby="row-1-question header-3" /></td>
<td><input type="radio" aria-labelledby="row-1-question header-4" /></td>
</tr>
</tbody>
</table> Ved å gjøre dette fungerer hver rad som en normal radiogruppe istedenfor en tabell. Det eneste som er litt rart for skjermleser brukeren er at man får lest opp at det er en tabell med en rad (header). Og man tror kanskje det er noe feil med radene... Litt usikker her. Det kan også være et siste alternativ og fjerne arialabelledy attributten på radionknappene å heller gjøre slik: <table>
<thead>
<tr>
<th>Spørsmål</th>
<th>Mindre</th>
<th>Mye</th>
<th>Mest</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Hvor mye trives du?</td>
<td><label><input type="radio" />Mindre</label></td>
<td><label><input type="radio" />Mye</label></td>
<td><label><input type="radio" />Mest</label></td>
</tr>
</tbody>
</table> I det siste eksempelet har vi fjernet aria-labelledby attributtet og bare beholdt spørsmålsalternativet i en label i cellen. Da får man ikke lest opp spørsmålet hver eneste gang. Det er vanskelig å få dette bra ettersom man må teste det på ulike skjermlesere for å komme frem til den beste løsningen (Jaws, Voiceover NVDA, Narrator osv...). Kanskje hvis man midlertidig introduserer en attributt til Likert der du kan styre hvilken type Likert versjon man skal gå for kan man teste de ordentlig. |
Description of the bug
NOTE: The accessibility for screen reader (VoiceOver) is working as intended using aria-labels. This is an issue noticed by the accessibility testing tool WAVE.
The testing tool Wave is giving a warning that the component contain labels, but that they do not have any content. It has been tested with a screen reader and every bit of information in relation to the radio button was read. (Tested with VoiceOver) Maybe look into if the RadioButtons should be structured in another way?
Steps To Reproduce
Additional Information
No response
The text was updated successfully, but these errors were encountered: