Lost in Translation

A presentation at Smashing Conference Freiburg 2022 in September 2022 in Freiburg, Germany by Manuel Matuzovic

Slide 1

Lost in Translation Manuel Matuzović Smashing Conference, Freiburg 2022 @mmatuzo

Slide 2

@mmatuzo Speaking at React Finland 2019

Slide 3

Source: alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far @mmatuzo

Slide 4

Source: alistapart.com/article/my-accessibility-journey-what-ive-learned-so-far @mmatuzo

Slide 5

@mmatuzo

Slide 6

Source: buttoncheatsheet.com @mmatuzo

Slide 7

Source: info.cern.ch/hypertext/WWW/MarkUp/Tags.html @mmatuzo

Slide 8

@mmatuzo

Slide 9

We are not as good at writing HTML as we think we are. @mmatuzo

Slide 10

<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

Slide 11

Source: htmhell.dev @mmatuzo

Slide 12

@mmatuzo

Slide 13

<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

Slide 14

<div class=”btn”>Click here!</div> @mmatuzo

Slide 15

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

Slide 16

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

Slide 17

Source: codepen.io/plfstr/full/zYqQeRw @mmatuzo

Slide 18

Designers know too little about HTML. @mmatuzo

Slide 19

Some people just don’t care. @mmatuzo

Slide 20

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

Slide 21

<div class=”nav”> <a href=”/about”> <button>about</button> </a> <a href=”/thoughts”> <button>thoughts</button> </a> </div> @mmatuzo

Slide 22

We put too much trust and hope in ARIA. @mmatuzo

Slide 23

Source: webaim.org/projects/million/ @mmatuzo

Slide 24

Home pages with ARIA present averaged 70% more detected errors than those without ARIA. Source: webaim.org/projects/million @mmatuzo

Slide 25

@mmatuzo

Slide 26

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

Slide 27

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

Slide 28

@mmatuzo

Slide 29

@mmatuzo

Slide 30

Most common issues Source: webaim.org/projects/million @mmatuzo

Slide 31

Source: hidde.blog/common-a11y-issues @mmatuzo

Slide 32

Source: christianheilmann.com/2022/04/12/one-million-broken-web-sites-and-a-way-to-prevent-that @mmatuzo

Slide 33

Most common issues • Low contrast text • Missing alternative text for images • Empty links • Missing form input labels • Empty buttons • Missing document language

Slide 34

We’re wrongfully downplaying the complexity of HTML due to the simplicity of its syntax. @mmatuzo

Slide 35

There’s more to HTML than tags and attributes. @mmatuzo

Slide 36

Most common issues • Low contrast text • Missing alternative text for images • Empty links • Missing form input labels • Empty buttons • Missing document language

Slide 37

Accessibility issues don’t just come from what’s visible in a design, but from what’s not visible. @mmatuzo

Slide 38

Design to Code Translation Exploration @mmatuzo

Slide 39

Design to Code Translation Exploration Understanding @mmatuzo

Slide 40

Design to Code Translation Exploration Understanding Development @mmatuzo

Slide 41

Design to Code Translation Exploration Understanding Development @mmatuzo

Slide 42

Design to Code Translation Lack of knowledge 💥 Exploration Understanding Development @mmatuzo

Slide 43

Design to Code Translation Lack of knowledge 💥💥 Exploration Understanding Not caring Development @mmatuzo

Slide 44

Design to Code Translation Lost in Translation Lack of knowledge 💥 Exploration 💥💥 Understanding Not caring Development @mmatuzo

Slide 45

Our decisions have consequences • Basic understanding • Information • Orientation • Overview • Navigation

Slide 46

@mmatuzo

Slide 47

@mmatuzo

Slide 48

@mmatuzo

Slide 49

@mmatuzo

Slide 50

@mmatuzo

Slide 51

@mmatuzo

Slide 52

❌ <svg> <path d=”” /> </svg> @mmatuzo

Slide 53

❌

<div class=”btn”> <svg> <path d=”” /> </svg> </div> @mmatuzo

Slide 54

❌ <button> <svg> <path d=”” /> </svg> </button> @mmatuzo

Slide 55

❌ <button aria-label=”Change theme”> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo

Slide 56

🚣 ❌ <button> Change theme <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo

Slide 57

❌ <button> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo

Slide 58

✅ <button aria-expanded=”false”> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo

Slide 59

✅ <button aria-expanded=”false” aria-controls=”theme-panel”> <span class=”sr-only”>Change theme</span> <svg aria-hidden=”true”> <path d=”” /> </svg> </button> @mmatuzo

Slide 60

The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label) • Correct role (button) • Communicate state ([aria-expanded]) • Communicate relationship ([aria-controls])

Slide 61

@mmatuzo

Slide 62

@mmatuzo

Slide 63

@mmatuzo

Slide 64

Source: htmhell.dev/20-close-buttons @mmatuzo

Slide 65

❌ <button aria-expanded=”true” aria-controls=”theme-panel”> ✕ </button> @mmatuzo

Slide 66

✅ <button aria-expanded=”true” aria-controls=”theme-panel”> <span class=”sr-only”>Close</span> <span aria-hidden=”true”> ✕ </span> </button> @mmatuzo

Slide 67

@mmatuzo

Slide 68

@mmatuzo

Slide 69

Source: nordbayern.de @mmatuzo

Slide 70

Source: natur-im-siedlungsraum.ch @mmatuzo

Slide 71

Source: nabu-hadamar.de @mmatuzo

Slide 72

@mmatuzo

Slide 73

@mmatuzo

Slide 74

@mmatuzo

Slide 75

@mmatuzo

Slide 76

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

Slide 77

<h2> (Most Viewed Posts) @mmatuzo

Slide 78

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

Slide 79

A Sound Document Outline • Meaningful labels

Slide 80

A Sound Document Outline • Meaningful labels • Clean hierarchy (Avoid skipping levels)

Slide 81

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

Slide 82

<header> <nav> <main> @mmatuzo

Slide 83

<footer> @mmatuzo

Slide 84

@mmatuzo

Slide 85

@mmatuzo

Slide 86

<!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