Web Content Accessibility Guidelines 2.0 to 2.1

By, Jon Christie

The Web Content Accessibility Guidelines (WCAG) 2.0 provide guidelines for making web content more accessible to people with disabilities. The guidelines are organized around four principles:

· perceivable

· operable

· understandable

· robust

WCAG 2.0 includes guidelines for addressing the following disabilities:

1. Visual impairments, including blindness and low vision
2. Auditory impairments, including deafness and hearing loss
3. Motor impairments, including difficulty using a keyboard or mouse
4. Cognitive impairments, including difficulties with learning, memory, and understanding complex information
5. Speech impairments, including difficulties speaking or producing speech
6. Seizures, including photosensitive epilepsy
7. Photosensitivity, including discomfort or disability caused by flashing or flickering content
8. Language and communication impairments, including difficulties understanding written or spoken language

So what’s new?

In addition to the disabilities covered in WCAG 2.0, WCAG 2.1 includes guidelines for addressing the following disabilities:

1. Distracted use, including the use of web content while driving or performing other tasks that require divided attention
2. Low vision and visual impairments caused by certain medical conditions, such as cataracts and glaucoma
3. Cognitive impairments caused by certain medical conditions, such as Alzheimer’s disease and dementia
4. Physical impairments caused by certain medical conditions, such as multiple sclerosis and cerebral palsy
5. Disabilities caused by aging, including vision and hearing loss, difficulty with fine motor control, and cognitive impairments

WCAG 2.1 provides specific guidelines for addressing these disabilities, including guidelines for providing text alternatives for non-text content, making content keyboard accessible, and providing clear and consistent navigation.

The Four Principles

Perceivable

The content and UI must be presented in a way that is perceivable to users, regardless of their senses or abilities. This includes providing text alternatives for non-text content, such as images and videos, and using colors and other visual cues in a way that is distinguishable to users with visual impairments.

Operable

The content and UI must be operable by users, regardless of their abilities or disabilities. This includes making the content keyboard accessible, providing clear and consistent navigation, and allowing users to interact with content in a way that is consistent with their abilities and preferences.

Understandable

The content and UI must be understandable to users, regardless of their language or cognitive abilities. This includes providing clear and concise language, using clear and consistent layouts and formatting, and providing clear instructions for interacting with content.

Robust

The content and UI must be robust enough to work with a wide range of technologies and devices, including assistive technologies. This includes using web standards and technologies that are widely supported, and testing content with a variety of browsers and devices.

I’m a developer, what should I do?

Here are specific some examples of what developers should do to start adhering to these standards:

1. Perceivable:

• Provide text alternatives for non-text content, such as images and videos, using the alt attribute:

<img src="logo.png" alt="Company logo">
<video src="video.mp4" alt="Video description">

• Use descriptive and meaningful text for links and buttons:

<a href="about.html">Learn more about our company</a>
<button>Submit</button>

• Use colors and other visual cues in a way that is distinguishable to users with visual impairments:

body {
  color: #333;
  background-color: #fff;
}

a:link,
a:visited {
  color: #00f;
}

a:hover,
a:active {
  color: #f00;
}

2. Operable

Make the content keyboard accessible by using the tabindex attribute and the :focus pseudo-class:

<a href="home.html" tabindex="1">Home</a>
<a href="about.html" tabindex="2">About</a>
<a href="contact.html" tabindex="3">Contact</a>

<style>
  a:focus {
    outline: 3px solid #f00;
  }
</style>

Provide clear and consistent navigation, using headings and lists:

<nav>
  <h2>Main navigation</h2>
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

• Allow users to interact with content in a way that is consistent with their abilities and preferences:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <br>
  <label for="message">Message:</label>
  <textarea id="message" required></textarea>
  <br>
  <button type="submit">Send</button>
</form>

3. Understandable:

• Provide clear and concise language, using simple and familiar words:

Copy code

<p>Welcome to our website! Here you can learn more about our company and 
the products and services we offer. If you have any questions or need 
assistance, please don't hesitate to <a href="contact.html">contact us
</a>.</p>

• Use clear and consistent layout and formatting:

body {
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 1em 0;
  font-weight: bold;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

p {
  margin: 1em 0;
}

• Provide clear instructions for interacting with content:

Copy code

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <br>
  <label for="message">Message:</label>
  <textarea id="message" required></textarea>
  <br>
  <button type="submit">Send</button>
</form>

4. Robust:

• Use web standards and technologies that are widely supported:

<!-- Use HTML5 elements instead of deprecated elements -->
<header>
  <h1>Welcome to our website</h1>
</header>

<!-- Use CSS3 instead of deprecated CSS2 -->
<style>
  body {
    font-size: 16px;
    font-family: sans-serif;
    line-height: 1.5;
  }
</style>

Lastly, you want to test content with a variety of browsers and devices. Use tools like BrowserStack or Microsoft Edge DevTools to test content on different browsers and devices.

Conclusion

Key Takeaways:

• WCAG 2.0 and 2.1 provide guidelines for making web content more accessible to people with disabilities, including those with visual, auditory, motor, cognitive, speech, and language impairments.
• Following these guidelines can improve the accessibility of a web page by making it easier for users with disabilities to access and interact with the content.
• Adhering to WCAG is important for creating an inclusive and user-friendly online experience for all users.

The Web Content Accessibility Guidelines are an essential tool for ensuring that web content is accessible to a wide range of users, including those with disabilities. By following these guidelines, web developers and designers can create content that is user-friendly and accessible to everyone.

Thanks for reading! Don’t forget to like, share and follow me on Twitter, Instagram, LinkedIn, and TikTok!

-Jon Christie

jonchriste.net