My takeaways from the Web Directions accessibility conference

--- title: My takeaways from the Web Directions accessibility conference tags: a11y WebDirections accessibility description: Some thoughts about accessibility and a bunch of slides summarizing the 2021 Web Directions Access All Areas conference on accessibility --- # Gabriel's (first) Qshare on Accessibility November 8, 2021 11 am CST (UTC-6) slides: https://hackmd.io/@gabalafou/wdaaa2021 --- ## Outline for today 1. Intro 2. Fast takes 3. Review conference talks one by one --- ## Who Am I Gabriel Fouasnon - Disclaimer: not an accessibility expert... yet! - Frontend Engineer, 7 years Bay Area startups - New member (2 weeks) of Quansight Labs - Chan Zuckerberg Initiative grant for JupyterLab accessibility - Tania, Isabela, Tony - My first exposure to accessibility, MIT Media Lab Note: My takeaway from the Media Lab: technology designed with accessibility in mind is better for everyone, not just people with disabilities --- ## Food for thought - The keyboard is assistive tech! - Accessibility is a human right - The future is accessible Note: Mention Isabela's blog post on [who's responsible for accessibility](https://labs.quansight.org/blog/2021/03/accessibility-whos-responsible/). --- ## Fast Takes --- ### Shared language ---- #### [International Symbol of Access](https://en.wikipedia.org/wiki/International_Symbol_of_Access) ![The current symbol of access emphasizes the person's disability](https://i.imgur.com/fTiOMzS.png) ![The proposed alternate symbol of access emphasizes the person's agency](https://i.imgur.com/IUrmyiM.png) Note: The reason I'm showing this slide is to illustrate that disability and accessibility are evolving concepts. ---- #### Terms - a11y (numeronym) - WCAG - POUR - ARIA - medical versus social model of disability - person-first, identity-first - ableism - taboo words: handicapped, suffers from --- ### Links --- - Ineffective - [Click here](https://webaim.org/techniques/hypertext/) for a WebAIM article on accessible links. - Effective - WebAIM has a comprehensive article describing [how screen reader users use links.](https://webaim.org/techniques/hypertext/) - Note: Princeton's accessibility website has [more tips for writing meaningful links.](https://accessibility.princeton.edu/how/content/links) Note: I put this slide here without giving it a rationale because it's such low-hanging fruit. At some point, just about every one of you will write a public-facing document on the web with links. If you want to really understand the rationale behind this, then I highly recommend that you watch a video of someone who depends on screen readers or voice navigation software. I would recommend watching Léonie Watson's talk and Kate Kalcevich's talk. --- ### Assistive Tech and Inspectors --- - Windows dominates the space of assistive tech - Demos (I use a Mac, sorry) - macOS Accessibility Inspector - VoiceOver - Acessibility panel in Chrome Dev Tools (under Elements tab) - Firefox vision simulator - Caution: accessibility ≠ screen readers! Note: In addition to screen readers, think about people with low vision, photosensitivity, and others. --- ### Semantic HTML and ARIA --- ![Diagram showing the programmatic layers between HTML and the end user. ](https://i.imgur.com/AbX0rX0.png) - Source: [Accessibility Object Model working group](https://wicg.github.io/aom/) Note: For web developers, semantic HTML plus ARIA **is** your api to assistive tech. The first time I was introduced to semantic HTML was like the first time I was introducted to object-oriented programming. It was all too abstract. Here's why semantic HTML matters. In the words of Léonie Watson, a blind screen reader user: "What exactly does my code have to do with it anyway? And the answer is absolutely everything!" The diagram above was taken from an initiative to expose the accessibility tree to JavaScript, known as the Accessibility Object Model. --- ## Web Directions <br /> [Access All Areas](https://webdirections.org/aaa/) <br /> Conference --- ### About the conference - Two days: Friday, October 29 and Friday, November 5, 2021 - Website for videos: https://conffablive.com (note the double f) - For login credentials, message me on Slack --- ### The conference was accessible - Read out links, letter-by-letter - Verbally describe images and graphs - Trigger warnings before animations Note: Here are the opening lines of the conference: <blockquote> Access all areas is streaming to you from a place now called Sydney. And I would like to begin by acknowledging the Gadigal people of the Eora nation, the traditional custodians of the land from which we are streaming and pay my respects to their elders past and present. In the spirit of reconciliation, we acknowledged the traditional custodians of country throughout Australia and their connections to land, sea, and community. We pay our respect to their elders past and present and extend that respect to all Aboriginal and Torres Strait Islander peoples and all first nation peoples today. Wherever you are, and we have folks attending from all over the world, a huge welcome, and thanks for attending this first ever Access All Areas, or AAA, conference. My name is John Allsopp. I'm a middle-aged white man of European origin, and my pronouns are he/him. </blockquote> --- ### A few links from the conference - [Fable](https://makeitfable.com/) - connect to people with disabilities for testing - [Assistiv Labs](https://assistivlabs.com/) - use screen readers remotely through the browser - [ID24](https://inclusivedesign24.org/) - inclusive design conference online --- ## The Talks One by one Note: I'm missing a talk or two in my slides. These slides are a little messy. Half of them were made from notes I took while watching them, and the other half were made reviewing my notes. --- ### Adem Cifcioglu, Accessibility API - How do browsers make web sites accessible to assistive technologies like screen readers? - Web page (markup/HTML) -> Browser DOM Tree -> Browser Accessibility Tree -> OS Accessibility API -> Screen reader - Tutorial: show how markup maps to the accessibility tree - [The rules for mapping markup to the accessibility tree](https://www.w3.org/TR/wai-aria-implementation/#mapping) are in the ARIA spec ---- - You can view the accessibility tree right from the dev tools in the browser (in Chrome, open dev tools, inspect an element, and look for Accessibility) - Using the accessibility tree can help you troubleshoot whether an accessibility issue is an issue with the browser versus the assistive tech ---- | OS | Accessibility API | | ---------------- | ----------------- | | Windows | MSAA/IAccessible2 & UI Automation | | macOS | NSAccessibility | | Linux/Gnome | Accessibility Toolkit & Assistive Technology Service Provider Interface | | iOS | UIAccessibility | | Android | AccessibilityNodeInfo & AccessibilityNodeProvider ---- #### Accessibility Inspectors - Windows - Accessibility Insights [accessibilityinsights.io] - DevTools – Edge, Chrome and Firefox - Mac OSX - Accessibility Inspector for OSX [apple.co/2qY7JEV] - DevTools – Safari, Firefox and Chrome - iOS and Android - Accessibility Inspector for iOS - DevTools – Safari, and Chrome --- ### [Hidde de Vries, Semantics](https://talks.hiddedevries.nl/d2oTzt/more-to-give-than-just-the-div-semantics-and-how-to-get-them-right) - Semantics. Meaning = use. (cf. Ludwig Wittgenstein) - Cory Laviska's tweet: <blockquote>[Unpopular opinion: in a design system, a "link" and a "button" should be one component.](https://www.abeautifulsite.net/posts/on-buttons-and-links/)</blockquote> - Bruce Lawson [The Practical Value of Semantic HTML](https://brucelawson.co.uk/2018/the-practical-value-of-semantic-html/) ---- - Caution: css `display`. [a11yTO Conf: CSS Display Properties versus HTML Semantics](https://adrianroselli.com/2020/10/a11yto-conf-css-display-properties-versus-html-semantics.html) - [HTMHell](https://www.htmhell.dev) collects examples of how not to use HTML - [List-itis](https://twitter.com/cookiecrook/status/1084138985763426304) - [OpenUI](https://open-ui.org/) --- ### [Gerard K. Cohen, ARIA Spec](https://gerardkcohen.me/speaking/2021/aria-spec-for-unintiated.html) - Bad ARIA is worse than no ARIA - [First rule of ARIA](https://www.w3.org/TR/using-aria/): Don't use ARIA <em>if you can use HTML instead!</em> - [Periodic table of semantics](https://gerardkcohen.github.io/periodic-table-of-semantics.html) - [ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/) ---- 1st rule of ARIA #### Don't use ARIA if you can use HTML instead ```html  <header>  <aside>  <form>  <main>  <nav>  <section [accessible name]>  <footer> <div role=“search”> ``` --- ### Ugi Kutluoglu, Live Regions - Careful. Live regions can be disruptive. Must use them judiciously. - "PA in Progress." Live regions are like intercom interruptions on a plane. You know, when you're on a plane, watching a movie, and it gets interrupted because the pilot makes an announcement - Use cases: toast messages, loading..., countdown, timers, form errors, messaging - Common mistakes to avoid --- ### Léonie Watson, All about screen readers - 91%: Windows is overwhelming the most popular OS used with screen readers, 6.5% macOS, 1% Linux. Source: WebAIM - On Windows, 54% market is JAWS, 31% NVDA - On Mac, only VoiceOver ---- - Screen reader users have more keyboard shortcuts (by repurposing Insert or Caps Lock) - Braille displays are used primarily by people who are deaf-blind - Do not repeat landmarks spoken by screen readers in labels/titles (for example, don't include the word "navigation" in aria-label) Note: The number of people who do not have a disability using a screen reader are four times more likely to be using a Mac than an actual screen reader user. That's because, by and large, designers and developers who are using screen readers for testing are Mac users. --- ### Kate Kalcevich, Alternatives to screen readers - Screen readers are not the only assistive tech - Important to minimize the amount of moving UI - Unique link names are very useful for people who navigate using their voice - [Tecla E](https://gettecla.com/) - Assistive tech for people with limited mobility - Carolyn: "I'm happy to have this and be part of the world again" --- ### Weston Thayer, Intro to Cross Screen Reader Testing - Screen readers are complex, like browser level complex. Cross browser bugs, cross screen reader bugs - Weston Thayer's company is https://assistivlabs.com, which allows you to connect to real screen readers through the browser (BrowserStack is to cross-browser testing what Assistiv Labs is to cross-screen reader testing) Note: There's a funny example of a screen reader fail (pronunciation). Takeaway: do not try to "help" the screen reader by putting phonetic spelling in aria-label --- ### Manuel Matuzović, Building the most inaccessible site possible with a perfect Lighthouse score - Title pretty much sums it up - Point is: automated scores don't really mean anything. They just catch the low-hanging fruit. - Lighthouse uses axe-core engine - axe-core Dev Tools extension - HTMHell --- ### Samuel Proulx, The Low-Hanging, High Impact Accessibility Issues For Developers - Low hanging != low impact - (thought) Feasibility/Impact diagram - POUR (Perceivable, Operable, Understandable, and Robust - is it usable in multiple different platforms, environments, techniques etc.) ---- - Perceivable - alt text - form labels - low contrast text ---- - Operable - heading levels (h1, h2) - regions/landmarks (nav, article, header, footer) - ARIA is overused ---- - Understandable - link names: meaningful AND unique - lang attribute - allow easy zooming/resizing - disable auto-play --- ### Nicolas Steenhout, Deep dive into ARIA - First rule of ARIA: Don't use ARIA (unless you really need it) - `role=""` (NOT `aria-role=""`) - `role="presentation"` (examples: table used for layout, svg used for decoration) --- ### Kilian Valkhof, Forced colors explained - Polypane? The browser for developers. [Polypane.app](https://polypane.app) - Windows High Contrast mode in settings (1 in 25 people use) - Another reason why using colors alone for meaning is bad --- ### [Todd Libby, Color Contrast and WCAG](https://noti.st/colabottles/gcPUQc/color-contrast-and-wcag) - AAA compliance. 7:1 contrast ratio. Black on white is 21:1 - Number one common failure in sites today: low contrast text (for several years in a row) - Tool: contrast-ratio.com - Tool: whocanuse.com - [Firefox vision simulator](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector/Simulation) - [APCA experimental tab in Dev Tools setting](https://developer.chrome.com/blog/new-in-devtools-89/#apca) - a11y is a right, not a privilege --- ### Heather Migliorisi, Accessible SVGs - "responsive huggy laser panda factory" - img src=.svg role=image (role for Safari) - to make svg accessible, add `<title></title>` inside svg - `<svg role="img">` - animations should be stoppable if they last for more than 5 seconds ---- - using role, aria- attributes can help fix cross-browser, cross-screenreader issues you encounter when testing your site/app for accessibility issues - watch out for Windows High Contrast Mode --- ### Val Head, Making Motion Inclusive - prefers reduced motion (os level setting, desktop, mobile, all operating systems) - `prefers-reduced-motion` media query has great browser support - animation ≠ motion animation ---- - bad for prefers-reduced-motion: - multi-directional, multi-speed (parallax) - spin (especially infinite spin) - constant motion near text - more examples at Webkit blog post [Responsive Design for Motion](https://webkit.org/blog/7551/responsive-design-for-motion/) - concrete example of reduced motion: opening an app on iPhone (with versus without `prefers-reduced-motion` setting on) --- ### Adrian Roselli, Overlays Underwhelm - For testing he used: Axe, ARC, WAVE (Lighthouse, Webhint) - overlayfactsheet.com - Takeaway: there are very unscrupulous players in the assistive software space. Accessibility overlays are terrible. ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.