notebook icon indicating copy to clipboard operation
notebook copied to clipboard

Published 20 hours ago • verified publisher icon jupyter

Making Notebook v7 a more accessible offering with semantic html tags

Open tonyfast opened this issue 4 years ago • 2 comments
trafficstars

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 jupyterlab changes, 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.

cc @gabalafou @isabela-pf

tonyfast avatar Nov 05 '21 04:11 tonyfast

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. welcome You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

welcome[bot] avatar Nov 05 '21 04:11 welcome[bot]

Thanks @tonyfast for opening this issue :+1:

i imagine these are jupyterlab changes, but thought this was the place to talk about it.

Indeed, we could implement these changes in JupyterLab. And then update the packages here in RetroLab when a new version is released.

Linking to https://github.com/jupyterlab/retrolab/issues/80 which also has some prior discussions around accessibility.

jtpio avatar Nov 05 '21 10:11 jtpio