Categories
Accessibility Design

Accessibility 101 for Content Creators

A perfectly coded website will still break down if the content isn’t written and built accessibly. This article is intended to give a no-coding-required breakdown of how to make accessible content.

I’ll use WordPress as a basis for examples when relevant, but the same principles apply to however you build your website.

Use Headings

Screenshot of the WordPress.com editor, showing the headings toolbar and headings block settings.
Setting the Heading level in the WordPress Editor.

Headings are the titles within your page. They go in descending order from an h1 (heading one) to h6 (heading six). An h1 is the most important, h6 the lowest heading.

I think of headings like they’re used in a book.

  • Book Title, h1: The most important.
  • Chapter Title, h2: The second most important, gives context to where you are within the book.
  • Subsection Title, h3: A section within a chapter, and so on.

When writing content, you can structure your website using the same idea in order to give people an overview of your page.

Tips for Headings

  • There should be only one h1 per page. This is generally your article title. On your homepage it may be the name of your site.
  • Headings should follow a descending order and shouldn’t skip a number. Here’s what your heading structure on a page might look like:
    • h1
      • h2
        • h3
      • h2
        • h3
        • h3
          • h4
      • h2
  • You will rarely need an h5 or h6

In The Importance of HTML Headings Section I go over in more detail why Headings are important for accessibility.

Consider How The Content Would be Read Aloud

When people use a screen reader, the content is read to them from top to bottom. There are some things that can get annoying, quickly.

Using a lot of emoji within a sentence, like when people separate ๐Ÿ‘ each ๐Ÿ‘ word ๐Ÿ‘ with ๐Ÿ‘ a ๐Ÿ‘ clap ๐Ÿ‘ emoji. This gets announced as “separate clapping hands word clapping hands with clapping hands a clapping hands clap clapping hands emoji.” That’s hard to read, and I promise it’s hard to listen to as well.

Pull quotes can be great to grab reader’s attention, but if the pull quotes are not coded correctly, their content gets read aloud again without any indication it’s a pull quote. Imagine if someone was reading you an article and randomly read a section of the article again. That’s what a screen reader does for pull quotes.

Image Descriptions: alt Text

WordPress.com image block settings, highlighting the alt text field.
Setting alt text on an image in WordPress

alt text is used to describe the image. It is shown when an image doesn’t load, and used in describing the image to people who are using a screen reader that reads the page content to them.

Alt text showing when an image doesn’t load.

If there is no alt text on an image, the filename for the image will be read by the screen reader. Screen Shot 2020-04-30 at 4.23.44 PM.png isn’t usually helpful. What is helpful is a description of the image like, “WordPress.com image block settings, highlighting the alt text field.”

Tips for Writing alt Text

I asked for advice on Twitter about writing good alt text, and received some great advice:

  • Be descriptive, but succinct (1 – 3 sentences max).
  • Highlight the important details in the image that are relevant to the page content.
  • The same image may be described in different ways depending on context.
  • Don’t start it with “An image of” or “A gif of.”

For more help, this article from Hubspot gives examples of good and bad alt text.

Writing Links

The original tweet by @ericwbailey is about why you should “Remove ‘click here’ from your copy.”

It’s easier said than done since it’s so engrained in how people write copy for the web, but you should always avoid generic phrases like “click here” or “read more” in links.

The ideal is that you understand what the link is about solely from the link text. This is good practice in general, but extra important for users who utilize a Link Rotor or something that will show them a list of all the links on a page. Otherwise, when you open the Link Rotor you’ll see a wall of ambiguous and unhelpful “click here” and “read more” links.

Taking this article as an example, I could have written all my links as “click here.” This would result in the Link Rotor looking like this:

VoiceOver Link Rotor showing a long list of "click here" links

Instead, I describe the contents of the link so you can understand it out of context. The Link Rotor for this article contains links like:

  • examples of good and bad alt text
  • The Importance of HTML Headings Section
  • pull quotes are not coded correctly
  • ratio of at least 4.5:1
  • WebAIM’s Contrast checker

