Extra! Extra! Website Compliance -
Read (Hear or Touch) All About it!

We’ve all heard about website accessibility, but what does it really mean, why does it matter, and how can we design and build accessible websites?

What is Web Accessibility?

Web Accessibility is the inclusive practice of making websites usable for all visitors, including those with disabilities such as blindness, low vision, learning and/or cognitive disabilities, deafness or hearing loss, speech disabilities, and physical disabilities.  It’s important to be passionate about website accessibility because it allows equitable access and interaction to your site’s content and functionality.

To be as inclusive as possible (and avoid legal issues), ensure your website doesn’t prevent anyone from retrieving, navigating, or understanding the information and functionality your website shares. Luckily, there are established guidelines by WCAG (Web Content Accessibility Guidelines) to follow that can help your site’s accessibility.

Understanding WCAG Standards & Guidelines

The most recent WCAG 2.1 standards are based on four main guiding principles known by the acronym POUR: Perceivable, Operable, Understandable, and Robust. Each of these principles has web accessibility guidelines you should reference and apply on your site.

• Perceivable: Information and user interface components must be presentable to users in ways they can perceive. Perceive doesn’t mean just visually; uers who are blind often use screen readers which convert text into speech or braille. The most important and common applications of these guidelines include:
  • Add text alternatives (aka alt text) on non-text items like images, videos, and audio content.
  • Ensure high color contrast. There are free color contrast tools like Stark that check your contrast in Adobe XD before you get into the development phase.
  • Structure content intuitively. Implement proper heading structure and ordered/unordered list elements in the html files.
  • Provide transcripts for audio recordings and ensure video captions are in sync with the audio.
• Operable: User interface components and navigation must be operable.
  • Make it keyboard friendly! Some users don’t use a mouse or touchpad, so all functionality of the content should be operable through just the keyboard. A great way to test this is by tabbing through your site. By tabbing through, you should have all items of the menu/navigation accounted for with focus states.
  • Ensure there’s enough time for users to properly engage. If anything has a time limit, users should be able to extend or cancel it.
  • Ensure it’s easily navigable with clear headings, labels, and page titles that relate to the on-page content. The page content should have focus states and navigate in an order that makes sense. The text for links should also make sense based on the context of the content. Breadcrumbs are also key in helping a user identify where they are within the site.
• Understandable: Information and the operation of the user interface must be understandable.
  • Language should be obvious and programmatically determined.
  • Implement secondary education reading level. In other words, make it easy to read. Avoid big, complicated words that some people might not know or some mechanisms might not be able to define/pronunciate/translate.
  • Consistency is key. Implementing a consistent navigation structure and components with consistent functionality provides a consistent and expected user experience.
  • Use error identifications. Ensure that if an input error is detected, that the item with an error is easily identified and described to the user in text. Labels should also be used when content requires user input.
• Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
  • The HTML should be clean enough to be parsed so assistive technologies can render its contents into a different format. Elements should have complete start and end tages, should not contain duplicate attributes, and should be appropriately nested.

WCAG is considered the go-to guide for building accessible websites for ADA (American Disabilities Act) or Section 508 compliance, but there are multiple levels of compliance to consider.

Accessibility Compliance Levels

There are three levels of compliance (level A, Level AA, and Level AAA). Level AA is the level that most developers aim to meet regardless of their industry. It is also the level that is legally required for certain sites when tasked with making a website accessible. For example, Section 508 of the Rehabilitation Act requires federal agencies to ensure that their information and communication technology (ICT) is accessible to people with disabilities. So government sites need to be at least Level AA compliant, ideally Level AAA, to avoid legal troubles.

When redesigning a website, it’s important to understand the level of compliance the site should have because it will impact the design and functionality. But remember, when in doubt, follow the guidelines for Level AA compliance.

At the end of the day, accessibility is subjective because no one cannot account for every design and development possibility. However, following the guidelines outlined by WCAG 2.1 gives your design and development team the best chance at creating an accessible website.

Web Accessibility Tools

There are many tools (many offering free scans and trials) available to check your accessibility and level of compliance. Some of our favorites include:

• WAVE – Web accessibility browser extension on Chrome, Firefox, or Edge.
• Siteimprove – Industry standard web accessibility checker, especially for OCR (Office of Civil Rights) compliance.
• AccessiBe – AI-powered web accessibility software with source code identification.
• Google Lighthouse – Automated web accessibility tool that runs with javascript.

Hopefully now you have accessed all the necessary tools to design and build an accessible and compliant website. If you want to learn more about accessibility or are looking to partner with a top-tier agency in creating a beautiful, best-practice, memorable, easy-to-use, and accessible website, contact Bluetext to get started.