A webtervezés iránti igények egyre inkább a javított webes elérhetőséget tartalmazzák. De nem elegendő a webhely optimalizálása az összes nagyobb böngésző számára, több eszköz kompatibilitással? A Google Lighthouse segítségével könnyedén mérheti webhelye teljesítményét, hozzáférhetőségét, bevált gyakorlatait és SEO -ját. Akkor miért számít a hozzáférhetőség?

A CDC (Centers for Disease Control and Prevention) szerint több mint 60 millió amerikai él fogyatékossággal. A webtartalom akadálymentesítési irányelveit követve bevezethet néhány előzetes megfontolást, amelyek hozzájárulnak a hozzáférhető webhely létrehozásához. Itt mindent megtalál, amellyel elkezdheti a webes akadálymentesítést HTML és CSS használatával.

Strukturált HTML megfelelő szemantikával

Miközben a webhely vizuálisan vonzóvá válik, a segítő technológiát használó felhasználóknak nem szabad összezavarodniuk. Bár sok tartalomkezelő rendszer, például a WordPress alkalmazza a HTML -t, az Ön felelőssége, hogy újra ellenőrizze és megerősítse, hogy helyesen alkalmazták.

Például a

Olvass tovább: Egyszerű HTML -példák, amelyeket 10 perc alatt megtanulhat

A szemantikus HTML -t könnyebb kifejleszteni, mivel további funkciókat is kap. Fantasztikusan működik mobilon. Ezenkívül, ha fontosságot tulajdonít a kulcsszavaknak

vagy címke, ez segít a SEO -ban.

Strukturált tartalom képernyőolvasó felhasználók számára

Íme egy példa a szemantikus HTML jó vs. rossz.

Jó szemantikai HTML
Irányom

Így készíthet hozzáférhető webhelyet HTML és CSS használatával

Második címem

Rossz szemantikai HTML
Irányom

Így készíthet hozzáférhető webhelyet HTML és CSS használatával

Az első esetben nagyon könnyű navigálni a képernyőolvasók számára. Felolvassa a fejlécet, amely értesíti a címsort és a bekezdést. Minden elem után egy másodpercre leáll. Kihagyhat néhány címsort, vagy visszatérhet az előzőhöz az Enter/Return billentyűvel. Tartalomjegyzéket is készíthet a fejléccímke használatával.

Ha bemutató HTML -t ír a szemantikus HTML helyett (a második esetben), a sor szükségtelenül elszakad, és rossz élményt eredményez. Ez olyan, mint egy óriási blokk előkészítése, amelyet sokkal nehezebb kaszkádolni és manipulálni, mivel nincsenek potenciális kiválasztók.

Nyelv és elrendezések a hozzáférhető webhelyekhez

Pontos nyelvet kell használnia kibővített rövidítésekkel és rövidítésekkel. Ha lehetséges, próbálja meg elkerülni a kötőjeleket, írva a 9-5 -> 9-5 -öt. Korábban HTML táblákat használtak az oldalelrendezések létrehozásához. Régebben akadályozta a helyes leolvasást az egymásba ágyazott táblák miatt, amelyek meglehetősen összetett elrendezést alkottak. Itt egy modern weboldal szerkezet:

Ez egy fejléc



Főoldal tartalma

tartalmazó cikket

Cikk címsor

cikk tartalma



Weboldal lábléce

Tehát, mint látható, ez az elrendezés képernyőolvasóbarát. A jelölés érthető világos és tömör kóddal. Ezenkívül könnyen karbantartható, és letöltés közben kevesebb sávszélességet igényel. Győződjön meg arról, hogy a forráskódot logikusan helyezte el; ez mindent meg fog változtatni.

Tekintse át a felhasználói felület vezérlőit, tábláit és az alternatív szöveget

A felhasználói felület vezérlői leggyakrabban a webes dokumentum gombjai, űrlap- és linkvezérlői. Az alapszabály az, hogy billentyűzettel kezelhetők. Van némi alapértelmezett stílusuk (a különböző böngészőkben eltérőek lehetnek), ahol a tabulátor billentyű használatával ugorhat más lehetőségekre, és a következtetés levonásához nyomja meg az Enter/Return billentyűt. A szöveges címkéket úgy kezelheti, hogy "kattintson ide" helyett jellegzetes és tartalmas horgonyszövegeket ad hozzá.

Hozzáférhető táblák létrehozásához adjon hozzá táblázatfejléceket

és adja meg a sorokat vagy oszlopokat a hatókör attribútum használatával. Ezenkívül használhatja a vagy összegző attribútumot, hogy a képernyőolvasók gyorsan áttekinthessék a táblázat tartalmát.

Az alternatív szöveg a kép vagy videó kontextuális információit adja meg a webrobotoknak és a képernyőolvasóknak. Ha a kép díszítő jellegű, akkor jobb, ha az alt címkét üresen hagyja. Egyébként sokat segít a kép részletes leírása.

A legtöbb esetben a képernyőolvasó kiolvassa az alternatív szöveget, a fájlnevet és a title attribútumot (kihagyhatja). Továbbá, ha nem szeretne alt szöveget használni, vagy ugyanazt a címkét szeretné hozzáadni több képhez, akkor itt egy gyors tipp:

Egy piros virág ...

Az aria-labeledby attribútumot használta arra az id hivatkozásra. Lehetővé teszi, hogy a képernyőolvasók az adott bekezdés formájában alternatív szöveget használhassanak.

Standard CSS a jobb elérhetőség érdekében

A hozzáférhető oldalfunkciók stílusa azt jelenti, hogy a tervezésnek az oldal alapvető tartalmának megfelelően kell viselkednie. Például a

,

, és

elem, egy tipikus CSS -nek a következőnek kell lennie:

h1 {
betűméret: 4rem;
}
p, li {
betűméret: 1,5rem;
szín: kék;
}

A betűméret, betűköz, betűcsalád stb. Segíthet a kényelmes olvasásban. A címsoroknak ki kell tűnniük a törzsszövegből (az alapértelmezett stílus is jó). Ezenkívül a szövegnek kontrasztos színűnek kell lennie háttér, amelyet a CSS segítségével választ.

Szöveg, linkek és címkék stílusa

Mikro interakciók lehetségesek egy hozzáférhető CSS segítségével. Ez lehet olyan kicsi, mint a szöveg kiemelése a linkek megfelelő módon történő kiemeléséhez. Használhatja a és megkülönböztető címkével. Pontozott aláhúzást a elem.

A szabványos linket alá kell húzni alapértelmezett színnel: kék és egy korábban meglátogatott linket alapértelmezett színnel: lila (testreszabhatja).

a {
szín: #ff0000;
}
a: aktív {
szín: #000000;
háttérszín: #a60000;
}
a: lebegés, a: meglátogatott, a: fókusz {
szín: #a60000;
szövegdíszítés: nincs;
}

Tehát az egérmutató megváltoztatásával ki kell emelnie a fókuszált szöveget. A kurzor és a körvonal fontos szerepet játszik a web elérhetőségében.

A CSS használatával tiszta megjelenést kölcsönözhet az űrlap elemeinek és címkéinek. Ezenkívül határozza meg a fókusz/lebegés állapotát, amely a legtöbb böngészőben konzisztens. Ne feledje, hogy ezek az apró jelzések segítenek az embereknek megérteni weboldalát.

Színkontraszt és értékek elrejtése

Állítsa be a webhely színsémáját úgy, hogy az előtér (szöveg/kép) színe ellentétes legyen a háttérszínnel elsősorban azért, mert a látássérült (pl. színvak) emberek nehezebben olvassák a tartalmat megfelelően. Te tudod használni Színkontraszt -ellenőrző hogy tisztességes színsémát kapjon a WCAG kritériumai szerint. Ezenkívül próbáljon meg jelölési jeleket (például csillagot) hozzáadni a figyelmeztetésekhez vagy a feltételekhez (nem csak a piros figyelmeztetést).

A képernyőolvasóknak nincs okuk aggódni, amíg a forráskód sorrendjét tisztességesen meg nem írják. Próbálja meg elkerülni a display: none vagy a láthatóság: rejtett tulajdonságok használatát, mivel elrejtik a tartalmat a képernyőolvasók elől.

Könnyítse meg a stílus felülírását

A lényeg az, hogy függetlenül attól, hogy mennyire jól megtervezi az oldalt, a felhasználóknak különböző okai vannak a stílus felülbírálására. Például egyesek nagyobb szövegméretet szeretnének, vagy módosítani szeretnék a szöveg és a háttérszínt az olvashatóság érdekében. Tehát a tartalomterületnek képesnek kell lennie arra, hogy teljesen kezelje.

Csomagolás: Kombinálja a HTML -t és a CSS -t

Most már ismeri a szemantikus HTML használatának megkezdésének alapjait, és egy értelmes forráskód írását a megfelelő sorrendben egy hozzáférhető webhely számára. Fókuszáljon a HTML -re, és haladjon a hozzáférhető CSS létrehozása felé, miután elkészült.

A fenti technikák használatával javíthatja a felhasználói élményt, és gyönyörű közönséget szolgálhat ki. Kezdje tehát az érzékeny és hozzáférhető webhelyek készítését.

Weboldal készítés: kezdőknek

Ma végigvezetem Önt a teljes weboldal készítésének folyamatán a nulláról. Ne aggódjon, ha ez nehéznek tűnik. Minden lépésen végigvezetlek.

Olvassa tovább

A szerzőről

Bontsa ki a teljes történet olvasásához