The impact that high quality mark-up can have on accessibility, performance, and discoverability

Watch the presentation

Presentation slide deck

The impact that high quality mark-up can have on accessibility, performance, and discoverability.
[PowerPoint 50.7MB PPTX]

Synopsis

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.

Note

To view the code examples in more detail, just view the source of the pages on this site.

Github pages

Quickstart for GitHub Pages

WCAG success criteria to which I refer

SVGs

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.

Reducing motion

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.

Dark mode

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.
Using JavaScript to detect high contrast and dark modes by Scott O'Hara.
The CSS prefers-color-scheme user query and order of preference by Sara Soueidan.
localStorage (Mozilla Developer Network).
aria-pressed (Mozilla Developer Network).

Contrast

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.

Performance

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.

Discoverability

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.

Card Validators

Twitter card validator from Twitter.
LinkedIn post inspector from LinkedIn.