1.3.1 Info and Relationships

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Are all visual lists correctly coded as lists?

What

This check verifies that any content presented visually as a list, such as bullet points or numbered items, is marked up with proper HTML list tags like <ul>, <ol>, and <li>. Proper markup helps screen reader users and others to easily understand and navigate listed information.

Why

When lists are only visually formatted, for example, with dashes or manual numbers without list tags, screen readers cannot announce the number of items or provide specific list navigation shortcuts. 

Who

This check affects the following users who have:

• Visual impairments including blindness and low vision: Who rely on assistive technologies like screen readers or magnifiers to understand the structure and relationship of the content.

Examples

Pass example

1.3.1 Info and Relationships

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Are all visual lists correctly coded as lists?

What

This check verifies that any content presented visually as a list, such as bullet points or numbered items, is marked up with proper HTML list tags like <ul>, <ol>, and <li>. Proper markup helps screen reader users and others to easily understand and navigate listed information.

Why

When lists are only visually formatted, for example, with dashes or manual numbers without list tags, screen readers cannot announce the number of items or provide specific list navigation shortcuts. 

Who

This check affects the following users who have:

• Visual impairments including blindness and low vision: Who rely on assistive technologies like screen readers or magnifiers to understand the structure and relationship of the content.

Examples

Pass example

A list is correctly marked up with unordered list tags.

HTML

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

Fail example

A list is created visually with break tags and dashes instead of semantic list elements.

HTML

- Apples<br>
- Oranges<br>
- Bananas

How

This section provides information on how to review and fix this issue.

How to review it

Identify any content on the page that looks like a list. You can use the Acquia Web Governance Browser Extension to identify the element on the page or in the HTML source code. Check if the element is wrapped in <ul> (unordered list) or <ol> (ordered list) tags and that each item is contained within <li> tags.

How to fix it

Replace manual formatting with semantic HTML list tags. If the order of items matters, use the <ol> tag. If the order does not matter, use the <ul> tag. Ensure that every item in the list is wrapped in an <li> tag.

Additional resources

WCAG success criteria

• 1.3.1: Info and Relationships