Dizainera ceļvedis tīmekļa pieejamības pamatiem

Tīmeklim jābūt vietai, kur ikviens var piekļūt vienādam saturam no jebkuras vietas pasaulē. Atbildes paņēmieni ir gājuši garu ceļu ierīces agnostikas modeļi. Bet ko par pieejamības-agnostikas modeļi?

Tīmekļa pieejamība ir bijusi jau vairākus gadus, taču tās ieviešanai ir nepieciešami jauni sasniegumi tehnoloģiju un tīmekļa izstrādē. Daudzi izstrādātāji vēlas palīdzēt, bet ir grūti saprast, kā veidot pieejamību, jo ir tik daudz kustīgu daļu. Tas ietver augstu kontrasta tekstu, audio lapas, kas paredzētas neredzīgajiem, optimizētajiem plašsaziņas līdzekļiem, un neveiksmes attiecībā uz pārlūkprogrammām, kas nav JS / CSS.

Šajā ziņojumā es apskatīšu pieejamības dizaina pamatus, to, kas tas ir, ko tā cenšas atrisināt, un darbības, ko varat veikt, lai sāktu darbu. Ņemiet vērā, ka tas ir neticami detalizēts temats, un pilnīga izpratne prasīs mēnešus vai gadus. Bet ieguvumi ir vērts, un visi jūsu tīmekļa projekti atstās ikvienu apmeklētāju ar ilgstošu iespaidu par pieejamu saturu.

Ievads pieejamībai

Vispārīgi runājot, pieejamība ir ideja par satura veidošanu tā, lai to var patērēt ikviens. Tas var ietvert neredzīgus cilvēkus, kas nevar lasīt, un tas var ietvert cilvēkus ar fizisku invaliditāti, kuri nevar izmantot peli vai tastatūru (vai nu).

Bet tas var ietvert arī cilvēkus ar nelieli trūkumi redzējumā. Tas varētu ietvert cilvēkus ar disleksija vai lasīšanas izpratnes jautājumi. Patiesībā ideja “tīmekļa pieejamība” ietilpst visi iespējamie traucējumi, kas var ietekmēt to, kā kāds mijiedarbojas ar tīmekļa vietni vai patērē to.

Varbūt vēl svarīgāk ir tas, ko tīmekļa pieejamība var piedāvāt, kā aprakstīts šeit Wikipedia definīcijā:

Tomēr Anne Gibson savā sarakstā apgalvo, ka Wikipedia definīcija ir pārāk neskaidra, un tā nav tikai par cilvēkiem ar invaliditāti. Tas patiešām ir visi tīmeklī no visas pasaules var nebūt optimāla piekļuve internetam.

Daudzi devi domā, ka pieejamība ir tikai neredzīgiem cilvēkiem, kuri nevar lasīt. Bet faktiski ir četras galvenās tīmekļa pieejamības kategorijas:

1. Vizuāli - vājš redzējums vai slikts / bez redzes
2. Dzirdes - dzirdes traucējumi vai nedzirdīgi
3. Kognitīvā - ir grūti saprast vai patērēt informāciju
4. Motors - fiziskās pieejamības problēmas, kurām var būt nepieciešamas īpašas ievades ierīces, piemēram, tastatūras vai balss komandu programmas

Katrai no šīm kategorijām ir plašas metodes mainās tikpat ātri kā tīmekļa standarti. Taču pastāv stabilitātes sajūta, jo šie standarti, kas ratificēti WCAG (Web Content Accessibility Guidelines).

Dažas tīmekļa vietnes, piemēram, saskaņā ar likumu valsts iestādēm ir jāievēro šīs vadlīnijas. Tie tiek piemēroti starptautiski, izmantojot W3C.

Aplūkosim tīmekļa pieejamības birokrātiju un pēc tam ienirt dažos piemērotos dizaina padomos.

W3C un pieejamais dizains

Ir diezgan maz akronīmi, kas saistīti ar tīmekļa pieejamību. Tie var būt sarežģīti, ja jūs esat pilnīgi jauni priekšmetam, bet, tiklīdz vienkāršoti, es ceru, ka tie būs jēgpilni.

• W3C (World Wide Web Consortium) - Starptautiska grupa, kas definē tīmekļa standartus protokoliem, valodām un noteikumiem. Visas oficiālās pieejamības vadlīnijas ietilpst šajā organizācijā.
• WAI (Web pieejamības iniciatīva) - Oficiāla programma, kas aptver visu par pieejamību. Šis jumta termins ietver visus mūsdienu pieejamības noteikumus, vadlīnijas un metodes.
• WCAG (Web satura pieejamības vadlīnijas) - Standartu un noteikumu grupa, kas palīdz izstrādātājiem novērtēt savas tīmekļa vietnes, pamatojoties uz pieejamības līmeni.
• ARIA (Pieejamas bagātinātas interneta lietojumprogrammas) - Īpašs standarts, kas nosaka, kā veidot pieejamas bagātīgas programmas, kas balstās uz JavaScript / Ajax un līdzīgām tehnoloģijām. Lasiet vairāk par šo amatu Anna Monus.

Citas vadlīnijas pastāv saskaņā ar WAI jumtu, tostarp UAAG lietotāju aģentiem un ATAG tīmekļa autorēšanas rīkiem. Šobrīd jums vajadzētu būt visvairāk ieinteresētiem WAI ieteikumiem un WAI noteikumos izklāstītajām vadlīnijām ar nosaukumu WCAG.

Lielisks resurss, lai uzzinātu vairāk, ir šis amats no W3C par invaliditāti, daloties stāstos par to, kā invalīdi piekļūst internetam. Var būt grūti saprast visas sarežģītās problēmas, nemaz nerunājot par to, kā tās atrisināt. Bet labākais avots ir cilvēki, kas katru dienu saskaras ar šīm problēmām.

Vēl viens svarīgs temats, kas jums jāsaprot, ir WCAG atbilstība. Tas attiecas uz vietnes pieejamības līmenis dažādiem faktoriem. Līmeņi ir balstīti uz atbilstību A, AA un AAA reitingu sistēma. To var pārbaudīt ar tīmekļa pieejamības pārbaudes rīku. Labākais rezultāts ir AAA.

Lai uzzinātu vairāk par šīm vadlīnijām, skatiet W3C ievadu izpratnei par WCAG 2.0 rakstu. Skatiet arī šīs saistītās saites, lai iegūtu sīkāku informāciju:

• WCAG 2.0 vienkāršots
• WCAG veiktspējas 508. nodaļa

Pasākumi, lai piekļūtu dizainam

Es ļoti iesaku apmeklēt A11Y projekta tīmekļa vietni, lai iegūtu praktiskus pieejamības padomus. A11Y (kas ir arī cipars) ir bezmaksas atvērtā pirmkoda projekts, kas izvietots GitHub, piedāvājot pieejamus web dizaina paņēmienus.

Varat pārlūkot pieejamības vienību kontrolsarakstu vai pat vairākus dizaina modeļus tādiem elementiem kā nolaižamās lapas, cilnes, akordeoni, pogas un modālie logi (cita starpā).

Ir grūti apgūt visu šo lietu un to īstenot vienlaikus. Veikt to soli pa solim un būsiet gatavs pētīt vairāk, ja jūs sajaukt.

Pārbaudiet A11Y ieteikumus un ātrus padomus, kā sākt darbu. Jūs sapratīsieties par konkrētiem ieteikumiem, piemēram, saitēm uz saturu un augstas kontrasta krāsu shēmām. Katrai no šīm metodēm ir savs detalizācijas līmenis, tāpēc īstenošana galvenokārt attiecas uz testēšanu, lai noskaidrotu, kas darbojas.

Apsveriet neredzīgos lietotājus, kuri var izmantot automatizētu satura lasītāju. Viņiem var būt arī audio tulkotājs vai pat īpaša tastatūra, lai navigētu tīmeklī ar taustiņiem, nevis peli. Tāpēc atbilstošs semantiskais HTML (apskatiet šo rakstu) ir tik svarīga ar tādām īpašībām kā tabindeks un piekļuves taustiņš.

Ja vēlaties ienirt, apsveriet iespēju piekļūt pieejamībai. Jūs varat izpētīt arhitektūru un pielāgot dizainu atbilstoši savam projektam.

Pieejamības pārbaudes rīki

Ja vēlaties sākt darbu, vienkārši izvēlieties pieejamības jomu un izmēģiniet to. Tad jūs varat izmantot testēšanas rīkus, lai novērtētu jūsu panākumu līmeni.

