Principles of the keyboard-accessible website

Applying a few keyboard accessibility principles to websites can greatly increase the accessibility and usability for keyboard users to navigate around webpages.

Poor keyboard accessibility of a website is one of the most damning and frustrating problems that faces people with disabilities and keyboard users alike. In real life scenarios, website developers are often not given the time or are unaware of the importance of keyboard accessibility in websites, and this can make content inaccessible to vision or physically impaired people. Vision-impaired users also use screen readers like NVDA to read content on a website, but if the content is not keyboard accessible, they often have difficulties finding it. Not only do people with disabilities have trouble, but many tech-savvy people and developers prefer to use the keyboard as a quick method of navigating around websites. Here are a few simple principles that website developers should be applying to their websites.

Access to all content via the keyboard

The most critical problem when using the keyboard is to ensure that it can access all areas of the website. Keyboard control relies on finding ‘focusable’ elements of the page. These focusable elements are usually links, input fields or buttons, and a user can use the ‘TAB’ or ‘Shift-TAB’ keys to navigate forwards and backwards through the focusable elements respectively. A common reason why these elements are not focusable is that developers have used JavaScript elements where HTML5 is more suitable. Basic and useful elements such as the <a> and <button> tags are often replaced by <div> tag with JavaScript thrown in. It is possible to make these JavaScript-based controls accessible, but much more work is needed to ensure that the JavaScript is accessible in most situations.

HTML5 also supports a built-in accessible video player, which is a huge improvement over using outdated and inaccessible third-party plugins such as Adobe Flash Player and Microsoft Silverlight. Large social media websites like YouTube and Facebook have made the move to HTML5 video due to its simplicity, customisability and accessibility features such as labelled and focusable buttons. Third-party plugins had little of this, with the player often crippling keyboard users with completely inaccessible controls and keyboard traps. While third- party video players can be made accessible with a lot of effort, it’s often best to stick with an HTML5 player.

Visible focus indicators

One of the most common and annoying problems that appears when using websites is a lack of, or a barely visible, focus indicator. When using keyboard controls, you need to be aware of what element you’re currently focused on at all times. Without it, using the keyboard to navigate through a website without a screen reader can become very confusing and often near impossible.

This is an area where the design of the website can greatly affect accessibility. On Internet Explorer and Firefox, the focus indicator appears when using the mouse to click on elements. This leads developers/designers to use CSS to completely remove the focus indicator, often by changing the focus outline to 0. The problem is made worse if the focus indicator extends the width of the page when focusing on an element, often noticed when buttons are on the right-hand side of the page. Novice or inexperienced website developers may choose to remove the focus indicator entirely, instead of adding a simple style=“overflow:hidden;” to the element, which helps to keep the focus indicator under control.

Focus visibility can also extend to often overlooked or unexpected areas. On a typical website, many elements can be obscured or hidden by elements on a page. This includes common menus using drop-down lists or carousels that slide through different content. If drop-down lists fail to expand or if hidden elements in a carousel are focusable, that can also cause confusion and annoyance for keyboard users. Ensure that elements are not focusable when hidden, or that drop-down menus open and carousels slide when the buttons inside them are focused.

Keyboard traps

Keyboard traps are thankfully now much less common due to the slow death of the very inaccessible Adobe Flash Player, but still occur in some specific situations. A keyboard trap occurs when a keyboard user cannot move focus away from a focusable element or a looping set of elements with the keyboard alone. This is especially bothersome for people with disabilities, as some may be unable to use a mouse to escape the trap. Keyboard traps can occur when disabling or changing the function of a key press, such as adding a keydown function in JavaScript which then has the code: event.preventDefault();, which disables the default function of the button. This code could be made to make the ‘TAB’ key do something else entirely, such as open a new window every time it’s pressed. Developers should never unexpectedly change keyboard controls on the user.

Landmarks

A landmark is a specific point on a page that many screen reader users use to navigate quickly to the content they need. Landmarks are often positioned at the start of a section, such as the start of the main menu, content or the footer sections. To do this, WAI-ARIA is often used to define where landmarks are by using the role and aria-label attributes. On NVDA, users are able to skip directly to the next or previous landmark using ‘D’ or ‘Shift-D’, and can use ‘Insert + F7’ to open a modal window on webpages that loads up a list of all headings, links or landmarks on the page. The user can then move the reading position of screen reader to the landmark. Using landmarks, in combination with skip-to-content links at the beginning of a webpage, can greatly assist keyboard users in quickly navigating to different parts of the page, not to mention its semantic value.

Conclusion

Keyboard accessibility has improved since the implementation of HTML5, WAI-ARIA and the death of Adobe Flash Player. It’s important as a website developer to help continue this trend to help ensure that vision-impaired and physically-impaired users are able to have access to the websites and content they need. By doing so you also assist those who simply prefer to use the keyboard, improving the usability of your website.