# Providing textual identification of items that otherwise rely only on sensory information to be understood

ID: G96

Technology: general

Type: Technique

## When to Use

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

### 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.

### A section of navigation links referenced by location and heading

Instructions for a Web page providing on-line training state, "Use the list of links to the right with the heading, 'Class Listing' to navigate to the desired on-line course." This description provides location as well as textual clues to help find the correct list of links.

### 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.

## Related Techniques

## Resources