*This article is an English translation of a Japanese article.
JIS X 8341-3:2016 is the Japanese standard for web accessibility, aiming to make web content more usable for all users. The “Distinguishable” criterion, part of the “Perceivable” guidelines, ensures that information is clearly recognizable, especially for users with visual or auditory impairments. This article explains the requirements of “Distinguishable” under JIS X 8341-3:2016 and offers practical methods to meet these standards.
What is “Distinguishable”?
“Distinguishable” focuses on ensuring that the information and structure of web content are clearly recognizable by all users, including those with visual, auditory, or other physical limitations. This includes factors such as text contrast, clarity of audio, and the readability of content, which must be designed to cater to different users’ needs.
Key Success Criteria for “Distinguishable”
Here are the main success criteria for “Distinguishable.” By adhering to these standards, your content will be more accessible to a broader range of users.
1. Contrast-Aware Design
-
Text and Background Contrast Ratio
For users with visual impairments, text that blends into the background can be difficult to read. JIS X 8341-3:2016 recommends a minimum contrast ratio of 4.5:1 between text and background colors. For large text, a contrast ratio of 3:1 or higher is sufficient to ensure readability. -
Using Contrast Checking Tools
During the design process, use contrast-checking tools (e.g., WebAIM’s Contrast Checker) to ensure the design meets the required contrast standards.
2. Avoiding Reliance on Color Alone
-
Design for Color Vision Deficiency
When information is conveyed solely through color, users with color vision deficiencies may miss it. For example, if an error message is highlighted in red, it should also include an icon or explanatory text to ensure the message is understood by everyone. -
Use Visual Cues Beyond Color
In charts or graphs, use patterns, textures, or labels in addition to different colors to ensure that the information can be distinguished without relying on color alone.
3. Enhancing Text Readability
-
Adjustable Font Sizes
Small fonts are hard to read. Use at least 12pt fonts and allow users to adjust the text size on their devices. Also, adjust line spacing and letter spacing to prevent text from appearing cluttered. -
Visual Emphasis on Important Information
Use bold or underline text to highlight key information or links, in addition to color. However, avoid excessive emphasis that can make the content harder to read and balance the design.
4. Providing Audio Alternatives and Subtitles
-
Subtitles and Transcripts
Ensure that all audio or video content includes subtitles or transcripts. This is crucial for users with hearing impairments or those in environments where audio is not available. -
Use Both Visual and Audio Alerts
When alerting users with sound (e.g., an error chime), also provide visual alerts such as pop-up messages to ensure that users with hearing impairments can recognize the alert.
5. Stabilizing Dynamic Content
-
Avoid Flashing or Sudden Movements
Flashing or rapidly moving content can trigger seizures in users with photosensitivity. Control animation speed and offer users the ability to pause or skip animations. -
Enhancing the Usability of Videos and Sliders
For auto-playing videos or sliders, provide a pause button or speed control options to allow users to maintain visual stability and control their viewing experience.
The Importance of Following the “Distinguishable” Guidelines
Adhering to the “Distinguishable” criteria benefits not only users with visual or auditory impairments but also users affected by environmental factors like screen glare or low-light conditions. Improving the clarity and readability of web content enhances overall usability, reducing bounce rates and increasing conversions. This not only supports accessibility but also drives better business outcomes.
Conclusion
The “Distinguishable” guideline, part of the “Perceivable” category in JIS X 8341-3:2016, is essential for ensuring that web content is clear and accessible to all users. By focusing on contrast, accommodating color vision deficiencies, enhancing text readability, providing alternatives for audio content, and stabilizing dynamic content, you can make your web content more inclusive. Following these guidelines helps create a web environment that is accessible to everyone, improving user satisfaction and overall accessibility.
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.