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.

Testing & Remediation

How to test Open up your website in your browser of choice and begin to navigate the page with just the keyboard (using the Tab key to move from one element to the next). As you are navigating the page, ensure that the order the elements receives focus is in a logical order. It's important to confirm that the focus order when keyboard navigating matches the order of what a sighted user is presented with the visual layout. If your site has alerts, modal dialog boxes, etc, you must make sure that the focus is managed corrected. The focus must move to the relevant container when it is opened and be maintained in that container so that users don't accidentally move out of it. When the alert, dialogue box, etc is closed, the focus must return to the most logical place in the page. How to remediate: There are a number of techniques that can be deployed in order to pass this Success Criterion. Techniques include using the tabIndex property to specify the logical order, making the DOM order match the visual order, etc. Please see the W3C link above to explore the different techniques (these are under the "Sufficient Techniques" section of the W3C page).

Questions and Answers

How do I change the order the elements on my page are given focus?

Nearly all elements can be given focus, and have their focus order changed using the 'tabindex' attribute. Elements on a page will be given focus in the order of their tab index. W3 Schools has a great explanation of tabindex here.

How do I navigate a website with my keyboard?

To navigate a website with the keyboard, you can start by hitting the tab key. You should see an indicator on the element that has focus. If it is a link, you can hit enter to go to it. While going forward through the tab keys is done with tab, going backwards can be done by hitting the shift key in addition to the tab key. When it comes to various input elements (radio buttons, select boxes), the arrow keys can be used on them once the element has focus.

What are the best accessible wordpress sliders?

Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content,  so keep these things in mind when building content:
  • Do the headers flow from h1 down without skipping a level?
  • Do embedded images have adequate alt tags?
  • Do the links open have descriptive titles or link text?
Below are sliders that are accessible:
  • Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.