Tips and Tricks for an ADA Compliant Website

By Tracy Marston

Over the past year, the topic of ADA (Americans with Disabilities Act) compliant websites has become more and more of a hot-button issue for banks nationwide. Although the Department of Justice (DOJ) has not initiated a rulemaking to establish accessibility standards for accessible websites, this has not stopped the lawsuits and demand letters. That makes it essential for financial institutions to pay close attention to their websites. Let’s take a look at answers to some of the main questions about ADA conformance as well as some tips to help ensure your website stays in tip-top shape.

With no guidelines in place, what does “compliant” mean?

In 1999, the Web Accessibility Initiative (WAI) and the World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG). These guidelines were updated to WCAG 2.0 in 2008 and then to WCAG 2.1 this past June. This is the standard required by DOJ in website accessibility settlement agreements and consent orders, and it is applied in court judgments.

These guidelines have been adopted worldwide, with many foreign governments requiring that public websites adhere to them. In addition, in 2017 the U. S Access Board published a final rule adopting WCAG 2.0 as the accessibility standard for federal agency websites under Section 508 of the Rehabilitation Act of 1973.

Within the WCAG 2.1 guidelines, there are three levels of compliance: A, AA, and AAA. Each level builds upon the one below it, meaning that AA is harder to attain than A, and AAA is more difficult than AA. The criteria for WCAG 2.1 Level AA are largely used as the standard websites should look to attain.

These are the principles of accessibility.

According to W3C, WCAG 2.1 is built around four guiding principles—known for their acronym POUR—to ensure that websites are accessible to users of all abilities. They are:

  1. Perceivable – Information and user interface components must be presented to users in ways they can perceive if they have limited vision or hearing.
  2. Operable – User interface components and navigation must be operable by users who may not be able to use a mouse, for example, or who may need time to complete an action.
  3. Understandable – Information and the operation of user interface must be clear, logical and consistent.
  4. Robust – Content must be able to be interpreted reliably by a wide variety of user agents, including assistive technologies.

What are some things I should keep in mind to reach WCAG 2.1 Level AA?

Content Areas

  • Proper text formatting is key to meeting ADA guidelines.
  • The page title should be the only <h1> on the page, and heading structure in the main content area should follow a logical sequence and not skip levels: H1, H2, H3, H4, etc.
  • A heading should always use correct semantics associated with a heading and never a paragraph tag. Remember that headings are headings; paragraphs are paragraphs.
  • Bulleted and numbered lists should use proper list formatting options.

Tables

  • Unless you have basic html knowledge, it may be better to avoid the use of tables as they are not responsive or ADA compliant by default.
  • Web developers can add special tags to enable the table to be responsive and to ensure ADA guidelines are met.
  • If you do use tables, ensure that you use table heading cells (<th>) and not heading tags (<h1>, etc.) for formatting.

Images

  • Never place heavy text or tables as an image. Images should only contain brief text that can be placed in an alt tag, which provides alternative information for an image if a user is unable to view it.
  • Images should have an alt tag unless it directly relates to the content or is simply decorative. An empty alt tag is completely acceptable because unnecessary content within alt tags only makes it difficult for screen readers to get to important on-page content.

Color Contrast

  • When picking a color for copy it is important to remember that to meet WCAG 2.0 level AA compliance, color contrast between text and its background must meet certain ratios to support readability. Large text must meet a contrast ratio of 3:1 and small text must meet a contrast ratio of 4:5:1.
  • There are online tools as well as plug-ins for many graphic design programs to check color contrast, but it is a good idea to work with a designer who is aware of contrast issues and can test them before implementation.

Audio and Video

  • Video and audio recordings should include captions/transcripts.
  • Multimedia should be equipped with play/pause controls, as well as forward/back controls, to ensure that the user has enough time to review and understand the content.

There remains a lot of gray area when it comes to ADA compliance and what is expected or required of financial institutions. Until guidance is handed down by the DOJ, it is incumbent upon financial institutions to be aware of the concerns and consider how they want to handle the question of conformance. The importance of establishing and maintaining an accessible website is only expected to increase, making it essential to regularly consider even the most intricate details of facilitating a positive experience for all customers and prospects.

Tracy Marston is a senior front-end web developer at Pannos Marketing based in Bedford, NH. Pannos Marketing is an award-winning, full-service communications firm specializing in strategic marketing, public relations, social media, e-commerce and website solutions for financial institutions. Email: tmarston@pannosmarketing.com. LinkedIn.

Share.