Ha egy képhez olyan leírás tartozik, amely hosszabb annál, hogy az alt attribútumban elférjen, vagy ha egy videóhoz az egyenlő esélyű hozzáférés érdekében szöveges átiratot készítenek, akkor azt az adott elem közelében szükséges elhelyezni, úgy, hogy az megjeleníthető, illetve elrejthető legyen. A folyamatos megjelenítés nem támogatott, mivel abban az esetben, ha a felhasználót nem érdekli a kiegészítő tartalom, zavarhatja, ha azon végig kell navigálnia.
Jelen fejezet célja olyan megjelenítőkomponens bemutatása, amely csak billentyűzet, illetve képernyőolvasó program használata esetén is megfelelően működik. A komponens gyakorlati példájában egy rózsát ábrázoló kép szerepel, mellette egy Megjelenítés
gombbal. A gomb aktiválásakor megjelenik a képhez tartozó leírás. A gomb ismételt aktiválásának vagy az Esc billentyű lenyomásának hatására a leírás elrejtésre kerül.
<img src="./rozsa.jpg" alt="Piros rózsa">
A rózsát ábrázoló kép forráskódrészlete.
<button id="toggleButton" aria-expanded="false" onclick="toggleContent()" title="A gomb aktiválására megjelenik a képhez tartozó leírás. Ismételt aktiválásra elrejtésre kerül." >Leírás</button>
A leírás megjelenítésére vagy bezárására szolgáló nyomógomb. Az aria-expanded="false" attribútum jelzi a képernyőolvasó programnak, hogy az elemmel kiegészítő tartalom aktiválható, amely aktuálisan nem érhető el.
<div id="content" class="hidden" aria-hidden="true">
A leírást magában foglaló elem. A szabályozott megjelenítést a class="hidden" attribútum, illetve annak javascripttel történő kezelése biztosítja. Az aria-hidden="true" attribútum, illetve annak javascripttel történő kezelése jelzi a képernyőolvasó programnak, hogy az elem tartalmát fel kell-e olvasni.