Technology is great. But with each technological advancement, some people are left out. And although there's no such thing as a site being “100% accessible,” we should make sure as many people as possible can use our sites.
In this article, we'll go through some best practices and tips for creating an accessible site. As well as sharing some links that can help improve the accessibility of your site.
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 guide below are helpful to have bookmarked to check when needed:
alt attribute helps improve SEO, it's actually meant to provide the descriptions of an image to help ensure people don't miss out on information that's feature in the image. Assistive technology, such as screen readers, use 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
srcattribute value is readable
For more tips, see the image section on the accessibility guidelines.
If you're using the tile Frontastic starter components, use the title field in the settings panel to input your alt text.
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 may 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 pace that's comfortable for them.
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
How you write is another important part of making content and sites accessible. It's a good idea to create a content style guide for everyone writing for your site. Not only is it essential for a brand to create consistency, but it also helps to ensure accessibility with your writing.
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 it's 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.
Some assistive technologies announce words that are all 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 as it makes it easier to read for everybody. For example, #AccessibilityMatters.
The reader of your writing may 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're reliant 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 then 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
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.”
- 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
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 text so they can 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 bars ability to scroll the page.
Another important topic for accessibility is contrast. This usually means in terms of is text and content legible against a background. This can be measured by the contrast ratio. 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.
Updated over 1 year ago