Skip to content
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

Closed
Magnusrm opened this issue Mar 23, 2023 · 1 comment · Fixed by #1861
Closed

WAVE reporting errors on Likert component #1037

Magnusrm opened this issue Mar 23, 2023 · 1 comment · Fixed by #1861
Assignees
Labels
area/accessibility related to WCAG and accessibility kind/bug Something isn't working org/udir

Comments

@Magnusrm
Copy link
Contributor

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?

image

image

Steps To Reproduce

  1. Go to an app with a likert component
  2. Run wave or another testing tool

Additional Information

No response

@Magnusrm Magnusrm added kind/bug Something isn't working status/triage labels Mar 23, 2023
@Magnusrm Magnusrm added area/accessibility related to WCAG and accessibility ux/wcag and removed status/triage labels Mar 23, 2023
@Febakke Febakke removed the ux/wcag label Apr 17, 2023
@lasseklovstad
Copy link
Contributor

lasseklovstad commented Oct 4, 2023

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.

@mikaelrss mikaelrss self-assigned this Feb 13, 2024
@mikaelrss mikaelrss moved this to 📈 Todo in Team Apps Feb 14, 2024
@mikaelrss mikaelrss moved this from 📈 Todo to 👷 In Progress in Team Apps Feb 20, 2024
@HanneLauritsen1967 HanneLauritsen1967 moved this from 👷 In Progress to 🔎 Review in Team Apps Feb 21, 2024
@mikaelrss mikaelrss moved this from 🔎 Review to 🧪 Test in Team Apps Feb 23, 2024
@RonnyB71 RonnyB71 moved this from 🧪 Test to ✅ Done in Team Apps Mar 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/accessibility related to WCAG and accessibility kind/bug Something isn't working org/udir
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

5 participants