# data[].attributes.title
19½ things you didn’t know about accessibility in HTML and CSS

# data[].attributes.slidedeck.data[].slides[].desc.html
19½ things Manuel Matuzović, SmashingConf Amsterdam, April 14th, 2026

# data[].attributes.slidedeck.data[].slides[].desc.html
19½ things you didn’t know about accessibility in HTML and CSS Manuel Matuzović, SmashingConf Amsterdam, April 14th, 2026

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social @media (min height: 31.25rem) { .header { position: sticky; } 500px .cookie { position: f xed; } / * * / i

}

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<button aria haspopup=”true”> Demos button> <div> <ul>

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

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social JAWS 2026, Windows 11, Chrome 145: “Demos button menu, press Space to activate the menu, then navigate with arrow keys”

# data[].attributes.slidedeck.data[].slides[].desc.html
<button aria expanded=”false”> Demos button> <div> <ul>

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

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<button popovertarget=”sub2”> Demos button> / < /
<div popover id=”sub2” role=”dialog”> <ul> … ul> div> / < < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<button popovertarget=”sub2”> Demos button> / < /
<dialog popover id=”sub2”> <ul> … ul> dialog> / < < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” aria hidden=”true”> …

svg> / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” role=”img” aria label=”Charging”> …

svg> / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” role=”img”> <title>Charging … / < svg> / < matuzo.social title>

# data[].attributes.slidedeck.data[].slides[].desc.html
<button> <svg viewBox=”0 0 24 24” role=”img”> <title>Charging … svg> / < / < button> / < matuzo.social title> 😿

# data[].attributes.slidedeck.data[].slides[].desc.html
<button> <svg viewBox=”0 0 24 24” role=”img” aria labelledby=”icon_title”> <title id=”icon_title”>Charging title> … svg>

/ < / < button> / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” aria hidden=”true”> …

svg> / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<h2> Hello Amsterdam h2>
🗣 Hello Amsterdam, heading level 2
/
<
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<h2 aria hidden=”true”> Hello Amsterdam h2>
-
🗣
/
<
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<h2 role=”presentation”> Hello Amsterdam h2>
🗣 Hello Amsterdam
/
<
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social <img src=”battery.svg” role=”presentation”>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social w3.org/TR/wai-aria-1.1/#presentation

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social <img src=”battery.svg” role=”presentation”> <img src=”battery.svg” aria hidden=”true”>
<img src=”battery.svg” alt=”“>

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” role=”presentation”> … svg> 🗣 / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<svg viewBox=”0 0 24 24” role=”presentation” aria label=”Charging”> … svg>

🗣 Charging / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
Is the service free of charge? button> h2> tt / < 🗣 heading level 2, Is the service free of charge?, bu on / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
<button> <h2> Is the service free of charge? h2> button> tt / < 🗣 Is the service free of charge?, bu on / < matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social w3.org/TR/wai-aria-1.1/#childrenArePresentational

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social / < <geolocation> geolocation>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social
<meta name=”text scale” content=”scale”>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
Ada Lovelace button> Jocelyn Bell Burnell Marie Curie button> / < / / < < - - - - div> / < matuzo.social button>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social SFNSP SEQUENTIAL FOCUS NAVIGATION STARTING POINT

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social
<h1>CHEMISTRY FTW! <h2>Branches h2> / < / < / < <h2>Philosophy h2> h1>

# data[].attributes.slidedeck.data[].slides[].desc.html
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>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social
<h1>Science h1> <h2>Scientists <h2>Branches <h2>History h2> h2> / / < < / / < / < <h2>Philosophy < h2> h2>

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social 1:21

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social : 1 21

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social : 1 21

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social button before { content: “☰”; } tt : : 🗣 Trigram for heaven, bu on

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social button before { content: “☰” / “Menu”; } tt : : 🗣 Menu, bu on

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social accessibility-cookbook.com

# data[].attributes.slidedeck.data[].slides[].desc.html
matuzo.social Thank you! ❤ accessibility-cookbook.com matuzo.social htmhell.dev matuzo.at manuel@matuzo.at