Mi az a képernyőolvasó és az akadálymentesség…

Képernyőolvasó: olyan szoftver, amelyet vak és gyengénlátó emberek használnak a képernyő tartalmának hangos felolvasására vagy Braille formátumba való átalakítására.

A webfejlesztés kontextusában az akadálymentesség (Accessibility) a gyakorlat, hogy olyan weboldalakat és alkalmazásokat hozzunk létre, amelyeket különböző korlátozásokkal élő emberek is használhatnak: látási (vak, gyengénlátó), hallási (süketség, halláskárosodás), motoros (képtelenség az egér használatára), kognitív (koncentrációs, megértési nehézségek).

A webes akadálymentesség főbb szempontjai:

Szemantikus HTML: A megfelelő tagek használata strukturális elemekhez (<header>, <nav>, <main>, <footer>, <article>, <aside>) és interaktív elemekhez (<button>, <input>) segíti a képernyőolvasókat az elemek szerepének megértésében.
ARIA (Elérhető Gazdag Internetes Alkalmazások): Olyan attribútumok halmaza, amelyek dinamikus elemekhez és JavaScript segítségével létrehozott widgetekhez adnak szemantikai jelentést, amelyek eredetileg nem rendelkeznek beépített hozzáférhetőséggel (pl. modális ablakok, tabok).
```
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Modális ablak címe</h2>
  
</div>
```
Alternatív szöveg (alt): Képekhez szöveges leírás biztosítása.
```
<img src="logo.png" alt="Cég logója">
```
Színkontraszt: A szöveg és a háttér közötti megfelelő kontraszt biztosítása az olvashatóság érdekében. A WCAG (Web Content Accessibility Guidelines) minimális kontrasztarányokat ír elő.
Billentyűzet fókusz: Látható fókuszjelző biztosítása az interaktív elemeknél, hogy a billentyűzetes felhasználók nyomon követhessék helyzetüket az oldalon.
Billentyűzetes navigáció: Biztosítani, hogy minden interaktív elem elérhető és aktiválható billentyűzettel (Tab, Shift+Tab, Enter, szóköz).
Egyszerű nyelv és szerkezet: Egyszerű nyelv használata, világos címsorok és listák a könnyebb megértés és navigáció érdekében.

Rejtett szöveg képernyőolvasók számára: Olyan elemek elrejtése vizuálisan, de elérhetővé tétele képernyőolvasók számára, vagy fordítva.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Az akadálymentesség nemcsak a fogyatékkal élő felhasználók számára fontos, hanem javítja a SEO-t, megkönnyíti minden felhasználó számára a használatot (például mobil eszközökön vagy gyenge internetkapcsolat esetén). Az WCAG szabványok betartása jó fejlesztési gyakorlat.

Mi az a képernyőolvasó és az akadálymentesség fogyatékkal élő személyek számára?