Making Notebook v7 a more accessible offering with semantic html tags #6395
Description
Problem
we do not have an accessible jupyter offering, and retrolab might be an easier to achieve compliance for than allow of jupyterlab. currently, most of the elements in retro/lab are div tags with some aria information appended; the most standards compliant solution for accessibility would be to use semantic html tags instead.
Proposed Solution
being more descriptive about tags will all assistive technologies to naturally navigate the notebook ui. the proposed solutions changes divs to more meaningful semantic tags like main, article, section, ... in the shape of the pseudo code below.
<html>
<head/>
<body>
<header>jupyter logo and notebook name</header>
<nav aria-label="toolbar">the file, edit navigation</nav>
<main aria-label="notebook">
<nav aria-label="notebook toolbar"\>
<article aria-label="notebook cell">
# for all the cells ....
<section aria-label="notebook cell {CellNumber}">
<section aria-label="notebook cell {CellNumber} input">
<aside aria-label="notebook cell {CellNumber} input prompt"/>
cell input
</section>
<section aria-label="notebook cell {CellNumber} output {OutputNumber}">
<aside aria-label="notebook cell {CellNumber} output {OutputNumber} prompt"/>
cell output
</section>
</section>
</article>
<footer>status bar?</footer>
</main>
</body>if we can translate some of the primary div tags to their more meaningful semantic tags main, article, section,... then we can provide navigation at the very least for assistive technologies.
Additional context
- i imagine these are
jupyterlabchanges, but thought this was the place to talk about it. - at least at a glance i feel like these changes are not too invasive, but i don't know lab well to appreciate the impacts on style and extensions.
- the file browser is another issue entirely.