Exploring Web Accessibility: a11y

The web is a great big place with lots of exciting things to explore but did you know that there is a population of people who need accommodations to explore the web for critical tasks or just for entertainment?

According to the Bureau of Internet Accessibility

In the United States, an estimated 25% of adults (61 million people), and 40% age 65 or older, have a disability.

It is our job as web developers to create an accommodating web experience that is inclusive for everyone to benefit from.

What is Web Accessibility

A11y is short for web accessibility. This is the practice of using known techniques to make websites accessible to people with disabilities that include but not limited to vision, hearing, mobility, and cognitive disabilities.

Web accessibility standards are governed by the WCAG and have established the following A11y levels:

• A rating: Limited level of web accessibility and does not meet acceptable web accessibility standards.

• AA rating: Recommended level of web accessibility.

• AAA rating: Excellent level of web accessibility.

Here is a great tool that provides a detailed checklist for web accessibility.

Lets look at some important web accessibility topics to explore:

Semantic HTML

Semantic HTML refers to HTML tags that clearly describe purpose and behavior for optimal web accessibility experiences like <table> || <paragraph> || <form>.

These tags have built-in functionality that is very useful for web accessibility technology like screen readers, unlike the tag <div> which can be very vague to understand for developers, users, and unrecognizable for web accessibility technologies.

This is Semantic HTML in action:

<!- Using semantic HTML it is now easy for a screen reader to understand each element and communicate that element to a user ->

<article>
  <header>
    <h1>Web Accessibility</h1>
    <p>The A11y Mission:</p>
  </header>
  <p>Make the internet fun and useful for everyone!</p>
</article>

ARIA

MDN explains:

Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

ARIA gives roles and permissions to give more specificity and context to HTML elements. Screen readers can use this to provide descriptive details about how to interact with these elements.

This is ARIA in action:

<!- ARIA makes the screen reader aware this is a form with a search input to type in ->

<header>
  <h1>Search:</h1>
  <nav role="navigation">
    <form role="search">
      <input type="search" name="search" placeholder="Search" aria-label="Search for something exciting">
    </form>
  </nav>
</header>

<!- Now a screen reader may properly announce to the user to type in the input to search ->

Tab Navigation

Tab navigation is a technique of understanding how keyboard-only and assistive technology devices navigate through tabbable elements on a web page. Making all important elements able to navigate with a Tab Key or the Shift + Tab Keys is a recommended practice.

This is Tab Navigation in action:

<!- Making use of tabIndex attribute helps to make sure this important div is not missed by assistive technology devices ->

<div tabIndex="0">Very Important Info Here!</div>

Color

It also a great practice to avoid really experimental color palettes and combinations that alienate color-blind users like the red/green color scheme (Red/green color blindness is the most common type of color blindness).

See recommended WCAG guidelines for the best color contrast schemes for the best web accessibility experience.

Screen Readers

A Screen Reader is assistive software that parses through web pages and converts text into synthesized speech. Many people who are blind or have visual disabilities use screen readers to read and navigate the web.

It is best to know popular screen readers like ChromeVox, JAWS, and VoiceOver for Mac to design the most accommodating web experiences.

Let's chat about a11y

We explored web accessibility and how you can make your web projects more inclusive. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with web accessibility.

Happy Coding,
Terry Threatt