The Most Common Web Accessibility Issues to Avoid

Since the Americans with Disabilities Act (ADA) came into effect in 1990, it has required that places of public accommodation meet certain standards of accessibility for people with disabilities. The definition of “places of public accommodation” such as schools or offices changed little over the next two decades until 2010 when the Department of Justice (DOJ) published in the Federal Register rules that websites were to also be included under that definition.

Web accessibility lets people with cognitive difficulties, vision impairment, or those who are deaf or hard of hearing gain access to online content such as webpages, electronic documents, and multimedia. Part of this accessibility includes content designed to work specifically with assistive devices such as screen readers, alternative keyboards, or joysticks that are used by people with a range of impairments.

ADA-compliant websites are coded in a way that allow vision-impaired people, for instance, to order groceries or access their banking information online using screen readers. Another example of web accessibility is creating sites that allow people with epilepsy to safely navigate webpages without increased seizure risk. The goal is to create digital spaces that can be as easily navigated by everyone as physical public spaces.

What Is Required?

The DOJ took the position that it was logical to bring websites under the same regulation as physical, brick-and-mortar stores since both offer essential services. In 2018, a set of new federal accessibility guidelines will come into effect that detail the web accessibility features with which companies must comply. Prior to 2018, though, companies best practices are to comply with existing standards, the Web Content Accessibility Guidelines (WCAG) 2.0 standard.

The goal of the WCAG is to provide a common standard for web accessibility and to give companies a clear methodology to improve the digital accessibility of their websites and services. WCAG 2.0 applies to a wide range of existing and future web technologies, and its implementation can also be easily evaluated by human testers and a range of automated tools.

While best practice guidelines for writing code have existed for many years, the DOJ’s position on ADA compliance makes it now very much a legal matter. Companies that don’t comply with the web accessibility guidelines risk legal action brought by members of the public or associations that protect human rights. Companies both small and large have faced litigation related to substandard accessibility of online services. It is definitely in a company’s best interest to take steps to avoid or remedy web accessibility problems.

“Right out of the gate, I would want to know if you have done anything to ensure ADA accessibility on your website. More specifically, I would want to know how bad the problem is, and how easy it is to fix. A web accessibility audit report is a crucial document that can be used to identify low hanging fruit for a quick fix. Similarly, it can be used as a tool to uncover major accessibility problems that require intensive remediation efforts.”
Web Accessibility and the Law Interview:
Christian Antkowiak, a shareholder at Buchanan Ingersoll Rooney

Accessibility Issues to be Aware of

Good news: Coding an ADA-compliant website is achievable with minimal expense and minimal impact on usability or design — if some basic guidelines and strategies are followed. The following list details the best ways to avoid the seven most common web accessibility issues.

Navigation

This is probably the most important accessibility issue and applies to any website. Whether people have a disability or not, if a site has not been properly designed to allow for simple navigation, some of the website’s information will be difficult to access.

There are two main elements that relate to navigation:

• Tab-through order. For people with disabilities, it’s extremely important that sites can be navigated using only a keyboard. This often means that the “tab” key is used to move through different sections within a webpage. Accessible websites should be structured so that pressing “tab” logically moves the user from the address bar to menus, across form fields and links, and to any other content areas in a clear and easy-to-follow manner. This let users who rely on keyboard navigation to move through a page in an intuitive way even if they can’t see the screen.
• Landmarks. Just as physical landmarks help people navigate in real space, landmarks in a website help users navigate a page. These digital landmarks are special labels included in the site code that provide navigation indicators. Landmarks will, for example, allow screen readers to identify and communicate with the page’s navigation menu so that users can access that menu quickly without having to listen to all the text on a page.

Site Structure

Properly structured websites use levels of text that have been logically named to show the relationships between different areas of content. For web users without vision impairment, people can understand site structure and a page’s content naturally and quickly by scanning for titles or headings. For people who cannot rely on vision-dependent cues, pages should be structured to provide similar key information to screen readers.

This can be achieved by making sure each page is structured to include:

• Unique titles. All pages should be given a logical and unique title so that no two pages share the same title. The page title should appear within the browser above the web address bar.
• Headings. Headings should logically progress so that sections containing content are formatted using heading style designations such as “Heading 1”, “Heading 2”, and so on instead of relying on variations in the visual text such as font or font size changes.

• Lists. Any bulleted or numbered list should be identified as such rather than by using indents or symbols to indicate it. Besides helping users identify information as belonging to a specific list, following this practice helps communicate the number of items in the list.

Text

More than 7 million American adults have some form of vision impairment, representing roughly 2% of the population. This includes a wide range of vision problems including nearsightedness, color blindness, or complete loss of vision. Developing web pages that allow for flexibility in the way text is displayed provides users with a wide range of simple options that can significantly improve how easy it is to read a site’s text.

Text options should include:

