Applied Accessibility

A close-up of call buttons on a gleaming, metallic elevator. — Photo by Jason Dent.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Required Reading:
“Accessibility” by the World Wide Web Consortium (W3C).
(1,069 words / 9 minutes)

While reading, think about:
1. Why is accessibility on the web important?
2. Who benefits from accessible websites?
3. What are examples of web accessibility?

Through Free Code Camp’s Applied Accessibility Challenges, you’ll learn how to create websites for users that rely on assistive technology such as screen readers, voice recognition software, or keyboard-only navigation. In addition, accessibility also benefits users in rural areas or developing nations, who may face greater barriers to entry to the web. When we design websites with accessibility at the forefront, we design overall better, more robust, high-quality websites.

Here are three broad principles of designing with accessibility:

Have well-organized code that uses appropriate markup
Ensure text alternatives exist for non-text and visual content
Create easily navigated pages that are keyboard-friendly

Ways to add accessibility

Alt text

You’ve seen alt text before, but you might not have fully understood the purpose. For users with screen readers, the alt text is read aloud to describe the image. Here’s an example of alt text:

<img src="teamRetreat.jpeg" alt="People bowling">

There are only two times an image wouldn’t include alt text. The first is if the image is purely decorative; the second is if the image is described somewhere in the page’s text content.

When deciding what to include in the alt text, consider the following:

Keep it as short as possible (without sacrificing important information).
Don’t be redundant. There is no need to say “Image of…” or “Photo of…” within the alt text.
If you need to be specific to understand the image, be specific. In the example below, the first photo’s alt text doesn’t tell us why that image is important. In the second image, we understand more about the purpose of the image.

Example of good alt text versus bad alt text — Read more in Writing Effective Alt Text, from the University of Leicester

Use headings to demonstrate hierarchical relationships

Proper structure and labeling of content can go a long way in helping those with screen readers understand the order of content. Screen readers can be set to only read headings, so the user can jump to the section they’re searching for on the website.

When creating content for your website, think about how you can headings effectively and semantically to demonstrate relationships between content. This means picking headings for purpose, rather than just for aesthetic reasons. If you need to adjust size purely for aesthetic reasons, use CSS instead of an HTML heading element.

Note: h1 should only be used once per page. Think of h1 as a page heading, rather than a content heading. Additionally, h1 is used by search engines to understand a page’s topic.

Audio and video

Audio and video content must include a text alternative to be accessible to people who are deaf or hard of hearing.

If you use a video, make sure it has synchronized captioning, or provide a link to a transcript.

Audio content also needs to include the controls attribute, which supports keyboard-only navigation. Check out the example from Free Code Camp:

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>

CSS

Use CSS to visually hide content meant only for screen readers. When you present information visually, but need to present a textual alternative, consider using the CSS rule for screen-reader only.

 .sr-only {
    position: ;
    left: ;
    width: ;
    height: ;
    top: auto;
    overflow: hidden;
  }

High contrast colors

When elements use colors that are too similar, it can be impossible to distinguish between them. Check out this Color Blindness Simulator to see all the ways a single image can be perceived.

Which text is easier to read, the first example of light-gray text on a light-gray background:

The New Media Institute (NMI) is an interdisciplinary academic unit dedicated to exploring the critical, commercial, and creative dimensions of emerging technologies. The NMI is dedicated to the teaching and training of new media professionals and is committed to providing non-technical students with technical skills and knowledge.

Or dark-gray text on a light-gray background:

If you’re unsure if your color choices achieve the WCAG-recommended contrast ratio of 4.5:1, use a Color Contrast Checker, such as this one by Monsido.

Do not rely solely on color to indicate interactivity or other important information.

Links

Screen-readers have the option to just read headings, as well as other elements such as links. If your link uses preview text such as “Click here,” that tells the user nothing about the link. Instead, be sure to wrap your link tags around something descriptive about the link.

Which link preview text better describes the purpose of the link?

Register for classes by <a href="https://nmi.cool/apply/">clicking here</a>, before the end of February.

< href="https://nmi.cool/apply/">Register for classes</a> before the end of February.

Load time

If your site takes too long to load, users won’t stick around. In rural or developing areas, your site may simply not load at all.

We’ve talked about this before, but make sure your images are sized appropriately for the web. Do not use, technically speaking, ginormous images.

Check out this refresher on resizing images for the web.

Resource roundup

Interested in learning more? Check out this great list of accessibility tools for designers and developers.

Check out this article on “Standards for Writing Accessibly” for easy ways to improve your writing for the Web.

Want to learn more about how screen readers interact with websites? Check out “I Used the Web for a Day Using a Screen Reader” and test out screen reading technology for yourself.