News Photo

Honlapok akadálymentesítése I.

A projektjeink tervezése során, törekszünk az adott akadálymentesítési szintet elérni, legyen az WCAG 2.0 (A, AA, AAA) - http://www.w3c.hu/forditasok/WCAG20 - és akadálymentesíteni a felületet. Általában az akadálymentesítés nem kap akkora hangsúlyt egy fejlesztés során, mint amit megérdemelne. Pedig minimális erőfeszítéssel elérhető lehet oldalunk bárki számára.

Sokszor kapom meg, hogy mért fektessen egy webes felület tervezése során plusz időt, hogy akadálymentes legyen az oldala, hiszen hallotta az előbb, hogy a laptopom beszél, felolvas mindent, bár nem érti, mért beszél ilyen gyorsan, de olvassa a tartalmat. Igen felolvassa, de azt nem fogja, ami nem lett akadálymentesítve. Példaként az ábrákat, képeket, nem fogja tudni felolvasni csak akkor, ha elláttuk alt attribútummal, amit fel kell ruházni információval és így átadni a képernyőolvasó számára.

Akkor csináljunk egy külön oldalt látássérülteknek?

Nem, sárga alapon pöttyös ikon nem jó megoldás. Ne zárjuk ki – főleg egy dinamikus honlapról – a fogyatékkal élő embereket. Vegyünk példaként egy webáruházat. Mi akadálymentesíthető egy webáruházban? A navigációs menü felépítésén keresztül a termék képeinek a „feliratozásán” át, ikonok akadálymentes megjelenítéséig minden.

Talán egy konkrét példán keresztül betudom mutatni, későbbiekben pedig, összeszedem a technikai „hasznát” az akadálymentesítésnek.

Ha például egy aktuális elemet akarunk akadálymentesíteni, legyen ez most egy navigációs blokk, akkor akadálymentesítési szempontból először az alábbi role="navigation" attribútumot kell megadnunk. majd halhatóvá kell tenni az aktuális elem helyét. Vizuálisan rejtett magyarázószöveggel.

 
   
  • Rólunk
  •  

    .visual-hidden {
        position: absolute;
        left: -10000em;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        white-space: nowrap;
    }

    A képernyőolvasó számára akadálymentessé tettük a menüsorunk. Természetesen még ezt is lehetne finomítani.

    Rendben, de mi van a gyengénlátókkal vagy a színtévesztőkkel? Nos, nekik teljesen más felfogásban kell akadálymentessé tenni a navigációs sávot. Egy CSS trükkel meg is oldhatjuk számukra is a hozzáférést mégpedig

    .active {
      background-color: red;
      border: 1px solid red; 
    }

    A kijelölt elem színe természetesen így sem válik számukra láthatóvá, viszont az elem szegélye – színtől függetlenül – kiemeli. Színtévesztőnek is akadálymentes lett a navigáció.