Part 3: Keyboard Accessibility

Keyboard Accessibility

In this series we are talking about website accessibility and how doing some of the basics does not have to be expensive or overly time consuming. Each part I’ll list some of these basics things you can do yourself (if you have some website/wordpress knowledge), or guidance you can provide your website developer.


Part 3: Keyboard Accessibility

Another one of the main aspects of website accessibility is ensuring your website is keyboard friendly.
The process provides the ability for a user to be able to navigate around, control and access all areas of your website using only a keyboard. This includes such things as hyperlinks, buttons, dropdown menus and forms.
Although keyboard accessibility can benefit everyoneone (think of times where you’ve had a sore wrist from using your mouse too long or you’ve had to run around looking for batteries for your cable free mouse) it has a significant impact for those with motor disabilities, visual impairments and cognitive impairments.
The first question is ‘how do people navigate around my website using the keyboard?’. Well, probably the most important key on the keyboard for this purpose is the ‘tab’ key, usually situated on the far left of the keyboard. The tab key will navigate through interactive elements on a webpage. You can use ‘Shift + Tab’ to navigate back one step. Just press ‘Enter’ if you wish to select an element or link.
Testing if your website is keyboard friendly is a very simple thing to do. Just press the ‘Tab’ key and see how/if you can move around the web page.
When you are doing this, there are some important things to look out for:
  • Are you able to identify where the keyboard focus was on the page?
  • Did the tabbing follow the order of the page? Usually this is left to right, top to bottom.
  • Were you able to select the elements and links on the page?
  • Were you able to skip to sections of the webpage e.g. ‘skip to content, or ‘skip to footer’.

If your website is keyboard friendly i.e. you can access the entire website using a keyboard, then you are doing a great job.

If you struggle to navigate your website due to some of the above noted issues then your website may be difficult to navigate for many of your customers.

So what can you do? One way is to build your website from the beginning with accessibility in mind. Where this is not practicable there are still some things you can do. Speak to your website developer to discuss the issues and see what can be done. If you maintain your own website, the WCAG 2.1 on keyboard accessibility do provide a lot of information but they can be quite complex and too in-depth for this article. If you put in Keyboard Accessibility into a search engine, you will find a lot of information on how to improve your website.

A good place to start would be to add a plugin and see how it can help improve your keyboard accessibility. There are many accessibility plugin you can try and the one I am currently using is One Click Accessibility. From a keyboard accessibility point of view, one of the great things about this plugin is that, under customise, it allows you to set and adjust focus outlines (visual markers that show which element on a webpage you are currently at).

Keyboard accessibility is so important for the people that need it, many whom use the internet as their main and only source of information. So, go and check how keyboard friendly your website is, and imagine how you would feel if you could only ever navigate around your website using your keyboard.

Summary points:

  1. Test your website to see if it is keyboard friendly.
  2. Try an accessibility plugin to see if it improves any issues.
  3. Do some further reading on issues and solutions.
  4. Speak to your website developer.
Coming on 12th June: Accessible Hyperlinks. Hyperlinks allows users to quickly jump to other pages of reference by clicking or tapping on a pice of text. Come back to see how they relate to website accessibility.

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to content