Learn in Public: WCAG Principles & Guidelines Part 2

Byonca H. — Tue, 22 Feb 2022 03:29:03 +0000

The first principle of the WCAG is Perceivable:

"Information and user interface components must be presentable to users in ways they can perceive."

This ensures that information must be formatted in a way that allows the user to understand its content. The information should also be discoverable by assistive technologies. Assistive technologies include screen readers, screen magnifiers, text readers, speech input software, and alternative input devices.

The principle is broken down into smaller guidelines: Text Alternatives, Adaptable, Time-based Media, and Distinguishable.

Text Alternatives

“Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.”

Non-text content can include audio files, videos, images, graphs, and maps. The information must be formatted to be read out by assistive technologies. A common example of this is the alt attribute for image elements. The alt text should describe the image to the user who wouldn’t be able to perceive this information.

<img src=”flower_portrait.jpg” alt=”A close up photo of a bunch of lilacs and peonies”/>

It should be noted that decorative images are exempt from this guideline, however, they must:

Only serve an aesthetic purpose
Provide no information
Have no functionality

Adaptable

“Create content that can be presented in different ways (for example simpler layout) without losing information or structure.”

This guideline emphasizes the importance of using semantic structure to build web applications. The semantic structure can be but is not limited to, HTML5 and ARIA labels and roles. HTML5 elements are easily identifiable by assistive technologies and convey their contents to the user. For example, <h1> and <h6> elements list the outline of a web page. <nav> marks the navigation, <main> represents the main portion of the application, and the <footer> notes the text marking the end.

ARIA labels and roles can be used to indicate landmarks on a web application. These landmark roles help assistive technologies inform the user of areas on the page.

<div role="application" aria-labelledby="blog">
  <h1 id="blog">Latest</h1>
  <div role="complementary" aria-labelledby="previous-articles">
    <h2 id="previous-articles">Previous Articles</h2>
    <ul>
      ...
    </ul>
  </div>
</div>

It should be noted that one should use HTML5 elements instead of applying ARIA roles to <div> unless necessary. The MDN Web Docs by Mozilla provide the best documentation for HTML5 and ARIA labels and roles.

The adaptable guidelines also highlight the need for using multiple ways to describe instruction or meaning. Color, sound, size, and other characteristics alone should not be used to provide information. The text should be used in conjunction to clearly instruct the user.

Learn in Public: WCAG Principles & Guidelines - Part 1

Byonca H. — Tue, 22 Feb 2022 03:11:24 +0000

The Web Content Accessibility Guidelines (WCAG) is a document providing suggestions on making the web accessible for all. The WCAG offers success criteria and advice on meeting the success criteria. There are four main principles of WCAG: Perceivable, Operable, Understandable, and Robust.

For the CodeNewbie Learn in Public Challenge 2022, I will focus on these four topics and their guidelines. The goal of these posts is to share my understanding of WCAG.

Accessibility is an important aspect of the web but is treated as an after-thought. The internet has opened so many possibilities for everyone. As developers, it is our job to ensure the internet is available for everyone, regardless of their disabilities.

DEV Community: Byonca H.

Learn in Public: WCAG Principles & Guidelines Part 2

Text Alternatives

Adaptable

Learn in Public: WCAG Principles & Guidelines - Part 1