Web Accessibility Basics

Web accessibility covers all parts of your website. It should be easy to understand for users, no matter how they are using your site. This might include when users are using a screen reader or navigating with the keyboard, because of visual, physical, or other impairments.

Some aspects of web accessibility depend on the website platform or theme you use, some design elements you only need to set up once (e.g. colors to match your branding), and some accessibility items require ongoing attention (e.g. new blogs or content that you add to your website). Each of these areas has its own requirements to be fully compliant, and some organizations are required to meet these guidelines⁹.

It is important to pick a platform or theme that meets accessibility requirements up front, because while there are some “web accessibility overlays” that say they can fix an inaccessible theme or website, but real users don’t consider them usable⁶. Starting off with an accessible platform or theme is the best way to get a good result.

For the purposes of this blog, I’m assuming that you already have a theme or website platform that meets basic accessibility standards. This is so I can focus on the accessibility items that either you will choose as part of your branding or that will need ongoing attention.

Colors

The colors you choose online can make it easier or harder for people to read your website. If you’ve ever looked at a website with pink text on a red background, for example, you might recognize how hard it can be to read. By choosing better colors, you can make sure that the widest number of people can read your website.

While there are multiple levels of WCAG, the highest level of compatibility requires a contrast ratio of 4.5:1 for text that’s bold in 18px (24px when not bold) or larger. This probably only includes your headers and maybe some navigation or theme elements. For smaller text, WCAG requires a contrast ratio or 7:1.

To check the colors you are using, you can use the WebAIM Contrast Checker. Simply put the colors into the Foreground and Background Color boxes, and it will show you the contrast ratio for your colors.

For some bad examples of color design in practice, and why it’s important to choose good color combinations when creating content, check out the blog article “Chasing rainbows” by Andy Baio.

Headers and Font Sizes

One of the biggest mistakes I see people make online is that they use the headers to make their text larger for emphasis. This is the wrong way to use headers.

Headers are meant to organize your content⁷. The (typically) largest header, H1, is only for the title of the current page or current section. It usually shows up larger than the other headers so that visual readers can easily scan the document by sections. Each of the other headers, H2 through H6, are sub-headers, and should only be used to mark sub-sections under the H1 header.

An example outline might look like:

1. (H1) This is my top level header
2. 1. (H2) This is my first sub-header
   2. (H2) This is my second sub-header
      1. (H3) Here is a sub-header under my second sub-header
   3. (H2) This is my third sub-header
   4. Etc..

When you want to make text larger, it is important just to change the text size. This will give it added visual emphasis without altering the page flow.

Links

Screen readers are very literal. If you write out an entire link within your content, the screen reader will read the link⁸. Instead, you want to make sure that the link displays descriptive text about the links destination.

When you add a link, you’ll have the option to provide the link text or text to display and the URL that is the target (where users will go if they click on it). You want to make sure that these both aren’t the URL, and that the link text describes the URL.

For example, here is more information about descriptive link writing.

Images and Alt Text

If users can’t see your images, the alt text gives them an idea of what the image should look like. This includes users who are using a screen reader (it will read the alt text), users whose browser fails to load the image, or when images are missing or broken. So, having alt text for your images provides a fallback in many instances.

Some images don’t need alt text¹⁰. Images that fall into this category include images that are purely decoration, images whose information is already duplicated in the text, and images that don’t add any new information.

Here are more tips for writing alt text for images.

Audio, Video, Captions, and Transcripts

Audio and video have their own challenges for web accessibility. Some users can’t listen (or don’t want to listen) to content, preferring to read it on-screen with captions or in a transcript.

Captions

Some sites will help you here by creating automated captions for your content, but for the best results, you probably want to edit them or write them yourself.

Captions are helpful for lots of reasons. In a recent study¹¹, 80% of users who use captions aren’t Deaf of hard of hearing, 80% of users say they’re more likely to watch an entire video if it has captions, and 1 in 3 users use captions in public settings.

Captions are the text from the video displayed on the screen. Subtitles are similar, but while captions are in the same language as the video, subtitles are the video text in different languages.

If you post videos online, you should try to add captions on the platform you’re using. YouTube makes it very easy to add and edit captions on your videos. You can follow these directions for adding subtitles and captions to YouTube videos.

Transcripts

Transcripts are the text version of the dialog from an audio or video source. It can be used for audio clips, podcasts, videos and more. This gives users the option to read the content rather than listen to it or watch it.

There are 3 levels of transcript¹³, including Full Verbatim, Clean Verbatim, and Detailed Notes. Full Verbatim still contains things like false starts and verbal tics. Clean verbatim is a cleaned-up version with those items removed. Detailed Notes are a more distilled version, keeping only the essential content. For legibility, unless otherwise required, users tend to prefer a clean verbatim transcript.

I’ve written before about using Microsoft Word to aid in creating your transcriptions.

By making captions and transcriptions for your content available, your content can be more easily consumed and discovered by users.

Conclusion

While I’ve only scratched the surface of web accessibility in this article, I’ve focused on the parts that you’re most likely to come across while running your business online. It’s important to consider, not only how your website and content look visually, but also how real uses are consuming your content and how it is delivered to all users.

Did you learn anything new about accessibility online? What are you already doing to create accessible content? Do you use any software to increase your access to the web? What do you think I should have included that is important for web accessibility? Let me know in the comments!

Resources and Further Reading

1. Web Content Accessibility Compliance Checklist. (n.d.) A11Y Project. Retrieved February 21, 2023, from https://www.a11yproject.com/checklist/.
2. WAVE Web Accessibility Evaluation Tools. (n.d.). Retrieved February 21, 2023, from https://wave.webaim.org/.
3. Contrast Checker. (n.d.). WebAIM. Retrieved February 21, 2023, from https://webaim.org/resources/contrastchecker/.
4. Accessible Social. (n.d.). Accessible Social. Retrieved February 21, 2023, from https://www.accessible-social.com/.
5. Accessible Social Facebook Group. (n.d.). Facebook. Retrieved February 21, 2023, from https://www.facebook.com/groups/110948031049165.
6. Overlay Fact Sheet. (n.d.). Retrieved February 21, 2023, from https://overlayfactsheet.com/.
7. Headings. (2017, May 4). W3C Web Accessibility Initiative. Retrieved February 21, 2023, from https://www.w3.org/WAI/tutorials/page-structure/headings/.
8. Screen Reader Example. (n.d.). Dallas College. Retrieved February 21, 2023, from https://www.dallascollege.edu/about/accessibility/guidelines/pages/screen-reader.aspx.
9. WCAG Worldwide: Legal Obligations Per Country. (n.d.). Accessibility Checker. Retrieved February 21, 2023, from https://www.accessibilitychecker.org/guides/wcag/#chapter3.
10. 3 Questions to Help Decide If an Image doesn’t Need Alt Text. (n.d.). Bureau of Internet Accessibility. Retrieved February 21, 2023, from https://www.accessible-social.com/copy-and-formatting/links-and-hypertext.
11. Lewis, E. (2019, November 7). Verizon Media and Publicis Media Find Viewers Want Captions. 3PlayMedia. Retrieved February 21, 2023, from https://www.3playmedia.com/blog/verizon-media-and-publicis-media-find-viewers-want-captions/.
12. Audio and Video. (n.d.). Accessible Social. Retrieved February 21, 2023, from https://www.accessible-social.com/audio-and-video.
13. Transcripts. (n.d.). Accessible Social. Retrieved February 21, 2023, from https://www.accessible-social.com/audio-and-video/transcripts.