Why does a blind person want a bike?

Why does a blind person want a bike? Manuel Matuzović, TYPO3Camp Vienna 2024

Hi, I’m Manuel! ✌ matuzo.at manuel@matuzo.at accessibility-cookbook.com matuzo.social htmhell.dev

youtube.com/matuzoblog

webaim.org/projects/million

95.9% of home pages had automatically detectable accessibility issues

Automated accessibility testing tools only catch 30-60% of issues

Why?

A lack of awareness and knowledge

Source: youtu.be/GW0rj4sNH2w

HTML

The Elements of HTML 1.<div> 2.<script> That’s it, that’s all. #yolo

codepen.io/plfstr/full/zYqQeRw

tt HTML •<header> • <summary> • <ins> •<footer> • <dialog> • <caption> •<main> • <address> • <track> •<section> • <bu on> • <output> •<article> • <blockquote> • <label> •<aside> • <abbr> • <fieldset> •<progress> • <kbd> • <textarea> •<meter> • <mark> • <video> •<details> • <search> • …

htmhell.dev

Source: webaim.org/projects/million

Source: webaim.org/projects/screenreadersurvey10/#problematic

Users!?

Keyboard

Source: pexels.com

Source: youtu.be/MQYMhTdBcz0

Source: youtu.be/GQKEE9nI1lk

Source: youtu.be/kj9UodcwIes

Source: youtu.be/GQKEE9nI1lk

Keyboard Accessibility •Ensure that all interactive elements are accessible via Tab •Ensure that controls can be activated with keys only •Use clearly visible focus styles •Avoid overly complex controls •Avoid redundant links/bu ons •Use Skip Links if necessary tt •Manage focus

Screen Readers

Source: youtu.be/8Rn5pXCdZWU

Source: societypix.org/media/category/20

Source: youtu.be/wueLXCbm_KY

Screen Reader Accessibility •Same as keyboard accessibility •Ensure every interactive element has a label (“accessible name”) •O er text alternatives for images and videos •Use semantic HTML ff •Announce changes to the DOM

Zoom

Source: youtube.com/watch?v=EEN79RRvKqE

Zoom Accessibility •Make websites responsive •Avoid absolute units for type and sizing tt •Avoid pa erns like fixed headers or toasts

ft Source: inclusive.microso .design

Between 2015 and 2050, the proportion of the world’s population over 60 years will nearly double from 12% to 22% Source: who.int/news-room/fact-sheets/detail/ageing-and-health

Recap •Allow people to participate in society like everyone else •Mouse and touch are not the only ways to use a site •Keyboard accessibility is not just about keyboards •Invest in your employees. Pay for workshops and conferences •Test your websites with automatic testing tools •Test your websites with manual tools •Hire accessibility experts •Work with disabled people

Source: accessibility-cookbook.com

Homework •Download axe DevTools for Chrome or Firefox •or use Lighthouse in Chrome •Run a test on your own website or the site you’re working on •Fix the issues •Share your 0 errors or perfect Lighthouse score on social media

Thank you ❤