Top 10 Website Updates to Ensure ADA Compliance

Most of us can’t picture our lives without the Internet these days. But imagine if every time you logged on you were faced with a page that was completely illegible. This is something users who are visually impaired, users who are hard of hearing, and users who have other disabilities, have to deal with every day. When websites are built with only people without disabilities in mind, the Internet becomes a lot less equal.

In the spring of 2016, the U.S. DOJ issued a Supplemental Advance Notice of Proposed Rulemaking (SANPRM) titled “Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities”. This new SANPRM states that all electronic information must be accessible to people with disabilities, but it stands apart from its previously proposed predecessors because it focuses on the specifics of website design and use. The finalization of this set of standards is expected for 2018, but until then companies may face a penalty in the form of legal challenges on the basis of the Americans with Disabilities Act (ADA). Google is also taking a stand for advancing accessibility by including language about the necessity of fair website design in their most recent update of their Webmaster Guidelines.

Here you can find the top 10 design features and updates you can perform on your website to ensure it is ADA compliant and provides an accessible, enjoyable experience for all.

1. Provide Alt text or a Text Alternative for All Images.

Images without alt text cannot be read by assistive technologies, making them incomprehensible to users who are visually impaired. To combat this, all websites should provide a text equivalent of the image. Whether it’s an image of a product or a social media icon, all images should include a description. Including alt text, which is a word or phrase that’s inserted as an attribute in HTML, is the best way to do this. The alt text should include the same meaningful information that other users obtain by looking at the image, such as a description of what the image is or what it represents. Alt text is also a ranking factor, which means using it on all images will have an SEO benefit.

2. Remove All Images of Text.

Documents posted as a PDF or in an image-based format can’t be deciphered by screen readers. If it’s important to the page to keep the PDF, websites should always provide the document’s text in an alternative form, such as HTML, in addition to PDFs. Large infographics or other complex images that include text should be accompanied by detailed text descriptions somewhere on the page or in the HTML as well.

3. Describe Link Destinations.

The purpose of a link should be clear from the link text alone. For example, link text that says “click here” is not enough information for users using screen readers to gain an understanding of where the link is going. We recommend using link text such as “click here to go to [insert destination]”. Links like this allow screen readers to interpret the text so that visually impaired users know exactly where they’re heading.

4. Provide Closed Captioning on Video.

On-site videos and embedded multimedia often lack accessible features for the Deaf. Websites should provide closed captioning or other text synchronized with the video to make it accessible to people who are hard of hearing. If the video on your site is hosted through YouTube, it allows you to create subtitles or upload a file of a transcript directly in the video settings.

5. Provide Transcripts of All Audio Media.

Like with video, media features such as podcasts, embedded songs, or other audio tracks are often inaccessible to hard of hearing users. Websites should provide on-page or downloadable transcripts of all audio media.

6. Ensure All Forms Are Accessible.

All forms on a website should be clearly labeled, and set up in a hierarchal order so that they’re simple for users using assistive technologies to fill out. It’s also critical to provide clear indication of which fields contain an error. When general error messages are provided at the top or bottom of a form, users with visual impairments often find it difficult to determine which items in the form must be modified to ensure it can be submitted. We recommend incorporating an element that generates red error text below the field that states that the field is incomplete or has an error. This ensures that screen readers can read the text in the correct spot and alert the user to exactly which one they need to correct.

7. Tag Tables and Charts.

Data tables and charts can be complicated for screen readers and assistive technologies to decipher. It’s important for all tables to have column and row headers appropriately identified using the <th> tag (which defines a header cell) in the HTML. When all cells are associated with the correct headers, the table becomes easier for the screen reader and user to understand.

8. Exclude Intrusive Content.

Intrusive content includes ads, pop ups, or other media that gets in the way of a regular and pleasant site experience. Much of the time, intrusive content includes blinking letters or bright, flashing colors. Websites should exclude all graphics or media that include rapid flashing lights or colors because this type of content can be harmful to users with epilepsy or other users prone to seizures. Removing intrusive content will provide a more enjoyable experience for all users.

9. Choose a Site Design that Can Be Manipulated by Browsers.

It’s recommended that websites are designed so they can be displayed using the color and font settings of each visitor’s browser and operating system. People with low vision may use specific settings when they access the Internet, such as using a high contrast setting or specific colors only. These users need to be able to manipulate settings in their web browsers and operating systems in order to make pages readable. If a website is designed so that changing the color and font settings is impossible, these users will not be able to view the pages. Websites should choose design elements that can be manipulated by browser settings, so that all pages can be accessible to visually impaired users.

10. Ensure that Your Site Can be Navigated by Keyboard.

Many users with motor disabilities rely on a keyboard, as do users who are visually impaired. Typically, a keyboard user will use the Tab key to navigate through the webpage. Test if your site is set up for keyboard navigation by clicking the Tab, Enter, or Spacebar. When navigating with the Tab button, the browser will create focus indicators that visually help users with motor disabilities see where they’re navigating. You can use CSS to make the focus indicator more apparent and keyboard-friendly by adding a background color or other visual style to links. You should also ensure that the default keyboard navigation order is logical and intuitive (left to right), so that users using screen readers as well as keyboard navigation will hear content in the right order. These elements are determined in your web page’s source code.

Now is the best time to ensure your website meets basic ADA requirements. With official legislation coming soon, ensuring that your company is a fair place for all on the web is just as important as ensuring fairness in the office or at your store. By guaranteeing that your site is accessible to all types of users, you’ll improve your site popularity, SEO, and overall website experience.

This content was originally posted on BostInno.