A presentation at beyond tellerrand in in Düsseldorf, Germany by Manuel Matuzovic
Lost in Translation Manuel Matuzović Beyond Tellerrand, Düsseldorf 2022 @mmatuzo
@mmatuzo Speaking at React Finland 2019
Source: alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far @mmatuzo
Source: alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far @mmatuzo
@mmatuzo
Source: buttoncheatsheet.com @mmatuzo
Source: info.cern.ch/hypertext/WWW/MarkUp/Tags.html @mmatuzo
@mmatuzo
We are not as good at writing HTML as we think we are. @mmatuzo
Source: htmhell.dev @mmatuzo
The Elements of HTML 1. <div> 2. <script> That’s it, that’s all. #yolo @mmatuzo
The Elements of HTML 1. <header> 10. <summary> 19. <ins> 2. <footer> 11. <dialog> 20. <caption> 3. <main> 12. <address> 21. <track> 4. <section> 13. <button> 22. <output> 5. <article> 14. <blockquote> 23. <label> 6. <aside> 15. <abbr> 24. < eldset> 7. <progress> 16. <kbd> 25. <textarea> 8. <meter> 17. <mark> 26. <video> 9. <details> 18. <del> 27. … fi @mmatuzo
Source: codepen.io/plfstr/full/zYqQeRw @mmatuzo
Designers know too little about HTML. @mmatuzo
Some people just don’t care. @mmatuzo
@mmatuzo
We put too much trust and hope in ARIA. @mmatuzo
Source: webaim.org/projects/million/ @mmatuzo
Home pages with ARIA present averaged 70% more detected errors than those without ARIA. Source: webaim.org/projects/million @mmatuzo
@mmatuzo
If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Source: w3.org/TR/using-aria @mmatuzo
@mmatuzo
@mmatuzo
Source: webaim.org/projects/million @mmatuzo
Source: hidde.blog/common-a11y-issues @mmatuzo
Source: christianheilmann.com/2022/04/12/one-million-broken-web-sites-and-a-way-to-prevent-that @mmatuzo
Most common issues • Low contrast text • Missing alternative text for images • Empty links • Missing form input labels • Empty buttons • Missing document language
We’re wrongfully downplaying the complexity of HTML due to the simplicity of its syntax. @mmatuzo
There’s more to HTML than tags and attributes. @mmatuzo
Most common issues • Low contrast text • Missing alternative text for images • Empty links • Missing form input labels • Empty buttons • Missing document language
Accessibility issues don’t just come from what’s visible in a design, but from what’s not visible. @mmatuzo
Design to Code Translation Exploration @mmatuzo
Design to Code Translation Exploration Understanding @mmatuzo
Design to Code Translation Exploration Understanding Development @mmatuzo
Design to Code Translation Exploration Understanding Development @mmatuzo
Design to Code Translation Lack of knowledge 💥 Exploration Understanding Development @mmatuzo
Design to Code Translation Lack of knowledge 💥💥 Exploration Understanding Not caring Development @mmatuzo
Design to Code Translation Lost in Translation Lack of knowledge 💥 Exploration 💥💥 Understanding Not caring Development @mmatuzo
Our decisions have consequences • Basic understanding
Our decisions have consequences • Basic understanding • Overview
Our decisions have consequences • Basic understanding • Overview • Orientation
Our decisions have consequences • Basic understanding • Overview • Orientation • Information
Our decisions have consequences • Basic understanding • Overview • Orientation • Information • Navigation
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
❌ <svg> <path d=”” /> </svg> @mmatuzo
❌
<div class=”btn”> <svg> <path d=”” /> </svg> </div> @mmatuzo❌ <button> <svg> <path d=”” /> </svg> </button> @mmatuzo
❌ <button aria-label=”Change theme”> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo
❌ <button> Change theme <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo
❌ <button> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo
✅ <button aria-expanded=”false”> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo
✅ <button aria-expanded=”false” aria-controls=”theme-panel”> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo
The Perfect Button • Focusable, interactive element (<button>)
The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label)
The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label) • Correct role (button)
The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label) • Correct role (button) • Communicate state ([aria-expanded])
The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label) • Correct role (button) • Communicate state ([aria-expanded]) • Communicate relationship ([aria-controls])
@mmatuzo
@mmatuzo
@mmatuzo
❌ <button aria-expanded=”true” aria-controls=”theme-panel”> ✕ </button> @mmatuzo
✅ <button aria-expanded=”true” aria-controls=”theme-panel”> <span class=”sr-only”>Close</span> <span aria-hidden=”true”> ✕ </span> </button> @mmatuzo
@mmatuzo
Source: nordbayern.de @mmatuzo
Source: natur-im-siedlungsraum.ch @mmatuzo
Source: nabu-hadamar.de @mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
A Sound Document Outline • Meaningful labels
A Sound Document Outline • Meaningful labels • Clean hierarchy (Avoid skipping levels)
A Sound Document Outline • Meaningful labels • Clean hierarchy (Avoid skipping levels) • Enough but not too many headings
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
@mmatuzo
The lang Attribute • Screen readers
The lang Attribute • Screen readers • Hyphenation
The lang Attribute • Screen readers • Hyphenation • Quotation marks
The lang Attribute • Screen readers • Hyphenation • Quotation marks • Translation
The lang Attribute • Screen readers • Hyphenation • Quotation marks • Translation • Spell checking
The lang Attribute • Screen readers • Hyphenation • Quotation marks • Translation • Spell checking • The default font selection for CJK languages
@mmatuzo
Developers, prioritise HTML! @mmatuzo
Learn who your users are and how they’re using the web. @mmatuzo
Stop belittling HTML. @mmatuzo
Universities, schools, teachers, course coordinators, prioritise HTML! @mmatuzo
Rewrite your curriculums, they don’t work. @mmatuzo
Authors, prioritise HTML! @mmatuzo
Write and speak more about HTML. @mmatuzo
@mmatuzo
Use accessible HTML in your demos. @mmatuzo
Learn how to test your sites with automatic testing tools. @mmatuzo
96.8% of home pages had detected WCAG 2 failures! Source: webaim.org/projects/million @mmatuzo
Learn how to test your sites with the keyboard and screen readers. @mmatuzo
https://noti.st/matuzo/Y1Lgvc @mmatuzo
u https://noti.st/matuzo/Y1Lgvc k Th an yo ! @mmatuzo
Additional Resources @mmatuzo
Source: htmhell.dev/20-close-buttons @mmatuzo
Source: htmhell.dev/11-the-trigram-for-heaven @mmatuzo
Source: htmhell.dev/26-tasty-buttons @mmatuzo
Source: matuzo.at/blog/lang-attribute @mmatuzo
A frontend developer’s job is to look at a design, interpret it, and translate it to HTML and CSS. Unfortunately, information often gets lost in translation because we rely too much on visual aspects of a design, rather than its semantic meaning.
In his talk, Manuel Matuzović uncovers the invisible patterns we should recognise in a design, and how they affect accessibility.
for free. You
can too.