Page MenuHomePhabricator

A small accessibility review of Vector changes
Closed, DeclinedPublic

Description

I've done a quick test.

Keyboard navigation

Works reasonably, though we should probably have hotkeys to show/hide the sidebar.

When you have a narrow screen, you can no longer tab to the search field as it is hidden. The element to unhide it (the search button) is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are). This is not an issue if users configure their Safari preferences with "Press tab to highlight each item on a page", but this is not the default. Adding role=button tabindex=0 to that element (like for the ToC button) might help here as it is an on-page action (not a navigation action). This could then unhide and autofocus the search field.

Additionally, it seems that because of the dual usage of the search Accesskey (once on the button, once on the input), the Accesskey doesn't work in Chrome ?

VoiceOver (desktop)
  • Navigation is broken for the personal tools menu.
  • The new ToC button is labelless, which isn't good.
  • The landmarks have a few clear issues to me:
    1. When the main menu is collapsed, the whole landmark for the main menu is gone, which makes it pretty hard to rediscover. Especially as it is also not in the header navigation mode.
    2. The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label)
    3. One of the landmarks is "Tools navigation", which isn't really helping explain WHICH tools.

It also seems that the sidebar no longer features headings, which makes it a bit more difficult/slow to navigate the site navigation menu.

The headings for Twinkle and Languages (which have not yet been updated to this new missing heading layout) now are before the H1, which is 'bad'.

Event Timeline

TheDJ updated the task description. (Show Details)
TheDJ updated the task description. (Show Details)
TheDJ updated the task description. (Show Details)

To address a few of these points:

The element to unhide it (the search button) is an <a> element which in some browsers (macOS) is not focusable by default (only actual buttons are)

This is a good point, I think we should file a task for this. I believe this is because we want that element to behave as a button when JS is on, and as a link when JS is turned off. Another solution could be to render both a <button> and <a> and hide the appropriate one with CSS.

Additionally, it seems that because of the dual usage of the search Accesskey (once on the button, once on the input), the Accesskey doesn't work in Chrome ?

This was discussed here.

Navigation is broken for the personal tools menu.

Could you elaborate a bit more on this one? Is it the same issue described in T312891?

The new ToC button is labelless, which isn't good.

Tracked here T310810

The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label)

I'm seeing this too in VO/Safari, but it seems like a Safari bug. <header> elements shouldnt define a banner landmark if its the descendant of a <main> element. We can also consider removing that <header> if we just want to fix it.

It also seems that the sidebar no longer features headings, which makes it a bit more difficult/slow to navigate the site navigation menu.

This is necessary in modern Vector to avoid incorrect heading order, as the side navigation menu is before the h1.

Navigation is broken for the personal tools menu.

Could you elaborate a bit more on this one? Is it the same issue described in T312891?

Seems like it

The H1 is wrapped in a banner landmark.. I'm not entirely sure why (ah because its a <header> element) it seems a bit confusing to me (probably should get a label)

I'm seeing this too in VO/Safari, but it seems like a Safari bug. <header> elements shouldnt define a banner landmark if its the descendant of a <main> element. We can also consider removing that <header> if we just want to fix it.

Ugh.. I'll file a ticket with webkit for that.
https://bugs.webkit.org/show_bug.cgi?id=242685

Volker_E renamed this task from A small accessibility review of vector changes to A small accessibility review of Vector changes.Jul 19 2022, 12:44 PM

One of the landmarks is "Tools navigation", which isn't really helping explain WHICH tools.

Following up on the last point, we are reverting back to the legacy landmarks for the Page toolbar (T317440), and the landmarks will be revisited with T318005.

Given all the points in this task have been accounted for in other tasks, fixed, or are browser bugs, I'm going to be declining this task in the interest of cleaning out/organizing the accessibility tasks. Thank you again @TheDJ for the review and for bringing these to our attention!