# A Crash Course in Digital Accessibility

this document is full of links for you to visit later, and learn at your own pace.
this is a 5 minute link dump about my special interest.
with a surprise demo!

* w3c accessibility standards
* accessibility auditing tools and practices
* language used in the accessibility circles
* how disability impacts us all.

<figure markdown>
    
![image.png](attachment:4d2af2cf-f339-4de6-9f04-a447f96fb5e6.png "qrcode to tonyfast.github.io")

<figcaption markdown>

## history 

* [original content developed for pycascades 2023 lightning talks](https://tonyfast.github.io/tonyfast/xxiii/2023-03-18-pycascades-ally-talk.htmlhttps://tonyfast.github.io/tonyfast/xxiii/2023-03-18-pycascades-ally-talk.html)
* [updated for bellingham codes on 7/6](https://www.meetup.com/bellinghamcodes/events/294458693/)

</figcaption>
</figure>


<form id="controls">    
    <label for="run">🏃</label><button id="run" data-commandlinker-command="notebook:run-all-cells">run all</button>
    <label for="doc">🖹</label><button id="doc" data-commandlinker-command="application:toggle-mode">document mode</button>
    <label for="prez">📽</label><button id="prez" data-commandlinker-command="application:toggle-presentation-mode">presentation mode</button>
    <label for="collapse">⊟</label><button id="collapse" data-commandlinker-command="notebook:hide-all-cell-code">collapse all the code</button>
    <br/>
    <label for="expand">⊞</label><button id="expand" data-commandlinker-command="notebook:show-all-cell-code">expand all the code</button>
    <button data-commandlinker-command="deck:toggle"><code>jupyterlab-deck</code></button>
    <button data-commandlinker-command="notebook:render-with-voila"><code>voila</code></button>
    <label for="inspectoropen">🔍</label><button id="inspectoropen" data-commandlinker-command="inspector:open">inspector</button>
    <label title="open side by side view" for="right">👯</label><button id="right" data-commandlinker-command="notebook:toggle-render-side-by-side-current">side-by-side</button>
</form>

## forms of disability



![](https://trailheadtechnology.com/wp-content/uploads/2021/02/BlogImage1.png "an illustration about the physical axes of disability (ie touch see hear speak) and the temporal axes(ie permanent temporary sitational)an illustration about the physical axes of disability (ie touch see hear speak) and the temporal axes(ie permanent temporary sitational)")

from [microsoft inclusive design](https://inclusive.microsoft.design/)

## accessible notebook interfaces
<figure markdown>
<figcaption markdown>
    
recently, Jupyter developers were able to remove accessibility violations caught be axe. read the [blog post]. 
    
</figcaption>
    
![image.png](attachment:da0e9339-76c6-4ddf-8695-4c804430a227.png "axe auditting results comparing the vioations before remediation and afterwards.")
</figure>

<h1 role=presentation>compliance ≠ assistive</h1>

[blog post]: https://blog.jupyter.org/improving-the-accessibility-of-jupyter-6c695db518d3

<details markdown>
<summary>Notebooks for All</summary>
<blockquote cite="https://github.com/Iota-School/notebooks-for-all" markdown>

Jupyter Notebooks play a central role in modern data science workflows. Despite their importance, these notebooks are inaccessible to people with disabilities, especially those who rely on assistive technology. Impacted users must find extreme workarounds or [give up using them entirely.](https://www.freelists.org/post/program-l/Accessability-of-Jupyter-notebooks) Students with disabilities have [reported leaving their field](https://github.com/jupyterlab/jupyterlab/issues/9399#issuecomment-740524422) once they learn their chosen career’s foundational tools are inaccessible to them. 

This is a challenging problem to solve. The Notebooks for All project is taking the first steps, initially focusing on static notebooks: 
- Running usability feedback sessions with impacted users who rely on a variety of assistive technology
- Capturing what makes notebooks inaccessible with assistive technology, and compiling documents that describe the issues and feedback
- Editing notebooks based on the feedback
- Organizing events to spread awareness in the scientific community about this issue
- 
</blockquote>

| when | example |
|---|-------|
|before|https://nbviewer.org/github/jupyter-widgets/ipywidgets/blob/main/docs/source/examples/Lorenz%20Differential%20Equations.ipynb|
|after|https://iota-school.github.io/notebooks-for-all/exports/html/lorenz-executed-smol.html|

> we designed notebooks based on their semantics to improve the quality of the annotation object model, and assistive tech experience.


</details>

[notebooks for all]: https://github.com/Iota-School/notebooks-for-all

## manually reviewing accessibility

there are a lot of dimensions to digital accessibility. here are some things i thought worth noting.

* [reviewing accessible design principles](https://adhoc.team/2023/02/22/the-importance-of-adding-accessibility-design-reviews-to-the-design-process/)
    * Consider focus order
       ![image.png](attachment:6fc33e67-287c-4346-80ba-18435302868f.png)
      
    * Examine copy
    * Pay attention to colors
    * Look at page context and components
    * Annotate the designs
* [The A11Y Project](https://www.a11yproject.com/) is an open source community about accessibility with tons of resources
  
  ![image.png](attachment:07102a1b-9748-4ac5-ba32-a62a2638bbd0.png)
  
  * [no mouse days](https://www.a11yproject.com/posts/no-mouse-days/)
* [technica11y](https://www.technica11y.org/) produces first hand accounts of disabled develops
* [community events](https://github.com/isabela-pf/a11y-events/tree/main/workshop-resources/alt-text)
    * [collaborative alt text documentation events](https://github.com/isabela-pf/a11y-events/tree/main/workshop-resources/alt-text)
    
      ![image.png](attachment:faf3db7e-98a6-4cfd-85b1-9b16afef905b.png)
    
    * [keyboard navigation events](https://github.com/isabela-pf/a11y-events/tree/main/workshop-resources/keyboard-navigation)
    
* [meet your screen reader](https://en.wikipedia.org/wiki/List_of_screen_readers)

## other useful sources sources

* [chartability](https://chartability.fizz.studio/https://chartability.fizz.studio/)
* [wai patterns](https://www.w3.org/WAI/ARIA/apg/patterns/https://www.w3.org/WAI/ARIA/apg/patterns/)
* [diagram center general guidelines](http://diagramcenter.org/general-guidelines-final-draft.html)
* Frameworks? [Modern Health, frameworks, performance, and harm Modern Health, frameworks, performance, and harm ](https://ericwbailey.website/published/modern-health-frameworks-performance-and-harm/)
* [Do No Harm Guide: Applying Equity Awareness in Data Visualization](https://www.urban.org/research/publication/do-no-harm-guide-applying-equity-awareness-data-visualization)
* [accessible pygments themes for code](https://github.com/Quansight-Labs/accessible-pygmentshttps://github.com/Quansight-Labs/accessible-pygments)

## whats the deal with the demo??

* running the browser with jupyterlite

 [![image.png](attachment:edfd159c-9d27-4253-83ea-e754baf704b8.png "jupyterlite is jupyter in the browser")][jupyterlite]

* programmined in markdown with [pidgy]

  [![](https://github.com/deathbeds/pidgy/raw/main/pidgy.png "pidgy is literate programming in markdown and notebooks")][pidgy]

* presented with [jupyterlab-deck]

  [![image.png](attachment:db7ba277-b72a-488b-897c-9f3f8b26437d.png "jupyter deck is a lightweight presentation for jupyterlab")][jupyterlab-deck]

[jupyterlite]: https://jupyterlite.readthedocs.io/
[jupyterlab-deck]: https://github.com/deathbeds/jupyterlab-deck
[pidgy]: https://github.com/deathbeds/pidgyhttps://github.com/deathbeds/pidgy