Accessibility for Content Creators

1. Image Alt Text

In HTML, there’s an attribute called “alt” for image tags. It stands for “alternative text”. Its original purpose was to display the text in that attribute if the image failed to load for any reason. Today, screen readers read that text aloud since an image has no value to a person with low vision or blindness.

If you’re using a content management system like WordPress, look for the “Alternative Text” field. The text you enter into this field should be meaningful. What does “meaningful” mean? This is where human interpretation is important (and difficult for an automated process to implement).

Image Purpose

Think about what the image is for. If it contains text directly related to the content on the page, then use that same text as the alt text. For example, a banner that has balloons and says “Happy Birthday” should have alt text that says “Happy Birthday”. There are those who believe you should describe the image itself, so that the alt text might say “image with balloons and streamers with text saying Happy Birthday”. As you can see this can get quite lengthy, and after a few image descriptions like this, one can get fatigued by the excessive descriptions. In my opinion, the primary purpose of the image is to convey Happy Birthday. Neither approach is wrong, however.

Decorative Images

If an image is for making the page look pretty or to break up blocks of text without contributing any sort of message, then the alt text should be left blank. In HTML you would code it as alt="". In WordPress, leaving the Alternative Text field blank will achieve the same effect. I like that WordPress will automatically code in the alt="" attribute. Not adding any alt attribute at all means the screen reader will just say it’s an image, and the user will have no idea what it’s supposed to be. Images with alt="" will be skipped, saving any sort of confusion.

2. Proper Heading Structure

Most content creators select heading styles (h1, h2, h3, etc) according to what they want the text to look like. Sometimes this works just fine, but often it doesn’t because it means the headings are out of order.

Think of heading styles as having the structure of an outline. For example:

I. Heading One
   A. Subheading
      1. Tertiary Heading
      2. Tertiary Heading
   B. Subheading
II. Heading Two

If you were to mix up the structure of each heading, it might look like this instead:

I. Heading One
   1. Some other heading
   2. A second item in this section
A. Another arbitrary heading style
II. User went back to the big style

Just like how sighted users tend to scan a page instead of reading everything from top to bottom, users with disabilities may want to “scan” the page by having the screen reader jump from heading to heading. It uses the semantic order of the HTML heading tags to determine where to jump to next. If your content has its heading designations all mixed up, it makes for a very confusing experience.

What Proper Structure Looks Like

Heading tags need to be used in sequential order. Before my accessibility training, I was guilty of skipping the sequence to use the heading with the sizing I wanted. This saved me the trouble of having to tweak the CSS so the sequentially correct tag looked the way I wanted. Don’t do it. The extra work is worth the resulting accessibility. Here’s what correct heading structure might look like:

<h1>Types of Desserts</h1>
   <h2>Pies</h2>
      <h3>Fruit Pies</h3>
         <h4>Berry Pies</h4>
            <h5>Strawberry Pie</h5>
            <h5>Blueberry Pie</h5>
      <h3>Cream Pies</h3>
   <h2>Cakes</h2>
      <h3>Vanilla Cake</h3>
      <h3>Chocolate Cakes</h3>
         <h4>Black Forest Cake</h4>
         <h4>Chocolate Mousse Cake</h4>
   <h2>Ice Cream</h2>

In other words, you must use the next sequential heading tag when going up in the header number (h1 —> h2 —> h3) but you can skip numbers when going down because that sequence is finished and you need to start a new one (h4 —> h2).

Side Note About SEO

SEO best practices for headings recommend only one h1 tag per web page. You can use multiple h1 tags and still be accessible to screen readers. It's just less desirable for search engines because it muddies what the page topic is.

3. Reliance on Visual Cues

When it comes to your Call to Action, or CTA, there's usually something you want the user to do, like clicking a button or filling out a form. When telling the user what to do, be sure not to rely solely on visual cues. For example:

• Click the green button
• Use the form in the upper right corner
• The fields marked in red are required
• Note where the blue and purple lines intersect

Be conscious of relaying important information in a way that makes sense to someone who is having the page read to them. You can use color and positioning to convey information, but those shouldn't be the only directives. For example:

• Click the green LEARN MORE button (alerts the user to locate a button labeled "learn more")
• Use the NEWSLETTER form in the upper right corner (alerts the user to locate a form labeled "newsletter")
• The fields marked as REQUIRED are required (asterisks won't work because screen readers treat them as punctuation)
• Note where the blue SOLID and purple DOTTED lines intersect (this won't help blind users, but it will help those with low vision)

Being contextually sensitive in your instructions takes a certain level of empathy, but you'll get better at it the more you practice.

Accessible Multimedia

Audio, Video, and Podcasts

At a basic level, these need to have captions, transcripts, and play on a video player that is controllable via keyboard. If you use YouTube or Vimeo, the captions and keyboard controls are taken care of for you. There are more things to make your video accessible, but they are more involved. Here's a thorough explanation of ADA compliance for videos.

Side Note About Audience

Even though I am a user with all my senses intact, I greatly appreciate having transcripts available. I don't have the patience to sit through minutes of introductions and commentary. I want to pinpoint the information I'm looking for and get on with my day. I mention this because it's a great example of how accessibility widens your audience to not only those with disabilities, but also those who consume content differently because they have different intentions. I usually skip a podcast if there is no transcript because I'd rather go search somewhere else where I can skip to what I want.

Color and Contrast

Have you ever driven by a shopping center at night and glanced at the storefront signage? Some signs are a lot more readable than others. Sometimes it's because of color. Sometimes it's because of size. Other times it's because of how bright it is. Sometimes it's all three. The same is true on web pages.

Contrast

Whether we're talking about text or images, contrast refers to how well the foreground stands out from the background. The more easily it is distinguished from the background, the more accessible it is. Here are some examples:

Color

Different color combinations varying levels of contrast. Surprisingly, even finding a color that meets WCAG contrast standards against a white can be tricky. I can't tell you the number of times I've been frustrated by brand colors that fell short. You would think that bright blue would work perfectly well with white. It's a popular branding combination, after all. But nope.

I couldn't begin to tell you how certain color combinations are deemed insufficient. I just rely on tools to tell me if it's compliant or not. It doesn't matter if I agree. It just needs to follow the law. Here's what I use:

• Contrast Ratio by Siege Media - I use this one when I just want to quickly check two values. It's simple and gives me instant visual confirmation.
• Contrast Checker by WebAIM - This one can do the same as above but goes into more detail. You need to click outside of the Hex Value text box in order to trigger the calculation. I like the built-in color picker so you can quickly find a color combination that works.

Accessibility Tools

An article about accessibility for content creators wouldn't be complete without giving you some tools to help you figure out if you're being compliant or not. Even experts like myself can experience oversights, so accessibility tools are an important step for catching these issues.

• Lighthouse - Now a standard part of Chrome Dev Tools, Lighthouse catches issues with contrast, header order, alt text, form labels, and much more. It's easy to use and built into the Chrome browser. It's not quite as thorough as as other testing tools, but good for non-technical users.
• NVDA - If you're curious how your content sounds with a screen reader, use this free tool to read your page aloud. Be sure to use a keyboard to simulate actual use. You can use a mouse, but it will read everything that the mouse touches, which will be quite chaotic.
• Axe - This is a more thorough auditing tool that runs about 70 accessibility tests. It can get technical though, which might be more than a content creator needs, but I'm listing it here because I know Lighthouse misses some things and I wanted to give you an alternative.

Continue Learning

This page should be a great start in accessibility for content creators. It's just the tip of the accessible iceberg though, so if you're up to it, there's always more to learn. Here are some great resources for continuing your accessibility education:

• Digital Accessibility Foundations - This free online course is designed for both technical and non-technical learners to give you a solid understanding of web accessibility principles.
• Easy Checks by W3C - This page walks you through some common web elements and how to tell if they are accessible or not. A great way to teach yourself web accessibility section by section.
• Section508.gov Content Creation - This is the official federal website detailing the accessibility requirements for information and communication technology (ICT) covered by Section 508 of the Rehabilitation Act. The link I've provided goes straight to the area that content creators will be interested in, which covers PDFs, presentations, social media, and more. Lots of free training videos.