WCAG 1.3.3 · Level A · EN 301 549 9.1.3.3

Sensory Characteristics

Requires that instructions do not rely only on shape, color, size, location, orientation or sound, so users who cannot perceive those can still follow them.

In brief

"Click the round green button on the right." This works only if you can see color, shape and position. A blind user, a user with a color vision difference and a user whose layout is different on a small screen cannot follow it.

This criterion requires that instructions for understanding and using content do not rely only on sensory characteristics of components, such as shape, color, size, visual location, orientation or sound. A sensory cue can still be used, as long as the instruction also names the item in some other way.

What does it cover?

  • Shape and size: "Press the square button", "the large icon".
  • Color: "The red fields are required." Color can be used, but not alone.
  • Visual location: "Use the menu on the left", "see the box below".
  • Orientation: "Click the arrow that points up."
  • Sound: "When you hear the beep, continue."
  • How to fix it: Name the item with text (a label, a name or a position in a list), then add the sensory cue if it helps.
  • Out of scope: Color as the only way to show something is covered by 1.4.1 (Use of Color). Sounds that play automatically are covered by 1.4.2. Instructions that are not for understanding or operating the content, such as describing a design, are out of scope.

Who does it affect?

Blind and low-vision users cannot see color, shape or position. People with color vision differences cannot tell the colors. People who hear poorly or work in noise miss sound cues. People who use a screen magnifier or a different layout on a small screen or in a reader mode find that "on the right" or "below" is no longer true. Clear names help everyone, including people with cognitive differences.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Instructions that do not depend on one sense are part of "perceivable" and "understandable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.3.3 by reference and turns it into separate clauses for each kind of ICT.

Where WCAG 1.3.3 appears in EN 301 549
ClauseType of ICTWhat it requires
9.1.3.3Web pagesWeb content must satisfy WCAG success criterion 1.3.3.
10.1.3.3Non-web documents (PDF, Office files)The same criterion applies to instructions in documents.
11.1.3.3Non-web software (native mobile apps)Software that supports screen readers must satisfy the criterion.

Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.3.3 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. Visual location

Name the control. "Right" depends on the screen size, and it means nothing to a screen reader.

Incorrect
<p>To finish, click the button on the right.</p>
Correct
<p>To finish, select <strong>Save</strong>.</p>

2. Color and shape

A color or shape can help, as long as the name is there too.

Incorrect
<p>Press the green button to continue.</p>
Correct
<p>Press the <strong>Continue</strong> button (green).</p>

3. Sound

A sound cue needs a visual and a text equivalent.

Incorrect
<p>When you hear the beep, the upload is done.</p>
Correct
<p>When the upload is done, you hear a beep and the message
   "Upload complete" appears.</p>
<div role="status">Upload complete</div>

4. Icons

Name an icon by its function, and use the look only as a clue.

Incorrect
<p>Tap the gear to change the language.</p>
Correct
<p>Open <strong>Settings</strong> (gear icon) to change the language.</p>

5. Required fields

Do not rely on a red label alone. Say it in text.

Incorrect
<p>Fill in the fields in red.</p>
Correct
<p>Fields marked "(required)" must be filled in.</p>
<label for="name">Name (required)</label>
<input id="name" required>

6. Navigation instructions

Name the region instead of describing where it is.

Incorrect
<p>Use the menu at the top left to find your orders.</p>
Correct
<p>Use the main navigation and choose <strong>Orders</strong>.</p>

Code examples for mobile

The same rule applies in native mobile apps. Name the action in the instruction, and make sure the button has the same name as a text label.

iOS (SwiftUI)

import SwiftUI

struct SaveHint: View {
    var save: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // The instruction names the control, not its place or color
            Text("To finish, tap Save.")

            Button(action: save) {
                // The visible name matches the instruction
                Label("Save", systemImage: "checkmark.circle.fill")
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CheckCircle
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun SaveHint(save: () -> Unit) {
    Column {
        // The instruction names the control, not its place or color
        Text("To finish, tap Save.")

        Button(onClick = save) {
            Icon(Icons.Filled.CheckCircle, contentDescription = null)
            // The visible name matches the instruction
            Text("Save")
        }
    }
}

How to test

  • Search the text for sensory words: Look for "left", "right", "above", "below", "round", "square", "red", "green", "beep" and "ring" in instructions, labels and help.
  • Test each instruction without the sense: Could someone follow it without seeing color, shape and position, and without hearing? Is there a name or text as well?
  • Change the layout: Resize the window, use a narrow screen, zoom to 400% and use a reader mode. Is "on the right" or "below" still true?
  • Listen with a screen reader: Does the instruction refer to something the screen reader can find by name?
  • Check sound cues: Is each sound cue also shown as visible text or as a status message?
  • Check mobile: Does the text in the app name the control, and does the control have the same visible label?
  • Use a checker as a start: Automated tools cannot read the meaning of an instruction. Only a person can decide that.

Common mistakes

  • "The button on the right": The place changes with the screen size and means nothing to a screen reader.
  • "The green button": A person who cannot tell the colors, or cannot see, does not know which one it is.
  • "Use the round icon": Shape alone does not identify the control.
  • Instructions that depend on sound: "When you hear the beep" leaves out deaf and hard of hearing users.
  • Instructions that depend on layout: "See the box below" breaks when the layout changes.
  • Describing what the item looks like instead of what it does: Name the function first.
  • Different names in the instruction and on the control: The text says "Submit", the button says "Send".
  • Forgetting help text and emails: Support articles, tooltips and notification text have the same rule.

Sources

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.

Corpowid is recognized by Gartner

Corpowid has been recognized by Gartner, a leading global research and advisory firm, for our innovation and performance in digital accessibility. These badges reflect our commitment to creating inclusive, AI-powered web experiences.

Have questions about Corpowid?

Let’s connect.

We will get back to you as soon as possible.