WCAG 2.1: Section 1.3 - Adaptable Content

Section 1.3: Adaptable Content

This section of WCAG 2.1 ensures that the content is structured and adaptable so that it can be effectively interpreted by assistive technologies like screen readers, while maintaining meaning and accessibility for all users.

1.3.1 Info and Relationships

Content relationships (like headings, lists, and tables) must be programmatically determinable, so assistive technologies can convey them to users.

• Example: Use proper HTML markup for headings (<h1>, <h2>, etc.), lists (<ul>, <ol>), and tables (<table>) to clearly show content structure.
• Example: A table of data should have headers specified using the <th> tag to describe the rows and columns.

1.3.2 Meaningful Sequence

Ensure content is presented in a meaningful sequence that conveys the intended meaning when read by assistive tools like screen readers.

• Example: A form with input fields should follow a logical sequence, such as Name → Email → Password, using semantic HTML and logical tab order.
• Example: Below is a sample form demonstrating a meaningful sequence:

1.3.3 Sensory Characteristics

Do not rely solely on sensory characteristics like color, shape, size, or position to convey information. Ensure alternative ways to identify key information.

• Example: A form with required fields should not use color alone (like red borders) to indicate them. Instead, use text like "Required" next to the field.
• Example: Below is an accessible form with required fields marked clearly:

1.3.4 Orientation

Ensure content and functionality are accessible in both landscape and portrait orientations without requiring a specific orientation unless essential.

• Example: A photo gallery should work and be easily navigable whether the user holds their phone in portrait or landscape orientation.

1.3.5 Identify Input Purpose

Input fields collecting user data should be programmatically labeled to identify their purpose, making them accessible to assistive technologies.

• Example: Use the autocomplete attribute on input fields to assist users. For instance, autocomplete="email" for an email field or autocomplete="name" for a name field.
• Example: Below is an accessible form using autocomplete attributes: