DEV Community

Bradley Black
Bradley Black

Posted on

Improving Accessibility with Voice Control and Voice Access

The shift towards phones and tablets, and away from desktops and laptops, greatly informs web design in 2021. The web must accommodate visitors on a wide variety of devices. This has led to uncluttered design, larger buttons and text, and a clearer navigation system. There’s also the requirement that websites be navigable with a variety of input sources: mouse, keyboard, touch, voice, etc. While these developments are for the benefit of all users, they’re especially accommodating for users with disabilities.

The World Wide Web consortium (W3C) issues a set of recommendations for design known as the Web Content Accessibility Guidelines (WCAG). Last updated in 2018, the previous update occurred in 2008. That was around the invention of the smartphone. It’s always true that technology changes so rapidly that regulations and standardizing or practice don’t follow until much later. So while the recent WCAG offers a good framework for designing for disability, they don’t mention some of the more powerful tools available that accommodate users with disabilities It is still important to consider these four key features of accessible design:
Perceivable (example: alternate text for non-text content)
Operable (example: complete keyboard accessibility)
Understandable (feedback from DOM, clarifying suggestions)
Robust (usable on a wide range of devices)

15% of people have a disability that may affect their ability to use the web. Included in this 15% are users with motor function impairment. For users who cannot operate a mouse, keyboard, or touchscreen, voice navigation has emerged as a powerful tool.

Apple’s Voice Control (for iOS and OS) and Google’s Voice Access (for Android) offer a nearly identical palette of tools for users. The goal is to break down the DOM for fast, fluid interaction by voice. This can be done by listing operable aspects of a page by name, by assigning a number, or by locating them on a grid.

After turning on Voice Control or Voice Access, a user can reveal names of buttons, text fields, and interactive elements by saying “show names” (VC) or “show labels” (VA):

Alt Text

support.apple.com

To navigate, the user simply then has to speak the name/label of the feature. Similarly, “show numbers” on both platforms will assign a number command to each page element:

Alt Text

support.apple.com

For certain applications, and for websites/apps that won’t compile names/numbers correctly, the “show grid” command is helpful:

Alt Text

support.apple.com

If a clickable element exists on one of the grids, the command “double click 15”, for example, would be a way to progress through a site.

When developing for iOS, programmers are required to acknowledge the necessities of accessible design. It makes sense that Apple, with a great deal of lateral power due to its grip on mobile development, can then push accessible development further than an organization like the W3C. Regardless of the platform, all developers should consider the accessibility of their applications and strive to make the web as welcoming as possible.

Top comments (0)