Improving accessibility

Background

To help website creators make their websites more accessible, the Web Accessibility Initiative created the Web Content Accessibility Guidelines (WCAG). This is a huge resource with information about every part of a site and how you can make it accessible.

Another great resource is the Accessibility Project (A11Y Project). It has loads of helpful articles and checklists to help improve accessibility.

You can also use the Accessible Rich Internet Applications (ARIA) elements to ensure your code is accessible if you're not using HTML5.

The checklist and quick reference guides below are helpful to have bookmarked to check when needed:

• WCAG quick reference
• A11Y Project checklist

Alt text for images

Although the alt attribute helps improve SEO, it's meant to provide descriptions of an image to help ensure people don't miss out on information featured in the image. Assistive technology, such as screen readers, uses alt text to give this information to people using these technologies.

It also helps when images are slow or fail to load.

So how do you create a good alt text? Let's look at an example:

For the above image, an accurate description might be something like: “Metal framed glasses on a pink background.”

While this describes the image, we can focus on what we're trying to represent in the image. We're showcasing the product we're selling, so we can ignore the background and focus on the glasses to describe them in detail: “Retro double bridge metal frame eyeglasses. They're slightly rounded and gold in color with black plastic earpieces.”

You'll notice that we've also used punctuation in our description. Although it doesn't matter for SEO, it makes a huge difference to how the alt text is read by assistive technology.

Alt text quick tips:

• Use full sentences
• Use punctuation
• Describe what you're conveying with the image
• Don't include the word “image” or start with “photo of...”
• Check your src attribute value is readable

See the image section on the accessibility guidelines for more tips.

GIFs and videos

Video and audio that plays unexpectedly can be distracting and disruptive, especially for certain types of cognitive disability. While other kinds of autoplaying video can be a trigger for seizure disorders.

It's best to make sure that media doesn't autoplay. You should also check videos and GIFs for flashing, strobe lighting, or quickly changing images as it might trigger photosensitive seizure disorders.

Always provide captions for all videos so that a person who can't hear the audio will still understand its content. Also, provide transcripts so they can digest the audio content at a comfortable pace.

GIF and video tips

• Don't autoplay video, especially with audio on
• Don't use flashing or strobe lighting
• Check all media can be paused
• Add captions
• Make transcripts available
• Use titles for embedded content elements

Writing

How you write is another essential part of making content and sites accessible. It's good to create a content style guide for everyone writing for your site. Not only is it is vital for a brand to create consistency, but it also helps to ensure accessibility with your writing.

Formatting

Formatting text too often and inconsistently can cause confusion. And long sections of text in either bold, italic, or both have been known to be a Dyslexia trigger.

Many screen readers don't recognize bold, italics, or colored text. Try to use this formatting sparingly and only when appropriate for your company writing style. But your writing should still work without this formatting.

Only underline text when it's a link to another page. Try to avoid using “click here,” the link should be determined from the text used.

This article on how to write accessible digital products has some good tips.

Casing

Some assistive technologies announce words in capital letters as individual letters. So it's best to avoid writing in all capital letters.

It's good to capitalize each new word in a hashtag, making it easier to read for everybody. For example, #AccessibilityMatters.

Word choice

The reader of your writing might be a different age, from a different culture, or not speak the same first language.

To help others understand your writing, it's best to use plain language. This means sticking to the most commonly used words and words with fewer syllables. It also means that you avoid analogies, similes, jargon, and metaphors, especially if they rely on a certain demographic. This article about plain language writing explains it well, and it's worth a read.

Try to write in short sentences and only include one idea per sentence. Writing assistants like Hemingway can analyze the reading level of your writing and help you write more accessibly.

Try to avoid acronyms where possible. Or, spell out the words in full and add the shorthand version in parenthesis after the word. Then you have defined the acronym for that page. You can also wrap your acronyms in a <abbr> element.

A reader can also have a different level of experience on a topic. So it's good to avoid terms like “just,” “simply,” “easily,” and “obviously.”

Writing tips

• Use plain language
• Use complete sentences
• Use exclamation points sparingly
• Avoid rhetorical questions
• Only links should be underlined text
• Capitalize words in a hashtag
• Avoid analogies, similes, jargon, and metaphors

Page layout and interactivity

It's best to avoid centered text for long copy, like descriptions and blogs. For left-to-right (LTR) languages, use left-aligned text. And for right-to-left (RTL) languages, use right-aligned text.

Some people need to increase the size of the text to read it. So, never disable the viewport zoom, even for web apps. Try resizing the text to 200% and checking your site still works without losing content or functionality at this size.

Not everyone can use a mouse, and some assistive technologies don't allow hovering. So, it's important that your site and content can be navigated and used with a keyboard. And check that the keyboard focus order matches your visual layout. This is also why you should ensure videos can be paused with the space bar without limiting the space bar's ability to scroll the page.

Contrast

Another vital topic for accessibility is contrast. This usually means that text and content are legible against a background. The contrast ratio can measure this. The minimum ratio you should aim for is 4.5:1 but the higher, the better. A 7:1 ratio is enhanced contrast and would give you a AAA score in accessibility. There are different resources you can use online to test this ratio, like the use contrast guide and the contrast ratio.

You should also check your contrast colors when they're inverted or in high contrast mode.