Table of Contents

    It must be possible to navigate through content in a way that makes sense. This ensures that content can be navigated in a logical way by screen reader users, keyboard users, and people who choose to use their own CSS style sheets.

    Accessibility Requirements for 2.4.3 Focus order (A)

    • The visible focus order matches the DOM focus order.

    Common mistakes for 2.4.3 Focus order (A)

    • The DOM order does not match the visual order because CSS properties like flexbox and grid-layout have been used to alter the visual presentation;
    • When CSS styles are disabled, the focus order is meaningless;
    • When a user interaction causes content to be displayed, it does so before the trigger control in the DOM order.

    Techniques for 2.4.3 Focus order (A)

    HTML Technique

    CSS Techniques

    Your site doesn’t include support for the Accordion Item block. You can try installing the block, convert it to a Custom HTML block, or remove it entirely.

    Common Failures for 2.4.3 Focus order (A)

    The following are common mistakes that are considered failures of Success Criterion 2.4.3 by the WCAG Working Group.

    FAQs for Focus order (A)

    What is the focus order?

     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

    How do I set a focus order?

    HTML
    The following will ensure a logical content order:
    Code according to tab order;
    Be aware tabIndex (positive, ‘0’ and negative) may not be supported in mobile browsers;
    Do not use tables for layout purposes.
    Android
    The focus order will fall to the nearest, neighbouring, focusable element by default. Sometimes this may not match what is intended and as such explicit overrides may need to be provided.
    This can be done by using the following:
    android:nextFocusDown defines the next view to receive focus when the user navigates down
    android:nextFocusLeft defines the next view to receive focus when the user navigates left,
    android:nextFocusRight defines the next view to receive focus when the user navigates right,
    android:nextFocusUp defines the next view to receive focus when the user navigates up.
    iOS
    Focus order in iOS is determined by physical layout of controls/views. Developers can reorder code, or control and change focus order by using the UIAccessibilityContainer' protocol if they need to.

    When any component receives focus it does not initiate a change of context?

    On Focus. When any part of a page receives focus, it shouldn’t initiate a “change of context”. “Change of context” in this sense means “major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously”.

    Related to Focus order (A)

    1.3.2 Meaningful sequence (A)

    2.1.1 Keyboard (A)

    2.4.7 Focus visible (AA)

    Useful resources for 2.4.3 Focus order (A)

    Leave a Reply

    Your email address will not be published. Required fields are marked *