Andmeteadus Ja Andmebaasid

Veebi juurdepääsetavus: miks W3C standardeid sageli eiratakse



Mõiste du jour on ligipääsetavus võrk - Minu arvates on veebidisaini üks valesti mõistetud ja valesti rakendatud aspekte. The levinud viga on see, et juurdepääsetavus on mõeldud ainult puuetega inimestele. Tegelikult, kõigile on juurdepääsetav sisu kasulik ja teie vaatajaskond suureneb, kui pääsete juurde elujõulisele sisule erinevatel platvormidel või erineval viisil, kuna nad saavad teie sisu kasutada vähemate piirangutega.

Kahjuks paljud veebiarendajad ei muuda nende sisu kättesaadavaks ja ärge järgige veebi juurdepääsetavuse juhiseid; seetõttu kogevad paljud inimesed tarbetuid raskusi oma kujunduse kasutamisel ja sisu nautimisel. Äärmuslikel juhtudel ei saa teatud kasutajagrupid seda veebisaiti tõhusalt kasutada.



Juurdepääsetava sisu ehitamine peaks olema igale arendajale, kujundajale või sisuloojale teine ​​loomus, samamoodi nagu kaldteede, treppide ja liftide arvestamine on uue hoone kavandamise arhitektile.



Vaatame lähemalt, mis on kulisside taga ja miks näivad nii paljud arendajad ilma mõjuva põhjuseta veebi juurdepääsetavuse standarditest mööda minevat.



1. Mida tähendab juurdepääsetav disain?

Juurdepääsetav sisu on sisu, mida kõik saavad kasutada . Me ei tea kõiki aspekte selle kohta, kuidas kasutajad meie sisule juurde pääsevad, seega peame kujundama algusest peale ligipääsetavust silmas pidades.

Nagu ma eespool märkisin, ei puuduta see puudega inimesi, kes esindavad ligikaudu umbes 15% maailma elanikkonnast . Reaalses elus ei kasuta kasutajad sageli sisu ja tarbivad seadmeid samal viisil, nagu arenduse ajal ette kujutati. Juurdepääsetav sisu on õiguslikel põhjustel vajalik ka paljudes jurisdiktsioonides. Loe ' Juriidilised ja poliitilised tegurid veebi juurdepääsetavuse äritegevuse arendamisel teie organisatsioonile ”Lisateavet juurdepääsetavuse nõuetele vastavuse kohta.



Mõelge kasutajatele ligipääsetava sisu kohta, mis võiks olla või millel võiks olla järgmised võimalused:

  • Ei kuule hästi. 360 miljonit inimest üle kogu maailma on kuulmispuudega. Helisisul peab olema ärakirjad ja videol peavad olema subtiitrid.



  • Ei näe hästi. 285 miljonit inimest Kogu maailmas on hinnanguliselt vaegnägijaid: 39 miljonit on pimedad ja 246 nägemispuudega. Nägemispuudega kasutajad kasutavad ekraanilugejaid (mis loevad sisu sünteesitud kõne abil), punktkirjaekraani (ekraanikuva sisu kuvatakse punktkirjaekraanil ning kasutaja saab ekraanil olevate klahvide abil navigeerida ja oma seadmega suhelda) või kontrastirežiimi.

  • Mõjutatud düsleksiast. Düsleksiaga inimestel on sisu, eriti näiteks õigustatud teksti või kõigi suurtähtede, lugemine ja mõistmine raskendatud.



  • ** Neil on füüsilised piirangud. ** Kõik inimesed ei saa kõiki seadmeid kasutada. Näiteks peaks sisu kaudu navigeerimine olema kättesaadav mitte ainult hiire kasutajatele, vaid ka kasutajatele, kes ei saa hiirt kasutada.

  • Nad kasutavad mobiilseadmeid. Kohandage oma sisu väikeste ekraanide jaoks. Võimaldab kasutajal fondi suurust suurendada või suurendada.



2. Kuidas tagada hea veebi juurdepääsetavus

Inimesed kasutavad sisu sirvimiseks ja tarbimiseks väga erinevaid viise. On kasutajaid, kes peavad ühilduma täiendavate tarkvaratööriistadega, mis aitavad neil sisule hõlpsamini juurde pääseda. Need abitehnoloogiana tuntud tööriistad ulatuvad ekraanilugejast puutetundlike ekraanide ja osutiteni.

Kuid teie rakendus ja abitehnoloogia peavad omavahel rääkima. Mitte kõik, mis on HTML-is kirjutatud, pole abitehnoloogiates täielikult mõistetav. Selleks, et aidata sisu „tõlkida” „tehnilisest keelest” inimesele paremini loetavasse keelde, on see loodud API juurdepääsetavuse standardid .



