HTML - Accessibility Part 2

Instructors: Jess, Carmen, and Eda

Accessibility

Before this session, please:

• Read Working with Accessible Tables and Forms: What Are Best Practices for Tables and Accessibility? and take notes
• Read Working with Accessible Tables and Forms: Why Is It Important for Inputs to Have an Associated Label? and take notes
• Complete all the steps from Build a Tech Conference Schedule Table, recording your questions and new topics introduced
• Finish Debug a Donation Form solo over the next few days

During this session, we’ll:

• Review notes
• Review notes
• We’ll look at key steps from Build a Tech Conference Schedule Table and talk more about accessibility
• We’ll look at Debug a Donation Form together to help prepare you to complete this lab on your own

After this session, please:

• Read Introduction to ARIA: What Is the Purpose of WAI-ARIA, and How Does It Work? and take notes
• Read Introduction to ARIA: What Are ARIA Roles? and take notes
• Read Introduction to ARIA: What Are the Roles of the aria-label and aria-labelledby Attributes? and take notes
• Read Introduction to ARIA: What Is the aria-hidden Attribute, and How Does It Work? and take notes
• Read Introduction to ARIA: What Is the aria-describedby Attribute, and How Does It Work? and take notes
• Try to complete all the steps in Build an Accessible Audio Controller, recording your questions and new concepts introduced

Instructor notes

Working with Accessible Tables and Forms: What Are Best Practices for Tables and Accessibility?

Relationships in a table might be understandable visually by sighted people, but it’s much harder for people using screen readers to navigate and associate values with headers.

We should structure our HTML in a way with accessibility in mind.

One thing we can do is to use a caption element: we can write the caption (title) of the table so that people can understand the table’s purpose and content. It should be used right after the opening table element:

1<table>
2  <caption>My Books</caption>
3  ...
4</table>

We can also add headers to our tables. Headers are usually at the start of a row or column. They describe the type of data for that row or column. We can use the th element to describe the table header.

This example has both column and row headers:

 1<table>
 2  <caption>My Books</caption>
 3  <thead>
 4    <tr>
 5      <!-- Column Headers -->
 6      <th>Title</th>
 7      <th>Author</th>
 8      <th>Published Date</th>
 9    </tr>
10  </thead>
11  <tbody>
12    <tr>
13      <th>Collected Fictions</th> <!-- Row Header -->
14      <td>Jorge Luis Borges</td>
15      <td>1999</td>
16    </tr>
17    <tr>
18      <th>Gödel, Escher, Bach</th> <!-- Row Header -->
19      <td>Douglas Hofstadter</td>
20      <td>1979</td>
21    </tr>
22  </tbody>
23</table>

It’s also good practice to use the scope attribute to explicitly show if a header is a row header or a column header:

 1<table>
 2  <caption>My Books</caption>
 3  <thead>
 4    <tr>
 5      <!-- Column Headers -->
 6      <th scope="col">Title</th>
 7      <th scope="col">Author</th>
 8      <th scope="col">Published Date</th>
 9    </tr>
10  </thead>
11  <tbody>
12    <tr>
13      <th scope="row">Collected Fictions</th> <!-- Row Header -->
14      <td>Jorge Luis Borges</td>
15      <td>1999</td>
16    </tr>
17    <tr>
18      <th scope="row">Gödel, Escher, Bach</th> <!-- Row Header -->
19      <td>Douglas Hofstadter</td>
20      <td>1979</td>
21    </tr>
22  </tbody>
23</table>

scope has four possible values (but mostly row and column are used):

• row
• col
• rowgroup
• colgroup

A column or row header might span across multiple cells, and scope will be applied to them as well.

We should, however, avoid too much complexity as some screen readers may not be able to interpret tables with complex structures.

It’s also recommended to avoid defining cell height and using fixed values for cell width. We can use relative values like percentages so that users will be able to adjust the text size.

Working with Accessible Tables and Forms: Why Is It Important for Inputs to Have an Associated Label?

Labels describe the purpose of input fields, and they are especially important for screen readers.

We should associate a label with an input using the for attribute (explicit association) whenever possible.

1<form>
2   <label for="name">Your Name</label>
3   <input type="text" id="name" />
4</form>

Implicit association is when we nest the input element inside the label. However, as the MDN docs note:

While common browser and screen reader combinations support implicit association, not all assistive technologies do.

When the input is focused, screen readers announce the label.

Using associated labels also improves SEO, as the page content becomes more understandable and descriptive.

Build a Tech Conference Schedule Table

In this exercise, we’ll focus on how to make our HTML tables more accessible based on our explorations on accessibility so far.

Debug a Donation Form

We’ll take a look at this exercise for finding and fixing accessibility issues on an HTML form.