Hozzáférhetőség

A hozzáférhetőség (röviden a11y) azt jelenti, hogy a weboldalt minél többen tudják használni, a fogyatékkal élők is. Ez nem csak etikai kérdés: néhány országban jogi előírás is, és a látogatók nagyjából tizenöt százalékát érinti. A Bricks eszközöket ad ahhoz, hogy kód írása nélkül is szemantikus HTML-t állíts elő, és megfelelj a legfontosabb irányelveknek.

A cél, hogy a tartalom érthető legyen a látogatóid többsége számára: érvényes HTML, megfelelő szemantikus szerkezet, beszédes hivatkozások és gombok, a képeknél értelmes alt leírás.

ARIA-tájékozódási pontok

A Bricks alapból három tájékozódási pontot (landmark) hoz létre: fejléc (header), fő tartalom (main) és lábléc (footer).

Az elemek a lehető legszemantikusabb címkét használják. Az Űrlap elem form, a Navigációs menü elem nav címkét ad. Ha további tájékozódási pontra vagy bármilyen más szemantikus címkére van szükséged, használd a Tároló elemet, és válaszd ki a kívánt HTML-címkét. Egyéni címkét is megadhatsz.

Az egyéni attribútumokkal bármelyik elemhez hozzáadhatsz további attribútumot, például role értéket. A Stílus → Attribútumok résznél a plusz ikonnal vegyél fel egy attribútumot, a Név legyen role, az Érték a megfelelő szerepkör. Részletek: Egyéni attribútumok és tippek.

Képek

A képek a WordPress Média képtulajdonságaiban megadott helyettesítő szöveggel jelennek meg. Az alt attribútum a képet nem látó látogatók leírása. A Kép elemnél egyéni alt szöveget is megadhatsz a szerkesztőben.

A háttérképek CSS-háttérként kerülnek ki, ezért díszítőelemekre használd őket. Ha a kép jelentést hordoz, inkább a Kép elemet válaszd, hogy megfelelő helyettesítő szöveget kaphasson, vagy add hozzá a szükséges kiegészítő szöveget vagy egyéni attribútumot kézzel.

Hivatkozások

Ha egy hivatkozás tartalma üres vagy nem elég beszédes, a szerkesztőben állíts be hozzá aria-label (és title) attribútumot. Ezek segítik a képernyőolvasókat és egyéb segítő technológiákat.

Kerüld az „Olvass tovább” és „Kattints ide” típusú szövegeket, mert nem mondanak semmit a látogatónak a cél tartalmáról. Ha mégis ezeket használod, adj a hivatkozásnak aria-label attribútumot, amely megmondja, hová vezet.

Űrlapok

Az Űrlap elem mezőihez felirat adható vagy elhagyható. A feliratok azért fontosak, mert leírják, mit kell beírni a mezőbe. Ha nem szeretnél feliratot megjeleníteni, a Bricks a mezőnél megadott felirat alapján automatikusan aria-label attribútumot ad a beviteli mezőnek.

Billentyűzetes használat

A hozzáférhetőség egyik alapkövetelménye, hogy a weboldal csak billentyűzettel is használható legyen. Ez nem csak az egeret nem használóknak fontos, hanem más segítő eszközök használóinak is.

Fókuszkeret

Fontos, hogy látszódjon, hol áll a fókusz. A Bricks alapértelmezett CSS-t ad a :focus állapothoz. Saját stílust a Stíluskezelő → Sablonstílusok tipográfiai beállításai között, a fókuszkeret (focus outline) vezérlőjénél adhatsz meg. A fókuszkeret eltávolítása („none” érték) nem ajánlott.

Ugrás hivatkozások

Billentyűzetes használatnál zavaró, ha minden menüpontot végig kell lépkedni a fő tartalom előtt. A bevált megoldás az oldal tetején lévő, a navigációt átugró hivatkozás. A Bricks alapból két ilyen hivatkozást ad: az egyik a tartalomra, a másik a láblécre ugrik (ha van lábléc). Ezek automatikusan bekerülnek, és csak akkor jelennek meg, ha megnyomod a TAB billentyűt.

Menük

A Bricks által készített menük <nav> címkében vannak, és teljesen kezelhetők billentyűzettel:

Billentyű	Hatás
TAB	A következő menüpontra lép.
SHIFT + TAB	Az előző menüpontra lép.
ENTER	Követi a hivatkozást (mint a kattintás).
SPACE	Megnyitja vagy bezárja az almenüt, ha van.

A billentyűzetes menüműködés a lenyíló (fly-out) menük bevált mintáját követi.