Lost in Translation

A presentation at beyond tellerrand in May 2022 in Düsseldorf, Germany by Manuel Matuzovic

Slide 1

Lost in Translation Manuel Matuzović Beyond Tellerrand, Düsseldorf 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

<p> • HTML <br> • CSS <br> • JavaScript </p> Source: htmhell.dev/30-bullet-list @mmatuzo

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

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 20

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

Slide 21

Designers know too little about HTML. @mmatuzo

Slide 22

Some people just don’t care. @mmatuzo

Slide 23

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

Slide 24

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

Slide 25

@mmatuzo

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

@mmatuzo

Slide 30

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 31

@mmatuzo

Slide 32

@mmatuzo

Slide 33

Source: webaim.org/projects/million @mmatuzo

Slide 34

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

Slide 35

Source: christianheilmann.com/2022/04/12/one-million-broken-web-sites-and-a-way-to-prevent-that @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

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

Slide 38

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

Slide 39

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

Slide 40

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

Slide 41

Design to Code Translation Exploration @mmatuzo

Slide 42

Design to Code Translation Exploration Understanding @mmatuzo

Slide 43

Design to Code Translation Exploration Understanding Development @mmatuzo

Slide 44

Design to Code Translation Exploration Understanding Development @mmatuzo

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

Our decisions have consequences • Basic understanding

Slide 49

Our decisions have consequences • Basic understanding • Overview

Slide 50

Our decisions have consequences • Basic understanding • Overview • Orientation

Slide 51

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

Slide 52

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

Slide 53

@mmatuzo

Slide 54

@mmatuzo

Slide 55

@mmatuzo

Slide 56

@mmatuzo

Slide 57

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

Slide 58

❌

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

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

Slide 64

✅ <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 65

The Perfect Button • Focusable, interactive element (<button>)

Slide 66

The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label)

Slide 67

The Perfect Button • Focusable, interactive element (<button>) • Accessible name (a label) • Correct role (button)

Slide 68

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

Slide 69

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

Slide 70

@mmatuzo

Slide 71

@mmatuzo

Slide 72

@mmatuzo

Slide 73

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

Slide 74

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

Slide 75

@mmatuzo

Slide 76

Source: nordbayern.de @mmatuzo

Slide 77

Source: natur-im-siedlungsraum.ch @mmatuzo

Slide 78

Source: nabu-hadamar.de @mmatuzo

Slide 79

@mmatuzo

Slide 80

@mmatuzo

Slide 81

@mmatuzo

Slide 82

@mmatuzo

Slide 83

@mmatuzo

Slide 84

<h1> @mmatuzo

Slide 85

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

Slide 86

<h2> (Most Viewed Posts) @mmatuzo

Slide 87

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

Slide 88

@mmatuzo

Slide 89

@mmatuzo

Slide 90

A Sound Document Outline • Meaningful labels

Slide 91

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

Slide 92

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

Slide 93

@mmatuzo

Slide 94

<header> @mmatuzo

Slide 95

<header> <nav> @mmatuzo

Slide 96

<header> <nav> <main> @mmatuzo

Slide 97

<footer> @mmatuzo

Slide 98

@mmatuzo

Slide 99

@mmatuzo

Slide 100

@mmatuzo

Slide 101

<!DOCTYPE html> <html lang=”de”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <title>Neue Helvetica</title> </head> <body> <h1>Neue Helvetica</h1> </body> </html>

@mmatuzo

Slide 102

<!DOCTYPE html> <html lang=”de”> <head> <meta charset=”UTF-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> <title>Neue Helvetica</title> </head> <body> <h1>Neue Helvetica</h1> </body> </html>

@mmatuzo

Slide 103

The lang Attribute • Screen readers

Slide 104

The lang Attribute • Screen readers • Hyphenation

Slide 105

The lang Attribute • Screen readers • Hyphenation • Quotation marks

Slide 106

The lang Attribute • Screen readers • Hyphenation • Quotation marks • Translation

Slide 107

The lang Attribute • Screen readers • Hyphenation • Quotation marks • Translation • Spell checking

Slide 108

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

Slide 109

@mmatuzo

Slide 110

Developers, prioritise HTML! @mmatuzo

Slide 111

Learn who your users are and how they’re using the web. @mmatuzo

Slide 112

Stop belittling HTML. @mmatuzo

Slide 113

Universities, schools, teachers, course coordinators, prioritise HTML! @mmatuzo

Slide 114

Rewrite your curriculums, they don’t work. @mmatuzo

Slide 115

Authors, prioritise HTML! @mmatuzo

Slide 116

Write and speak more about HTML. @mmatuzo

Slide 117

@mmatuzo

Slide 118

Use accessible HTML in your demos. @mmatuzo

Slide 119

Learn how to test your sites with automatic testing tools. @mmatuzo

Slide 120

96.8% of home pages had detected WCAG 2 failures! Source: webaim.org/projects/million @mmatuzo

Slide 121

Learn how to test your sites with the keyboard and screen readers. @mmatuzo

Slide 122

https://noti.st/matuzo/Y1Lgvc @mmatuzo

Slide 123

u https://noti.st/matuzo/Y1Lgvc k Th an yo ! @mmatuzo

Slide 124

Additional Resources @mmatuzo

Slide 125

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

Slide 126

Source: htmhell.dev/11-the-trigram-for-heaven @mmatuzo

Slide 127

Source: htmhell.dev/26-tasty-buttons @mmatuzo

Slide 128

Source: matuzo.at/blog/lang-attribute @mmatuzo