User:Aron Manning/Design/Skin accessibility: tab navigation

Initially posted at: phab:T240489#5839637 "Determine the optimum Vector DOM structure for a11y and performance"

Below is a proposed navigation order. Preferably the DOM order follows the navigation order closely, every out-of-order navigation step requires specific javascript code to implement.

The common practice on popular webpages is that the first TAB (or the initial focus) navigates to the search bar. This is the place where users would type in text, thus need the focus.

I think the best practice would be to focus the search bar upon page load. Currently, search is part of the header which is at the end of the DOM (in Vector, not Timeless or Minerva).

To reach the search field it takes:

• 2 TABs + ENTER + TAB in Vector (not the proper input element is selected by the jump link)
• 4 TABs in Timeless (alerts, notifications, logo, search)
• 3 TABs in Minerva, but when focused typing is ineffective, the characters aren't appearing in the field. The field has to be tapped to be activated. This is not an issue on mobile.

I find the order from the most commonly needed to the least common is something along these lines (this is somewhat subjective):

1. Search (focused when loaded)
2. Language (imo this should be always next to search)
3. skip links:
   1. jump to TOC
      • alternative: just one link to Article, where the following 2 skip links show up:
   2. jump to Infobox
   3. jump to Content
   4. jump to User tools (top right)
      1. User menu: #p-personal. In the foreseeable future: drop-down only opens if ENTER/SPACE is pressed.
      2. Alerts: #pt-notifications-alert, Notifications: #pt-notifications-notice, (Watchlist), (Discourse notifications)
      3. At the end jumps back to skip links.
   5. jump to Site navigation on left: .mw-panel a
      1. skip the logo (highlighting a focused image is problematic), there's a "Main Page" link instead
      2. #p-navigation and siblings.
      3. Jumps back to skip links.
4. Page links
   • "Discuss", "Read", "Edit", ("Edit source"), "History", "Translate" (skip which one is active)
   • Maybe skip links should jump here too, but I don't think its worth the extra skip link.
   • Continues to TOC or Content.
5. Parent page links
   • skip the tagline (“The free Encyclopedia”), there's no point in navigating to "Wikipedia", the user is already there and the main page can be reached from Site navigation
6. Article
   1. alternative: skip links here for Infobox, Content
   2. TOC
   3. Infobox
   4. Content
      1. article Lead
      2. article Sections
7. Footer
8. Circles back to Search.

I'm ambivalent about the order and structure of the skip links: this is particularly subjective with no golden path.