Creating an accessible Shopify store – Keyboard navigation – Part 2
Welcome to the second part of my series about creating an accessible Shopify store! In this post, I’ll be going over the topic of keyboard accessibility. While most people navigate websites using a computer mouse or a touch screen, many types of disabilities restrict or completely prevent people from using these, requiring precise hand control methods. Instead, they use their keyboards or other dedicated assistive devices that simulate keyboard navigation.
Basic keyboard navigation information
The most basic method of browsing websites using a keyboard is using the Tab key, pressing it will move the focus (selection) from one interactive element of the website to the next, and while pressing Shift+Tab will move the focus the other way around.
Visible focus
While by default the selected element should have some kind of border around it, many unqualified developers choose to overwrite this default behavior and hide the focus styling.
While most elements in this theme have some kind of visible focus, the controls for the carousels have only a slight color change on focus that is barely visible, and that would have to get fixed.
To check if all your elements have visible focus the only thing you need to do is to open your website and start pressing the Tab key, your selection should be always clearly visible. Elements that can be selected this way are links, buttons, and all types of form inputs.
Focus order
The focus should always go from top to bottom, from right to left. Unfortunately in this case in the main navigation that’s not the case. The focus jumps from the logo to the right navigation, and after that to the center navigation.
That’s because the focus follows the order in the websites’ HTML code, and the developer changed the visible order of things with CSS styling.
Focus order can be broken when;
- CSS position property (absolute / relative / fixed) is used to move things around
- CSS order or flex-direction properties are used to change the order of elements
- CSS grid layout is used to rearrange the elements
- tabindex property is used to add a custom tab order index to an element
The best practice here is to always have the same visual order as the code order, but in some cases that is unfortunately impossible, especially when switching between the mobile and desktop layouts. In these cases I usually duplicate elements, and while the same they’re placed in different places in the HTML code, and one is displayed only on mobile, the other only on desktop to keep the focus order.
Skipping websites elements
If you tried to check your website keyboard navigation you probably noticed that navigating this way requires a lot of key pressing, and just imagine doing that again for other pages on your website!
Since most pages on the same website almost always look the same and have the same elements like the main navigation, side navigation, footer etc. these elements should have an option to skip them with just one keyboard press.
The first element in this theme that has a focus state is a “Skip to content” link that allows you to move the focus directly to the carousel bypassing the main navigation.
Visible on focus
What’s also interesting about this link is that it’s only visible when in focus, so people not using a keyboard don’t ever get to see it. This is done using CSS, and in this case two Bootstrap classes.
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).
Moving focus
While moving the focus is done by adding a destination ID to the link,
<a id="skip-to-content-link" class="visually-hidden-focusable" href="#main">
Skip to content
</a>
and giving the #main ID to the carousel.
Unfortunately since a lot of websites have dynamic contents you’ll not always be able to add an ID after skippable elements to jump to, in those cases some custom JavaScript code is necessary, fortunately for me that’s not the case here.
The one thing to do for me in this theme is to add a skip block link to the website footer since it’s displayed on all pages and you would have to press the Tab key 12 times to skip it without it. And since it’s the last section in this layout it will move the focus to the first element on the website… to the “Skip to content” link.
Other possible focus issues
Fortunately for me the BootShop theme doesn’t have any bigger focus issues, but depending on what you’re working on, common issues may include;
- Focus goes to elements that are placed off screen, like inactive carousel slides or hidden texts. In these cases the focusable elements should have a CSS display: none property, or have aria-hidden=”true”.
- When displaying modal dialogs focus should be looped in them so after the last focusable element in the modal dialog the focus goes to the first element in the dialog and not to elements behind the dialog. You also have to keep in mind about going backwards, so that when using Shift+Tab the focus should jump from the first focusable element to the last.
- Focus traps, while not common anymore, were elements like Adobe Flash widgets that after receiving focus wouldn’t let the user move the focus out of them, essentially trapping the visitor. Today what comes to mind are only developer errors, for example, when creating a focus loop in the example modal window mentioned above you can make a loop that doesn’t include an option to close the modal window.
If you have any questions about keyboard navigation I would love to hear from you in the comments, and of course, I encourage you to read part 3 covering screen readers 🙂
Share