Accessibility

Summary

Accessibility in Mind

Accessibility, commonly shortened to a11y, may seem foreign at first but with some practice can become a part of day to day development. When building with accessibility keep in mind there are many different types of web accessibility, from visual to screen readers. Also, as you become more comfortable with creating accessible websites, you may come to realize, as I did, that accessibility and beautiful websites can go hand in hand.

Visual

Color contrast, typography, spacing, and boldness contribute to visual accessibility. When building your website be sure to test color contrast, choose a readable font, make headers bold, and set readable letter-spacing and line-height.

Screen Readers

Keep in mind what it would be like to navigate your website with a screen reader. Are all the links easily accessed? Can you tab through the content? Do all of your links and buttons have aria-labels if they need them? Keep these questions in mind as your read through some of the resources bellow.

Resources I've Found Helpful

A11y By Design Article Aria-label Article Form Labels Article Form Controls Article Images Article Contrast Guide Article Pa11y Tool Contrast Ratio Tool A11y Project Resources Article Extend Semantic HTML Article VO Shortcuts Cheat Sheet NVDA Shortcuts Cheat Sheet

Cheat Sheet

Attributes

Add an aria-label a link that doesn't have descriptive text

aria-label="Explain what the screen reader should read"

Aria-expanded tells a screen reader if an element, such as a hamburger menu, is open or closed

aria-expanded="true"

Always have an alt attribute in an img tags

alt="Explain what your picture is showing"

Hide excessive or decorative elements from a screen reader

aria-hidden="true"

Toggle Aria Attribute
For changing aria attribute values when a user interacts with an element such as an FAQ toggle or collapsed navigation

export const toggleAria = (el, ariaAttr) => {
  let attr = el.getAttribute(`${ariaAttr}`);
  if (attr === 'false') {
    attr = 'true';
  } else {
    attr = 'false';
  }
  el.setAttribute(`${ariaAttr}`, attr);
};

Accessibility Projects

Test a website

Choose a website you use the most, and use your keyboard to navigate through it. Then use a screen reader, Voice Over and NVDA are both free options, to go through the website. This will help you understand how content should be structured and shown when building an accessible website.

Create an accessible element on CodePen

Choose a website feature such as a form, a hamburger menu, an FAQ section etc and build it out in CodePen. Use semantic HTML, then style it with passing contrasting colors, and a readable font. Make sure to add accessible attributes such as aria-labels on links and alt tags on images.