<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1040703452609373&amp;ev=PageView&amp;noscript=1">
ADA Compliant Accessible Web Design

Essential Elements of Accessible Web Design

Posted by Molly Geipel on July 25, 2016 at 11:13 AM

We all browse the internet for the same reasons—to find information, to access resources, to shop, to be entertained. We don’t, however, all experience in the internet in the same way.


People with visual or cognitive disabilities have equal need of the internet, but are limited in their ability to browse many websites effectively. “Accessibility” refers to the ease for people of all abilities to interact with a website. Poorly designed websites pose steep barriers to entry for those of us with disabilities that keeps important information and resources out of reach.

 

Accessibility is an important consideration for all websites, but particularly those in industries pertaining to seniors where visual strain is common. In some industries, accessibility is not only about respecting your audience, but is a legal requirement. The Americans with Disabilities Act (ADA) requires that the websites of government agencies and contractors be compliant with ADA guidelines for accessibility.

 

Having worked with a large number of senior living clients over the years, the Imagewërks team is well-versed in considering accessibility factors when developing a new website or landing page for a senior living project.

 

There are several page elements that require special treatment when developing websites for an older or visually impaired audience. Accessibility is not just the designer’s responsibility, but is the shared responsibility of designers, programmers, and even copywriters. Page design, user experience design, technical elements, and copy all need to come together to create an accessible website.

 

In our experience, these are the essential elements for ease and accessibility:

 

-DESIGN-

Typeface

Typeface is a central design decision on any website. A typeface conveys a certain personality and target a certain audience. However, when designing a website to maximize accessibility, your font choice priorities should not be stylistic, but rather practical.

 

To improve accessibility, choose a typeface from easy-to-read font families, such as sans serifs. Set the font size large enough that the text is readable not just on large-screened monitors, but on laptops, tablets, and other small-screen mobile devices.

 

Some sites even provide options to adjust the font settings by switching between serif and sans serif, increasing or decreasing font size, or even alternating the text background between white and black. This can be helpful since visual impairments can differ widely. For some, it’s easier to read white text on a black background; for others, the opposite is true. Aesthetics are important, but they must always support a site’s functionality and the experience of the user.

 

Catholic Eldercare ADA compliant accesibility web design

 

Contrast

While people have different preferences between white on black and black on white in terms of readability, one thing is true across the board: The more contrast between background and font colors, the easier the text is to read. Don’t use grey font on a light blue background, or navy text on a dark grey background. Even people with normal eyesight will struggle to read text on low-contrast backgrounds.

 

Black text on a white background is universally the easiest to read—which is why it’s the default setting on most word processing programs—but again, people’s visual impairments differ and it’s ideal to provide options, if possible.

 

Images

Web pages today rely heavily on imagery to create an inviting interface. However, if your target audience is composed mainly of visually impaired individuals, an image-heavy web design will be detrimental to user experience. A user must be able to see imagery clearly in order to interact with it.

 

An accessible website should not be reliant on imagery to communicate information. At most, imagery should be used to compliment text—but never should an image serve as a primary source of information or site navigation. Any image that appears on your site should be accompanied by a descriptive context.

 

COPY

Many people who are blind or visually impaired interact with websites using special assistive technologies to help them browse. Screen readers are the most common of these technologies, and will speak aloud the text that appears on a web page. When writing for your website, consider how these technologies impact user experience.

 

For example, section headers are always a good idea to help organize and simplify content, but they are essential to accessibility. Many of today’s screen readers will read the section headers first to give the user the option to skip ahead to a section further down the page, to save them from having to listen to every preceding section before reaching the section of interest.

 

Attempt to write copy that mimics the patterns of spoken language and avoid overly lengthy or flowery copy. The closer your copy resembles conversational speech, the easier it is for users to understand when read aloud.

 

-PROGRAMMING-


HTML Markup

Using the appropriate markup for page titles, headings, lists, and other page elements gives the screen reader the information it needs to understand the structure of the page and convey the contents to the user in an intelligible way. Structuring page content is as much the responsibility of the copywriter as it is of the SEO specialist or programmer. Using titles and headings to organize content makes it more digestible for humans and screen readers alike.

 

Since screen readers can’t read images, all images should be coded with ALT tags. ALT tags are a description of your image coded into the HTML that  gives screen readers information in place of the image. As a bonus, ALT tags also enable images to be indexed for search engines, making your site more SEO friendly.

 

Pages

Infinite and parallax scroll web designs are very popular right now due to the visually appealing and intuitive user experience they offer. Though pleasing for fully abled users, these layouts present challenges for visually impaired visitors relying on assistive technology. Without the signal of a page refresh, a screen reader doesn’t know when to announce a new page and start reading again from the top.

 

Programmers have two options to resolve this dilemma. Either ditch the infinite scroll model and stick to the more traditional multi-page layout, or code the sections within the parallax or infinite scroll to be treated—and read—like distinct pages.

 

Additionally, it’s helpful to include a “skip navigation” link at the top of each page. That way users don’t have to listen to their screen reader walk through the entire navigation each time they open a new page, making for a more efficient (and far less tiresome) user-experience.

 

WAI-ARIA

Experienced web developers will want to familiarize themselves with WAI-ARIA (Accessible Rich Internet Applications) tags, which are a way of devising new ways to provide more accessible functionality to those who rely on assistive technologies to browse the internet.

 

WAI-ARIA allows developers to flesh out the basic HTML structure with more highly-defined information about the relationships between various elements of a web page that will improve a screen reader’s ability to comprehend and communicate web content to the user.

 

If you know accessibility will be a factor for your audience, there are online accessibility tests you can use to troubleshoot your site design before the site ever goes live. Great user experience is synonymous with great customer experience. Make sure you’re not handicapping yours by overlooking the accessibility of your content.


Working with a senior or impaired audience?

Download our web accessibility checklist below to get these tips and more in a handy reference guide to share with your team.

New Call-to-action

Topics: Accesible Web Design, ADA Compliance, Accessibility Design, Design for disabilities

Suggested Reading

Need More Ideas@Wërk?

How We Werk

Take a look at the ideas that make all our werk possible. 

Subscribe to Email Updates

Recent Posts

Posts by Topic

see all