Information structure stays the same without styling
Use appropriate coding techniques to clearly define and reinforce the structure and relationships of content. This allows people using assistive technologies to understand the information, regardless of how it is styled visually.
Acceptance Criteria
• Programmatic Structure: Use the correct HTML elements (e.g., headings, lists, tables) to define the content’s structure and relationships.
• Consistent Meaning: Ensure that the meaning and relationships of content are preserved even when visual styling changes.
• Assistive Technology: Screen readers and other assistive technologies should be able to determine the content’s structure and relationships accurately without relying on visual presentation.
Examples
• Good: A webpage uses <h1> for main headings, <h2> for subheadings, and <ul> for lists, making the document’s hierarchy clear to both visual users and screen readers.
• Bad: A webpage uses visual cues like font size and color to indicate headings or lists without using the appropriate HTML elements, making it difficult for screen readers to understand the content’s structure.
Exceptions
• Decorative Content: Content that is purely decorative and does not convey essential information (e.g., decorative icons or images) does not need to be programmatically defined.
• Media Alternatives: Text alternatives for media (e.g., descriptions of video content) might not follow the same structural rules as the visual content but should still convey the same information clearly.
Tips
• Use semantic HTML elements to convey the structure and relationships of content.
• Avoid relying solely on visual styling to communicate content structure; ensure that HTML elements provide the necessary meaning.
• Test with screen readers to ensure that content remains accessible and understandable regardless of visual styling.
How to test?
1. Code Review: Check that appropriate HTML elements or coding techniques are used to define the content’s structure and relationships.
2. Assistive Technology Check: Use screen readers or other assistive tools to verify that the content’s structure and relationships are clear without relying on visual styling.
3. Styling Test: Modify the visual styling (e.g., font size, color) and ensure that the content’s meaning and structure remain accessible and understandable.