Keyboard accessibility quick tip

A quick accessibility tip to help you make sure your web pages aren't reliant on someone using just a mouse and can be operated by someone using a keyboard instead.Keyboard accessibility quick tip


Hi, I'm Emily from Nomensa and today I'm going to be talking about keyboard accessibility. When building a website it is important to remember that not everyone uses a mouse to interact with web pages. Some people use keyboards instead so it's essential that any interactive parts of your pages can also be operated with a keyboard. Let's have a look at an example. On this web page we have a list of event categories. In each category there is button to reveal the events in a particular category. In the fundraising event category, if we click the 'show fundraising button' with a mouse, the fundraising events are revealed. The text on the button also changes to read 'hide fundraising events'. If we click the button again, the fundraising events are hidden and the text on the button changes to read 'show fundraising events'. This works perfectly when using a mouse. Now let's try the same thing using a keyboard. We will start at the top of the page and tab through the content to reach the 'show fundraising events' button. We can't get to the 'show fundraising button' when using a keyboard. The button isn't recognised as an interactive element and the keyboard focus skips right over it into the rest of the content on the page. Let's have a look at the code to see what's going on. As we can see from the code the 'show fundraising events' button is marked up as a heading level three and styled to look like an interactive element using CSS. Headings are not interactive elements and are not recognised as such by keyboards. The purpose of a heading is to help structure content on a page. In HTML, only links, form fields and form buttons are recognised by a keyboard as interactive elements. In the events example, we want people to be able to select the 'show events' buttons regardless of whether they are using a mouse or a keyboard. As the 'show events' button doesn't require people to enter information into it we won't use form fields or form buttons for this task. Instead we can use an anchor element or a link. If we replace the heading tag with an anchor element and adjust the JavaScript accordingly, when we tab through the page with a keyboard, we can select the 'show events' links in the same way as if we were using a mouse. So always remember to use appropriate HTML elements if you want the functionality on your pages to work with both a mouse and a keyboard. Testing with both a keyboard and a mouse is essential to help avoid this type of accessibility issue on your website.