Page MenuHomePhabricator

Tabs in Monobook and Vector should indicate selected state for assistive technology
Open, LowPublic2 Estimated Story Points

Description

We use tabs in both monobook, Vector and possible more skins that have a selected state. This state is however not communicated to assistive technology.

We should adapt the HTML to indicate this selected state of elements in a semantic way. ARIA is an option.

TODO

  • Add aria-current="page" and aria-selected attributes to the currently selected tab.

Details

Reference
bz18465

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 10:36 PM
bzimport set Reference to bz18465.
bzimport added a subscriber: Unknown Object (MLST).

Please provide this for all skins. We do not want the functionality of the skins to deviate.

What do you know, the same patchfile worked on Modern.php

patch Modern.php patchfile

patching file Modern.php
Hunk #1 succeeded at 112 with fuzz 2 (offset -25 lines).
Hunk #2 succeeded at 137 (offset -25 lines).

CologneBlue doesn't array content_actions in the first place, so it's
already an even playing field, for better or worse. Same for Standard
and Nostalgia.

Chick, MySkin, Simple all inherit from MonoBook

Be very careful that you are sure that the <strong> and <em> I am
using here are the best choices for the job. As the <em> will then
become the basis for treating all the redlinks in the entire wiki,
upon the day we decide that we should go further and do something to
distinguish them for those whose browsers can't see red, etc., for not
only those links around the edges of the page we are dealing with
today, but for all the page content too.

sumanah wrote:

jidanni, sorry, but the MediaWiki codebase has changed enough since you submitted your patch that it no longer applies cleanly to trunk. Would you be interested in updating your patch and including improvements for other skins as well? Thank you.

sumanah wrote:

Comment on attachment 6027
patch

Per automated testing
http://lists.wikimedia.org/pipermail/wikitech-l/2011-November/056340.html patch
no longer applies to MediaWiki trunk in Subversion.

Let this be a lesson for me. Bye.

[Bug metadata cleanup, lowering importance.]

If we want to do this, it should likely be part of the functionality of BaseTemplate::makeListItem() (to automagically happen in all skins). But to be honest, I'm really not sure if it's a good idea in general.

Honestly, selected tab IS style. Partially functional style like some other things. But style nonetheless. It is not something that has to be present for things to work.

And every browser we support supports css. Sorry but ancient text browsers are not browsers we support.

Though there might be some aria attributes we may want to apply.

TheDJ renamed this task from Monobook <strong> for accessibility to selected items to Tabs in Monobook and Vector should indicate selected state.Mar 11 2015, 12:48 PM
TheDJ updated the task description. (Show Details)
TheDJ added a project: Vector (legacy skin).
TheDJ set Security to None.
TheDJ removed a subscriber: Unknown Object (MLST).

This ticket originally was about a proposal to use strong and em to indicate selected state for elements in the monobook skin.

The scope of that solution was rather limited to monobook and also predated HTML5 and ARIA. The problem still exists, so I have chosen to rephrase the ticket, to describe the problem, rather then the proposed solution. I hope no one objects to this ?

Define 'selected'. Active tabs already have a selected style. I think OP means 'highlighted' to indicate a control has focus? There is a clear distincion between those two in UIX land.

Well all I know is I wanted to make things usable in text browsers e.g., w3m.

tstarling subscribed.

I think the existing behaviour is OK under WCAG 2.0 SC 1.3.1 since the same information is available in the <title> and <h1>.

It fails SC 2.4.8 "Location: Information about the user's location within a set of Web pages is available. (Level AAA) ". This is discussed in note G128, which suggests adding a check mark icon to the currently selected tab, as a text alternative to the conventional background colour change.

@alexhollender_WMF per T20465#4048683 the suggestion here is to add some kind of indicator about which tab is selected. In https://di-article-tools-da959.web.app/Humpback_whale you do this by underlining the tab.

Screen Shot 2022-04-18 at 3.17.51 PM.png (130×280 px, 6 KB)

I would suggest declining this task for Monobook and legacy Vector and using your design task for article tools to fix this for Vector 2022. Does that sound like a plan?

@Jidanni does this task concern how the tabs look, or some non-visual/code aspect of the tabs? if the latter, please ignore this comment.

if it's regarding how they look, can you clarify the need for further visual styling? they seem to already be visually distinguished to me:

vectormonobook
Screen Shot 2022-04-27 at 1.06.34 PM.png (120×382 px, 16 KB)
Screen Shot 2022-04-27 at 1.07.01 PM.png (86×242 px, 8 KB)

@alexhollender_WMF it's not about the visual difference, it's about making the visual difference known to assistive technology through something like the aria-selected attribute.

alexhollender_WMF renamed this task from Tabs in Monobook and Vector should indicate selected state to Tabs in Monobook and Vector should indicate selected state for assistive technology.Apr 27 2022, 10:57 PM
alexhollender_WMF updated the task description. (Show Details)

After doing some more research, I believe that this task isn't as straightforward as just adding some attributes. Due to the design of our tabs, there are 2 tabs that are active on a given page (i.e. "Discussion" and "Edit"). aria-current can only be used once per page, and aria-selected can only be used in the context of a [[ https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html | tab component ]], which also only has the concept of a single tab selection.

The main problem is that the current design uses tabs to represent navigation structure rather than something like a breadcrumbs component. We could choose to implement aria-selected or aria-current for one of the tabs (i.e. "Page/Discussion" vs "Read/Edit/History"), but I personally don't think it's worth the effort considering this should be worked out with the navigation restructure stuff @alexhollender_WMF is working on.

We should use aria-current here.

We should use aria-current here.

We could, but we can only use it once per page, so should it apply to "Page/Discussion" or "Read/Edit/History"?

bwang removed bwang as the assignee of this task.Mar 17 2023, 5:55 PM
bwang subscribed.

Per the web team's quarterly grooming, these tasks are being removed from the team's backlog.