how to make a website more accessible: 3 tips for keyboard accessibility
April 20, 2020
written by
Chantel Keith
What does Keyboard Accessibility mean?
One of the most important aspects of web accessibility is keyboard accessibility. Blind or visually impaired users, or even those with motor disabilities, may not be able to navigate your site using a mouse or trackpad but instead navigate using a keyboard. Below, we’ll elaborate on three common problems users may encounter that can make navigating websites via keyboard quite difficult.
Tabbing
To help make a website more keyboard accessible, it’s important to ensure all of the content elements on the website are able to be focused via the “Tab” key. Each interactive element should have a tabindex attribute either set to 0, if the element is active & able to be tabbed to, or -1 if it is not. This not only allows users to tab to each element on the page but will also assist screen readers in reading through all of the content on your webpage as well.
Ideally, the layout elements will be structured semantically so that the tab order flows directionally from left to right and top to bottom of the web page. For complex interactive elements, such as sliders and slideshows, it can help to make the content on any hidden slides set to tabindex=”-1” until the slide is active so that the user can easily navigate past the element, if needed. Or just remove sliders completely 🙂
Images
Yes, images need to be accessible too. It’s important to include alt tags for as many images on your website as possible, especially if there is no additional text-based content to provide context. The best way to accomplish this is by serving the image using an <img> tag, which has a built-in alt attribute, as opposed to a background image property on a <div>. In most cases, you’ll still be able to style an <img> element the same way as a background image by using properties like object-fit to control the image resizing, for example.
Heading Structure
Your website headings should be structured in such a way that the information hierarchy can be understood by screen readers as opposed to using them as formatting elements. This is a big problem with older websites as headers were used for SEO crawlers or to designate style before accessibility became more common.
It is recommended to include only one <h1> tag per page, reserved for the page title, with <h2> tags used for major headings, and <h3> tags used for major subheadings. An <h4> should never come directly before an <h2>. If your website’s layout has text other than the page title styled as the largest heading, it can easily be formatted as either a <span> or <p> element and styled by a class that matches the styling of the standard heading tag instead.
We hope our quick keyboard accessibility tips were helpful. We’ve written about accessibility tools before, but here are a couple of tools that can greatly assist when trying to determine areas of a website that may be lacking in accessibility. The Google Chrome browser includes a tool called Lighthouse found in the developer tools which can perform an automated accessibility audit on the current webpage. Web Aim also provides an evaluation tool called WAVE which can “identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.” Or, feel free to contact us!