[a11y][A] DOM and Focus order

[DuaelFr]

Success Criterion 1.3.2 Meaningful Sequence (Level A) When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

Success Criterion 2.4.3 Focus Order (Level A) If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

AFAIK, focus order should not differ from visual order in the page. In our case, it should go from quick links, to search form, to login link, to logo, to main menu.

More explanations : https://www.w3.org/TR/WCAG20-TECHS/C27.html

[cehfisher]

Yes @DuaelFr the tabbing order is a bit off on some of the elements. Attaching a gif showing an example of that issue. We might need to break this down into smaller chunks. Ex. tabbing order of a card, header, etc.

[fuzzbomb]

It's different on the small screen size too. When the mobile burger menu button is in play, the button is to the left of the site logo, but comes after the site log in tabbling sequence.

It's a pain to get this right when the visual order changes between breakpoints.

[DuaelFr]

I'm planning to fill another issue about the menu's toggle button which is "tabbable" while staying invisible on desktop. Maybe tonight, maybe tomorrow.

[thamas]

The mentioned quote says:

focusable components receive focus in an order that preserves meaning and operability

I did not see mentioning that the source order and the visual order should be the same. In the source code the order and the semantics can help to understand the content. But in the rendered page colors, sizes etc. can help too to understand the structure. So I do not think they always have to be the same.

Anyway, the current order in the HTML source was determined by trying to make it as logical as it possible.

• First: "Where am I?" » Branding
• Second: "How to navigate / go to other pages?" » menu links
• Third: "I did not see in the menu what I'm looking for!" » Search
• Fourth: "I should show who I'm!" » Login

In the source code the order is and the semantic can help to understand, but

I'm planning to fill another issue about the menu's toggle button which is "tabbable" while staying invisible on desktop.

Please see #130

[DuaelFr]

@thamas I might not understand properly the specs but I think the C27 technique for WCAG 2.0 (2.1 techniques have not been published yet, I suppose) is explaining why the DOS order should match the visual order of elements.

The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.

[fuzzbomb]

I'm planning to fill another issue about the menu's toggle button which is "tabbable" while staying invisible on desktop.

I couldn't replicate this. There's a .menu-main__togglewrap { display: none; } which correctly removes the button from the tabbing order.

Update: There's a visually-hidden link for the site-name, after the site-logo-link in the tabbing order. Maybe that's what you found?

[fuzzbomb]

@thamas

I did not see mentioning that the source order and the visual order should be the same. ... But in the rendered page colors, sizes etc. can help too to understand the structure. So I do not think they always have to be the same.

It's VERY confusing for sighted keyboard users if the tabbing order is at odds with the visual layout. When focus jumps about in a spatially haphazard way, it becomes confusing for users who don't know which direction to look to see what has focus. Myself included.

In the source code the order and the semantics can help to understand the content.

But a sighted keyboard-only user cannot see the source code order. Only developers bother to read that!

[fuzzbomb]

This one hasn't been moved to drupal.org yet, and is major IMO.

Relevant WCAG docs...

• Success Criteria
  • 1.3.2 Meaningful Sequence (level A)
  • 2.4.3 Focus Order (level A). This is the more relevant one IMO. In particular the guidance says:

    Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.

• Techniques
  • C27: Making the DOM order match the visual order
  • G59: Placing the interactive elements in an order that follows sequences and relationships within the content
• Common Failures
  • F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

[fuzzbomb]

This should have moved to Drupal.org, it's major. I filed https://www.drupal.org/project/drupal/issues/2942043