Available text labels for everyone
How to make online shopping more convenient for screen readers without breaking voice input
My video on Accessibility in Action: Practical Tips for Increasing Accessibility of User Interfaces has already available online… ( WCAG). It is important that by doing so we do not break labels for users of voice input. The principles described are suitable for all types of text labels, including form controls.
Briefly about VoiceOver on macOS devices and how to use it to display page content
VoiceOver (VO) is a built-in screen reader on macOS devices. People using it can navigate digital space using the rotor tool.
The VoiceOver rotor is designed to quickly browse and navigate web pages. This is a kind of analogue of basic commands for users of the screen access function, which increases the efficiency of navigation on web pages.
It can be activated in the VoiceOver app using the keyboard shortcut Ctrl + option + U… The rotor overlay will then appear in the middle of the screen. Different types of elements are combined here into lists.
Among them there are several menus for navigating the content of the web page. With the help of the rotor, the user can, for example, listen to the names of all links on the page and select the desired one. There is also a menu that allows you to jump to a specific title on the page.
In this video, I’ll show you how to use the VoiceOver rotor to navigate your A List Apart site. Clicking on the left and right arrows opens different menus and gives you a general idea of the types of content placed on the page.
If the document uses semantic layout with sectioning elements (such as nav, header, main, footer, aside etc.), the user will be able to quickly navigate the page without having to scroll through the contents of each section. And this highly important opportunity.
Keep in mind that the structure of the document visible in the rotor is determined by the structure of the HTML code. If you do not add a title, it will not appear in the rotor menu, and this will affect the hierarchy of items for screen readers. And if you forget about landmarks, people won’t be able to use them to navigate the page.
Helpful Sources:
As I said, the rotor has several menus, including for titles, landmarks, links, and form controls. Understanding how a screen reader helps users navigate a page can optimize interfaces and make them more user-friendly.
Explore a product catalog with the VoiceOver rotor
A regular online store page is a catalog of products, each of which has its own button Добавить в корзину to quickly add to your shopping list.
Consider as an example Yeti websitefor a catalog of reusable bottles. Each position has its own button Добавить в корзину, and some also have a choice of colors. In my video, I show you how to navigate this page using the VoiceOver rotor.
By selecting the menu of form controls, you will get a list of all these elements on the page, including the buttons Добавить в корзину…
A quick glance at them is enough to understand that they are almost useless, since it is not clear which button corresponds to a particular product. How can the user choose the right one?
You might have already guessed that one way to improve navigation in this case is to add hidden text with the name of the product for each button.
Technically, this can be done like this:
<button type=".." class=“..">
Add <span class="visually-hidden">PRODUCT_NAME</span> to Cart
</button>
<!-- P.S. Don’t do this -->You add the product name to the button’s text label string, and the form controls menu shows which bottle it belongs to.
At first glance, this is a good solution, but you shouldn’t use it – by adjusting the controls using the screen access function, you will interfere with other accessibility users.
Browsing the web using voice commands
Adding hidden text to the middle of the visible line on buttons prevents them from being activated with voice commands. Therefore, users of this technology cannot view or navigate the web pages.
One of the most popular speech recognition software for surfing the web is called Dragon naturally speaking… Through it, you can control your computer and browse the web. This detailed guide explains how to use voice input to perform various tasks offline and online. Such functionality is useful for many people with disabilities – for example, for those who have problems with their hands (but not only for them), as well as for advanced users who want to increase the speed of their work (because dictating is faster than typing).
Let’s see how it works. Company Level Access released video tutorial on how to fill out a form on a webpage using Dragon Naturally Speaking… In my video, I present a short fragment of this video, and the full version can be viewed on YouTube…
Note. Notice how the user stops and resumes the program using the Go to sleep and Wake up commands.
To select a form control, the user (in the video) names its visible text label. This is one of the many reasons why such labels are important for user interfaces.
When there are multiple buttons on the page Добавить в корзину, the Dragon user must name a specific tag to activate one of them. This is why hidden text makes the button inaccessible – being in the middle of a line, it breaks the contents of the visible text label. As a result, the user names the button, but its label is actually not the same as displayed on the screen. Such an interface does not match WCAG success criterion 2.5.3 “Label in title”, which is that the names of interface elements with labels that include text or images of text should be visible. The best solution is to put the label text in front of the element name.
The next two paragraphs are taken from the text of the success criterion (emphasis mine):
The purpose of this criterion is to ensure that labels that visually identify interface elements are programmatically associated with those elements. Thus, people with disabilities will be able to confidently use visible labels to interact with these elements.
Most controls have visible text labels. They also have a programmatic or “accessible” name. It is much more convenient for users to interact with an interface if the words and characters in the control’s visible label match or are part of the control’s accessible name. In this case, users using voice input (speech recognition software) can navigate the page by naming text labels for items such as menus, links, and buttons displayed on the screen. Sighted users using text-to-speech (screen readers) also feel more comfortable when what they hear and what they see on the screen match.
Optimizing the interface for screen access without interfering with voice input users
So, we want to make the interface more user-friendly for screen readers, but we cannot add the product name to the visible text label of the button. You cannot help one group of people to the detriment of the interests of another. Such questions force you to really break your head and think about alternative solutions.
But, as it turned out, a compromise can be found here. We are still we can add the name of the product to the button without breaking the visible signature, if we put it at the end, not in the middle of the line.
<button type=".." class=“..">
Add to Cart <span class="visually-hidden">, PRODUCT_NAME</span>
</button>This leaves the visible caption intact and displays a list of buttons in the rotor shape controls menu Добавить в корзину with the corresponding product names.
When the person says the voice command Нажать «Добавить в корзину»Dragon will assign numbers to these buttons, as we saw in the video for the example of checkboxes and radio buttons, and the user will be able to name the number of the desired button. This is possible because the title of the selected item is not broken by the content of the markup.
So, if you need to add text to the visible label, it’s better to place it after it.
Also make sure that the accessible name (as spoken by the screen reader) matches the visible label as closely as possible. This means that you should not use the attribute aria-labelwhich is different from the label of the control.
Conclusion: add text labels wherever possible
Understanding what the Internet looks like from the perspective of voice control users can inspire new improvements.
People need visible labels to interact with controls, but what about elements that don’t have labels? What about components that include, for example, dot navigation elements (commonly used in sliders and carousels)? To activate such an element, you need to pronounce an accessible name, but it is not visible on the screen. The user is left with two options: using voice control or the MouseGrid function, which is the most tedious and inconvenient way to navigate.
Obviously the best solution is to always use text labels for user interface controls. And if that’s not possible, add labels that appear when the element receives focus (and possibly on hover, too). Displaying labels when gaining focus is very important as Dragon users can say Перейти to go to the next control, but they cannot command to hover the cursor – and what to hover at if it does not have a name?
Another type of visual that can be made more accessible with visible labels is icon buttons… If, as is the case with dot navigation, you cannot add a visible label, have it appear when the user interacts with the button.
Thanks for attention!
The translation of the material was prepared as part of the course “JavaScript Developer. Professional”… If you are interested in learning more about the course, as well as getting to know the teacher, come to Open Day online.
Similar Posts
