What is “Perceivable” in JIS X 8341-3:2016(WCAG)? Comprehensive Guide to Success Criteria and Implementation Methods

*This article is an English translation of a Japanese article.

JIS X 8341-3:2016 is a set of guidelines aimed at improving web content accessibility to ensure that diverse users can access and engage with content. The “Perceivable” category focuses on making content recognizable through various sensory channels, such as sight, hearing, and touch. This article explains the “Adaptable” guideline under the “Perceivable” category, detailing the success criteria and specific implementation methods.

Adaptable (Criterion 1.3.1) – Information and Relationships

Overview of the Success Criterion

Criterion “1.3.1 Information and Relationships” emphasizes ensuring that the meaning and relationships of information in web content can be recognized not only visually but also programmatically. This ensures that technologies like screen readers can accurately convey information. Proper markup for structures like headings, lists, tables, and forms is key to achieving this goal.

Key Implementation Points

• Correct Use of Headings and Lists
  Use heading tags from <h1> to <h6> to indicate page hierarchy properly. For lists, use <ul> for unordered lists and <ol> for ordered lists to show item relationships clearly.

• Proper Table Markup
  For tables, use heading cells (<th>) and data cells (<td>) to associate headers with the appropriate data. For complex tables, attributes like scope and headers can be used to clarify relationships between cells.

• Labeling Forms Correctly
  Always use <label> tags to describe each form input field clearly. The for attribute should be used to link the label to the respective input field, ensuring that assistive technologies can read it correctly.

Adaptable (Criterion 1.3.2) – Meaningful Sequence

Overview of the Success Criterion

Criterion “1.3.2 Meaningful Sequence” requires that content be presented in a logical sequence that conveys meaning. When visual layout impacts the understanding of content, the sequence must be logical. Proper code structure ensures that assistive technologies can interpret the content in the correct order.

Key Implementation Points

• Logical Content Order
  Ensure that HTML elements are structured in a logical order based on visual layout. For instance, important information should be placed first, followed by supplementary details.

• Tab Key Navigation
  Users navigating with the Tab key should experience a natural, intuitive flow. Ensure that improper use of tabindex doesn’t cause unexpected navigation jumps.

• Use of ARIA Landmarks
  Use ARIA landmarks (e.g., role="main", role="navigation", role="complementary") to define page sections and maintain a logical order of content.

Adaptable (Criterion 1.3.3) – Sensory Characteristics

Overview of the Success Criterion

Criterion “1.3.3 Sensory Characteristics” states that information must not rely solely on sensory characteristics such as color, shape, location, or sound to be understood. This ensures that users with visual or hearing impairments can still comprehend the content.

Key Implementation Points

• Provide Supplemental Text Information
  Instead of instructions like “Click the red button,” use descriptive text such as “Click the delete button” to avoid relying solely on sensory information.

• Use Text or Symbols Along with Color
  When using color to emphasize information, also use text or icons. For example, instead of relying solely on a red background for error messages, add a symbol (e.g., ❌) and a clear message.

• Visual Alternatives to Audio Cues
  If there’s an auditory alert (e.g., a sound to draw attention), also provide a visual cue such as a pop-up message or color change for users who may not hear the alert.

The Importance of Meeting the “Perceivable” Success Criteria

Meeting the “Perceivable” criteria ensures that users with sensory, cognitive, or physical limitations can use your website effectively. Structuring content properly, maintaining logical order, and providing non-sensory-dependent information not only improves accessibility but enhances overall usability for all users. Furthermore, by adhering to these guidelines, you can create an environment where everyone can access web content equally, expanding your business reach and enhancing your social value.

Conclusion

The “Adaptable” success criteria under the “Perceivable” category of JIS X 8341-3:2016 are fundamental to ensuring that web content is accessible to diverse users. By focusing on structured information, meaningful sequences, and designs that do not rely on sensory characteristics, you can create websites that are accessible and user-friendly for everyone. Adhering to these guidelines demonstrates a commitment to usability and inclusivity, benefiting all users and contributing to a more equitable digital world.

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.