Lee Stott
2daab5271b
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 3 weeks ago | |
| assignment.md | 3 weeks ago | |
README.md
Kuriame prieinamus tinklalapius
Sketchnote sukūrė Tomomi Imura
Klausimynas prieš paskaitą
Interneto galia slypi jo universalume. Prieinamumas visiems, nepaisant negalios, yra esminis aspektas.
- Seras Timothy Berners-Lee, W3C direktorius ir Pasaulinio tinklo išradėjas
Ši citata puikiai pabrėžia, kodėl svarbu kurti prieinamus tinklalapius. Programėlė, kuri nėra prieinama visiems, iš esmės yra išskirianti. Kaip tinklalapių kūrėjai, mes visada turėtume galvoti apie prieinamumą. Jei nuo pat pradžių sutelksite dėmesį į šį aspektą, būsite gerame kelyje užtikrinti, kad visi galėtų pasiekti jūsų sukurtus puslapius. Šioje pamokoje sužinosite apie įrankius, kurie padės užtikrinti, kad jūsų interneto ištekliai būtų prieinami, ir kaip kurti galvojant apie prieinamumą.
Šią pamoką galite rasti Microsoft Learn!
Naudojami įrankiai
Ekrano skaitytuvai
Vienas iš geriausiai žinomų prieinamumo įrankių yra ekrano skaitytuvai.
Ekrano skaitytuvai dažniausiai naudojami žmonių, turinčių regos sutrikimų. Kaip mes stengiamės užtikrinti, kad naršyklė tinkamai perteiktų informaciją, kurią norime pasidalinti, taip pat turime užtikrinti, kad ekrano skaitytuvas tai padarytų.
Pagrindinis ekrano skaitytuvo veikimo principas yra garsiai perskaityti puslapį nuo viršaus iki apačios. Jei jūsų puslapis yra tik tekstas, skaitytuvas perteiks informaciją panašiai kaip naršyklė. Žinoma, tinklalapiai retai būna vien tekstiniai; jie dažnai turi nuorodų, grafikų, spalvų ir kitų vizualinių komponentų. Reikia pasirūpinti, kad ši informacija būtų tinkamai perskaityta ekrano skaitytuvu.
Kiekvienas tinklalapių kūrėjas turėtų susipažinti su ekrano skaitytuvu. Kaip minėta aukščiau, tai yra klientas, kurį naudos jūsų vartotojai. Kaip esate susipažinę su naršyklės veikimu, taip turėtumėte išmokti, kaip veikia ekrano skaitytuvas. Laimei, ekrano skaitytuvai yra įdiegti daugumoje operacinių sistemų.
Kai kurios naršyklės taip pat turi įmontuotus įrankius ir plėtinius, kurie gali garsiai skaityti tekstą arba netgi suteikti pagrindines navigacijos funkcijas, pavyzdžiui, šiuos Edge naršyklės įrankius, orientuotus į prieinamumą. Šie įrankiai taip pat yra svarbūs prieinamumo įrankiai, tačiau jie veikia kitaip nei ekrano skaitytuvai ir neturėtų būti laikomi ekrano skaitytuvų testavimo įrankiais.
✅ Išbandykite ekrano skaitytuvą ir naršyklės teksto skaitytuvą. Windows operacinėje sistemoje Narrator yra įdiegtas pagal nutylėjimą, o JAWS ir NVDA taip pat gali būti įdiegti. macOS ir iOS operacinėse sistemose VoiceOver yra įdiegtas pagal nutylėjimą.
Priartinimas
Kitas įrankis, dažnai naudojamas žmonių su regos sutrikimais, yra priartinimas. Paprasčiausias priartinimo tipas yra statinis priartinimas, valdomas naudojant Control + pliuso ženklą (+) arba sumažinant ekrano rezoliuciją. Šis priartinimo tipas keičia viso puslapio dydį, todėl naudojant responsyvaus dizaino principus svarbu užtikrinti gerą vartotojo patirtį padidinto priartinimo lygiuose.
Kitas priartinimo tipas naudoja specializuotą programinę įrangą, kuri padidina vieną ekrano sritį ir leidžia ją peržiūrėti, panašiai kaip naudojant tikrą didinamąjį stiklą. Windows operacinėje sistemoje Magnifier yra įdiegtas, o ZoomText yra trečiosios šalies didinimo programinė įranga su daugiau funkcijų ir didesne vartotojų baze. macOS ir iOS operacinėse sistemose yra įmontuota didinimo programinė įranga, vadinama Zoom.
Kontrasto tikrinimo įrankiai
Spalvos tinklalapiuose turi būti kruopščiai parinktos, kad atitiktų spalvų aklumo turinčių vartotojų ar žmonių, kuriems sunku matyti mažo kontrasto spalvas, poreikius.
✅ Išbandykite mėgstamą tinklalapį dėl spalvų naudojimo su naršyklės plėtiniu, pavyzdžiui, WCAG spalvų tikrinimo įrankiu. Ką sužinote?
Lighthouse
Naršyklės kūrėjų įrankių srityje rasite Lighthouse įrankį. Šis įrankis yra svarbus norint gauti pirmąją tinklalapio prieinamumo (taip pat ir kitų analizės aspektų) apžvalgą. Nors svarbu nepasikliauti vien Lighthouse, 100% rezultatas yra labai naudingas kaip pagrindas.
✅ Suraskite Lighthouse savo naršyklės kūrėjų įrankių skydelyje ir atlikite analizę bet kuriame tinklalapyje. Ką sužinote?
Prieinamumo dizainas
Prieinamumas yra gana plati tema. Kad jums būtų lengviau, yra daugybė prieinamų išteklių.
Nors negalėsime aptarti visų aspektų, susijusių su prieinamų tinklalapių kūrimu, žemiau pateikiami pagrindiniai principai, kuriuos norėsite įgyvendinti. Prieinamo puslapio kūrimas nuo pat pradžių visada yra lengvesnis nei grįžimas prie esamo puslapio ir jo pritaikymas.
Geros rodymo praktikos
Saugios spalvų paletės
Žmonės mato pasaulį skirtingai, įskaitant spalvas. Renkantis spalvų schemą savo tinklalapiui, turėtumėte užtikrinti, kad ji būtų prieinama visiems. Puikus įrankis spalvų paletėms generuoti yra Color Safe.
✅ Identifikuokite tinklalapį, kuris yra labai problemiškas dėl spalvų naudojimo. Kodėl?
Naudokite tinkamą HTML
Naudojant CSS ir JavaScript, galima bet kurį elementą paversti bet kokio tipo valdikliu. <span> gali būti naudojamas sukurti <button>, o <b> gali tapti hipersaitu. Nors tai gali būti laikoma lengviau stilizuojama, tai nieko neperteikia ekrano skaitytuvui. Naudokite tinkamą HTML kurdami valdiklius puslapyje. Jei norite hipersaito, naudokite <a>. Tinkamo HTML naudojimas tinkamam valdikliui vadinamas semantinio HTML naudojimu.
✅ Eikite į bet kurį tinklalapį ir pažiūrėkite, ar dizaineriai ir kūrėjai tinkamai naudoja HTML. Ar galite rasti mygtuką, kuris turėtų būti nuoroda? Užuomina: dešiniuoju pelės mygtuku spustelėkite ir pasirinkite „View Page Source“ savo naršyklėje, kad pamatytumėte pagrindinį kodą.
Sukurkite aprašomą antraščių hierarchiją
Ekrano skaitytuvų vartotojai labai pasikliauja antraštėmis, kad rastų informaciją ir naršytų puslapyje. Rašyti aprašomą antraščių turinį ir naudoti semantines antraščių žymes yra svarbu kuriant lengvai naršomą puslapį ekrano skaitytuvų vartotojams.
Naudokite gerus vizualinius užuominas
CSS suteikia visišką kontrolę dėl bet kurio elemento išvaizdos puslapyje. Galite sukurti teksto laukelius be kontūro arba hipersaitus be pabraukimo. Deja, pašalinus šias užuominas, gali būti sunkiau atpažinti valdiklio tipą tiems, kurie jomis pasikliauja.
Nuorodų teksto svarba
Hipersaitai yra pagrindinis interneto naršymo elementas. Todėl užtikrinti, kad ekrano skaitytuvas tinkamai perskaitytų nuorodas, leidžia visiems vartotojams naršyti jūsų puslapyje.
Ekrano skaitytuvai ir nuorodos
Kaip ir tikėtasi, ekrano skaitytuvai skaito nuorodų tekstą taip pat, kaip ir bet kurį kitą tekstą puslapyje. Atsižvelgiant į tai, žemiau pateiktas tekstas gali atrodyti visiškai priimtinas.
Mažasis pingvinas, kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje. Spauskite čia norėdami sužinoti daugiau.
Mažasis pingvinas, kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje. Apsilankykite https://en.wikipedia.org/wiki/Little_penguin norėdami sužinoti daugiau.
NOTE Kaip netrukus perskaitysite, niekada neturėtumėte kurti nuorodų, kurios atrodo kaip aukščiau pateiktos.
Atminkite, ekrano skaitytuvai yra kitokia sąsaja nei naršyklės, turinti kitą funkcijų rinkinį.
Problema su URL naudojimu
Ekrano skaitytuvai skaito tekstą. Jei tekste yra URL, ekrano skaitytuvas perskaitys URL. Paprastai URL nesuteikia prasmingos informacijos ir gali skambėti erzinančiai. Jūs galėjote tai patirti, jei jūsų telefonas kada nors garsiai perskaitė tekstinę žinutę su URL.
Problema su „spausti čia“
Ekrano skaitytuvai taip pat gali skaityti tik hipersaitus puslapyje, panašiai kaip regintis žmogus skenuotų puslapį ieškodamas nuorodų. Jei nuorodų tekstas visada yra „spausti čia“, vartotojas girdės tik „spausti čia, spausti čia, spausti čia, spausti čia, spausti čia, ...“. Visos nuorodos tampa neatskiriamos viena nuo kitos.
Geras nuorodų tekstas
Geras nuorodų tekstas trumpai aprašo, kas yra kitoje nuorodos pusėje. Aukščiau pateiktame pavyzdyje, kalbant apie mažus pingvinus, nuoroda yra į Wikipedia puslapį apie šią rūšį. Frazė mažasis pingvinas būtų puikus nuorodos tekstas, nes aiškiai nurodo, ką sužinosite paspaudę nuorodą - apie mažus pingvinus.
Mažasis pingvinas, kartais vadinamas fėjų pingvinu, yra mažiausias pingvinas pasaulyje.
✅ Naršykite internete kelias minutes ir raskite puslapius, kurie naudoja neaiškias nuorodų strategijas. Palyginkite juos su kitais, geriau susietais puslapiais. Ką sužinote?
Paieškos sistemų pastabos
Kaip papildoma nauda užtikrinant, kad jūsų puslapis būtų prieinamas visiems, padėsite paieškos sistemoms naršyti jūsų puslapyje. Paieškos sistemos naudoja nuorodų tekstą, kad sužinotų puslapių temas. Taigi, naudodami gerą nuorodų tekstą, padedate visiems!
ARIA
Įsivaizduokite šį puslapį:
| Produktas | Aprašymas | Užsakymas |
|---|---|---|
| Widget | Aprašymas | Užsakymas |
| Super widget | Aprašymas | Užsakymas |
Šiame pavyzdyje teksto „aprašymas“ ir „užsakymas“ dubliavimas yra prasmingas naršyklės vartotojui. Tačiau ekrano skaitytuvo vartotojas girdėtų tik žodžius aprašymas ir užsakymas be konteksto.
Norint palaikyti tokias situacijas, HTML palaiko atributų rinkinį, vadinamą Prieinamos turtingos interneto programos (ARIA). Šie atributai leidžia pateikti papildomą informaciją ekrano skaitytuvams.
NOTE: Kaip ir daugelis HTML aspektų, naršyklės ir ekrano skaitytuvų palaikymas gali skirtis. Tačiau dauguma pagrindinių klientų palaiko ARIA atributus.
Galite naudoti aria-label, kad aprašytumėte nuorodą, kai puslapio formatas to neleidžia. Aprašymas widget'ui galėtų būti nustatytas kaip
<a href="#" aria-label="Widget description">description</a>
✅ Paprastai semantinio žymėjimo naudojimas, kaip aprašyta aukščiau, yra svarbesnis nei ARIA naudojimas, tačiau kartais nėra semantinio ekvivalento įvairiems HTML valdikliams. Geras pavyzdys yra Medis. HTML nėra ekvivalento medžiui, todėl jūs identifikuojate bendrą <div> šiam elementui su tinkamu vaidmeniu ir ARIA reikšmėmis. MDN dokumentacija apie ARIA turi daugiau naudingos informacijos.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Vaizdai
Akivaizdu, kad ekrano skaitytuvai negali automatiškai perskaityti, kas yra vaizde. Užtikrinti, kad vaizdai būtų prieinami, nereikalauja daug darbo - tam skirtas atributas alt. Visi prasmingi vaizdai turėtų turėti alt, kuris aprašo, kas jie yra. Vaizdai, kurie yra tik dekoratyviniai, turėtų turėti alt atributą, nustatytą kaip tuščią eilutę: alt="". Tai neleidžia ekrano skaitytuvams nereikalingai pranešti apie dekoratyvinį vaizdą.
✅ Kaip galite tikėtis, paieškos sistemos taip pat negali suprasti, kas yra vaizde. Jos taip pat naudoja alt tekstą. Taigi dar kartą, užtikrinant, kad jūsų puslapis būtų prieinamas, gaunate papildomų privalumų!
Klaviatūra
Kai kurie vartotojai negali naudoti pelės ar jutiklinio pulto, vietoj to pas Daugelis vyriausybių turi įstatymus, susijusius su prieinamumo reikalavimais. Pasidomėkite savo šalies prieinamumo įstatymais. Kas yra įtraukta, o kas ne? Pavyzdys yra ši vyriausybinė svetainė.
Užduotis
Analizuokite neprieinamą svetainę
Kreditai: Turtle Ipsum sukūrė Instrument
Atsakomybės apribojimas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.