• Size. Users should be able to easily increase or decrease text size. Text should also be able to be effectively displayed across a range of device types including desktop, mobile, and tablet.
• Contrast. Proper color contrast between text and backgrounds reduces challenges created by color blindness or other vision impairment conditions. WCAG 2.0 has clear guidelines on contrast levels for a range of text sizes.
• Color. Colors should not be used to convey meaning. If developers wish to use colors to communicate something meaningful, alternative options should also be provided to communicate the meaning. This applies to features such as highlighted text.

Images

Using images rather than text to convey meaning or to navigate webpages prevents people from being able to properly access information.

Some of the key issues related to imagery include:

• Images instead of text. Important information displayed as an image should be avoided. Examples of this are a “home” button that’s an image of a house. Sometimes text is displayed as an image. Unfortunately, screen readers treat an image showing text as if it were a photo or a logo. This, in turn, prevents users from being able to properly navigate or understand key elements of the page.

• Text for images. Adding text descriptions to images allows vision-impaired users to understand what is being displayed. This can be important for graphics such as flowcharts, schematics, maps, graphs, or menu buttons. A lack of additional text to support images was one of the key factors cited in the landmark accessibility class action lawsuit that was successfully brought against the retailer Target.
• Color. Color shouldn’t be used to convey important information. For instance, consider a map that uses color-coded location markers to display a green start line or a red finish line. To assist people with color blindness or other vision impairment to understand maps or location-based information, supporting text should be included.

Hyperlinks

Hyperlinks are one of the main features of websites, allowing people to easily navigate to other pages to seek out additional details of related information. There are, however, important differences in the way that sighted people and vision-impaired people navigate and access hyperlinks on a page.

• Clarity. While people without impairment can scan pages to find links to useful information from within the context of the text surrounding those links, people relying on assistive devices such as screen readers often access hyperlinks as part of a list that has no additional context. For this reason, sites shouldn’t name links using terms such as “read more.” That gives no context for people who access links from a list.

• Readability. Hyperlink addresses can sometimes be made up of long strings of letters, numbers, and symbols. Listening to links like these read out loud is arduous. Hyperlinks should use common terms and language instead of just stating the web address.
• Distinctiveness. Clearly identify links. This means they should either be underlined or in italics instead of relying on color to distinguish them from standard text.

Multimedia

There are many ways in which the accessibility of multimedia content can be improved. In this area, software and machine-learning technologies are rapidly improving to provide efficient and automatic services such as auto captioning.

• Video. For people in the deaf community or for those hard of hearing, captioning and transcripts can provide synchronized text when viewing a video or a transcript text file that can be read separately. Modern software has allowed the captioning process to be done automatically as well as being able to identify other non-verbal information by identifying when music or laughter occurs on screen.
• Audio. Text versions of any audio files should be made available.
• Animations. Some people with cognitive disabilities find animations or other on- screen movement to be excessively distracting. This being the case, all site animations should include an option to disable or pause them.

Forms

Since online documentation or forms feature prominently on many government as well as nongovernment websites, it’s important that they be properly designed. Inaccessible forms was one of the elements specifically mentioned in the 2015 class action accessibility complaint filed against the shoe manufacturer Reebok.

These factors need to be considered in all form designs:

• NavigationThe user should be able to logically tab through each of the fields in the document.
• Instruction and labeling. Instructions related to form fields are typically locked to prevent editing of non-field content. Unfortunately, that makes the instructions related to those form fields unreadable to a screen reader. All form fields, checkboxes, or dropdown menus should be clearly labeled and capable of being read by screen readers.
• Time-outs. Many online forms incorporate a time-out feature for security purposes. Unfortunately, this can leave users navigating by keyboard or those using screen readers insufficient time to complete the form — even if they complete it in one continuous session. Form pages should be designed to allow the user to extend the time to complete a form when necessary.

Bringing It All Together

It is simple to avoid web accessibility issues by having a strong familiarity with the WCAG 2.0 standard and by following practices and checklists that address the most common accessibility issues. Another key point to remember is that accessibility is better addressed in the earliest stages of design and development rather than being dealt with as an afterthought so that code needs to be retroactively changed.

It is also important to remember that once a website or app has been released — even if it has been carefully designed and accessibility testing has checked for ADA compliance — that ongoing maintenance is still required. Ongoing maintenance will ensure that accessibility issues don’t crop up from site updates or changes in the way that people access the web via new types of assistive devices. Every organization should have a person with a clearly defined role assigned to routinely check for accessibility issues and to quickly address them if they arise.

At the Bureau of Internet Accessibility, we offer a free graded report of your website accessibility. Get an obligation free automated WCAG 2.0 scan of your website.

If you would prefer to speak with our team directly, please feel free to email us or call us at, 401-830-0075, we would love to hear from you!

Additional Resources You May Be Interested In:

Are You At Risk? Take Our Web Accessibility Quiz

Download Our Website Accessibility Checklist

Get A Free Automated WCAG 2.0 Scan Of Your Website