Page MenuHomePhabricator

Enable keyboard navigation and screen reader support for Special:Preferences on mobile web
Closed, ResolvedPublicBUG REPORT

Description

User Story

As a user using a screen reader, I want to be able to navigate the mobile version of Special:Preferences and change my preferences.

Technical information

The following aria attributes could be useful:

Testing and QA steps

Acceptance Criteria

Special:Preferences in MinervaNeue / mobile web should offer equivalent functionality to Vector / Desktop preferences in terms of:

  • keyboard navigation
  • screen reader narration

It should be possible to browse and save preferences via keyboard with the assistance of a screen reader.

Original ticket

Steps to replicate the issue (include links if applicable):
Everything here is done with a screen reader running (I used orca with structural navigation enabled)

To experience the current state of desktop preferences:

To experience the current state of mobile preferences:

What happens?:

  • you can change focus between the sections, but can't open them, the form is totally inoperable

What should have happened instead?:

  • the form should be keyboard navigable and offer hints on how to navigate it via keyboard
  • the form should present section descriptions as such, eg. using aria-describedby or markup with similar functionality

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Edge 108 with Orca 42.0

Event Timeline

Samwalton9-WMF renamed this task from accessibility regression in mobile preferences to Enable keyboard navigation and screen reader support for Special:Preferences in MinervaNeue.Jan 10 2023, 4:04 PM
Samwalton9-WMF updated the task description. (Show Details)
Samwalton9-WMF moved this task from Inbox to Kanban on the Moderator-Tools-Team board.
Samwalton9-WMF updated the task description. (Show Details)
Samwalton9-WMF renamed this task from Enable keyboard navigation and screen reader support for Special:Preferences in MinervaNeue to Enable keyboard navigation and screen reader support for Special:Preferences on mobile web.Jan 10 2023, 4:06 PM
Samwalton9-WMF updated the task description. (Show Details)

Change 881735 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/core@master] Add aria attributes to preferences sections

https://gerrit.wikimedia.org/r/881735

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0844507923/w

@jsn.sherman I just created a Patch Demo so you can test the changes on Orca and other tools :)

Hmm, I'm still not actually able to navigate this with my keyboard. In the desktop mode, my reader will list off all of the section tabs, and then I can navigate between them using the keyboard. In the mobile view, I can only open the dialogs with a mouseclick. A person should be able to open those dialogs using the spacebar or enter key. Basically, I think we should treat them like a button or a link from a keyboard navigation perspective.

I can only open the dialogs with a mouseclick.

Is there no function/keyboard combo that you can press to emulate a mouse click? In VoiceOver for Mac, you can emulate a click with Alt + Ctrl + Spacebar. I can also check if adding an anchor tag will help with this.

Native keyboard navigation is an essential element of accessibility, as an example see:
https://webaim.org/techniques/keyboard/

Wrapping with an anchor sounds like a great idea. I think that would work even with a '#' href. We might even be able to drop the onclick handler altogether if we give an href that gets picked up by the hash change detection. I'm not sure if that would work properly or not.

Thanks for the information in the link! I'll try adding that and get to you when I have something working.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/0844507923/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bed8c858a9/w

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bed8c858a9/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3a05c7a7b9/w

tab-navigating between sections is now working beautifully for me, though I still can't open a section with my keyboard.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3a05c7a7b9/w/

tab-navigating between sections is now working beautifully for me, though I still can't open a section with my keyboard.

I finally see what you mean. I was using only VoiceOver, which did allow me to simulate a mouse click with my keyboard. I tried doing it without VoiceOver activated and I couldn't. I added an event listener to detect Enter presses on sections. This should work now.

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/ba5ef3ac76/w

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1472c9f53f/w

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ba5ef3ac76/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/5f26475216/w

Change 889265 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/core@master] Change Special:Preferences mobile layout OOUI widgets

https://gerrit.wikimedia.org/r/889265

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bfaf26f62a/w

