Understanding WCAG SC 1.3.3 Sensory Characteristics
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 1.3.3 specifies that instructions provided for perceiving and operating content and information do not rely solely on sensory characteristics such as shape, size, visual location, orientation, or sound. This ensures that all users, including those with visual, auditory, or cognitive disabilities, can access and interact with web content.

Benefits:

  1. Improved Usability for Screen Reader Users: Enhances the experience for users relying on screen readers by providing clear and concise information.
  2. Enhanced Clarity for Cognitive Disabilities: Increases understanding and usability for users with cognitive disabilities through clear and straightforward content.
  3. Accessibility for Deaf and Deaf-Blind Users: Ensures that auditory clues are provided with text or visual cues, making content accessible for users who are deaf or deaf-blind.

Main Objective:

To ensure that instructions for operating content are accessible and do not rely solely on sensory characteristics.

Best Practices:

  • Provide visible labels or names: Provide visible labels or names to controls when using shape or location.

  • Combine multiple visual cues with text: Combine color, shape, size, location, or orientation with textual information, and include it in the instructions. (“To submit the form, click on the rounded button with the label submit”)

Examples & Explanation:

Example: Instructions for a web page provide navigation guidance based solely on color and shape.

What Should Be Avoided

HTML/CSS

              <p>To proceed to the next step, click the green triangle button at the bottom right.</p>
              <button class="triangle"></button>

Explanation:This instruction relies only on the color and shape of the button, making it inaccessible for users who cannot perceive these sensory characteristics.

What Should Be Done

HTML/CSS

              <p>To proceed to the next step, click the button labeled "Next" at the bottom right.</p>
              <button class="triangle">Next</button>

Explanation:This instruction includes a textual inner text ("Next"), providing clear guidance that does not rely solely on sensory characteristics, ensuring accessibility for all users.

Next Up

Enhance your knowledge with SC 1.3.4 - Orientation. Learn to make your content adaptable and accessible for all users.

Go to SC 1.3.4