Lists #
What are lists? #
Lists are a way to present related pieces of information in a structured, scannable format. They can be:
- Bulleted lists (unordered lists): used when the order doesn’t matter, like a shopping list or a set of features.
- Numbered lists (ordered lists): used when the order is important, like a set of steps in a process.
Lists are not just about visual appearance—they are semantic structures that give meaning to how items relate to each other. When you use the proper list tool in your editor, assistive technologies recognize the content as a list and announce it as such (e.g., “list with 4 items”).
Best practices for lists #
- Use built-in list formatting tools (bullets or numbers).
- Choose bullets when order doesn’t matter, numbers when order does.
List Examples #
Good list example (using built-in formatting):
Steps to reset your password:
- Go to the login page.
- Click “Forgot Password.”
- Enter your email address.
- Check your inbox for the reset link.
Bad list example (manually typed with dashes):
-Go to the login page.
-Click “Forgot Password.”
-Enter your email address.
-Check your inbox for the reset link.
A screen reader won’t recognize the “bad” example as a list—it will just read it as four separate lines.
Why do lists matter? #
- Screen readers let users know how many items are in the list and allow them to navigate between them.
- Lists make scanning easier for everyone, not just people using assistive technology.
- Improperly formatted lists (like manually typing dashes or numbers) break this functionality and make it harder to understand the structure.
Tables #
What are tables? #
Tables organize information into rows and columns, showing relationships between data points. They are best used for tabular data, like schedules, pricing comparisons, or survey results.
When properly formatted, screen readers can announce table headers and help users understand how each cell relates to its row and column. Tables should never be used for layout purposes (like putting text in columns) because this creates confusion for assistive technologies.
Best practices for tables #
- Use tables only for data, not layout.
- Always include a header row.
- Mark headers as headers in your editor (don’t just bold them).
- Provide a summary or caption for complex tables.
Table Examples #
Good table example (with headers):
| Day | Workshop Topic | Time | Location |
|---|---|---|---|
| Monday | Introduction to R | 10 AM | Room 101 |
| Wednesday | Data Visualization | 2 PM | Room 202 |
| Friday | Accessibility 101 | 1 PM | Room 303 |
A screen reader will announce: “Table with 4 columns and 3 rows. Column 1: Day. Column 2: Workshop Topic…”
Bad table example (no headers):
| Monday | 10 AM | Room 101 |
| Wednesday | 2 PM | Room 202 |
| Friday | 1 PM | Room 303 |
Without headers, a screen reader just reads out each cell with no context: “Monday. 10 AM. Room 101.” Users can’t tell what those values represent.
Why do tables matter? #
- Tables allow complex information to be presented in a compact, logical way.
- With properly marked-up headers, screen readers can guide users cell by cell, always telling them what row or column they’re in.
- Layout tables or unlabeled tables confuse this navigation, making data inaccessible.