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:
- 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.
- 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." />
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
button instead of
a when not using
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 (