Which one is clearer to you? This is a great example of something that we often don’t consider since it’s so normalized on the internet, but results in a not-so-great experience for lots of people.

Don’t Open Links in a New Tab

Every link in every browser already lets people open them in a new tab (for most people, this is right click the link, then select “Open Link in New Tab”).

Don’t make your links open in a new tab by default. It can be really confusing for screen reader users who don’t realize that clicking the link brought them into a new window. This also breaks the “back” button to go to the previous page, as the new window has a new history context.

If you absolutely have to have a link open in a new window, make sure that the link text contains (opens in a new tab) so the user knows what is going to happen.

Considering Colors

There’s a lot more to consider with color palettes than most people realize, and the issues I’ll mention are widespread on websites, large and small.

Color Contrast

Color contrast is the ratio between the background and the text color. You want a ratio of at least 4.5:1. If you’re like me and that doesn’t mean much to you, you can use WebAIM’s Contrast Checker. It will tell you if your background and text colors have sufficient contrast.

WebAIM's color contrast checker showing #767676 foreground color on #ffffff background color with a contrast ratio of 4.54:1
Minimum pure gray on white background to meet 4.5:1 color contrast ratio: #767676
WebAIM's color contrast checker showing #595959 foreground color on #ffffff background color with a contrast ratio of 7:1
Minimum pure gray on white background to meet 7:1 color contrast ratio: #595959

You’ll want to make sure you at least pass on the WCAG AA guidelines. The WCAG AAA is the best level of compliance, but AA is still great.

Color Blindness

There are several types of color blindness, but the most common are forms of red/green color blindness. For example, let’s check the difference between:

  • a red checkmark (generally “bad/wrong”)
  • a green checkmark (generally “done/correct/complete”)
A no color blindness example form of a First name field with a red checkmark, and a filled-in last name field with a green checkmark. The second form is identical but with a red-blind / protanopia view (a form of red-green color blindness) where the checkmarks are both a similar brownish/yellow-ish color.
With Protanopia, the red and green checkmarks don’t help at all.

If you’re only using the colors red and green to indicate those “wrong vs correct” states, then not everyone is going to be able to understand that.

The general recommendation for ensuring accessibility is to not rely on color alone to communicate something. So, instead of just a red or green checkmark, label what the checkmark means as well.

A no color blindness example form of a First name field with a red checkmark and "Your first name is required text", and a filled-in last name field with a green checkmark. The second form is identical but with a red-blind / protanopia view (a form of red-green color blindness) where the checkmarks are both a similar brownish/yellow-ish color.
Adding a “Your first name is required” makes it clearer that there is an error.

Little Extras

Some things don’t need a full section to explain them, but are very worth mentioning:

  • Label icons: Similarly to why we should not rely on color alone to communicate something, don’t rely on an icon alone to communicate something. Your icon’s meaning may be obvious to you, but it’s not obvious to everyone.
  • Don’t use images of text: It’s common on twitter for people to share a portion of an article as an image so they can get past the character count limitation. This is fine for sighted users, but unless all the text from the article image is included as alt text, it’s inaccessible.
  • Caption your audio and video: If you have video or audio content, make sure you provide the captions or transcript for it. Without that, it’s inaccessible to people who are deaf or hard of hearing.
  • Write clearly and use images: Not everyone has a college reading level in your language. Make sure your content is as easy to understand as possible. Images and bulleted lists are your friends.

Recap

There’s a lot to consider when writing accessible content, but once it’s engrained in how you work, it becomes second nature.

  • Use Headings appropriately.
  • Consider how the content would be read aloud.
  • Set the correct alt text for images.
  • Write descriptive links (don’t use generic phrases like “click here”).
  • Generally don’t use links that automatically open in a new tab.
  • Have sufficient color contrast for all text.
  • Don’t use color combinations that will make your site inaccessible to those with a form of color blindness.

Drop a (kind) comment below if you think I missed something big that deserves more attention.

By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

2 replies on “Accessibility 101 for Content Creators”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s