Web Accessibility Guidelines and Standards

Reading Time: 7 minutes

Overview:

The Web plays an increasingly crucial role in various aspects of life, such as education, employment, government, commerce, health care, recreation, and beyond. Ensuring accessibility to the Web is of utmost importance, as it promotes equal access and opportunities for individuals with diverse abilities. The United Nations Convention on the Rights of Persons with Disabilities (UN CRPD) recognizes access to information and communication technologies, including the Web, as a fundamental human right.

In essence, Web accessibility refers to the design and development of websites, tools, and technologies in a manner that enables people with disabilities to use, comprehend, interact, and communicate effectively with the Web. Unfortunately, numerous websites and tools still incorporate accessibility barriers, making it challenging or even impossible for some individuals to utilize them fully.

Web Accessibility Guidelines

Several regulations, standards, and legal guidelines govern web accessibility. These standards aim to ensure that all information, whether in digital or print form, is accessible to individuals with disabilities. Notable guidelines include:

• Americans with Disabilities Act (ADA):

  The ADA, which was passed in 1990, serves as a civil rights statute that forbids any form of discrimination against people with disabilities across all aspects of life, including electronic and information technology like websites. These protections are applicable to both the public and private sectors, encompassing local and state governments, businesses, and nonprofit organizations.

• Rehabilitation Act – Section 508:

  Section 508 is a federal law that mandates accessibility for electronic and information technology used or developed by the federal government. It requires federal agencies and departments to make their websites, web apps, electronic documents, and software accessible to people with disabilities.

• Web Content Accessibility Guidelines (WCAG):

  WCAG 2.0 and WCAG 2.1 are widely accepted guidelines for ensuring web accessibility. While not mandatory as of January 2020, organizations can adopt WCAG 2.1 to improve legal compliance and make their web content more accessible. WCAG guidelines are often referenced for ADA or 508 compliance.

Under four principles—perceivable, operable, understandable, and robust—WCAG 2.0 and WCAG 2.1 are composed of 12-13 guidelines. Within each guideline, there are three levels of conformance: A, AA, and AAA.

What happens if my website isn’t compliant with these regulations and standards?

Failure to comply with web accessibility regulations and standards can have serious consequences:

• Americans with Disabilities Act (ADA) violations can result in fines, including $55,000 to $75,000 for first-time violations and $150,000 for repeat violations.
• Ignoring Section 508 can lead to formal complaints and civil lawsuits.

Tools and Plugins Available for Testing

There are various tools and plugins available to assist in testing web accessibility compliance. Some popular options include:

1. Lighthouse in Chrome Dev Tools: Open-source tool available as a Chrome extension.
2. WAVE: Open-source tool that evaluates web accessibility directly from the browser.
3. AXE: Open-source accessibility testing tool provided by Deque.
4. A Checker: Open-source accessibility checker available online.
5. A11Y Color Contrast Accessibility Validator: Open-source tool for checking color contrast accessibility.
6. Dynomapper: Paid tool offering accessibility testing and site mapping.
7. SortSite: Paid tool that provides comprehensive accessibility checks.
8. Web Accessibility Checker: Paid service that offers detailed accessibility reports.

Additionally, if you have a WordPress website, you can install an ADA compliance plugin to assist with accessibility.

How to make the website compliant with these regulations and standards?

• Title III of the Americans with Disabilities Act (ADA) requires the website to achieve WCAG 2.1 Level AA (mid-range) compliance.
• The 508 standards meet by following the WCAG 2.1 Level A & AA Success Criteria.So basically you have to make sure the website you are developing meets the WCAG 2.1 A & AA level success criteria to conform with both ADA and 508 standards.
  Below are some of the points you need to ensure your website meets to be compliant with these standards:

Use of Color

1. Avoid relying solely on color as a visual cue. For instance, when designing forms that indicate required fields by highlighting them in red, it is essential to provide an alternative method for conveying this information to individuals who cannot perceive the color red or rely on screen readers that do not interpret colors.
2. For text links, there should be a contrast ratio of 4.5:1 (for small text) or 3:1 (for large text) against their background.
3. Test foreground and background colors using color contrast testing tools to ensure accessibility and choose appropriate contrasting color palettes.
4. Avoid using light gray for text. Always.
5. Buttons should have a text color that contrasts with the background color.

Links

1. Color should not be the only means of identifying links. If color alone is used, ensure that the surrounding text provides a contrast ratio of at least 3:1 and consider adding underlines or outlines on hover or focus.
2. Links must be visually distinguishable from non-link text.
3. Prefer using descriptive link text over generic phrases like “Click here.”
4. Utilize ARIA aria-labelledby to associate a “Read more” link with the article title.
5. Provide skip links to allow keyboard users to navigate directly to the main content or navigation.
6. Keep in mind that mobile devices lack a hover state, and this applies equally to touch screens.
7. There is a link available to a disability-accessible page for downloading the plug-in.

Screen Reader Reminders