Ir vērts pieminēt, ka šis process var būt nomākta. Ir tik daudz ko apsvērt, un WCAG vadlīnijas ir tik grūti saprotamas, ka jūs varat nonākt pie informācijas pārslodzes.

Svarīgi ir tikai turpināt pārvietoties. Izvēlieties vienu pieejamības jomu un padariet to par fokusu. Pēc tam izmantojiet šos rīkus, lai palīdzētu izmainīt un uzlabot savu darbu.

Piemēram, jūs varat mēģināt strādāt ar WCAG kontrasta specifikācijām uzlabot lasāmību. Kad esat izvēlējies savas krāsas, izmantojiet šo bezmaksas kontrasta attiecību pārbaudītāju, lai redzētu, vai viņi strādā kopā.

Diemžēl WCAG 2.0 vadlīnijas ir tik mulsinošas, ka jums var būt grūtības saprast prasības. Bet jo vairāk jūs mēģināt, jo vairāk jūs uzzināsiet, un jo vairāk jūs sapratīsiet.

Lai pārbaudītu vietni, kas jau ir tiešsaistē, pārbaudiet WAVE. Tas ir bezmaksas vizuālais pārbaudītājs kas parāda kļūdas, brīdinājumus, kontrasta problēmas un citas tīmekļa vietnes specifikas. Sānjoslā tiks parādīts vizuālais skats un problēmu saraksts.

Cynthia Says tīmekļa vietnē ir vēl viena bezmaksas lietotne pārbaudiet WCAG veiksmes reitingu vietnes A, AA, AAA, un 508. nodaļa par valdības atbilstību.

Un, ja jūs esat atvērtā kodā, apskatiet tos bezmaksas pieejamības testēšanas rīki GitHub.

• HTML CodeSniffer
• Automatizēta pieejamības pārbaudes rīks
• WCAG Validator

Pārlūka papildinājumi

Pārlūka pievienojumprogrammas, iespējams, nodrošina ātrākās un vienkāršākās piekļuves testēšanas metodes. Lai iegūtu patiesi noderīgus rezultātus, tos var darbināt jebkurā datorā jebkurā tīmekļa vietnē.

AInspector for Firefox tiek uzskatīts par obligātu pieejamību. Tas pārbauda visu, un tas ir daudz rūpīgāks par WAVE testeri.

Mozilla lietotāji var arī patikt WCAG Contrast Checker, kas ir arī bezmaksas papildinājums.

Chrome lietotājiem nav AInspector, bet Google ir oficiāli izveidots Accessibility Developer Tools. Tas inspektora logā pievieno papildu rīkus, lai pārbaudītu pieejamības vadlīnijas.

Chrome lietotājiem ir arī spilgtuma pārbaudītāji krāsu kontrastam un dažiem citiem bezmaksas paplašinājumiem.

Diemžēl Safari lietotājiem nevarēja atrast daudz, bet es atradu vienu Opera paplašinājumu, kas pārbauda atbilstību WCAG 2.0 atbilstībai. Ja esat gatavs pietiekami grūti meklēt Google, varat atrast vairāk instrumentu.

Turpmāka lasīšana

Ja jūs nopietni domājat par tīmekļa pieejamības apguvi, tad sagatavojieties garam ceļam. Tas nav viegli, bet tas ir ļoti apmierinošs.

Tagad jums ir vairāk jāapzinās tīmekļa vietnes pieejamības faktiskā definīcija, kāpēc tā pastāv, un sīkas ziņas par to, ko izstrādātājiem vajadzētu darīt, lai uzlabotu savas tīmekļa vietnes. Nākamais solis ir turpmāka izpēte un prakse, lai šos principus ieviestu savā darbplūsmā.

Lai iegūtu vairāk informācijas, skatiet tālāk norādītās ziņas un, ja vēlaties iegūt zināšanas tieši no avota, apmeklējiet WCAG vadlīnijas.

• Kā uzlabot HTML tabulas pieejamību ar iezīmēšanu
• Pieejams dizains lietotājiem ar invaliditāti
• 6 padomi vietnes pieejamības uzlabošanai
• Pārliecinieties, ka jūsu vietne ir pieejama redzes invalīdiem