An Accessibility
(A11y*) Adventure

* A11y is shorthand for accessibility, and accessibility has eleven letters—hence the 11.

A linear illustration showing four elements in a row: a hand pointing, an eye, an ear, and a brain with a lightning bolt inside of it.

Why is accessibility important?

Accessibility makes the internet better for everyone—people with visual or hearing impairment, people with mobility or sensory issues, and everyone else too!
‍
Below are just a few ways you can make your website more accessible.

Color is great at enhancing communication … until it’s not.

Q. Which of these examples has enough contrast to meet accessibility standards?

Cats

Tiny, fluffy agents of chaos. One minute they’re purring angels, the next they’re knocking your glass off the table like it insulted their ancestors.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Pigeons

City birds with zero personal space and big mafia energy. They strut like they pay rent and bob their heads like backup dancers.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Raccoons

Nocturnal bandits with grabby hands and no shame. They dig through trash like it’s a treasure chest and stare you down like you’re the one trespassing.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Squirrels

Caffeinated acrobats with fluffy tails and trust issues. They bury snacks, forget where, then blame gravity.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reveal answer Hide answer

Only Blue passes WCAG accessibility guidelines.

It is very hard to subjectively determine whether color combinations have proper contrast, so it is always good to use a contrast checker.

Bonus tip – Be aware that placing text over images is problematic and is best avoided.

Correct heading order gives your content structure and makes it easier to understand.

Q. Can you correctly set the hierarchy of this list of cheeses? Use the arrows to indent each line. (Note: They are already in the correct vertical order.)

Types of cheese

Blue

Arrow pointing to the right

Roquefort

Arrow pointing to the right

Stilton

Arrow pointing to the right

Swiss

Arrow pointing to the right

Raclette

Arrow pointing to the right

Emmentaler

Arrow pointing to the right

Goat

Arrow pointing to the right

Chévre

Arrow pointing to the right

Garrotxa

Arrow pointing to the right
Illustration showing two cartoon characters smiling and waving: A macaroni noodle and a triangular wedge of cheese.
Reveal answer Hide answer

Yes, this is hard unless you are a cheese expert!

Webpages usually do a pretty good job of showing hierarchy visually through scale and visual context. But, hierarchy is more difficult for unsighted people. Correctly labeling headings helps people using screen readers understand your content.

Here is the list showing the correct hierarchy and corresponding HTML heading levels.

<h1> Types of Cheese
         <h2> Blue
                   <h3> Roquefort
                   <h3> Stilton
         <h2> Swiss
                   <h3> Raclette
                   <h3> Emmentaler
         <h2> Goat
                   <h3> Chévre
                   <h3> Garrotxa

Words matter, even with video.

Captions are crucial for anyone with a hearing impairment. For others, it is a valuable tool for consuming video at any place and any time. That person next to you on the bus thanks you! And, who hasn’t ever turned on captions while watching a British murder mystery?

Bonus tip – Always provide controls so that videos can be stopped or paused.

See transcript Hide transcript

Charlie: Make a happy website. (Both present huge smiles to the camera. Plastic bottle cap hits table.)

‍Claire: Make a sports website. (Hands pound table forcefully.)

‍Claire: Make a monster website. (Bottle falls with a thud. Fists pound table chaotically.)

‍Off-camera: Make a dangerous website.

‍Charlie and Claire: UGH! GRR! (Pounding on table continues.) (Charlie giggles.)

‍Off-camera: Make a friendly website.

‍Charlie and Claire: (Fingers tap thoughtfully on the table.)

‍Charlie: BAM! (Giggles. Both blow air through fingers.)

‍Off-camera: Make a musical website.

‍Charlie and Claire: (High-pitched soprano vocals mixed with deep growls and table pounding.)

‍Charlie and Claire: (Staccato-like scats imitating a piano.)

‍Charlie: Make an angry website.

‍Charlie and Claire: (Grrrr, snort, angry breathing, table pounding.)

‍Charlie: I want more breakfast! (Both giggle.) Male voice off-camera: You want more breakfast?

‍Off-camera: Well, do you think you guys are ready to peddle along home?

‍Claire: No.

‍Charlie: (Table pounding) I want more breakfast!

A cartoon style illustration of a computer screen and keyboard. The screen has a smiling face and arms are reaching out from the sides of the screen to type on the keyboard.

Properly enabling keyboard navigation helps a wide range of users.

Keyboard navigation is helpful for people with physical disabilities (either temporary or permanent), those who prefer it for efficiency, and those who use it with assistive technologies like screen readers.

Everything interactive on the page—like links, buttons, and forms—needs to be reachable and usable by pressing the Tab key and other basic keys. Keyboard navigation also includes “focus”—visual indicators that show clearly which part of the page is selected.

To make a webpage easy to use with a keyboard doesn’t just happen. It requires proper behind-the-scenes code.

Try out keyboard navigation on the test page below.

Use your tab key to move through all the interactive elements on the page. You can also use shift+tab to move back up the page.

‍To start the process:

  1. Click anywhere on this numbered list. (You won't see anything happening, but this will start the keyboard navigation process.)
  2. Press your tab key. This will take you to Randall's head, which will be outlined in blue.
  3. Use the tab key to continue tabbing through the demo page. You will see other menu items and links highlighted as you tab to them.
  4. If you tab to something that's of interest to you, click the Return key to go to that page.

ABOUT

CONTACT

Accessibility morsels

At CodeGeek, we love sharing our knowledge so that the web continues to become a better place to be—for everyone.

Our blog offers insights about website best practices, hosting, our latest projects, and more. Below are two featured posts about web accessibility—and how making a website more accessible is truly in the details.

The back of a woman's upper body and head looking at a museum wall with several photos on it.

How to improve image alt text: 5 questions to ask

Writing good alt text for images involves maintaining a careful balance of detail and brevity. Check out our 5 questions to ask before you hit that “publish” button.

Read the post

The front of a green City of Fort Collins Transfort Max bus.

Building an accessible transportation website

Watch Ron and Kevin’s recorded WordPress Accessibility Meetup presentation about how CodeGeek made Transfort’s complex bus routing tables accessible.

Watch the presentation

Keep learning on the CodeGeek blog
A curved digital billboard displaying a three-dimensional image of a Calico cat so it appears to be extending out of the billboard frame.

Make your imagery count for all users with good alt text.

Imagery is a key part of your site. Make sure your imagery can be “seen” by all users by using effective alt text.

Q. Which of the alt text examples below uses best practices?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reveal answer Hide answer

The first example is the more appropriate image description. Why? Alt text descriptions should stick to accurately describing what is shown in the image. Think: “What is needed to visualize the image?”

Any greater meaning or context of the image—like the second example is conveying—should be communicated by the surrounding content.

Bonus tip – If an image is purely decorative, the alt text should be empty (e.g., <alt=“”>).

Take your image alt text to the next level by asking these five questions.

Keep animations subtle and purposeful.

Animation can be difficult for various users, such as those with PTSD or sensory issues and those susceptible to seizures.

Here are some animation best practices:

  • Only use animation when it is relevant and necessary.
  • Make sure any animations can be stopped, paused or hidden.
  • Skip or minimize scaling and zooming, parallax, spinning, multi-speed & multi-directional movement, dimensionality or plane shifting, and peripheral motion.
  • Avoid flashing animation.
Stylized cartoon dog with square-shaped body, large orange eyes, and prominent ears.Simple illustration of a bulldog with animated blinking eyes.Pause GIF Play GIF