19½ things you didn’t know about accessibility in HTML and CSS

A presentation at Smashing Conf Amsterdam in April 2026 in Amsterdam, Netherlands by Manuel Matuzovic

Slide 1

Slide 1

19½ things Manuel Matuzović, SmashingConf Amsterdam, April 14th, 2026

Slide 2

Slide 2

19½ things you didn’t know about accessibility in HTML and CSS Manuel Matuzović, SmashingConf Amsterdam, April 14th, 2026

Slide 3

Slide 3

matuzo.social

Slide 4

Slide 4

matuzo.social

Slide 5

Slide 5

matuzo.social

Slide 6

Slide 6

matuzo.social @media (min height: 31.25rem) { .header { position: sticky; } 500px .cookie { position: f xed; } / * * / i

}

Slide 7

Slide 7

matuzo.social

Slide 8

Slide 8

matuzo.social

Slide 9

Slide 9

<button aria haspopup=”true”> Demos button> <div> <ul>

/ < / … ul> div> / < < matuzo.social

Slide 10

Slide 10

matuzo.social

Slide 11

Slide 11

matuzo.social

Slide 12

Slide 12

matuzo.social JAWS 2026, Windows 11, Chrome 145: “Demos button menu, press Space to activate the menu, then navigate with arrow keys”

Slide 13

Slide 13

<button aria expanded=”false”> Demos button> <div> <ul>

/ < / … ul> div> / < < matuzo.social

Slide 14

Slide 14

matuzo.social

Slide 15

Slide 15

matuzo.social

Slide 16

Slide 16

matuzo.social

Slide 17

Slide 17

<button popovertarget=”sub2”> Demos button> / < /

<div popover id=”sub2” role=”dialog”> <ul> … ul> div> / < < matuzo.social

Slide 18

Slide 18

<button popovertarget=”sub2”> Demos button> / < /

<dialog popover id=”sub2”> <ul> … ul> dialog> / < < matuzo.social

Slide 19

Slide 19

matuzo.social

Slide 20

Slide 20

matuzo.social

Slide 21

Slide 21

matuzo.social

Slide 22

Slide 22

matuzo.social

Slide 23

Slide 23

matuzo.social

Slide 24

Slide 24

<svg viewBox=”0 0 24 24” aria hidden=”true”> …

svg> / < matuzo.social

Slide 25

Slide 25

<svg viewBox=”0 0 24 24” role=”img” aria label=”Charging”> …

svg> / < matuzo.social

Slide 26

Slide 26

<svg viewBox=”0 0 24 24” role=”img”> <title>Charging … / < svg> / < matuzo.social title>

Slide 27

Slide 27

<button> <svg viewBox=”0 0 24 24” role=”img”> <title>Charging … svg> / < / < button> / < matuzo.social title> 😿

Slide 28

Slide 28

<button> <svg viewBox=”0 0 24 24” role=”img” aria labelledby=”icon_title”> <title id=”icon_title”>Charging title> … svg>

/ < / < button> / < matuzo.social

Slide 29

Slide 29

<svg viewBox=”0 0 24 24” aria hidden=”true”> …

svg> / < matuzo.social

Slide 30

Slide 30

<h2> Hello Amsterdam h2> 🗣 Hello Amsterdam, heading level 2 / < matuzo.social

Slide 31

Slide 31

<h2 aria hidden=”true”> Hello Amsterdam h2> - 🗣 / < matuzo.social

Slide 32

Slide 32

<h2 role=”presentation”> Hello Amsterdam h2> 🗣 Hello Amsterdam / < matuzo.social

Slide 33

Slide 33

matuzo.social <img src=”battery.svg” role=”presentation”>

Slide 34

Slide 34

matuzo.social w3.org/TR/wai-aria-1.1/#presentation

Slide 35

Slide 35

matuzo.social <img src=”battery.svg” role=”presentation”> <img src=”battery.svg” aria hidden=”true”>

<img src=”battery.svg” alt=”“>

Slide 36

Slide 36

