Page MenuHomePhabricator

OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible
Closed, ResolvedPublic

Description

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.

Event Timeline

TheDJ created this task.Oct 13 2016, 12:46 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 13 2016, 12:46 PM

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.

TheDJ updated the task description. (Show Details)Oct 13 2016, 2:56 PM
TheDJ added a comment.Oct 13 2016, 3:00 PM

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).

TheDJ added a comment.Oct 13 2016, 3:03 PM

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).

TheDJ added a comment.Oct 13 2016, 3:12 PM

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.

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).

Yes, it's kind of accidental, this uses SelectWidget internally, which has role=listbox.

TheDJ added a comment.Oct 13 2016, 3:31 PM

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

Volker_E renamed this task from OOjs UI indexed dialogs / tabbed navigation is not accessible to OOUI indexed dialogs / tabbed navigation is not accessible.Jan 17 2018, 12:50 AM
Volker_E moved this task from Backlog to Next-up on the OOUI board.Feb 2 2018, 2:44 AM
Volker_E triaged this task as High priority.May 20 2018, 3:03 AM
Volker_E updated the task description. (Show Details)
Volker_E added a comment.EditedJul 2 2018, 10:09 PM

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

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

Change 443521 merged by jenkins-bot:
[oojs/ui@master] IndexLayout (TabPanelLayouts): Apply correct ARIA roles & attributes

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

TheDJ awarded a token.Jul 4 2018, 7:39 AM
Volker_E renamed this task from OOUI indexed dialogs / tabbed navigation is not accessible to OOUI indexed dialogs (IndexLayout) / tabbed navigation (TabPanelLayout) is not accessible.Jul 4 2018, 8:39 AM
Volker_E claimed this task.
Volker_E moved this task from Next-up to OOUI-0.27.5 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.27.5); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.
Volker_E closed this task as Resolved.Jul 4 2018, 8:45 AM

This will roll-out in OOUI v0.27.5 and be on Beta Cluster from next Tue evening PDT on.