The future we imagined as kids may not have flying cars, but it does have a wealth of amazing technology. From palm-sized supercomputers to voice-activated devices, tech shapes how we live. That’s particularly true for people who rely on assistive technology, or products, equipment and systems that enhance learning, working, and daily living for persons with disabilities. For example, these are the devices or software programs that read web content to the visually-impaired. They also provide closed-captions for the deaf and allow individuals to navigate websites using keyboard commands.
As impressive as assistive technologies are, however, they are not foolproof. Certain common web design techniques confuse these programs, making content inaccessible to those using assistive technology. (Click here to read more about web design.) Fortunately, there are many helpful guidelines and tools to ensure the web remains accessible to all visitors. Here are just a few tips to keep your web design ADA compliant.
Accessible Web Design Includes Font
One simple way to make your website more accessible is to use a large, clean typeface. This will make your content easier to read, particularly for the visually-impaired and the elderly. Google offers a wide selection of beautiful fonts designed to improve web performance and accessibility. (Click here to explore Google’s web fonts).
In addition to the font style, you should also apply a critical eye to the font size and color. To maintain ADA compliance, the WCAG (Web Content Accessibility Guidelines) recommend using fonts at size 14 or larger. (Click here to read more about the WCAG guidelines.) The larger the font, the easier it is to read no matter the color. For smaller type, fonts and their background should maintain a 4.5 to 1 color contrast ratio. This contrast ratio makes it easier to distinguish the type from the image or vector behind it.
If you’re unsure if your contrast ratio meets WCAG standards, you can download a browser extension, like Colour Contrast Analyser. (Click here to read more about Colour Contrast Analyser.) This tool will evaluate your website and determine if the color contrast is ADA compliant.
Alt Tags Keep Websites Compliant
Adding alt tags to images is another simple design technique that improves web accessibility for assistive technology. An alt tag is a short description that accompanies an image, gif, or video. For example, a photo of a child’s birthday party might include the alt tag: “Smiling girl blows out candles on frosted birthday cake.”
Including an alt tag allows screen readers to explain the visual components that accompany the content on the page to users. For this reason, these tags are especially helpful to those who are unable to see images. Still, alt tags are also helpful for visitors with certain cognitive disabilities. For example, displaying an alt tag next to a photo better explains the connection between visual and textual content. This may help visitors understand your call-to-action, or what you want them to do on your site.
This is just a brief trip into the universe of accessible web design. Websites must meet several crucial design and development requirements to be ADA compliant. If you have questions about ADA compliance and how it applies to your website, call today to speak with Niki or Louis. We offer a number of consultation services, as well as ADA compliance audits and accessibility widgets.