Accessibility with Jenn

Web Accessibility 101

Published on

Some may wonder, why make sites accessible?

Because the internet is for EVERYONE.

Accessibility needs can be:

  • permanent
  • temporary
  • situational

Accessibility ensures:

  • equal access for all users
  • compliance with best coding practices
  • a better constructed product

The Six Core Items

These six items are a great place to start and not just for websites, but documents, emails, social media all can benefit from thinking about and doing them.

Headings

Headings are not just different sized lettering. Headings have semantic meaning. They give extra value and are often used to build outlines or navigation.

This page has one <h1>, two <h2>, and six <h3>. The lower the number, the higher the semantic value. The <h1> should be the main point of the page or document. It is common for the <h1> to be the title of the page.

So many websites and emails have links that entice you to click with “click here” but where does it go? Are you going to be Rick Rolled? Will it be a shocking image or a computer virus?

“Click here” gives no indication of where you are going. Give people a map, have descriptive link text.

Lists

HTML has several elements for lists. <ol> is for an ordered list (e.g. steps in a process) and <ul> for unordered lists (e.g. shopping list). The <li> is used by both for these list elements. There is another special list element, <dl> for definition or descriptions lists (e.g. glossaries). It uses <dt> to specify the term and <dd> for the description, definition, or value of the term.

It is important to use the native HTML list elements as screen readers will announce the number of items in a list and provide other features to interact with it.

Color Contrast

Color contrast is the difference between an item in the foreground and the background. Bigger items can have less contrast and still be visible. There are many color contrast checkers online.

For text, aim for 4.5 to 1. Buttons and other interactive elements need to be 3 to 1.

Captions & Transcripts

An easy test to determine if you need captions or transcripts for your multimedia item, does it have sound? If it does, you need captions and/or a transcript.

Captions are on videos. They need to include background sounds, e.g. birds chirping, audience gasp, crickets, squeaky door. These sounds are often in square brackets [].

Transcripts are required for audio and should be included for video. They need to include background sounds and also label who is speaking.

Alt Text

Does your image have meaning and add to the page? Then it needs alt text.

Alt text does not need to be a novel. Quickly describe the image. A picture is worth a thousand words but no one has the time to sit through all of that. Aim for a sentence or two. Was it a kitty hanging from a branch with the message “Hang in there”? Is that enough text to describe to someone on the phone what the image was? If so, PURR-FECT.

If you can remove the image from the page without losing anything, it is a decorative and should have blank alt text, alt="".

Summary

Everyone benefits from accessibility. Color contrast helps glare when working outside. Captions are great for watching videos in bed. Good link text stops Rick Rolls. Transcripts let you skim or preview videos. Headings, alt text, and list elements are used by search engines.

Be selfish, practice accessibility for you. You never know when you will need it.