Scardenasmolinar changed the task status from Open to In Progress.Feb 16 2023, 6:41 PM

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/5f26475216/w/

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bfaf26f62a/w/

Test wiki created on Patch demo by SCardenas (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/941ec163a1/w

Change 881735 abandoned by Scardenasmolinar:

[mediawiki/core@master] Add aria attributes to preferences sections

Reason:

Have a different solution based on Esanders' feedback.

https://gerrit.wikimedia.org/r/881735

Change 893581 had a related patch set uploaded (by Jsn.sherman; author: Jsn.sherman):

[mediawiki/core@master] Change Special:Preferences mobile layout OOUI widgets

https://gerrit.wikimedia.org/r/893581

@Scardenasmolinar, this is looking really good! Keyboard navigation is working as expected. Orca screen reader correctly iannounces the sections as buttons and announces the dialogs as dialogs.

A few problems I noticed while looking at the latest patchset:

The dialog headers have the description bolded and running right up against the section name:

image.png (349×539 px, 35 KB)

A (probably related) screen reader issue is that the section name and description in the dialog header is read aloud twice when using orca.

We might want to add some noscript styling for .mw-prefs-title as the section names are currently smaller than the subsection names:

image.png (349×539 px, 32 KB)

Thanks for the feedback! The .mw-prefs-title in noJS and the dialog header bug have been fixed. I am taking a look at the screenreader reading the name and description twice.

Change 893581 abandoned by Jsn.sherman:

[mediawiki/core@master] Change Special:Preferences mobile layout OOUI widgets

Reason:

used for learning

https://gerrit.wikimedia.org/r/893581

Thanks for the feedback! The .mw-prefs-title in noJS and the dialog header bug have been fixed. I am taking a look at the screenreader reading the name and description twice.

I verified that the duplicate description issue is resolved for me.

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b409cbde73/w

@Scardenasmolinar and @jsn.sherman:

I have found the following issue while testing this ticket:

Screen reader does not read/speak the description of the selection that you choose...

For Example:
go to the Appearance preference --> now use your keyboard to tab to Skin Preferences section --> if the toggle button is off then the screen reader will read/speak "OFF", and vice-versa if the toggle button is on then the screen reader will read/speak "ON", however the screen reader doesn't read/speak the description of what the toggle button is used for (which in this case it should read/speak "Enable responsive mode Adapt layout to screen size on mobile").

Another Example:
go to the Appearance preference --> now use your keyboard to tab to Advanced Options section --> the screen reader doesn't read/speak "Link underlining".

Another Example:
go to the Appearance preference --> now use your keyboard to tab to Files section --> the screen reader doesn't read/speak "Image size limit on file description pages", and the same issue is occurring when you tab to Thumbnail size the screen reader doesn't read/speak "Thumbnail size".

Another Example:
go to the Beta Features preference --> now use your keyboard to tab to Automatically enable most beta features --> you will notice the screen reader will read/speak "OFF" if the button is set for off, and vice-versa if the toggle button is on it will read/speak "ON", however the screen reader doesn't read/speak the description of what the toggle button is used for (which in this case it should read/speak "Automatically enable most beta features. Some beta features can have surprising changes, and so you have to opt in manually").

NOTE: The above examples are happening for any of the Preferences that uses toggle buttons or a drop-down selection.

Change 903756 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/skins/MinervaNeue@master] Remove redundant styling in Minerva

https://gerrit.wikimedia.org/r/903756

Change 889265 merged by jenkins-bot:

[mediawiki/core@master] Change Special:Preferences mobile layout OOUI widgets

https://gerrit.wikimedia.org/r/889265

Change 903756 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove redundant styling in Minerva

https://gerrit.wikimedia.org/r/903756

Moving it to Done since the relevant patches have been merged.

Test wiki on Patch demo by SCardenas (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/941ec163a1/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1472c9f53f/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b409cbde73/w/