Introducing Web Accessibility & Why it Matters

Sr. Developer Brittany Ansay diligently working.

Internet users, unless they have a disability, don’t necessarily think about accessibility. As a web developer, it’s very important to understand what accessibility means and how to build websites that are accessible to all end users. The Americans with Disabilities Act (ADA) was passed in 1990 and is a civil rights law that prohibits discrimination against people with disabilities. Federal agencies are particularly important to keep accessible, as identified in Section 508 of the Rehabilitation Act. 

Disability types include and are not limited to: Physical, Auditory, Cognitive, Visual, Neurological, and Speech.

Measuring accessibility comes in a few forms. The primary rule is to build with WCAG (Web Content Accessibility Guidelines) compliance in mind, which was released by the W3C (World Wide Web Consortium). WCAG is a set of website accessibility guidelines that have different versions of standards, namely measured in three tiers: A, AA, and AAA. The more A’s the higher the compliance. The first standard, version 1.0 which was published May 5, 1999, was revolutionary at the time. For web accessibility today, WCAG version 2.1 is the norm.

How Blennd Addresses Web Accessibility

The documentation and information around keeping sites compliant using WCAG, ADA, and Section 508, is robust and lengthy. At Blennd, we do not use just one tool but several tools to check accessibility of our websites. In sum, below is a short list / summary of what matters the most when we think about the web and how to ensure users of all backgrounds and capabilities can access information on a website.

Color Contrast Audit

WCAG 2.1 requires text/background color contrast ratio to meet a certain standard. What this means in sum is that text must be legible to anyone with a visual impairment. Text on images require the images to be darkened/lightened to ensure that the contrast is high enough for end users to read. Light gray text on a white background, for example, usually does not pass the ratio. Designer tools like color-contrast checkers, alongside browser tools for web developers, allow web development to test and guarantee that color contrast is high enough. 

Example of color contrast text on background barely not passing WCAG AA.

Example of a color contrast barely failing a contrast audit.

Example of color contrast text on background passing WCAG AA.

Example of a color contrast barely passing the audit.

Chrome also has a Color Contrast Checker Chrome Extension that can be useful in terms of providing a summary of color contrast ratios on an entire page.

Another thing to note about usage of color. It’s a little dangerous to use color in a way that identifies important information or compare information without labels or an alternative way of understanding the data. An example would be if you imagine the data to be black and white, or desaturated. Can users still understand the information provided if all colors were grayscale? These are all important questions to ask while strategy and design are conceived.

Document Outline & Heading Audit

When we think about websites being informational, this helps when it comes to understanding document outlines on the web. All major block elements like body, navigation, and sectional markup need meaningful headings. This enables users who are physically, visually or cognitively impaired be able to jump to sections that are meaningful to them. Document outlines look a lot like roman numeral outlines or indexes. HTML headings, are numbered 1-6 and provide structure to a web page. Not adding meaningful headings to a web page hinders efficient usage of the page. 

Example of a poor document outline:

Example of a poor outline structure of a site with untitled sections.

Example of a strong document outline:

Strong document outlines in the HTML give users the ability to easily navigate through page content without having to visually see each section. If designs don’t account for headings on sections (like having a header for the navigation bar as an example…) then this is where the CSS class “screen-reader-text” comes into play. Chrome has an excellent Document Outliner Extension that helps break down sites into outlines.

Alt Text on Images Audit

Imagery takes up major bandwidth and real estate on websites typically. They are part of the story and user experience that we don’t want to take away from someone with visual or cognitive impairments. Describing imagery is very important when it comes to being accessible and ADA compliant. All images in HTML have an alt attribute and this alt text should describe the image. If it’s a picture of a dog, sitting in a red truck, parked outside a green pasture with corn… Then the alt text of the image should describe it so that someone not actually looking at the image can imagine the message the image provides to the content. Missing or empty alt text images, or alt text that does not properly describe the image, are all major flaws to many websites on the web and always something to consider.

There are many tools that allow designers and developers to audit websites for alt text. Chrome of course, has an easy-to-use extension called Image Alt Text Viewer which essentially enables you to turn on image alt text while viewing pages as to see if it’s missing, empty, or non descriptive.

Videos and Captions

Whether it’s a YouTube or Vimeo video, or whether it’s an MP4 or WebM formatted video file that is explicitly hosted on a website, all videos should have the ability for users to read or listen to captions. Captions describe the scenes of the video, providing written context to the video content. For users that have any kind of disability but especially auditory, cognitive, and visual impairments… Captions on videos are key.

Tabbable Content & Keyboard Navigation Audit

For people with any kind of disability but especially physical, visual, cognitive or neurological, having tabbable content is paramount to user experience. Hitting the TAB button on a keyboard on any website should enable users to navigate all the links of a website and trigger interactive functionality or click events by hitting ENTER. The first option while tabbing and using keyboard navigation should prompt user to “Skip to Main Content” so they don’t need to go through each menu/navigation item for every page. Using :focus states just like :hover states are used, also helps if users still have some visual capabilities and can see what links are currently selected. It’s important to realize that not all web users are using a mouse or trackpad to navigate the web, and that many are using keyboard shortcuts to jump around and gain access to information or services.

Screen Reader Text Audit

All browsers come with built-in screen reader text tools. The purpose of ensuring all text is readable by a screen reader is to ensure that users with any kind of disability can have the computer read the content and that no content is missing from screen reader accessibility. Ensuring links have a description beyond “Read More” is giving users more information to the link and where it goes, is one example.

Using Aria-Labels Audit

Using the aria-label attribute on HTML enables more specification on the purpose of content especially for interactive components. Aria-Labels are mostly used for components that are triggered with JavaScript, like sliders with buttons, tabs, accordions, modals, and so on. There are many usages to aria-labels that we won’t cover here, but essentially the labels can manage identifying the “state” of a module, like if it’s open or closed. They are typically used on buttons that trigger an event. All interactive components get assessed whether aria-labels are being used and if their state and label is identified.

In Conclusion

Building websites that meet ADA compliance standards and are measured against WCAG 2.1 are better websites. Not only do you reach greater audiences and are compliant with Section 508 of the Rehabilitation act, alongside not discriminating against users with disabilities, websites perform better. Being WCAG 2.1 compliant is excellent for SEO for all the reasons listed above. Google and other search engines take note of whether websites are up-to-speed with accessibility in their own ways and tools like SEMRush identify all instances where ADA Compliance can be achieved if it’s missing.

When all is said and done, make sure your website is accessible, and grow the greater good on the web.

Stay in the know.

Drop your email to up to date with our latest projects and industry insights.