Assistive Technology Friendly Web Design: A Case Study

Entermedia recently completed an ADA compliance audit and ADA compliance redesign project for the Robert Rauschenberg Foundation.  Read on to learn about why ADA compliance is so important, how assistive technology enables people with disabilities to use your site, and what happens when your site is not structured with disabled persons’ needs in mind, especially in regards to certain design decisions, keyboard navigation-friendliness, and thoroughly structured pages. This case study can be used as an ADA website compliance guide for your own site.  If you have any questions about ADA compliance, contact us.

assistive technology infographic | dos and don'ts of designing a website for screen readers

Assistive technology is a sweeping term that refers to products and devices which enhance life for persons with disabilities. These products and devices include wheelchairs, prosthetics, positioning devices, learning materials, communication boards, screen readers, and much more. Assistive technology has opened up the web for users with disabilities but, when companies do not take the accessibility of their websites into account, some people find themselves unfairly excluded.

If you don’t regularly interact with the web using assistive technology, imagine for a moment that you do. You’re about to meet some friends for lunch. You pull up the restaurant’s website using your screen reader, which cleverly determines what’s on the screen and presents the information to you through braille or synthetic speech. You ask your screen reader to convey what’s on the menu and it replies, “img0000234.jpg.” Sounds appetizing.

Using assistive technology to navigate an inaccessible website can be tedious and frustrating. But it can also be a demoralizing experience that violates the equal rights of a person with a disability.

Take for instance, the case of Guillermo Robles, a blind man who uses assistive technology. Robles says neither the Domino’s website nor the mobile app would allow him to order the pizza he wanted. A seemingly simple experience that sighted users take for granted. Robles asserts that Domino’s inaccessible website and mobile app is in violation of Title III of the Americans With Disabilities Act (ADA), which deals with businesses open to the general public.

When the ADA took effect in the early 1990’s, the internet was still dawning. Title III was largely intended to address the accessibility of businesses with physical locations, such as schools, restaurants, movie theaters, and doctors offices. Many Title III lawsuits deal with narrow hallways and lack of accessible ramps. But an increasing number people who use assistive technology argue that the internet is considered a public space, the web is included in Title III, and businesses should be responsible for ensuring that their websites are accessible to anyone and everyone.

Domino’s begs to differ. With the U.S. Chamber of Commerce on their side, Domino’s is asking the Supreme Court to step in. Although lower courts have largely ruled that Title III does apply to online spaces, Domino’s argues that their right to due process has been violated because the Department of Justice has not made good on its promise to provide clear-cut Title III website compliance guidelines.

And Domino’s is right — there are no official guidelines. The details of when and where Title III applies to the internet are being hammered out in the courts as thousands of private individuals file suit against companies with websites that ignore users of assistive technology. That’s right: thousands. The number of ADA website compliance lawsuits in 2018 nearly tripled in comparison to the previous year. A wave of lawsuits recently hit New York art galleries and wineries. Even Beyoncé’s website was called out.

It is important to note that many businesses aren’t waiting for official guidelines before committing to ensuring their websites are compatible with assistive technology. Entermedia recently completed a major overhaul of the website for the Robert Rauschenberg Foundation which sets a new standard for elegant and accessible web design. Below is a case study which examines the overhaul process from start to finish. Feel free to use this case study as an ADA website compliance guide for your own site to ensure your business is taking those who use assistive technology into account.

Step One: Audit for Assistive Technology Compatibility

According to the Robert Rauschenberg Foundation’s website:

“The Robert Rauschenberg Foundation fosters the legacy of Rauschenberg’s life and work. The foundation supports artists, initiatives, and institutions that embody the same innovative, inclusive, and multidisciplinary approach that Rauschenberg exemplified in both his art and philanthropic endeavors.”

When RRF came to Entermedia with concerns about their website’s accessibility, our first step was to conduct an ADA audit. Here’s what we found:

  • Illegible font
    • Low color contrast for text
    • Font size increase not enabled
  • Overlapping text and images, which is difficult for screen readers to process
  • Scrolling title animation executed in JavaScript
  • Missing landmark labels (code that clearly defines page features to facilitate efficient assistive technology navigation)
RRF website before, featuring header overlapping with illegible text | assistive technology
RRF homepage: before, note the title overlapping the image.

Step Two: The Assistive Technology Friendly Overhaul

After synthesizing the results of the initial audit, we broke down the work ahead of us into three categories:

  • Design
  • Keyboard navigation
  • Page structure

Design

The visual design of a web page is something that most sighted users take for granted. Small white text against a dark background is a simple design choice for some, but for vision impaired users it can be a major barrier that prevents them from reading necessary online information.

We aimed to stay true to the original stylish visual design of the RRF website, while correcting several common accessibility missteps:

  • Composition
    • Global theme of the site was problematic for visually impaired users
  • Color and Contrast
    • Green text used had low contrast ratio (2.66), far from the minimum ratio (4.5) that would enable any user to easily read the text
  • Zoom or Scale
    • Users were unable to adjust the size of the font or images
  • Layout
    • “Art in Context” section required continuous clicks and scrolling, complicating navigation
  • Writing
    • Vague text made it difficult to determine the function of links and other elements on the page without visual context
  • Typography
    • Condensed Montefiore font used for menus and titles was entirely uppercase, which reduced readability

