Web Content Accessibility Guidelines (WCAG) are quickly understood when you take the perspective of someone who may have difficulty accessing your content the way you expect. Broaden your horizons and read the stories of these web users.

Web content developers (page authors, site designers, etc.), authors, web software developers all need to consider the diverse ways people consume content. Reviewing these guidelines will open you up to a broader mindset towards web development. Also, it's going to be great for your SEO with parallel concepts and ensuring your content is marked correctly.

  • Get your non-text content converted into text alternative. Clear text-based information is still great for SEO too.
  • Make your navigation faster for keyboard users and audible browsing.

Good UI Design

Make a text version for all your audio and video

There are many transcription tools like Amazon Transcribe, which we use, and Otter's online transcription (which is free).  When you have the text prepared on your page, you can have the video or audio in line and then a link to the content (or even a sliding drawer for the transcription). Narrate your videos for the visually impaired and explain what is happening

To score big, these are the goals you should set:

  1. Provide captions for all live content. Things like closed captioning are great. Google meet has an exceptional captioning tool you can use when in a Meet.
  2. Provide time-based captions on all recorded media. You can use an Otter or AWS account for this.  
<img src="wcag_literacy_rate.jpeg" alt="WCAG adoption increases literacy rates"/>
<video 
       id="wcag_conference_2022" 
       controls preload="metadata"
       transcript="transcription/transcription.txt" 
       aria-describedby="trascript"
       poster="wcag_conference_2022/video_poster.jpg"
       >
     <source src="wcag_conference_2022/short.mp4" type="video/mp4">
   	 <source src="wcag_conference_2022/short.webm" type="video/webm">
     <track 
            label="English" 
            kind="subtitles" 
            srclang="en" 
            src="captions/vtt/sintel-en.vtt" 
            default 
     		/>
</video>
<a 
   id="trascript"
   href="transcription/transcription.txt" 
   title="WCAG Conference 2022 Video Transcription">
    Download Transcription
</a>

Use text alternatives on images.

Be careful not to use the parameter's "alt" tag to show file names or placeholder text. According to WCAG 2.1, Guideline 1.2, your alternate text must serve the same purpose and present the same information.

<img src="file.jpg" alt="People can fall in love again. A loving couple holding hands." />

Keyboard Navigation

For those of us who are quick with the keyboard, we understand. But many people are still pretty fond of their mice and forget that some people can't use them.

Structure your source code so that the reading/navigation order is correct. It may be helpful to disable CSS.  

Do not use tabindex values of 1 or greater to change the default keyboard navigation order (learn more about tabindex here). Make sure you use the href parameter on your "a" tags. Sometimes us developers use javascript to complete actions on tags, but we should opt for button instead of a when not using href.

Provide a "skip to main content" link on the page.

Limit your use of headings to use them only where they make sense. Don't use titles for stylistic purposes. Find the correct CSS settings to style your pages.

Provide regions or ARIA landmarks in HTML5 ( <main> , <nav>, etc.)