The tabs inside of this window are not accessible for VoiceOver.
The ARIA roles and attributes need to be adapted. role=tablist, role=tab & role=tabpanel are very well supported across browsers/screenreaders.
Best practices also feature a simple demo. For basic support we should add/amend the necessary roles and if we wanna go further in future, we could also think about changing the tabs into anchors and connect with the tabpanels as internal links.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes | oojs/ui | master | +13 -3 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core | |||
| Open | None | T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core | |||
| Open | None | T100161 Convert all of MediaWiki core to OOUI PHP (tracking) | |||
| Resolved | matmarex | T101480 Remove 'wgUseMediaWikiUIEverywhere' and code forks, always using the off/false path | |||
| Invalid | None | T101471 Convert core forms that use MW UI with wgUseMediaWikiUIEverywhere false to OOUI FormSpecialPage or explicit OOUI PHP | |||
| Open | None | T107037 Convert all MW core special pages to OOUI | |||
| Open | None | T64559 Redesign Special:Preferences (tracking) | |||
| Resolved | Volker_E | T180538 Improve Special:Preferences UI/UX | |||
| Resolved | Volker_E | T117781 Convert Special:Preferences to OOUI | |||
| Resolved | Volker_E | T148030 OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible |
In https://doc.wikimedia.org/oojs-ui/master/demos/#dialogs-mediawiki-ltr, the tabs in "Indexed dialog" are keyboard-accessible.
In VE's link dialog it's also possible to change the tabs with keyboard actions only? After Ctrl+K to open the link inspector, press Tab once and then use left/right arrow keys to switch.
It seems that this was only while I had Voice Over activated. It seems that Safari doesn't do anything with the listbox (and with VO active, the keyboard access also breaks).
Also honestly, this is a usage of listbox in a way that I have never seen before.. Normally i'd expect this to be tablist, tab, tabpanel combination. (Like the MediaWiki preferences table also features).
Safari doesn't see it at all. Chrome does see it, but it's pretty useless, since when you move from 4 to three, it already switches the page, so there is no way to effectively be able to navigate page 2, 3 and 4.
Yes, it's kind of accidental, this uses SelectWidget internally, which has role=listbox.
Seems to partly have to do with the intercept of left and right navigation, interfering with the voiceover keyboard combinations. (even though those use modifiers + nav keys) more investigation to follow
Additional note: Current Special:Preferences does everything already very well (only addition to accessible ARIA tabs is aria-controls):
<ul id="preftoc" role="tablist"> <li role="presentation" class=""> <a id="preftab-personal" role="tab" href="#mw-prefsection-personal" aria-controls="mw-prefsection-personal" aria-selected="false" tabindex="-1">User profile</a> </li> <li role="presentation" class="selected"> <a id="preftab-rendering" role="tab" href="#mw-prefsection-rendering" aria-controls="mw-prefsection-rendering" aria-selected="true" tabindex="0">Appearance</a> </li> <li role="presentation"> <a id="preftab-editing" role="tab" href="#mw-prefsection-editing" aria-controls="mw-prefsection-editing" aria-selected="false" tabindex="-1">Editing</a> </li> … </ul> <form class="mw-htmlform" action="/wiki/Special:Preferences" method="post" id="mw-prefs-form" autocomplete="off"> <div id="preferences" class="jsprefs"> <fieldset id="mw-prefsection-personal" role="tabpanel" aria-labelledby="preftab-personal" class="prefsection" aria-hidden="true" style="display: none;"> <legend class="mainLegend">User profile</legend> … </fieldset> <fieldset id="mw-prefsection-rendering" role="tabpanel" aria-labelledby="preftab-rendering" aria-hidden="false" class="prefsection" style="display: block;"> <legend class="mainLegend">Appearance</legend> … </fieldset> …
Change 443521 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes
Change 443521 merged by jenkins-bot:
[oojs/ui@master] IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes
This will roll-out in OOUI v0.27.5 and be on Beta Cluster from next Tue evening PDT on.