Added the tags 'Wikidata Lexicographical data' and ‘Special:NewLexeme revival‘ to this ticket because this accessibility issue would now affect the users of the new New Lexeme page. Att @Lydia_Pintscher

Task Breakdown Notes:

• The change for this will have to happen on the lookup component in WiKit.
• The general goal is to make sure our code is written in a way that is WCAG compliant, See technical details.
• The small differences between screen readers is not the focus of this task, however the WiKit code should be compliant with the standards, so that when SR techs catch up, we will be readily accessible.
• On Ubuntu, the Orca screen reader is already bundled with gnome. To learn how to use it, go to the manual in the operating system and search for "Orca". Also see:
  • https://techblog.wikimedia.org/2020/07/02/an-orca-screen-reader-tutorial/
  • https://help.gnome.org/users/orca/stable/introduction.html.en

Potential plan of Action:

1. In WiKit, add the mentioned attributes to the lookup component, according to the table above
2. Test locally with orca on the local wikit storybook
3. After the change is merged to WiKit's master and next branches, create a pre-release to incorporate the new code in Special:NewLexemeAlpha

Note: in Orca, the screen reader says: "<Whatever-is-on-the-label> entry". The options are not announced.

Question: What should the text be in this part of the description of the project.

aria-label to the menu component.

I was tempted to hardcode the word "Menu" (aria-label="Menu") and the label but what about the translations to other languages?

Note: i have chosen the role="menu" because it is more appropriate for this component. I have adjusted the rest of the aria attributes to match the menu. (role="menuitem" instead of role="option" as suggested in the ticket.)

In T290733#7951002, @guergana.tzatchkova wrote:

Question: What should the text be in this part of the description of the project.

aria-label to the menu component.

I was tempted to hardcode the word "Menu" (aria-label="Menu") and the label but what about the translations to other languages?

Note: i have chosen the role="menu" because it is more appropriate for this component. I have adjusted the rest of the aria attributes to match the menu. (role="menuitem" instead of role="option" as suggested in the ticket.) I have also appended the description to the aria-label of the menuitem.

Since in Orca the screen reader text is different I am not sure if the A/C is met. Will put up for a pre-review.

UPDATE:

role="listbox" has been used in the end for adjusting better for the requirements of the tickets as originally suggested in the ticket description.

Relevant PR: https://github.com/wmde/wikit/pull/587

@Michael @Sarai-WMDE Would one of you be able to verify this? I currently don't have the necessary setup.

Hi @Lydia_Pintscher! I provided my findings and feedback in the relevant PR after testing the changes locally using VoiceOver (in MacOS, of course).

Thank you!
Moving it back to todo then.

UPDATE:

• No-results-found issue will be tackled in a different task. @Michael
• there is a new commit in PR 587 to address the 'limited support' not being listed / listed incorrectly. Will be handed over to review again once the github CI cache issue has been fixed by the actions/cache authors. issue has been mitigated

Task Breakdown Notes II:

• We decided that as long as the code is WCAG compliant, we can resolve this task, while creating additional bug tasks to tackle reader specific issues, stemming from differences between the various screen reader implementations (i.e. Special task for VoiceOver on Mac, to be prioritized and handled separately when we are able to debug it).

Are we ready to close this then?

As far as I can see this is ready, the remaining issue of making sure that the error messages have something like role="alert" to them and something like aria-invalid in some appropriate cases will go to a separate task