Website Accessibility – How to make your Website ADA Compliant

With internet technology being mainstream, making your fully accessible is more important than ever. Complying with web accessibility standards is a legal requirement, but public and private organizations also consider it a social responsibility.

What is ADA Compliance?

The Department of Justice (DOJ) published the Americans with Disabilities Act (ADA) Standards for Accessible Design in September 2010. These standards state that all electronic and information technology must be accessible to people with disabilities.

Who needs to follow the website accessibility requirements?

The ADA standards apply to commercial and public entities that have “places of public accommodation”, which includes the internet.

Your website needs to be ADA compliant if your answer is “yes” to any of the questions below:

• Are you a government, state, or local agency?

• Does your business benefit the public?

• Are you a private employer with 15 or more employees?

Why is ADA important for your website?

ADA compliance is important to avoid a lawsuit or government action, but as a business, you also want consumers to easily access what you offer. The ultimate goal of the ADA is to offer an equal experience to all people and to take away any difficulty for those with disabilities.

Because the ADA does not directly define web accessibility and it’s scope, web designers refer to the Web Content Accessibility Guidelines (WCAG). This is a set of international standards that provides specific recommendations on how to make websites accessible.

The WCAG 2.1 guidelines are the latest guidelines that are used to determine if your website is accessible and ADA compliant and which level of conformance it meets. According to these guidelines, website content must be:

• Perceivable

• Operable

• Understandable

• Robust

Checklist on how to make your website accessible?

We have created a checklist to help you better understand what each success criterion of the WCAG is asking for. Many details and exceptions have been left out of this checklist. Our checklist is NOT official WCAG documentation.

This checklist is best used as a starting point for diving into each item in the official documentation. This checklist DOES NOT include WCAG 2.1 or AAA conformance level.

The checklist headings are not from WCAG but are being used to divide and organize the content.

Website Presentation

1. Descriptive text: Clear, descriptive text is used for page titles, headings, and link anchor text. This text must accurately convey the page or content that follows.

2. Nested Headings: For each page, headings start with one <h1> tag and optionally then flow down to <h2>, <h3>, and so on down to <h6> based on the hierarchy of subheadings within the page content.

3. Color alone does not convey meaning: Color cannot be the only means used to convey information or instructions. If a color is used, an alternative must be provided (e.g. a colored button with text).

4. Clear forms: Forms must have coded labels for fields, clear instructions on fields and how to fix errors, clear error indications, and example formats (e.g. 10/12/1980).

5. Uniform labels: All images and elements (e.g. icons, frames, fields) that are identical should have identical labels and alt tags site wide.

6. Clean code: The website is free of error pages, broken links, and HTML errors.

Website Appearance

1. Zoom text: Text must be able to be increased by up to 200% without negatively affecting the readability of a website.*

2. Color contrast ratio: All text must have a color contrast ratio of 4.5:1 against its background.*

3. Distinctive links: Text links inside a body of text (not inside header or footer navigation menus) must stand out from normal text through at least two of the following markups: underline, bold, italics, color.*

4. Consistent layout and navigation: A consistent layout framework and header and footer navigation must be maintained throughout the website. Different layouts within a website are permitted (e.g. products page vs. information page) but respective pages within those layouts must be consistent (e.g. product A page has the same layout as product B page).

5. 40×40 px minimum clickable area for touch controls: Provide enough space for buttons and other clickable areas.

Content Alternatives

1. Descriptive alt text: All meaningful images on a website must have alt text. Any images, charts, infographics, etc. that require over 30 words of description have a descriptive caption beneath them and alt text that identifies the image and refers to the caption.

2. No images of text: No images of text are permitted when actual text can readily be substituted. Exceptions: logos, branding, graph labels.

3. Text transcripts: All audio and video files must be accompanied by a text transcript directly below the file. Text transcript must accurately convey the full meaning conveyed in the audio or video.

4. Closed captioning: All video with meaningful sound contains accurate, synced closed captioning.

5. Table data: If a table contains a large amount of data such that it would be difficult to understand when reading aloud, either 1) an alternative version of the table is provided that breaks up the table into manageable columns and/or rows or 2) a caption is provided that accurately conveys the data. Both methods may be used.

6. Extraneous documents: All documents such as PDFs, PowerPoint presentations, Excel files, Microsoft Word documents, etc. meet basic respective accessibility requirements.

User Control

1. No automatic pop-ups: Unless to provide instructions or assist website users (e.g. how to correct an error, time limit warning), no pop-ups are allowed. Pop-ups of commercial intent (e.g. newsletter sign up, discount offer) are not permitted.

2. No automatic video or audio: Video and/or audio may not play unless a user clicks to play the media.*

3. No unexpected changes: No part of a website may change unexpectedly.*

4. Pause updating/refreshing content: Any content that automatically updates or refreshes (e.g. sports scores, scrolling news) can be paused by the user. Exception: rotating ads are permitted.*

5. Adjustable time limits: All but necessary time limits (e.g. auction bids) must provide a warning before time expires and the ability to extend the time limit by up to 8x the original limit before the time limit begins.

6. Important submissions: For websites that require the submission of critical financial/personal/scheduling information (e.g. credit card number, social security number, reservation date, etc.), users must be provided with an opportunity to review and correct information submitted before finalizing the submission.

Website Usability

1. Keyboard only: All functions and content of a website must be accessible by keyboard only.*

2. Focus indicator: A focus indicator box ( an outline around an element) shows on all links, buttons, form fields, menu items, and things triggered by hover, like tooltips. The most common browsers (Firefox, Chrome, Internet Explorer and Safari) all have default focus indicators for most elements built into the browser.*

3. Skip navigation: A method that allows users to skip navigation or other elements that repeat on every page should be provided. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page which jumps to the main content of the page.

4. Search function: A search function must be provided for, at a minimum, on the homepage. If placed on additional pages, the search function must remain in the same place.

5. Sitemap: A link to a sitemap must be provided for, at a minimum, on the homepage.

6. Language: A default language is set for the website.

* Provided by Userway, when you have installed their accessibility toolbar on your site.

Install the Userway accessibility toolbar

In addition to complying with the above, we advise making use of the Free widget, the accessibility toolbar provided by USERWAY. If you want to see how it works, test it out by clicking the little blue and white human icon in the bottom right of this page.

What does Userway do?

With Userway your site visitor can:

• navigate with a keyboard instead of using a mouse or pad;

• have the page read out loud;

• change the contrast of all elements that are on the page;

• have links highlighted;

• make the text bigger;

• increase the text spacing;

• stop animations;

• change fonts to legible fonts;

• increase the cursor size;

• show a reader guide;

• show tooltips;

• show the page structure, i.e. headers, landmarks, and links.

How does the Userway widget look like?

We have installed this widget as well on this website. You can see it in the left bottom corner.

 

Accessible web design does not only lead to better experience among users with disabilities but also among those who do not have disabilities or limitations. Many accessibility requirements improve user experience, particularly in limiting situations.

Note:

It is your responsibility as a website owner to ensure that your website complies with your local laws. Any information contained herein is not legal advice and you should not rely upon it as such. The Americans with Disabilities Act (ADA) is a complex regulation and requires multiple actions from website owners. We recommend that you seek legal advice to understand and to prepare for possible additional requirements stated in this regulation.