Explore ARIA options in rendered notebook

[isabela-pf]

Problem and context

This issue comes from our user testing round 1: navigation. This has implementation overlap with #5, but I am keeping it as it's own issue to document the separate "why" behind the asks.

ARIA roles are a critical practice for more robust accessibility support in addition to proper HTML. There were two times where ARIA roles as a whole (not only landmarks like in #5) were brought up.

After exploring the table in Task 3, participants were asked "How easy or difficult was it for you to navigate to and through the table?" In response, one participant mentioned that that they expected ARIA-level summary of the table to aid in navigation. (@isabela-pf note: I am looking for what ARIA role or attribute this might correspond to, but I'm uncertain at the moment. I'm spending most of my time on the ARIA Authoring Practices Guide, for context).

During the post-task Follow Up Questions, participants were asked "What was frustrating about navigating the Jupyter notebook with your assistive tech?" Here, a participant specifically asked for all ARIA labels to be applied to relevant elements throughout the notebook.

Possible solutions

At this point, the problem requires exploration. There is much more to ARIA than was discussed during these tests, and it is often-warned that "No ARIA is better than Bad ARIA." Still, this is a common accessibility practice and a request we need to acknowledge in some form.

Acceptance criteria

This issue can be closed when we decide

• What HTML is lacking in the rendered notebook and needs to be addressed first
• Where ARIA roles would fit within the ecosystem (is this a conversion step, is it a problem in the file format, is it in the hosting platform, etc.?)
• Which ARIA roles support table summaries and which one seems suited for this specific feedback
• Which ARIA roles are the foundational support for navigation—starting with the W3 Schools list as recommended
• What next steps we want to take with ARIA on this project

Tasks to complete

Tasks are to be determined by further tests and team discussion.

[smythp]

In HTML, there are a couple ways to do this. Without aria, you can nest a summary in the caption:

<table>

  <caption>Lemonade Prices
	<br>
	<span>Column one shows the size of each glass of lemonade. Column two shows the price in cents.</span>
    </caption>
  <tr>
    <th>Size</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Big Glass</td>
    <td>75¢</td>
  </tr>
  <tr>
    <td>Little Glass</td>
    <td>50¢</td>
  </tr>
</table>

Lemonade Prices
Column one shows the size of each glass of lemonade. Column two shows the price in cents.

Size	Price
Big Glass	75¢
Little Glass	50¢

This makes a summary that is visible to all users, including sighted users, and semantically is an extension of the caption. I do think these summaries are often also useful for sighted users, as they can be a cognitive aid.

The other approach here, I think, is use of aria-describedby, which points to another paragraph.

<p id="lemonade-table-description">Column one shows the size of each glass of lemonade. Column two shows the price in cents.</p>

<table aria-describedby="lemonade-table-description">
...
</table>

I think the bigger issue here is thinking about how researchers are using tables in their notebooks, and where the descriptions would be placed in code so that they would be included in the HTML output.