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

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

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

matuzo.social

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

}

matuzo.social

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

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

matuzo.social

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

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

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

matuzo.social

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

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

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

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

matuzo.social

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

svg> / < matuzo.social

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

svg> / < matuzo.social

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

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

/ < / < button> / < matuzo.social

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

svg> / < matuzo.social

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

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

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

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

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

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

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

🗣 Charging / < matuzo.social

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

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

matuzo.social

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

matuzo.social / < <geolocation> geolocation>

matuzo.social

matuzo.social

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

matuzo.social

matuzo.social SFNSP SEQUENTIAL FOCUS NAVIGATION STARTING POINT

matuzo.social

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

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>

matuzo.social

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

matuzo.social 1:21

matuzo.social : 1 21

matuzo.social

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

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

matuzo.social

matuzo.social accessibility-cookbook.com

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