Designing for Accessibility: Taming ‘Dragon’ for our Customers
At Prudential, helping all customers access our digital experiences is one of our core principles.
Anna Smith — Director, ADA Strategy & Experience
Our users are not a one-size-fits-all bunch when it comes to technology … most users aren’t. Some are predominantly mouse users while others favor keyboards. Some flip-flop between mouse and keyboard depending on the day, the task, or their inclination. Some are a fiery bunch, and they use Dragon!
What is Dragon you ask? No, not the medieval creature. It is a very advanced software application used by millions worldwide to interact with their computer using just their voice. No mouse … or keyboard … needed!
Forging a Path for People with Disabilities
Created in 1997 by Nuance, Dragon Naturally Speaking is a voice command software. Originally created as a dictation software, Dragon is used in offices, the medical industry, and legal field. The original uses quickly expanded from software that interacted with documents such as Word or Excel, to an important accessibility tool that has the capability to interact with every aspect of your computer (including the internet).
This allows people with diverse disabilities to easily use and interact with digital experiences. Such as:
- Motor coordination issues (quadriplegic, paraplegic, and those with tremors): For approximately 39 million Americans with motor coordination issues, movement may be difficult or impossible. Therefore, using a keyboard, mouse, or trackball is not an option.
- Cognitive issues (dyslexia or agraphia) to easily use and interact with technology: For the 40 million Americans with dyslexia and 1 million Americans with agraphia, writing can be a major blocker to communication, filling in forms, and accessing information. While speaking comes more easily.
Using voice control, users can open and interact with applications … but only if they are built correctly.
4 tips for taming the Dragon
Although Dragon allows users with disabilities to interact with digital experiences through this technology, our Designers and Developers connect the dots between potential and reality. We focus on ways to “amplify” usability and customer satisfaction through intuitive design and proper coding to create inclusive and engaging experiences. It is imperative to understand how layouts, designs, wireframes, and finally code integrates with assistive technology. At Prudential … We are Dragon tamers!
1. Labels … labels … labels!
Ensuring all visual labels are also the programmatic labels for any interactive element is at the top of the list of must haves. Since users interact with the web through voice commands, it stands to reason that the user will assume (sometimes incorrectly) that the name of the link, button, or form field is the name they see on the screen.
For example, if there is a button named “Next”, the user will say the word “Next” which should activate the button. If the button is improperly coded and the programmatic label is “Next Page”, Dragon will not activate the button.
Always feed your dragon (the right information)
2. No Redundant Naming
Remember in school when several kids had the same name? The teacher would call out, and all those kids with the same name would stare back, not knowing who was supposed to answer? Yeah, me too. The same problem exists for Dragon. Just like the teacher and the kids in class, Dragon relies on unique names. Without unique names, Dragon doesn’t know which page element with which to interact.
For example, we’ve all seen the pages that have several instances of “Learn more” links without any information to uniquely identify them such as “Learn more about dragons” and “Learn more about accessibility”. People like being unique, links do too.
Always name your dragon (and the elements on your page)
3. Limit Automatic Interactions on Hover
Yes … Including popup tooltips! A user can move the mouse across the screen to access information. If there is an automatic mouse-over popup, it can cover other information on the screen such as buttons, links, and form fields. This means the user must move the mouse in a specific way to avoid these pitfalls.
If the user is trying to highlight text which includes the popup (such as a tooltip), this can become an insurmountable problem deleting the highlight when the popup opens.
Don’t scare your dragon (or surprise it with unexpected automatic actions)
4. Always use the Right Tool for the Job
If it looks like a duck, quacks like a duck … it should not be a cow! This relates to interactive elements, too. If it looks like a radio button, it should be coded as a radio button not a checkbox. Why? Dragon has specific phrases that allows a user to interact with specific page elements.
For example, when interacting with a radio button, the user will say “click radio button”. If it is coded as a checkbox, Dragon won’t click the radio button because it really isn’t a radio button, it’s a checkbox. Same thing with a button that looks like a link.
A duck is a duck, a cow is a cow, a dragon is a dragon, and a radio button is a radio button.
Don’t confuse your dragon (they’re simple creatures and take things at face value)
Dragon, and other voice command software, has been instrumental in opening new access for people with disabilities. Their contribution to making technology accessible to all users has been monumental. At Prudential, we are constantly looking at advances in (or creative use of) technology to make our customers’ lives better.
Our ADA Strategy and Experience Team at Prudential works closely with multi-disciplinary teams across Product, Technology, and Design to deliver exceptional customer experiences to all. We’ll be sharing more on our approach — including how our Design System builds accessibility into every component — in future articles!