1. Ensure that properly coded links are announced as links by screen readers.
2. Screen reader users frequently encounter links in an out-of-context manner, either by navigating through the links or by employing a keyboard command to access a list of all the links present on the page.
3. The most effective approach is to ensure that all links retain their meaning even when taken out of context.
4. An appropriately coded button is announced as a “button” in screen readers.
5. Skip links assist screen reader users in bypassing navigation menus and directly accessing the main content whenever a new page is loaded. This prevents the need to read the page from the beginning again.
6. Screen reader users rely on buttons to activate forms.
7. Properly assigning roles and properties to status messages ensures accessibility for blind and low-vision users. For instance, when a user enters incorrect text in the “Postal Code” input, a message appears above, stating “Invalid entry.” The screen reader announces “Invalid entry” or “Postal code, invalid entry.” Additionally, after submitting a form with the message “Your form was successfully submitted,” the screen reader conveys the same message, offering confirmation and a smooth user experience.

Content Structure & Semantics

1. Every page should have a title.
2. The first heading on a page should be an H1 heading.
3. Use consecutive headings and avoid skipping hierarchical levels.
4. Utilize landmarks (HTML5 landmarks and ARIA equivalents) to designate content areas.
5. Ensure that iframes have valid and meaningful <title> attributes.
6. Opt for readable and easily visible text sizes, such as 16-18px for navigation links and 14-16px for regular content.
7. Apart from the header section, it is recommended to align the content to the left. This practice benefits dyslexic users, individuals with poor eyesight, and accommodates the natural left-to-right reading pattern. Headings and subheadings can be centered or left-aligned based on design considerations.
8. Breadcrumb navigation is ideally aligned to the left side of the page.
9. Preserve the capability to magnify fonts on mobile devices.
10. For text input fields that serve as form controls, utilize the LABEL element.
11. In cases where text is unavailable, utilize the title attribute as an alternative.
12. With the exception of captions and images of text, it is possible to resize text up to 200 percent without the need for assistive technology, ensuring that no content or functionality is lost.
13. Incorporate any specific instructions within field labels on forms.
14. Ensure that data tables appropriately identify column and row headers by utilizing the <th> tag.
15. Tables that are strictly used for layout purposes should not include header rows or columns.
16. Table cells are accurately associated with their respective headers using appropriate HTML attributes such as “id,” “headers,” “scope,” and/or “axis.”
17. Avoid limiting the view of content and instead utilize CSS to enable both landscape and portrait orientations. Alternatively, employ show/hide controls to facilitate access to content in different orientations.
18. Ensure that line height (line spacing) is set to a minimum of 1.5 times the font size. Additionally, provide spacing following paragraphs that are at least 2 times the font size. Keep the letter-spacing (tracking) no lower than 0.12 times the font size, while also setting the word spacing to a minimum of 0.16 times the font size.
19. Whenever an input error is detected, it is crucial to communicate the error to the user using descriptive text. Even if the page’s coding automatically adjusts an input value to fit within the permissible range when it is too high or too low, the user’s original error still needs to be conveyed to them.
20. Ensure that web pages include complete start and end tags for all elements.

Images & Media

1. Every image, video, audio file, or plug-in should have an appropriate alt tag.
2. Complex graphics should always be accompanied by detailed text descriptions. The alt descriptions should effectively convey the purpose and meaning of the objects depicted.
3. For screen readers, image links should provide a descriptive description of the link destination.
4. Providing a warning to both visual and non-visual users when a link will redirect them to an external website is considered a courteous practice.
5. Alt text should be concise, limited to a maximum of 250 characters. Avoid using phrases like “image of,” “graphic of,” or “picture of” in the alt description.
6. Include alt text for images within Word and PDF documents.
7. Ensure that the page does not feature continuously flashing images.
8. For images that are purely decorative or duplicative of the conveyed textual content, consider using alt=””, ARIA role=”presentation”, or implementing them as CSS background.
9. Refrain from using images in place of text.
10. Closed captioning is mandatory for videos.
11. Videos should include transcribed dialog, narration, and other significant sounds.
12. Podcasts are required to offer a transcript.
13. Offer a means to pause, stop, or automatically hide media content that plays automatically.
14. Decorative graphics with no other function should have empty alt descriptions (alt=””).

• Add captions to videos
• Add audio descriptions
• Create text transcript
• Instead of embedding the video into web pages, generate a link to the video
• Incorporate a link to download the media player
• Include an extra link to access the text transcript for videos
• Ensure that the page includes alternative links for the Image Map

Accessible Documents and Keyboard Tab Navigation

Keyboard navigation becomes essential when no mouse is available. It is vital to ensure that links contain appropriate focus states and adhere to the reading order of the DOM. Test this by using your keyboard’s Tab key. Each tab should lead you to a link with a visible focus state, such as a border or a border with a background color.

Moreover, it is crucial to make PDF documents, PowerPoint presentations, and Word documents accessible. When creating documents, look for options to save them as accessible documents in the settings.

Keep in mind that implementing these changes may impact your website’s layout and functionality on certain browsers. Therefore, conduct thorough testing after applying these modifications to ensure everything functions as expected.

An Innovative Solution

If you are looking for an accessible website, then it’s smart to hire a web design agency like Sigma to help you with ADA or 508-compliant web design services.