notebooks and accessibility workshop¤
the path to accessible notebooks is paved in technical debt.
| time | activity |
|---|---|
| 2:05-2:10 | Introduction and workshop structure |
| 2:10-2:20 | what are notebooks to you? |
| 2:20-2:27 | notebooks, wcag, and ada |
| 2:27-2:40 | example of auditing a notebook |
| 2:40-3:20 | audit your notebook |
| 3:20-3:30 | group discussion or share out reflections/findings (depending on number of teams) |
| 3:30-3:40 | notebook inaccessibility in the wild |
| 3:40-3:50 | authoring accessible notebooks |
| 3:50-3:55 | resources sharing for participants. |
| 3:55-4PM | thank you and where do we physically go next |
what are notebooks to y'all?¤
- what are notebooks to you?
- where have you used them?
- where do you wish you could use them?
notebooks, accessibility, and ada¤
example notebook audit¤
hands on accessibility - auditting notebooks¤
take your time exploring accessibility tools on your mobile or desktop device. the goal is to focus on accessibility related aspects of web content, you'll learn to about assistive technology and web accessibility terminology.
- mobile users do not have access to most of these developers tools. they should practice manually auditting their content with different accessibility settings (eg color filters, magnification, large text, voice control)
- desktop users can choose manually test content with accessibility settings, use developer tools/bookmarklets to analyze their document, or install different tools to experience them. chrome has the most accessibility developer tools, but we need to test all the browsers.
Example notebooks - still need fill in the names
- https://github.com/mmattb/coproc-poc/grasp-coproc.ipynb
- https://github.com/makeabilitylab/accessibility-literature-survey/src/Study2_QuantitativeAnalysis.ipynb
- https://www.zoesteinehanson.com/Exploring%20Brain%20Activity%20During%20Movement.html
- https://jakevdp.github.io/PythonDataScienceHandbook/03.01-introducing-pandas-objects.html
auditting accessibility¤
where applicable, build the accessibility floor by using these in ci.
list of more accessibility tools
* [Deque Labs Axe](https://github.com/dequelabs/axe-core) * [IBM Equal Access](https://github.com/IBMa/equal-access/tree/master) * [WAVE accessibility evaluator](https://wave.webaim.org/extension/) * [W3C markup validator](https://validator.w3.org/)hands work workshop reflections and findings¤
- what topics did you discuss the most?
- what suprised you?
- did you learn anything new?
- are there things you now want to learn more about?
notebook inaccessibility in the wild¤
a presentation by venkatesh potluri
notebook accessibility and accessible authoring¤
what makes this page accessible? a demo by tonyfast
skip to accessible authoring recommendations
slides for notebooks, accessibility, ada¤
a timeline of disability rights, digital accessibility, and interactive computing
web content accessibility guidelines principles¤
let all practice sounding like digital accessibility experts
when you see WCAG you should hear WUH-CAG.
let's practice.
- Perceivable
- Information and user interface components must be presentable to users in ways they can perceive.
- Operable
- User interface components and navigation must be operable.
- Understandable
- Information and the operation of user interface must be understandable.
- Robust
- Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
* Guideline 1: Provide equivalent alternatives to auditory and visual content * Guideline 2: Don't rely on colour alone * Guideline 3: Use markup and style sheets, and do so properly * Guideline 4: Clarify natural language usage * Guideline 5: Create tables that transform gracefully * Guideline 6: Ensure that pages featuring new technologies transform gracefully * Guideline 7: Ensure user control of time sensitive content changes * Guideline 8: Ensure direct accessibility of embedded user interfaces * Guideline 9: Design for device independence * Guideline 10: User interim solutions * Guideline 11: Use W3C technologies and guidelines * Guideline 12: Provide context and orientation information * Guideline 13: Provide clear navigation mechanisms * Guideline 14: Ensure that documents are clear and simple### example notebook audit 1. let us hear about lived experiences first. 2. connect lived experience with accessibility tooling. 1. developer tools * accessibility tree 3. lighthouse 4. axe 5. [accessibility bookmarklets](https://accessibility-bookmarklets.org/install.html) 6. screen reader/magnifier > With [axe-core](https://github.com/dequelabs/axe-core), you can find on average 57% of WCAG issues automatically. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed. [adrian roselli provides an in depth comparison of manual and free automated wcag tools](https://adrianroselli.com/2023/01/comparing-manual-and-free-automated-wcag-reviews.html) ## accessibile notebook authoring
[chartability is a set of heuristics for ensuring that data visualizations, systems, and interfaces are accessible.](https://github.com/Chartability/POUR-CAF)
expands POUR principles with...- Compromising
- (Understandable, yet Robust): Information flows must provide transparency, tolerance, and consideration for different ways that users with assistive technologies and disabilities will prefer to consume different information.
- Assistive
- (Understandable and Perceivable but labor-reducing): Interface must be intelligent and multi-sensory in a way that reduces the cognitive and functional labor required for use.
- Flexible
- (Perceivable and Operable, yet Robust): Design must respect user settings from user agents (browsers, operating systems, applications) and provide presentation and operation control.
import requests, requests_cache, IPython
requests_cache.install_cache()
draft = requests.get(
"https://raw.githubusercontent.com/Iota-School/notebooks-for-all/main/resources/event-hackathon/accessibility-tips-for-jupyter-notebooks.md"
).text
_, heading, body = draft.partition("## Authoring Tips (Draft)")
IPython.display.Markdown(heading + body)
%%html
<h3><a href="https://science.nasa.gov/mission/hubble/multimedia/sonifications/">data sonification - westerlund 2</a></h3>
<blockquote>
This is a cluster of young stars – about one to two million years old – located about 20,000 light-years from Earth. In its visual image form, data from Hubble (green and blue) reveals thick clouds where stars are forming, while X-rays seen by Chandra (purple) penetrate through that haze. In the sonified version of this data, sounds sweep from left to right across the field of view with brighter light producing louder sound. The pitch of the notes indicates the vertical position of the sources in the image with the higher pitches towards the top of the image. The Hubble data is played by strings, either plucked for individual stars or bowed for diffuse clouds. Chandra’s X-ray data is represented by bells, and the more diffuse X-ray light is played by more sustained tones.
</blockquote>
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="473" src="https://www.youtube.com/embed/ESz8Cvirh00" title="Data Sonification: Westerlund 2 (Multiwavelength)" width="840"></iframe>