The impact that high quality mark-up can have on accessibility, performance, and discoverability
Watch the presentation
Presentation slide deck
Going beyond accessibility checklists, you may quickly get bogged down with technical details and acronyms that you feel you may never understand. In this fast-paced 30-minute presentation I use worked examples, with screen reader demonstrations, to cover topics including:
- semantic landmarks
- using ARIA attributes to improve the screen reader experience
- respecting motion and colour preference
- dark and light themes
- the new contrast measurement in WCAG 3
- and more.
My hope is that by the end of this presentation you feel more informed and ready to dive deeper into web accessibility.
To view the code examples in more detail, just view the source of the pages on this site.
Resources and links
- Github pages
- WCAG success criteria to which I refer
- ARIA: Accessible Rich Internet Applications
- Reducing motion
- Dark mode
- Card Validators
- For code snippets
WCAG success criteria to which I refer
- 1.3.1: Info and Relationships
- 1.4.1: Use of Color
- 1.4.6: Contrast (Enhanced)
- 1.4.10: Reflow
- 2.1.1: Keyboard
- 2.1.3: Keyboard (No Exception)
- 2.3.3: Animation from Interactions
- 2.4.3: Focus Order
- 2.4.12: Focus Appearance (Enhanced)
- 4.1.2: Name, Role, Value
- The Holy Grail Layout with CSS Grid by Chris Coyier
- 10 modern layouts in 1 line of CSS by Una Kravets
- ARIA vs HTML landmarks by W3C ARIA Authoring Practices Task Force.
- Design for reading: tips for optimizing content for Reader modes and reading apps by Sara Soueidan.
- HTML5 Accessibility by Steve Faulkner, David Storey, and Melanie Richards.
- Semantic HTML from Wikipedia.
- W3 Schools: How To - Responsive Top Navigation
- The nav element (Mozilla Developer Network).
- Rich interface components accessibility guidelines > Hamburger menu from AcceDe Web guides.
- Links vs. Buttons in Modern Web Applications by Marcy Sutton.
- Scroll to top: Where should the focus land? by Raghavendra Satish Peri.
- Scroll to top: Does it need to be accessible? by Raghavendra Satish Peri.
- Accessible icon buttons by Sara Soueidan.
- The button element (Mozilla Developer Network).
Accessible Rich Internet Applications
- WAI-ARIA Overview by Accessible Rich Internet Applications Working Group (ARIA WG) and the Education and Outreach Working Group (EOWG).
- aria-label (Mozilla Developer Network).
- Using the aria-controls attribute by Léonie Watson.
- Using aria-labelledby to provide a name for user interface controls by Accessibility Guidelines Working Group.
- The aria-expanded attribute by Raghavendra Satish Peri.
- Know your ARIA: 'Hidden' vs 'None' by Scott O'Hara.
- The first rule of ARIA by Rian Rietveld.
- WAI-ARIA Authoring Practices 1.2 by a large group of contributors.
- The aria-pressed attribute (Mozilla Developer Network).
- Are we live? by Scott O'Hara.
- The aria-live region (Mozilla Developer Network).
- Contextually Marking up accessible images and SVGs by Scott O'Hara.
- SystemUIcons – “A growing collection of simple and consistent icons specifically designed for systems and products. Use how you want, without attribution.” Created by Corey Ginnivan.
- SVG, Favicons, and All the Fun Things We Can Do With Them by Eric W Bailey.
- Designing Safer Web Animation For Motion Sensitivity by Val Head.
- An Introduction to the Reduced Motion Media Query by Eric W Bailey.
- Scroll-behavior from W3 Schools.
- Revisiting prefers-reduced-motion, the reduced motion media query by Eric W Bailey.
- About vestibular disorders from the Vestibular Disorders Association.
- Simulate different prefers-reduced-motion preferences in Chrome Dev Tools
- How to turn off animations in Windows 10 from AbilityNet.
- Change colors in Windows from Microsoft.
- Simulate different prefers-color-scheme in Chrome dev tools from Chrome Developers.
- Dark Mode Can Improve Text Readability — But Not for Everyone from Bureau of Internet Accessibility.
Design Tip: Never Use Black by Chris Ferdinandi.
- Note that it’s never simple and no one would ever agree on everything, and no single solution will work for everyone. My view is that pure black is fine for high contrast mode which you can design for using the prefers high contrast media query, but for regular dark mode avoid pure black, but that doesn’t mean that a lighter grey is going to be ok. As a rule of thumb I would recommend aiming for a contrast ratio between 16:1 and 19:1 for body text, or between 90 and 100 Lc.
- Accessibility for People with Astigmatism by eSSENTIAL Accessibility.
- Optimal colors to improve readability for people with dyslexia by Luz Rello. Universitat Pompeu Fabra and Ricardo Baeza-Yates. Yahoo! Research & Universitat Pompeu Fabra.
- prefers-color-scheme in SVG favicons for dark mode icons by Thomas Steiner.
- The :focus-visible Trick by Chris Coyier
- prefers-color-scheme: Hello darkness, my old friend by Thomas Steiner.
- The CSS prefers-color-scheme user query and order of preference by Sara Soueidan.
- localStorage (Mozilla Developer Network).
- aria-pressed (Mozilla Developer Network).
- Relative luminance and contrast ratio by Anton.
- New Contrast Method APCA by Andrew Somers.
- A Contrast of Errors by Andrew Somers.
- Accessibility Matrix for University of Southampton Brand Colour Palette created by Matthew Deeprose.
- Enable new Advanced Perceptual Contrast Algorithm (APCA) in Chrome Dev Tools from Chrome Developers.
- Chrome Dev Tools CSS Overview from Chrome Developers.
- W3C Markup Validation Service from W3C.
- Web page test from Catchpoint.
- Eliminate render-blocking resources from Google Developers.
- Using Google Lighthouse from Google.
- Building the most inaccessible site possible with a perfect Lighthouse score by Manuel Matuzovic.
- TinyPNG from Voormedia.
- TinyJPG from Voormedia.
- Lazy loading (Mozilla Developer Network).
- Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds by Michelle Barker.
- Google Search Console from Google.
- Create an RSS feed from scratch by Ryan Dube.
- The Open Graph protocol originally created at Facebook and is inspired by Dublin Core, link-rel canonical, Microformats, and RDFa.
- Twitter card markup from Twitter.
For code snippets
- Prism - a lightweight, extensible syntax highlighter by Lea Verou, Golmote, James DiGioia, Michael Schmidt & all these awesome people.
- a11y syntax highlighting by Eric W Bailey.