Lost in Translation

A presentation at Paris Web in October 2022 in Paris, France by Manuel Matuzovic

Lost in Translation Manuel Matuzović Paris Web, Paris 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

<main> <section id=”main-content”> <header id=”main-header”> <section class=”container-fluid”> <section class=”row”> <article class=”content col-sm-12”> <section class=”content-inner”> <div class=”content__body”> <article class=”slider”> <section class=”slide”> … </section> </article> </div> </section> </article> </section> </section> </header> </section> </main> Source: https://www.htmhell.dev/10-section-is-no-replacement-for-div @mmatuzo

Source: htmhell.dev @mmatuzo

@mmatuzo

<h1>Product Status</h1> <h2>Is the product available?</h2> <div> <h3> <div> <div> <i> <h3> It‘s <a>available</a>. </h3> </i> </div> </div> </h3> </div> Source: https://www.htmhell.dev/19-heading-in-the-wrong-direction/ @mmatuzo

<div class=”btn”>Click here!</div> @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

<div class=”nav”> <div> <div>about</div> <div>thoughts</div> </div> </div> Source: htmhell.dev/18-main-divigation @mmatuzo

<div class=”nav”> <a href=”/about”> <button>about</button> </a> <a href=”/thoughts”> <button>thoughts</button> </a> </div> @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

Use native HTML if possible. No ARIA is better than bad ARIA. @mmatuzo

Source: web.dev/website-navigation @mmatuzo

@mmatuzo

@mmatuzo

Most common issues 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 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 • Information • Orientation • Overview • Navigation

@mmatuzo

@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

Source: htmhell.dev/20-close-buttons @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

<h1> @mmatuzo

<h1> <h2> (Featured Posts) @mmatuzo

<h2> (Most Viewed Posts) @mmatuzo

<h2> (Most Viewed Posts) <h2> (Most Commented Posts) @mmatuzo

A Sound Document Outline • Meaningful labels • Clean hierarchy (Avoid skipping levels) • Enough but not too many headings

@mmatuzo

<header> @mmatuzo

<header> <nav> @mmatuzo

<header> <nav> <main> @mmatuzo

<footer> @mmatuzo

Source: smashingmagazine.com/2022/06/voice-control-usability-considerations-partially-visually-hiddenlink-names @mmatuzo

<section aria-label=”Quick summary” class=”article__summary”> <span id=”article__start” class=”summary__heading” aria-hidden=”true”> Quick summary ↬ </span> Overcorrecting for one form of disability may… </section> @mmatuzo

@mmatuzo

<!DOCTYPE html> <html lang=”de”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <title>Ein div ist keine Schaltfläche</title> </head> <body> <h1>Ein div ist keine Schaltfläche</h1> </body> </html>
@mmatuzo

<!DOCTYPE html> <html lang=”de”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <title>Ein div ist keine Schaltfläche</title> </head> <body> <h1>Ein div ist keine Schaltfläche</h1> </body> </html>
@mmatuzo

The lang Attribute • Screen readers • Hyphenation • Quotation marks • Spell checking • The default font selection for CJK languages • Translation

@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

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

@mmatuzo

Merc ! i @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

Manuel Matuzovic
@matuzo

1 / 109

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.