Skip to content

Technique G96:Providing textual identification of items that otherwise rely only on sensory information to be understood

About this Technique

This technique relates to 1.3.3: Sensory Characteristics (Sufficient).

This technique applies to all technologies that present description of a content rendering to the user.

Description

The objective of this technique is to ensure that items within a Web page are referenced in the content not only by shape, size, sound or location, but also in ways that do not depend on that sensory perception. For example, a reference may also describe the function of the item or its label.

Examples

Example 1: Button referenced by shape and accessible name

A round button is provided on a form to submit the form and move onto the next step in a progression. The button is labeled with the text "go". The instructions state, "to submit the form press the round button labeled go". This includes both shape and textual information to locate the button.

Example 3: Button referenced by position and accessible name

The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users for which the position is not meaningful.

The HTML

<form class="wrapper">
  <h1>Sign up to our mailing list</h1>
    <div role="note">
      Complete the form and then press the lower-right (<i>sign up</i>) button.
    </div>
  <div class="form-group">
    <label for="full-name">Your name</label>
    <input autocomplete="name" id="full-name" type="text">
  </div>
  <div class="form-group">
    <label for="email">Your email address</label>
    <input autocomplete="email" id="email" type="text">
  </div>
  <button type="reset">Cancel</button>
  <button type="submit">Sign up</button>
</form>

The CSS

.wrapper{
  border:1px solid #aeaeae;
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
  padding:1rem;
  width:50vw;
 }
 
 label{
  display:block;
 }
 
 input, button{
  font:inherit;
 }
 
 h1, [role=note]{
  grid-column:1 / -1;
 }
 
 .form-group{
  grid-column:1;
 }
 
 input{
  width:100%;
 }
 
 button[type=reset]{
  grid-column:1;
 }
 
 button[type=submit]{
  grid-column:2;
 }

Tests

Procedure

Find all references in the Web page that mention the shape, size, or position of an object. For each such item:

  1. Check that the reference contains additional information that allows the item to be located and identified without any knowledge of its shape, size, or relative position.

Expected Results

  • Check #1 is true.

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.

Back to Top