Lesson 12Web accessibility tools to help in the design process
- Notion 84 - What is assistive technology and how can it help users with disabilities ?
- Notion 85 - Assistive technology for reading and hearing issues
- Notion 86 - Example of how assistive technology for reading issues is used : The Screen Reader Use Case
- Notion 87 - Assistive technology to help control the computer, navigate or type
- Notion 88 - Examples of how assistive technology for navigating and controlling computers are used
- Notion 89 - Review of the main concepts : evaluation
Notion 88
Examples of how assistive technology for navigating and controlling computers are used
Target skills
Alexia has a motor disability which prevents her from using her hands. In order to navigate her computer, she uses a head pointer which allows her to push keys on her keyboard. She wants to book a flight online from Sofia to Paris.
She turns her computer on. With her head pointer, she pushes the « TAB » key to select the Google Chrome shortcut and then opens a search page. She types her query into the search bar: « Flight from Sofia to Paris », and then presses « Enter ». Pushing the TAB key, she browses through the results. When a result is tabbed to, it has keyboard focus indicated by a border surrounding the text, meaning that it can be activated or manipulated with the keyboard. Alexia can visit the website of her choice by pressing the « Enter » key.
She lands on a low-cost company website. On the landing page, the tabbed items have a keyboard focus, which helps Alexia navigate her way through the page. The navigation order also follows the visual flow of the page—left to right, top to bottom. Alexia can quickly enter her date choice and choose her flight. Then she goes to the next step: picking her seat on the plane.
On this page, she can find an informational image about luggage and seats on the left side of the screen, and on the right side, the aircraft layout where she can select her seat. However, when she presses the « TAB key » to go directly to the aircraft layout to make her seat selection, the keyboard focus goes to the information section on the left, which is not clickable. As a result, she gets quite confused and comes back several times to the top of the page. She realises that she has to go through the entire information section to access the aircraft layout and make her choice.
Issue detected: The website contains a web page element that is not responsive to mouse or touch (the informational image), yet it is still made keyboard focusable to users with the « TAB » key. Making non-interactive elements keyboard navigable may cause confusion and waste time.
To go further and understand how keyboard navigation works, you can watch this Google accessibility tutorial :