Quick wins for an accessible website
summary
Shows concrete fixes on a Drupal demo site: change fake headings to real <h1>–<h3> in Twig so screen readers and SEO get a correct outline, convert repeated card divs to an ordered list (fix VoiceOver bug caused by list-style-type:none by adding a pseudo-element), reorder visuals with CSS flexbox order, make icons and “show more” links descriptive with visually-hidden text, add aria-expanded to the hamburger, trap focus, test with axe, WAVE, HeadingsMap and Accessibility Insights. WCAG AA is legally required and these changes work without altering visuals.
AI-written summary · about
chapters (6)
- 0:00Start
- 1:14Who am I?
- 3:26For many reasons
- 29:06Links & buttons
- 38:14Focus management
- 38:36And never forget
related talks
05mMake your website accessible for everyone
33mAccessibility Done Right
33mMarkup matters
01h 07mA web for anyone, anywhere, anytime
01h 03mAccessibility: Making your websites more inclusive
25mBeyond Compliance: Testing for a more Accessible Web
37mAccessibility Matters: Creating a Better Web
01h 01mA web for anyone, anywhere, anytime