Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Making Notebook v7 a more accessible offering with semantic html tags #6395

Open
tonyfast opened this issue Nov 5, 2021 · 2 comments
Open

Making Notebook v7 a more accessible offering with semantic html tags #6395

tonyfast opened this issue Nov 5, 2021 · 2 comments
Labels
enhancement
Milestone
7.0.x

Comments

@tonyfast
Copy link
Collaborator

tonyfast commented Nov 5, 2021 •
edited

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
@welcome
Copy link

welcome bot commented Nov 5, 2021

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

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! 👋

Welcome to the Jupyter community! 🎉

@jtpio
Copy link
Member

jtpio commented Nov 5, 2021

Thanks @tonyfast for opening this issue 👍

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 jupyterlab/retrolab#80 which also has some prior discussions around accessibility.

@fcollonval fcollonval mentioned this issue Nov 10, 2021
Closed
@jtpio jtpio changed the title Making retrolab's notebook a more accessible offering with semantic html tags Making Notebook v7 a more accessible offering with semantic html tags Apr 27, 2022
@jtpio jtpio added this to the 7.0 milestone Apr 27, 2022
@jtpio jtpio transferred this issue from jupyterlab/retrolab Apr 27, 2022
@andrii-i andrii-i modified the milestones: 7.0, 7.0.x Jun 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
7.0.x
Development

No branches or pull requests
3 participants
@jtpio @tonyfast @andrii-i