Learn in Public: WCAG Principles & Guidelines Part 2

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:

1. Only serve an aesthetic purpose
2. Provide no information
3. 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.