Is the text on your website ADA accessible? Part three: Live text.

The Americans with Disabilities Act (ADA) has changed the lives of countless Americans by prohibiting discrimination against individuals with disabilities. But while the more prominent protections focus on employment nondiscrimination and building access, the ADA also has major implications for websites and other digital design.

It’s important for businesses and organizations of all kinds to understand and meet these standards. But it’s especially crucial for the fields of education, finance, healthcare, nonprofit advocacy, and certainly government. And while the ADA guidelines can seem overwhelming at first, in reality they simply prescribe, in specific ways, a thoughtful, clean design that prioritizes the all users’ experience.

The standards

As outlined in greater detail the first article in this series, the ADA focuses on four general principles that provide a road map for designers and developers working toward ADA accessibility: Websites must be perceivable, operable, understandable, and robust. Each of those principles is supported by 12 specific, actionable design and usability recommendations, and compliance is graded on a scale from A (the lowest) to AAA (the highest).

How live text makes your website ADA accessible

The ADA places importance on enabling people to use screen readers and other tools when they visit a website. The key to making this work is simple: Use live text.

For the uninitiated, live text means the text has been coded into the site. From the user’s perspective, live text can be highlighted, copied, and pasted just like text from a Word document. Most text on modern websites, particularly body copy (such as this article), is live text.

Text can also be embedded into images. This is less common today, and is typically used in headings and other “decorative” applications. The problem is that screen readers and other auditory devices can’t “read” text on an image. So the ADA stipulates that actual live text should always be used to convey information. Images of text are allowed as “pure decoration” or “where a particular presentation of text is essential to the information being conveyed.”

Using live text also enables that text to be resized easily. Per the ADA’s guidelines, text should be resizable “without assistive technology up to 200 percent without loss of content or functionality.” This type of usability is common with mobile-first design, but the ADA guidelines put a firm stake in the ground.

“A mobile-first approach is a good way to look at text,” says Marc Rust, Senior Creative Director at Boston Interactive. “Think of how the text will be used, not about the document size and whether it’s on mobile, desktop or some other format. Text should be thought of as a responsive component that adapts to the user’s need.”

Balancing form and function

While the guidelines may seem granular, in reality much of this is simply solid, user-friendly design in practice. Many of the standards outlined by the ADA—contrast comes to mind—are things designers should be doing anyway, and likely are, albeit perhaps not to the precise levels required here.

That said, it’s essential to have the right tools if you want to balance ADA accessibility with on-brand design. When it comes to text, that means using web fonts. Web fonts load as live text, meaning screen readers can read them and that they’ll resize virtually indefinitely without losing any design integrity.

And while the guidelines may seem restrictive, the intent is ultimately to focus brands and designers on the user’s experience. This means there’s still plenty of room for personality and clever design. 

“Designing for the ADA isn’t about being minimalist,” says Rust, “it’s about being purposeful.”

Check out the first two articles in this series, focusing on how color and contrast factor into creating an accessible website. Not sure if your digital properties are ADA accessible? We can help.