Adaptable content
WCAG Guideline 1.3 (AA) and success criteria
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
Last updated on
Make sure visual formatting is represented in the backend code (Level A, 1.3.1)
Visual cues, like font size and paragraph spacing, help sighted people understand content. Assistive technologies, such as screen readers, rely on the code to ‘see’ the formatting and structure. If you bold text instead of using proper heading tags, a sighted user may perceive it as a heading, but a screen reader will not. That’s because the content is missing semantic structure.
The semantic structure tells us how the information, structure and relationship of content are meant to behave. Without it, these content pieces and their relationships are inaccessible to many.
Some technologies do not provide a way to do this. When this is the case, you must include text describing the information and relationship. For example, ‘asterisk (*) indicates a required field’. The text should be near the information it’s describing, such as in the parent or adjacent element.
How to use semantic markup in code
- Structure your content using appropriate HTML elements or markup languages, for example:
- Use headings (h1, h2, etc.) in the correct hierarchical order
- Use semantic elements to create lists (ol, ul, li, etc.)
- Ensure all non-text content (images, charts, graphs, etc.) have alternative text (alt text)
- Label interactive elements (such as form fields, buttons and links) with descriptive text
- Use consistent and clear formatting to identify types of content or important elements
- Use proper linking techniques to connect related content or navigate within a document. For example, use anchor tags with clear and descriptive link text for internal links
- If you use multimedia elements like videos or audio, provide captions, transcripts or other text-based alternatives
- Test the content with people who use assistive technologies, such as screen readers or keyboard navigation. Make sure the information, structure and relationships can be accessed and understood
Order information in a meaningful sequence (Level A, 1.3.2)
‘Meaningful sequence’ means information must be read in a specific order to make sense. Not meeting this success criteria will cause some assistive technology users to read information out of order.
The order of content is not always meaningful, for example it does not matter in what sequence items in an unordered list are read. However, for tables, headings and ordered lists they need to be read in the correct order to be understood properly.
That order is communicated through semantic markup in the coding. If the order of the content has meaning, it cannot just be presented visually, it must also include semantic structure.
How to order information in a meaningful way
- Identify where the order or sequence of information matters for meaning
- Structure your content using appropriate HTML elements or markup languages. Make sure the order of the elements reflects the correct reading sequence and follows a logical flow
- Use proper heading and subheading structure (h1, h2, h3, etc.) to organize the content hierarchically. Make sure the headings reflect the content’s structure and guide people through the correct reading order
- When presenting items in a particular order, such as a list of instructions, use numbered lists
- Provide clear and descriptive link text that describes where it goes. Do not use generic link text like ‘click here’ or ‘read more’
- Use assistive technologies, such as screen readers, to check the reading sequence is correct
Make sure instructions don’t depend on how things look, sound or feel (Level A, 1.3.3)
Everyone should be able to access instructions, even if they cannot:
- See shape, colour or size
- Perceive information about their location or orientation on the page
- Hear content that involves sound
This means adding information to instructions that depend on visual or auditory cues.
For example, some content relies on visual cues like ‘press the green button to submit’. While this cue may be helpful for some, it relies on sensory perception that are not available to others.
To make these instructions more accessible, provide explicit guidance. In the case of the green button, the instructions could say, ‘to submit the form press the green button labeled submit at the bottom of the page’. This uses location, colour and the label associated with the button to help people find it.
How to create inclusive instructions
- Provide instructions that are clear, concise and state how to understand and use content
- Do not rely on sensory characteristics alone, such as the appearance, size, or position of elements. Include visual cues, such as labels or symbols as well
- Add alternative text to visual elements, such as icons or images
- Do not rely on one mode of communication for important instructions or information. Make sure the content is available in alternative formats, such as text-based instructions, transcripts or captions
- Test the content with a diverse range of individuals who have sensory related disabilities. Gather feedback and make adjustments so instructions can be understood and used by a wide range of people
Support portrait and landscape display orientation (Level AA, 1.3.4)
People should be able to display content in the orientation (portrait or landscape) they prefer. This means not restricting it unless necessary, such as for bank cheques or virtual reality experiences.
By doing this, you better serve individual needs. For example, people may switch to landscape to increase text size, while others have their devices mounted in fixed positions.
How to support flexible display orientations
- Design and develop content that adapts to different display orientations
- Avoid enforcing a fixed display orientation, unless required
- Use responsive design techniques so content adapts to different screen sizes and orientations
- Test function and usability of the content on devices with different display orientations. Make sure it does not lose important functionality or information when the orientation changes
- Test with people who rely on assistive technologies, such as screen readers or alternative input devices. Make sure they can access and operate the content in any display orientation
Clearly define the purpose of input fields (Level AA, 1.3.5)
Form input fields that collect user data (such as name or address) need to be clearly defined in the code.
This makes filling out forms easier by:
- Enabling autocomplete using values stored in the user’s browser
- Allowing some user agents and assistive technologies to provide personalized presentation to the user
Some assistive technology offer a customized way of communicating input fields, such as using a set of familiar icons. For example, an icon of a birthday cake in front of an input field with autocomplete=”bday”, or a telephone in front of an input field with autocomplete=”tel”.
It’s recommended to use the HTML autocomplete attribute with specific well-defined values. This provides a more precise purpose than the ‘type’ attribute alone. For example, it allows the author to specify a type of name, such as autocomplete=”given-name”.
Using specific labels for each field makes it more clear what’s expected of the user.
How to clearly define input fields
- Clearly define and identify the purpose of each input field that collects information about the user. Determine the specific data that should be entered in the field and its intended use
- Use technologies that support identifying the expected meaning or purpose for form input data. For example, HTML5 provides various input types, attributes and ARIA roles that can be used to convey the purpose of input fields to assistive technologies
- Use labels or instructions to provide information about the purpose or expected format of each input field. Associate the labels with the respective input fields using the appropriate HTML markup or ARIA attributes
- Provide accessible error messages and validation prompts. Clearly communicate any issues or requirements related to the input. For example, invalid format or missing information, in a way that can be programmatically determined
- Test with people who rely on assistive technologies, such as screen readers or voice recognition software, to check the accessibility of your input fields. Verify the purpose of each input field can be determined by the assistive technologies and that people can understand and interact with the fields effectively