Researching and Writing Accessible Vue ... Thingies
summary
A layered interactive “thingy” (scroll-driven avocado diagram) is implemented in Vue as semantic HTML progressively enhanced with a Vue 3 accessible tabs component, Headless UI disclosures, GreenSock for scroll animations, and a plain-html transcript fallback; VoiceOver and the browser accessibility tree reveal missing labels (unicode circle announced as “black large circle”), so aria-hidden plus a screen-reader-only label fixes it and a Cypress test is changed to select by the accessible name — result: keyboard and screen‑reader usable, tests tied to real accessibility rather than brittle DOM selectors.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 1:26Overview
- 3:12Accessibility
- 4:06Usability Threshold
- 9:41Testing
- 10:54Accessibility Tree
- 12:43Accessibility Inspector
- 15:01User Interface Patterns
- 17:44Layered Diagrams
- 18:25Example Animation
- 21:54Asking Questions
- 25:36Vision
- 27:24HTML
- 28:36Accessible Components
- 29:40Basic HTML
- 38:06Accessibility Bug
- 40:35Hiding Content from Screen Reader
- 43:32Frontend Testing
- 43:56Cypress
- 44:20Frontend Tests
- 45:10Finding Things to Click On
- 47:23Testing for Accessibility
- 49:20Excuses and Reasons People Dont Do Accessibility