<svg viewBox=”0 0 24 24” role=”presentation”> … svg> 🗣 / < matuzo.social

Slide 37

Slide 37

<svg viewBox=”0 0 24 24” role=”presentation” aria label=”Charging”> … svg>

🗣 Charging / < matuzo.social

Slide 38

Slide 38

<h2> <button> Is the service free of charge? button> h2> tt / < 🗣 heading level 2, Is the service free of charge?, bu on / < matuzo.social

Slide 39

Slide 39

<button> <h2> Is the service free of charge? h2> button> tt / < 🗣 Is the service free of charge?, bu on / < matuzo.social

Slide 40

Slide 40

matuzo.social

Slide 41

Slide 41

matuzo.social w3.org/TR/wai-aria-1.1/#childrenArePresentational

Slide 42

Slide 42

matuzo.social / < <geolocation> geolocation>

Slide 43

Slide 43

matuzo.social

Slide 44

Slide 44

matuzo.social

Slide 45

Slide 45

matuzo.social

Slide 46

Slide 46

matuzo.social

Slide 47

Slide 47

matuzo.social

Slide 48

Slide 48

matuzo.social

Slide 49

Slide 49

matuzo.social

Slide 50

Slide 50

matuzo.social

Slide 51

Slide 51

matuzo.social

Slide 52

Slide 52

matuzo.social

Slide 53

Slide 53

matuzo.social

<meta name=”text scale” content=”scale”>

Slide 54

Slide 54

matuzo.social

Slide 55

Slide 55

matuzo.social

Slide 56

Slide 56

matuzo.social

Slide 57

Slide 57

<div focusgroup=”tablist nomemory” aria label=”Sections” class=”tablist”> <button type=”button” aria selected=”true”>Ada Lovelace button> <button type=”button” aria selected=”false”>Jocelyn Bell Burnell <button type=”button” aria selected=”false”>Marie Curie button> / < / / < < - - - - div> / < matuzo.social button>

Slide 58

Slide 58

matuzo.social

Slide 59

Slide 59

matuzo.social

Slide 60

Slide 60

matuzo.social

Slide 61

Slide 61

matuzo.social

Slide 62

Slide 62

matuzo.social

Slide 63

Slide 63

matuzo.social SFNSP SEQUENTIAL FOCUS NAVIGATION STARTING POINT

Slide 64

Slide 64

matuzo.social

Slide 65

Slide 65

matuzo.social

Slide 66

Slide 66

matuzo.social

Slide 67

Slide 67

matuzo.social

<h1>CHEMISTRY FTW! <h2>Branches h2> / < / < / < <h2>Philosophy h2> h1>

Slide 68

Slide 68

matuzo.social

<h1 class=”visually hidden”>Science h1> <h2 class=”visually hidden”>Scientists <h2>Branches h2> <h2 class=”visually hidden”>History / < / / < h2> < - - - / < / < <h2>Philosophy h2> h2>

Slide 69

Slide 69

matuzo.social

<h1>Science h1> <h2>Scientists <h2>Branches <h2>History h2> h2> / / < < / / < / < <h2>Philosophy < h2> h2>

Slide 70

Slide 70

matuzo.social 1:21

Slide 71

Slide 71

matuzo.social : 1 21

Slide 72

Slide 72

matuzo.social : 1 21

Slide 73

Slide 73

matuzo.social

Slide 74

Slide 74

matuzo.social

Slide 75

Slide 75

matuzo.social

Slide 76

Slide 76

matuzo.social button before { content: “☰”; } tt : : 🗣 Trigram for heaven, bu on

Slide 77

Slide 77

matuzo.social button before { content: “☰” / “Menu”; } tt : : 🗣 Menu, bu on

Slide 78

Slide 78

matuzo.social

Slide 79

Slide 79

matuzo.social

Slide 80

Slide 80

matuzo.social accessibility-cookbook.com

Slide 81

Slide 81

matuzo.social Thank you! ❤ accessibility-cookbook.com matuzo.social htmhell.dev matuzo.at manuel@matuzo.at