*This article is an English translation of a Japanese article.
The “Perceivable” principle in web accessibility ensures that users can understand information through visual and auditory means. This principle is particularly important for those with visual or hearing impairments, enabling them to access content accurately and comfortably. This article explains what the “Perceivable” principle entails and provides specific methods to implement it effectively.
What is the “Perceivable” Principle?
The “Perceivable” principle focuses on making web content and interface elements available to all users in a way they can perceive. This principle is based on three key criteria:
- Distinguishing text and non-text content
- Providing alternative formats for auditory and visual content
- Allowing users to adjust visual and auditory information according to their needs
Implementing the Perceivable Principle
1. Provide Alternative Text for Images and Graphics
Alternative text (alt attributes) helps visually impaired users understand image content through screen readers. Include brief yet descriptive text for images. For example, an image of a product could include “Red shirt with front logo” as a description.
<img src="red-shirt.jpg" alt="Red shirt with front logo">
2. Offer Captions and Transcripts for Videos and Audio Content
To help users with hearing impairments access content, provide captions or transcripts for audio and video content. For example, embed subtitles in videos or add a link to a transcript file.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English subtitles">
</video>
3. Don’t Rely Solely on Color to Convey Information
Avoid using color alone to convey information. For instance, when displaying an error or emphasis, use icons or text in addition to color to make information clear for users who cannot rely on color differentiation.
Example: Add an icon with the text “Error” alongside a red color to ensure all users understand the message.
<p class="error">
<span aria-hidden="true">⚠️</span> <span>There is an error in the input</span>
</p>
4. Ensure Sufficient Contrast Ratio
Maintain a contrast ratio of at least 4.5:1 between text and background colors to improve readability. Avoid light text on light backgrounds or dark text on dark backgrounds. Contrast-checking tools can help confirm sufficient contrast.
Additional Tips for Enhancing Perceivability
- Allow Font Size Adjustments: Provide functionality for users to adjust text size, making it easier to read for those with visual impairments.
- Provide Important Information as Text: Even if information is conveyed through images or video, add text-based explanations where necessary to ensure clarity.
Conclusion
By implementing the “Perceivable” principle, you can provide accessible web content to all users, including those with visual or auditory disabilities. Simple measures such as alternative text, captions, and contrast adjustments significantly improve accessibility.
When creating web content, always aim for a perceivable design that allows everyone equal access to information.
We have released the UUU Web Accessibility Widget Tool, designed to make web accessibility easy to implement. This tool helps improve the accessibility of websites quickly and efficiently, even without specialized knowledge.
If you’re interested in enhancing your website’s accessibility, please check out the details. We are here to support you in making your website more user-friendly and accessible to a wider audience.