You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm submitting a:bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
Page area
more toggles inside information sidebar
Issue description
Inside the information side-bar, when there are elements that contain longer text, they are abbreviated and a "more" toggle is added that will reveal the rest of the text when clicked. This is fine for the on-screen visible item because a user can see it in context and know what it means. But for a screen-reader user this label is insufficient as they will lack context. The experience of a screenreader user will be that a large number of "more" are read out without any context.
Note that the same goes for the "less" toggle that becomes available after activating the "more" toggle
now either use the browser's devtools to investigate the "more" toggles inside this sidebar or test as follows using a screenreader:
tab to a "more" toggle and hear it announced as simply "more" (depending on the screenreader it may say something like "link more" or similar)
activate the toggle
tab again to access the newly appeared "less" toggle
listen to the "less" toggle announced as "less"
Expected behaviour
The item should have a more descriptive label along the lines of "more citation information" so a screenreader user will know exactly what information is being revealed.
Possible fix
Best approach might be simply changing the visible lable (the toggle text).
Adding an accessible lable (eg aria-label) would also fix this. But there is the additional complication of WCAG 2.5.3 Success Criterion Label in Name (Level A), which states that the accessible label must also contain the visible text (in this case the word "more" or "less"), ideally at the beginning of the label.
I generally only tested A and AA requirements but this AAA issue is very noticable. And for something that's proably easy to fix, it would make a big difference for screenreader users.
The text was updated successfully, but these errors were encountered:
The toggle links are: <a href="#" class="toggle less">more</a> and <a href="#" class="toggle more">less</a>
To meet WCAG 2.5.3 Success Criterion Label in Name (Level A) the aria-labels could be something like this:
"More information: Reveal full description"
"Less information: Hide full description"
"More information: Reveal full citation"
"Less information: Hide full citation"
etc.
UV version: [email protected]
I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
Page area
more toggles inside information sidebar
Issue description
Inside the information side-bar, when there are elements that contain longer text, they are abbreviated and a "more" toggle is added that will reveal the rest of the text when clicked. This is fine for the on-screen visible item because a user can see it in context and know what it means. But for a screen-reader user this label is insufficient as they will lack context. The experience of a screenreader user will be that a large number of "more" are read out without any context.
Note that the same goes for the "less" toggle that becomes available after activating the "more" toggle
Steps to reproduce
Expected behaviour
The item should have a more descriptive label along the lines of "more citation information" so a screenreader user will know exactly what information is being revealed.
Possible fix
Best approach might be simply changing the visible lable (the toggle text).
Adding an accessible lable (eg aria-label) would also fix this. But there is the additional complication of WCAG 2.5.3 Success Criterion Label in Name (Level A), which states that the accessible label must also contain the visible text (in this case the word "more" or "less"), ideally at the beginning of the label.
WCAG criterion
2.4.9 Link Purpose (Link Only) (Level AAA)
Related code
Other information
I generally only tested A and AA requirements but this AAA issue is very noticable. And for something that's proably easy to fix, it would make a big difference for screenreader users.
The text was updated successfully, but these errors were encountered: