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 86
Example of how assistive technology for reading issues is used : The Screen Reader Use Case
Target skills
Anthony is blind. He wants to book a ticket online to the Natural History Museum for his daughter Lisa. As Anthony turns his computer on, the NVDA screen reader automatically opens and announces « Desktop List. NVDA », meaning that the software is ready and the user is on the desktop. Anthony has neither a special mouse nor braille display, so he can only use keyboard navigation.
In order to reach Google Chrome which is placed in the 6th position in his Windows Task Bar, he presses the « Windows » key + the « 6 » key. As a result, a new Chrome window opens, which NVDA's vocal synthesizer indicates by announcing « Homepage Google Chrome » and then « Toolbar address bar and search bar » to indicate the cursor's position. Now Anthony can start typing his research on Google's search engine.
Anthony types « Natural History Museum ». The screen reader pronounces each typed letter. When Anthony presses the « Enter » key, he lands on the result page, and the NVDA vocal synthesis announces: « Natural History Museum Google search Google Chrome ». Anthony uses the « TAB » key to navigate the web page until he finds the right result. When he arrives at the first result, NVDA announces « Natural History Museum Official Website clickable link ». Anthony presses the « Enter » key to visit this website.
When the website opens, the NVDA screen reader describes every item from the page: « Museum official website / Navigation button / Menu button / English reduced button / Level Title Visit Museum / Online shop link / Tickets link / etc. ». If Anthony does not want to hear every item announced, he can shut the vocal synthesizer down by pressing the « CTRL » key.
Anthony presses the « TAB » key until he hears the item « Tickets » pronounced. Then, he presses « Enter » and lands on the ticket reservation page. Thanks to the « TAB » key, after skipping the introduction lines and the COVID-19 information, he arrives at the line « Choose your tickets », then « Individual tickets for the museum ».
He lands on a page with a calendar widget where he has to choose the date and time of his daughter's visit. Anthony wants to book for the 19th of December, but when he arrives at the calendar widget, here is what he hears: « December 2021 / 6 columns 5 rows / Line 1 M.O. Column 2 M.O clickable link / Line 2 M.O. Column 2 M.O clickable link / Line 3 M.O Column 2 M.O clickable link / >> etc. Anthony fails to find the placement of the 19th of December on the calendar from that information, and he can not continue with his reservation.
Issue detected: The screen reader does not read the dates but rather their position on the calendar (divided into rows and columns). Therefore, the website's design (the calendar widget) has not been adapted to the specifications of the screen reader. The solution for this web accessibility issue would be to add alternative text to the calendar widget.