Skip to content

the html5 template¤

an nbconvert template designed for an accessible experience when rendering notebooks as html webpages. more generally, it could serve as an accessible substrate to build computational literature with like documentation, research papers, or blog posts.

jupyter nbconvert --to html5 features:

  • semantic html tags, roles, and aria for the notebook and its cells
  • efficient tab navigation including:
  • skips links
  • heading links with large hit areas
  • cell source as readonly forms that take tab focus
  • any other rich interactive content in the output
  • uses Atkinson Hyperlegible which is specifically to increase legibility for readers with low vision, and to improve comprehension.
  • uses the github-light-colorblind pygments code theme from the [accessible-pygments](https://github.com/Quansight-Labs/accessible-pygments) project based on [a11y-syntax-highlighting`](https://github.com/ericwbailey/a11y-syntax-highlighting)
  • screen reader landmarks, headings (markdown & outputs), forms (cell inputs), and table navigation
  • operable when zoomed in
  • table of contents for code and narrative navigation
  • configurable accessibility settings
  • persistent settings across sessions
  • best practice auditting during conversion
  • automated remediations
  • fix rendered pandas tables

template scope¤

the template defines the majority of the web page from the html tag to the cell outputs. every element is defined using a meaningful tag or aria role. the cell outputs come from user land and our template can't control their content. if author's abide some best practices then they can ensure an accessible experience when their notebook is exported to html.

POUR-CAF principles¤

notebooks often harness data visualizations. their mission co-develops with accessible visualizations. this project goals beyond the standard WCAG POUR principles and adds Chartability's CAF principles and heuristics to the design.

a table of cells¤

this template represents a notebook as a html table where each notebook cell is a row in the html. the table pattern is a natural html pattern and adds a new dimension to screen readers navigating notebook documents.

table of contents navigation¤

notebook documents can be long and navigating them need to be easier.

  • Esc - minimizes the table of contents
  • Ctrl + Esc - toggles the table of contents

conclusion¤

the html version of notebooks is not the same interactive state as the editting experience, but it is still a highly interactive experience. overall, focusing on an accessible substrate to build sites from has improved the experience from abled and disabled people.