Accessibility of tab key / keyboard navigation

[osma]

Tab order is one of the accessibility improvements requested in issues #1036, #1037, #1038, #1039.

The tab order should allow visiting every interactive element on the page in a logical order. When the order differs from the order the elements appear in HTML, the tabindex attribute can be used to set an explicit order.

The autofocus functionality on the search box should probably be disabled (see #1048) before the tab order can be meaningfully adjusted.

[osma]

Here are the tab orders proposed for various page types, copied from their respective issues:

Front page #1036:

1. Language selection
2. Ontology list
3. Search area
4. Top menu
5. Interfaces
6. Twitter

Vocabulary page #1037:

1. Language selection
2. Search area
3. Left side list (tabs) (inside the tabs a natural tab order)
4. Description of the ontology or vocabulary
5. Top menu

Concept page #1038:

1. Concept description area
2. Search area
3. Left side list
4. Finna widget
5. Top menu + languages

Search result page #1039:

1. Search result header links (preferred_labels)
2. Search area banner
3. Top menu
4. Language selection

What I find confusing here is that the order is quite different for the different page types. For example the top menu is in a different position in each list. I would expect that some kind of consistency would be useful here for all users, even though the page types do have differences in their usage patterns that may have to be considered. Maybe @miguelahonen can explain the reasoning behind those order definitions?

[miguelvaara]

The main reasons (questions) why the tab ordering varies between different pages are:

• Whether the user has to select a language when entering the page
• Whether the user activity starts from the use of the menu or whether the menu only needs to be available for later use
• Whether the user is in the early stages of the browsing (e.g. navigating) or he/she is more focused on the content on the page
• What the experienced user focuses on on the page (e.g. the basic information about the ontology is less important if the user is already familiar with the ontology)
• Whether the activity on the page focuses primarily on the search functions or elsewhere on the page
• The front page "pays more attention" to the new user, but for example, the ontology page and the search page more to experienced users

I can specify the reasons more during the sprint meetings

[osma]

It is possible to specify an explicit tab order that differs from the HTML/DOM structure by specifying positive tabindex values that set an explicit order, but WebAIM recommends against it:

Developers may be tempted to use tabindex as a way to make up for unorganized source code with an illogical navigation order, but we do not recommend the use of positive tabindex values. Instead, fix the navigation order by restructuring the HTML.

(source: https://webaim.org/techniques/keyboard/tabindex#tabindex)

My gut instinct would be to keep the tab order close (if not identical) to the order of elements on the page.

[osma]

Decision in sprint daily 2020-09-03: The tab order will be the same for all four page types. Developers agree on an order that takes into account both users and technology.

Given that decision, the task is to check that the current DOM-based tab order is sensible and in case it isn't, reorder some structural elements. We don't want to rely on explicit tabindex values unless absolutely necessary.

[osma]

We also have tab-related accessibility problems for keyboard-only users. The current CSS styling does not highlight the currently active link / form element in any way when using the Tab key to navigate. Here is a good tutorial about these issues: https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966

So apart from the tab order (which ideally doesn't need to be changed at all), we must ensure that keyboard-only navigation using Tab key is possible, which requires at least some CSS tweaks. It would also be good to make the "Skip to main content" link visible when a user presses Tab.