See veebi juurdepääsetavuse põhiskeem peaks andma teile parema ülevaate abitehnoloogiate toimimisest.

Allikas: W3C

Allikas: W3C

Selle toimimise illustreerimiseks vaatame lihtsat koodinäidet:

Kustuta ”. Selleks, et aidata kasutajatel mõista, millist meetodit toimingu tegemiseks kasutatakse, saame kasutada atribuute ÕHK (Abistavad rikkalikud Interneti-rakendused), mis on täpsustatud jaotises https://www.w3.org/TR/wai-aria/ see tühistab algse rolli. Muudame nupu lingi tähendust lisades atribuudi role ='button' Nii loevad ekraanilugejad seda nupu, mitte lingina. Kumb on sobivam.

Kokkuvõtteks võib öelda, et ARIA atribuut:

  • Annab või täiustab mittemantiliste või semantiliste elementide semantikat,

    mis vahe on kunstil ja disainil

  • Tagab, et dünaamiline (reaalajas) sisu jääb kättesaadavaks.

  • Annab rolli määratletud 'vidina' tüübi kirjeldamiseks (menüü, puu üksus, liugur, edenemismõõtur jne).

  • Annab rolli, et kirjeldada veebilehe struktuuri (päiseid, piirkondi ja tabeleid).

  • Annab staatuse vidinad (kontrollitud, on hüpikaknaid jne).

  • Pakub lohistamisomadusi, mis kirjeldavad lohistamisallikaid ja sihtmärke.

Mis on ligipääsetavus veebidisainis?

Alati, kui kujundate sisu, mõelge kahele asjale: kuidas sisu on tajutav ja kuidas seda saab kasutada . Uurime mõningaid näiteid, et illustreerida veebidisaini juurdepääsetavust.

Oletame, et kujundate kohandatud valiku rippmenüüd. Elemendi kujundamisel tuleb arvestada järgmiste parameetritega:

  • Erinevate olekute märkimine: lubatud, keelatud, kirjutuskaitstud.

  • Märgi üksus, kui see saab fookuse / sammu oleku.

  • Kui saate fookuse / sammu oleku, kontrollige kõiki suvandeid.

  • Veenduge, et sisu oleks endiselt loetav, kui ainult teksti suumitakse 200% tasemele

  • Veenduge, et see on olemas piisav kontrastsus teksti ja selle tausta vahel. See aitab sisu lugeda keskmiselt nõrga nägemisega inimestel või neil, kes kasutavad seadmeid ekstreemsetes valgustingimustes, näiteks otsese päikesevalguse käes või vähese eredusega ekraanil.

Teine näide võib olla värvi kirjeldamine oleku kirjeldamiseks. Siin on punktid, mida tuleb arvestada jaotise kujundamisel, kus kasutaja saab värvi kätte saada:

  • On inimesi, kellel on raskusi teatud värvide eristamisega. Nii et roheline ei tähenda rohelist kõigi külastajate jaoks. Selle parandamiseks lisage iga värvi kirjeldus, mis kirjeldab värvi eesmärki.

  • Märkige iga üksus, kui saate fookuse / sammu oleku.

  • Veenduge, et elementide vahel oleks piisavalt ruumi, et neid saaks hõlpsasti aktiveerida näiteks väiksema vaatajaga seadmetes.

3. Juurdepääsetavuse testimine: kust alustada?

Pole üks viis kontrollida ja veenduda, et veebisisu on täielikult juurdepääsetav. Juurdepääsetavuse probleemide kontrollimiseks ja lahendamiseks on vaja mitut tehnikat. Võite alustada sellega määratleda probleeme , lahendusi Y prioriteedid .

Probleemide määratlus

Juurdepääsetavuse probleemide lahendamisel proovige alati luua üks pilet probleemi kohta selge pealkirjaga. See peaks lihtsustama probleemi mõistmist ja aitama määratleda prioriteedi.

Halb näide: Kasutaja ei saa lehel klaviatuuri kasutada.

Hea näide: Peamenüüs ei saa klaviatuuri navigeerimist kasutada.

Halb näide toob kaasa juhtumi, mida on üsna raske kiiresti lahendada. Arutelud erinevatel teemadel võiksid alata kommentaaride osas, kuna pileti pealkiri on liiga üldine.

kuidas määrata tarkvara litsentsimise hinda

Hea näide on suunatud täpselt probleemile ja keskendub ainult ühele: peamenüüs klaviatuuri navigeerimisele.

