1.3.1: Info and Relationships

Use Case 1: Headings and Subheadings

Headings and subheadings should be used to create a logical structure for your content. Proper use of headings allows screen readers to navigate content efficiently and provides visual structure for sighted users. Use HTML tags <h1> to <h6> to denote headings, with <h1> being the main heading and <h2> to <h6> for subheadings.

Example: A blog post might use <h1> for the title, <h2> for sections, and <h3> for subsections, allowing a screen reader to list and jump to different sections of the post.

How to Test: Use a screen reader like NVDA or JAWS to navigate the page by headings. Check if the headings are announced correctly and in a logical order.

Exceptions: None.

Using ARIA: If HTML5 semantics can't be used, use role="heading" and aria-level attributes to denote headings. For example, <div role="heading" aria-level="1">Title</div>.

Use Case 2: Lists

Lists should be used to group related items, making content easier to scan and understand. Unordered lists (<ul>) are used for items without a specific order, while ordered lists (<ol>) are for items with a sequence. Each list item should be enclosed in an <li> tag.

Example: A recipe page lists ingredients using <ul> and steps using <ol>. This helps screen readers announce items correctly and allows users to follow the sequence of steps.

How to Test: Use a screen reader to navigate through the list items. Ensure that the screen reader correctly identifies and announces the list and its items.

Exceptions: None.

Using ARIA: If HTML5 semantics can't be used, use role="list" for <ul> and <ol>, and role="listitem" for <li>. For example, <div role="list"><div role="listitem">Item</div></div>.

Use Case 3: Tables

Tables are used to present tabular data. Properly marked-up tables provide relationships between data cells and headers. Use <table> for tables, <th> for headers, <tr> for rows, and <td> for data cells. Ensure <th> elements use scope attributes to define their scope (row or column).

Example: An e-commerce site displaying product specifications in a table format ensures that a screen reader can accurately convey the relationships between headers and data cells, helping users compare products.

How to Test: Use a screen reader to navigate through the table. Ensure that the headers and their associated data cells are announced correctly and the relationships are clear.

Exceptions: Simple layout tables can use <table> without headers if the structure is clear.

Using ARIA: If HTML5 semantics can't be used, use ARIA roles such as role="table", role="row", role="columnheader", and role="cell". For example, <div role="table"><div role="row"><div role="columnheader">Header</div><div role="cell">Data</div></div></div>.

Use Case 4: Form Elements

Form elements should be properly labeled to ensure users understand their purpose. Use <label> for form labels and associate them with form controls using the for attribute, which should match the id of the form control.

Example: A contact form where each input field is properly labeled allows screen reader users to understand the purpose of each field, ensuring they can fill out the form correctly.

How to Test: Use a screen reader to navigate through the form. Ensure that each form control is announced with its label and that the purpose of each control is clear.

Exceptions: None.

Using ARIA: If HTML5 semantics can't be used, use ARIA attributes like aria-labelledby to associate labels with form controls. For example, <input type="text" aria-labelledby="labelID">.

Use Case 5: Semantic HTML Elements

Semantic HTML elements provide meaning to the web content, making it more accessible. Use elements like <nav> for navigation, <article> for articles, <aside> for sidebars, and <footer> for the footer. These elements help assistive technologies recognize different parts of the page.

Example: A news website using semantic HTML tags helps assistive technologies recognize different parts of the page, improving the navigation and understanding of the content structure for users.

How to Test: Use a screen reader to navigate through the page and ensure that the landmarks (e.g., navigation, main content, footer) are correctly identified and announced.

Exceptions: None.

Using ARIA: If HTML5 semantics can't be used, use ARIA roles such as role="navigation", role="main", role="complementary", and role="contentinfo" to provide similar structure. For example, <div role="navigation">...</div>.

Use Case 6: ARIA Roles and Properties

ARIA (Accessible Rich Internet Applications) roles and properties enhance the accessibility of dynamic content and complex widgets. Use ARIA roles like role="navigation" for navigation bars, role="main" for the main content, and properties like aria-labelledby and aria-describedby to provide additional context.

Example: A dynamic web application using ARIA roles and properties ensures that even complex widgets like tab panels and accordions are accessible to screen reader users, providing them with necessary information about their functionality and state.

How to Test: Use a screen reader to interact with dynamic content and widgets. Ensure that the roles, states, and properties are announced correctly and the content is usable.

Exceptions: None.

Using ARIA: ARIA should be used to enhance HTML5 semantics or when HTML5 semantics are not available. For example, use role="tab" for tab panels, role="button" for interactive buttons, and aria-expanded to indicate the state of expandable content.