Design Solutions

  • Designed new page types for especially problematic pages, as well as a new global theme to make full site experience more legible
  • Darker green was chosen to improve contrast ratio while still respecting the client’s brand
  • Scale options were enabled
  • “Art in Context” page was changed to a Masonry grid layout without fixed height rows to optimize space
  • Links specified

For the new font design, I thought it was possible to unify all the elements using a single font family, with personality, contemporary but not disruptive. I thought that a DIN typography would work really well for RRF. DIN typeface has its origin in the Prussian railway back in 1905 and was adopted by Germany in 1936 as a standard known as DIN 1451 (DIN is an acronym for Deutsches Institut für Normung—in English, the German Institute for Standardization). DIN 2014 is a contemporary version. The Regular performs well in long text settings, while Light and Bold faces are extremely legible at large sizes. DIN has great legibility and uncomplicated, unadorned design which helps to enhance the works of Rauschenberg.

Keyboard Navigation

Effective keyboard navigation is an essential component of an accessible website. Users with motor disabilities and vision impairments commonly rely upon keyboards, rather than a mouse or a trackpad.

In the initial audit, we found that the Foundation’s website had issues within the code which made keyboard navigation difficult:

  • Focus
    • Focus was not enabled, making it difficult for assistive technology to determine how to interact with links on the site
  • DOM Order
    • Visual order of the site’s content did not match the content order in the code, jumbling the components of the site for screen readers
  • Offscreen Content
    • Because Robert Rauschenberg’s work is primarily visual, some offscreen directionals and explanations exclusively used by screen readers was necessary
  • Alt Text
    • Thousands of images were missing descriptive Alt text, making it impossible for screen readers to convey content
  • ARIA
    • ARIA attributes were not added to HTML elements, making the roles and functions of dynamic features on the site unclear to non-sighted users

Keyboard Navigation Solutions

  • Focus enabled
  • Code was cleaned and reorganized to reflect the visual order of each page
  • Offscreen content added
  • ARIA attributes were added for clarity
  • Descriptive Alt text was added to thousands of existing images and “Alt text” was made a required field when uploading new images

Page Structure

Content structured with assistive technology in mind results in a page which is effortless for screen readers to process and navigate. Implementing code that is specially designed for assistive technology saves time and frustration for people with disabilities.

RRF’s website made several common page structure mistakes:

  • Headings
    • Headings lacked logical organization and weight according to their importance in the code, resulting in a tedious screen reader experience
  • Interactive Elements
    • Links and calls to action were vague and difficult to understand without visual context
  • Landmarks
    • Page features were undefined, hindering screen reader navigation

Page Structure Solutions

  • Headings were reorganized and given weight in relation to importance, allowing users of screen readers to efficiently scan for information
  • Interactive elements were made more specific
  • Landmarks were employed on every page

Step Three: The Assistive Technology Test

In our initial audit, Entermedia determined that accessibility issues existed in the design, keyboard navigation features, and page structure throughout the site. After three and a half months of redesigns, code cleaning and client consultations, the Robert Rauschenberg Foundation’s new and fully assistive technology compatible website was completed.

The last step in our total accessibility overhaul was to put the new site to the test. We conducted a final audit of the redesigned site to determine whether or not it was compatible with assistive technology. Here’s what we found:

  • Accessible color contrast
  • More legible font
  • ADA accessible theme elements such as focus and font increase enabled
  • Alt tags on all images on the site
  • Landmarks present on every page
  • Page headers weighted and organized throughout site
  • Clean markup
  • Artful site design maintained while enhancing usability for all site visitors
RRF homepage after: note better color contrast, image and text separated.

Conclusion: How to Make Your Site Assistive Technology Friendly

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web Tweet

In 1995, five years after the ADA was signed into law, a Newsweek article called the Internet a “fad.” But the Internet has become a powerful tool for many people with disabilities, erasing communication and participation obstacles that can exist in the physical world. When websites are designed with assistive technology in mind, companies and organizations honor the basic rights of all individuals.

When building or redesigning your website to accommodate users of assistive technology, keep the following points in mind:

  • Design
    • Make sure your font is legible, with appropriate color contrast and flexible scale options
    • Avoid vague content that is difficult to understand without visual context
    • Provide closed captioning for videos
  • Keyboard navigation
    • Enable focus
    • Ensure that the order of content in the code reflects the visual order of content on the page
    • When necessary, provide offscreen content for screen readers to explain visual elements
    • Add descriptive Alt text to all images
    • Add ARIA attributes to clarify HTML elements
  • Page structure
    • Give important headings weight and logical organization
    • Avoid vague links and calls to action that are difficult to understand without visual context
    • Define all page features with landmark labels

Get in touch with Entermedia today to ensure your site is accessible to everyone.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Entermedia Logo

Your Web Team