Veebi juurdepääsetavuse probleemide prioriteet

Prioriteedid on olulised, kuna need määratlevad, millised probleemid tuleb kõigepealt lahendada. Näiteks WCAG-d on jagatud kolm vastavustaset : A, AA, AAA, mis tähendab, et peaksite alustama minimaalsest A-tasemest, kuid see ei tähenda automaatselt, et AA- ja AAA-tasemed oleksid eranditult 'toredad'. Kõik tasemed on olulised ja oluline on mitte seada prioriteediks eeldades, et tase A on piisav.

Kuid WCAG-i tasemeid (või mõnda muud juhendit) võib mõnikord olla üsna raske mõista ja natuke lihtsustada, võite kaaluda ka järgmisi prioriteedimääratlusi:

  • Kriitiline - probleemid, mis takistavad kasutajatel rakendust kasutamast. Lahendusi pole.

  • Kõrgem - probleemid, mis takistavad ja / või häirivad rakenduse kasutamist, kuid ei blokeeri kasutaja võimalust toimingut lõpule viia.

  • Vähem - probleemid, mis on tüütud, kuid mis ei takista rakendust, või rakenduse parandused.

  • Info - ei pea kinni parimatest tavadest. Üldised soovitused täiustamiseks.

Lahendused

Ükski suunistest - selle all mõtlen WCAG , Jaotis 508 või SEAL ON —See annab tehnilise koodi osas selge lahenduse, et teada saada, kuidas konkreetne probleem tuleks lahendada. Nad määratlevad ainult eeldatava käitumise. Kuid WCAG on määratlenud ka testiprotseduurid, mis aitavad mõista, kuidas probleemi taastada, ja on olemas WCAGi automatiseeritud jälgimise kogukonnarühm, W3C kogukond, mis keskendub arendamisele reegleid usaldusväärne veebi-, nii automatiseeritud kui ka poolautomaatse juurdepääsetavuse testide jaoks.

Näide WCAG G4 tehnikat ('Luba sisul peatuda ja taaskäivitada sealt, kus see peatus'):

Katse protseduur

Keriva või mobiilse sisuga lehel

  1. Sisu peatamiseks liikumise või kerimise ajal kasutage veebisaidil või kasutajaagendi pakutavat mehhanismi.
  2. Kontrollige, kas liikumine või kerimine on peatunud ja ei käivitu ise.
  3. Kasutage pakutavat mehhanismi sisu taaskäivitamiseks liikvel olles.
  4. Kontrollib, kas liikumine või kerimine on jätkunud sealt, kus see peatati.

oodatud tulemused

Nr 2 ja nr 4 vastavad tõele.

Nagu näeme, pole tehnilisi lahendusi, kuid eeldatav käitumine on määratletud. Nagu veebiarendajad Nad rakendavad seda, see on täiesti nende enda teha.

Veebi juurdepääsetavuse juhised ja W3C standardid

Lähtepunktiks peaks olema veebi põhistandardite järgimine:

Veebi juurdepääsetavuse testimine: kuidas ma saan teada, kas minu sisule on juurdepääs või mitte?

Siin on põhilised ja põhilised kontrollpunktid, mis peaksid aitama teil oma veebisisu esimesest sammust paremini kättesaadavaks teha:

  • Kinnitage oma HTML. Veenduge, et HTML-struktuur oleks tõrgeteta, kuna abitehnoloogiatel võib olla probleeme lehe sisu tõlgendamisega.

  • Proovige lihtsalt klaviatuuri. Veenduge, et kõigile käivitatavatele üksustele oleks juurdepääs ainult klaviatuuri abil. Samuti peate saama kõiki toiminguid teha klaviatuuri abil, näiteks esitada vormi.

  • Testige juurdepääsetavuse kontrollimise tööriistade ja valideerijatega. Kasutage tööriistu, mis analüüsivad ja kontrollivad võimalikke juurdepääsetavusvigu.

    s korporatsioon vs c korporatsioon vs llc

  • Dünaamiline sisu. Teavitage ekraanilugejaid dünaamiliste muutuste, nt. kui otsingutulemid on muutunud.

  • Ärge lootke tähenduse kirjeldamiseks värvidele. Kasutage värvi koos kirjeldusega, nt. [Kollane kast] hoiatus.

