A presentation at TYPO3Camp Vienna in in Vienna, Austria by Manuel Matuzovic
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 ❤
We all know that web accessibility is a good thing and that it’s important that websites are accessible. What most of us don’t know is what accessibility on the web means, how our decisions affect our users, and even who our users are. In his keynote talk, Manuel Matuzović brings you closer to web accessibility by introducing you to user groups and ways of accessing the web you may haven’t considered yet.
for free. You
can too.