Ärge kõrvaldage fookuses toodud jooni. See on CSS-i outline: 0; abil tavaliselt eemaldatud funktsioon Ärge tehke seda, kuna klaviatuuri kasutajad kaotavad lehel orientatsiooni. Võite kaaluda fookusskeemi eemaldamist klaviatuuriväliste kasutajate jaoks, kuid alati pakub klaviatuuri kasutajatele fookuse ülevaate.

  • Veateated . See ütleb alati kasutajale, kuidas viga parandada. Ärge lihtsalt märkige, et andmed on valed.

  • Vahekaartide järjekord. Veenduge, et tabelipõhine navigeerimine järgiks graafilises kasutajaliideses seatud tavasid. Vähemalt peaksite järgima rakenduse vaikelugemise suunda. Näiteks inglise keeles on lugemisjärjestus ülalt alla, vasakult paremale; araabia keeles on see ülalt alla, paremalt vasakule.

  • Suum. Veenduge, et lehe sisu oleks loetav, kuni suumitakse kuni 200%.

  • Keela pildid. Kas saate lehte endiselt mugavalt kasutada? Kas kõigi piltide jaoks on alternatiivseid tekste?

  • Ekraanilugeja Kontrollige, kas saate sisu lugeda ja selles navigeerida, kasutades vähemalt ühte ekraanilugejat, näiteks VoiceOver, Windows Narrator või NVDA.

  • Suure kontrastsusega režiim. Suure kontrastsusega režiimile lülitumisel kontrollige, kas sisu on endiselt loetav.

  • Fondi suurus. Veenduge, et lehe fondi suurus oleks vähemalt 10 pikslit.

4. Üldised vead veebi juurdepääsetavuses

Kõige tavalisem viga on enne arendamist juurdepääsunõuete väljaselgitamine . Paraku on hilisem juurdepääsetavus osa arendusest, kõige keerulisem on lahenduste juurutamine.

See on loetelu levinumatest vigadest, mida arendajad teevad juurdepääsetavuse juurutamisel:

  • Puudub oskus navigeerida sisu abil lihtsalt klaviatuur .

  • CSS-skeemi atribuudi vale kasutamine Enamasti kasutatakse outline: 0;, mis tähendab, et iga toimiva elemendi ümber ei ole enam kontuuri näha. ** Ärge kasutage outline: 0; või outline: 0! Important; **. Kasutaja kaotab sisu sirvimise ajal võimaluse praegu fokuseeritud elementi näha, välja arvatud juhul, kui on olemas mõni muu alternatiiv, näiteks CSS border atribuudi kasutamine.

  • Fookuse kaotamine praeguse elemendi näiteks DOM-i manipulatsioonide või blur() -meetodi kasutamise tõttu. See juhtub sageli ühe lehe rakenduste puhul.

  • Ekraanilugeja kasutajatele märguandeid pole et midagi on muutunud, näiteks: sisu on alla laaditud XMLHttpRequest API abil ja kasutajaliideses on töödeldud uusi muudatusi; kuid kasutajat pole sellest teavitatud. See juhtub sageli ühe lehe rakendustega.

  • Kuupäevavalija pole juurdepääsetav. Paljudel juhtudel kasutatakse kättesaamatuid kuupäevavalijaid. Kasutajad ei saa klaviatuuril kalendri suvandites navigeerida.

  • Laienduste kasutamine mida nad tahavad parandage juurdepääsetavuse probleemid automaatselt . Kasutage neid hoolikalt ja kontrollige tulemusi. Nende väärkasutamine võib tekitada rohkem probleeme kui lahendusi.

  • ** Lisage atribuuti tabindex element, mille indeksnumber on suurem kui 0. ** tabindex kasutamise eesmärk indeksiga üle 0 on see peamiselt navigeerimismarsruudi 'korrigeerimine'. Loomuliku navigeerimistee saavutamiseks kaaluge siiski HTML-struktuuri üsna palju muutmist. Manipuleerige, kasutades tabindex See võib põhjustada hooldusprobleeme, nagu ka ettearvamatu navigatsioonitee.

  • Vale päise hierarhia. Kahjuks nähakse seda endiselt väga sageli, kuna päise hierarhia pole õigesti üles ehitatud, näiteks

    ,
    ja

    . Ekraanilugeja kasutajad kasutavad jaotistes liikumiseks pealkirju ja vale struktuur on segane, kuna konteksti on raske mõista.

  • Suure kontrastsusega tugi puudub. On inimesi, kes kasutavad oma tarkvara suure kontrastsusega režiimis. Veenduge, et teie sisu oleks tajutav.

  • Kasutage CAPTCHA ligipääsmatut lahendust. Kahjuks ei ole minu teada kõik teadaolevad CAPTCHA-d ligipääsetavad või nende kasutamine on väga keeruline.

  • Liiga palju ja / või peatamata animatsioone. Videote, reklaamide või pildikarussellide automaatne esitamine võib häirida.

    siin ei saa kasutada töötlemissuurust

  • Suured tekstitükid. Tekst, mis on tihendatud väga suureks plokiks, ilma tühikute, komade ja punktideta. Väga raske lugeda. Jaotus väiksemateks tükkideks, rohkem lõikudeks ja alapealkirjadeks aitab teksti sisu paremini korraldada.

  • Suumiprobleemid. Veenduge, et teie sisu oleks loetav ja navigeeritav, kui seda suurendatakse kuni 200%.

  • Oleneb värvidest. Väga sageli on üksuse olek tähistatud ainult ühe värviga, näiteks hoiatuse olek on tähistatud ainult kollase täppiga; seda värvi ei tajuta värvipimedate inimeste puhul ühtemoodi.

  • Väikesed klõpsatavad / puudutatavad sihtmärgid. Alad, mida saab klõpsata / võtta, on sageli liiga väikesed. Suuremaks muutmine võimaldab kasutajatel neid hõlpsamini aktiveerida.

Kuid kuidas saaksin veebi juurdepääsetavust parandada?

Probleemide määratlemine on üks asi. Parandamine on väga erinev ja sageli pole see nii lihtne, kui see kõlab. Selle põhjuseks on asjaolu, et juurdepääsetavuse API juurutused pole pidevad ja mõnikord peame probleemi lahendamisel leidma lahendused või isegi leppima tõsiasjaga, et midagi ei toimi.

Tööriistade osas pole ühtegi tööriista, mis saaks kontrollida kõiki võimalikke kombinatsioone, kuid hea algusena peaksid need tööriistad aitama:

Pidage alati meeles, et juurdepääsetavuse tööriista pole saab asendada käsitsi testi kuna kõiki stsenaariume ei saa täielikult automatiseerida, näiteks position: fixed; abil saab kontrollida elementide heleduse kontrastsuse suhet.

Keskenduge probleemidele, mis blokeerivad teie rakenduse kasutamise, näiteks ei saa kasutaja klaviatuuri abil menüüs liikuda.

Miks on sisu juurdepääsetavaks muutmine oluline?

Kõik soovivad oma sisu võimalikult laialdaselt levitada. Juurdepääsetavus aitab selles valdkonnas suuresti, ulatudes suurema vaatajaskonnani ja lõpetades kõigi nende kasutuskogemuse parandamisega. Pealegi pole juurdepääsetavus mitte ainult see, mida traditsiooniliselt võiks pidada puuetega inimesteks. Olgu selleks vananev inimene ja sellega kaasnevad füüsilised muutused, mõni päikeselisel päeval jooksev inimene, kes vajab telefoni automaatset kontrastsuse reguleerimist, või vanem, kelle käed on täis poekotte, kes soovib saata tekstisõnumi ; juurdepääsetav tehnoloogia on tehnoloogia, mida kõik kasutajad saavad aeg-ajalt kasutada.

Lisakasuna on positiivne mõju see, et juurdepääsetavat sisu, mis vastab täielikult WCAG 2.0 standarditele, on otsingumootoritel lihtsam roomata ja mõista ning see võib märkimisväärselt mõjutada saidi asetust. Seetõttu võib juurdepääsetav disain veebisaidile täiendavat liiklust luua.

Lõpuks on siin mõned statistikad, mida kaaluda:

  • Rohkem miljard inimest kogu maailmas on mingisugune puue

  • Vananev rahvastik . Aastatel 2015–2030 peaks 60-aastaste ja vanemate inimeste arv kasvama 56%, 901 miljonilt enam kui 1,4 miljardile.

  • Universaalne disain on võtmetähtsusega. Universaalne disain viitab laiale ideede ja tavade spektrile teenuste, toodete ja keskkondade tootmiseks, mis on oma olemuselt ligipääsetavad ja kasutatavad kõigi võimalustega inimestele.

  • Puude tüübid: Puudeid on viis suurt kategooriat, sealhulgas nägemis-, liikumis-, kõne-, tunnetus- ja kuulmisliigid.

Me kõik vajame kvaliteetseid teenuseid. Toimetame ka need .

Aktsiauuringutest maksimumi võtmine - endise uurimisanalüütiku õppetunnid

Investorid Ja Rahastamine

Aktsiauuringutest maksimumi võtmine - endise uurimisanalüütiku õppetunnid
Puhas kood ja erandkäsitluse kunst

Puhas kood ja erandkäsitluse kunst

Tehnoloogia