Suunnittelijan opas Web-esteettömyyden suunnittelun perusteisiin

Verkon pitäisi olla paikka, jossa jokainen voi käyttää samaa sisältöä kaikkialta maailmasta. Reagoivat tekniikat ovat menneet pitkälle laite-agnostiset mallit. Entä saavutettavuus-agnostiset mallit?

Web-esteettömyys on ollut jo vuosia, mutta sen toteuttaminen edellyttää uutta kehitystä teknologiassa ja web-kehityksessä. Monet kehittäjät haluavat auttaa, mutta se on vaikea ymmärtää, miten saavutettavuus voidaan suunnitella, koska liikkuvia osia on niin paljon. Tämä sisältää suurikontrastisen tekstin, sokeiden, optimoidun median äänisivut ja muut kuin JS / CSS-selaimet..

Tässä viestissä katson esteettömyyden suunnittelun perusteet, mitä se on, mitä se pyrkii ratkaisemaan, ja toimet, joita voit tehdä aloittaaksesi. Huomaa, että tämä on uskomattoman yksityiskohtainen aihe, ja se vie kuukausia tai vuosia käytännössä täysin ymmärrettäväksi. Mutta hyödyt ovat vaivan arvoista, ja kaikki Web-projektisi jättävät jokaiselle kävijälle pysyvän vaikutelman saatavilla olevasta sisällöstä.

Intro to Accessibility

Yleisesti ottaen saavutettavuus on ajatus sisällön rakentamisesta niin, että sitä voi käyttää kuka tahansa. Tämä voi sisältää sokeita ihmisiä, jotka eivät voi lukea, ja se voi sisältää fyysisiä vammaisia, jotka eivät voi käyttää hiirtä tai näppäimistöä (tai joko).

Mutta se voi sisältää myös ihmisiä, joilla on vähäisiä puutteita visiossa. Se voi sisältää ihmisiä, joilla on dysleksian tai lukemisen ymmärtämisen ongelmat. Itse asiassa ajatus “Web-saatavuus” sisältää kaikki mahdolliset häiriöt, jotka voivat vaikuttaa siihen, miten joku vuorovaikutuksessa verkkosivuston kanssa tai käyttää sitä.

Vielä tärkeämpää on se, mitä web-saavutettavuus voi tarjota, kuten tässä on kuvattu Wikipedian määritelmässä:

Mutta Anne Gibson väittää luettelossaan, että Wikipedian määritelmä on liian epämääräinen, eikä se ole vain vammaisista. Kyse on todella jokainen verkossa kaikkialta maailmasta ei välttämättä ole optimaalista pääsyä Internetiin.

Monet devit ajattelevat, että saavutettavuus on vain sokeille, jotka eivät voi lukea. Web-esteettömyyttä on kuitenkin neljä:

1. Visuaalinen - heikkonäköinen tai huono / ei näky
2. auditiivinen - kuulovammaiset tai kuurot
3. kognitiivinen - vaikeuksia ymmärtää tai kuluttaa tietoa
4. Moottori - fyysiset esteettömyysongelmat, jotka saattavat vaatia erityisiä syöttölaitteita, kuten näppäimistöjä tai äänikomennon ohjelmia

Näissä luokissa on laajaa tekniikkaa muuttuvat yhtä nopeasti kuin web-standardit. WCAG: n ratifioimat standardit ovat kuitenkin vakaita..

Jotkut sivustot, kuten viranomaiset ovat lain mukaan velvollisia noudattamaan näitä ohjeita. Ne soveltuvat kansainvälisesti W3C: n kautta.

Katsotaanpa web-saavutettavuuden takana olevaa byrokratiaa ja sukellamme sitten joitakin sovellettavia suunnitteluvinkkejä.

W3C-yhteensopiva muotoilu

On melko vähän web-esteettömyyteen liittyvät lyhenteet. Nämä voivat olla monimutkaisia, jos olet täysin uusi aihe, mutta kun yksinkertaistettu, toivon, että he saavat enemmän järkeä.

• W3C (World Wide Web Consortium) - Kansainvälinen ryhmä, joka määrittelee protokollia, kieliä ja määräyksiä koskevat web-standardit. Kaikki viralliset saavutettavuutta koskevat ohjeet kuuluvat tämän organisaation piiriin.
• WAI (Web-esteettömyyden aloite) - Virallinen ohjelma, joka kattaa kaiken esteettömyyden. Tämä kattava termi sisältää kaikki nykyaikaisen saavutettavuuden säännöt, ohjeet ja tekniikat.
• WCAG (Verkkosisällön esteettömyysohjeet) - Ryhmä standardeja ja sääntöjä, joiden avulla suunnittelijat voivat luokitella verkkosivustonsa saavutettavuuden tason perusteella.
• AARIA (Saatavilla olevat Internet-sovellukset) - Erityinen standardi, jossa määritellään, miten rakennetaan sellaisia ​​rikkaita sovelluksia, jotka tukevat JavaScript / Ajax-tekniikkaa ja vastaavia tekniikoita. Lue lisää tästä postitse Anna Monus.

WAI: n sateenvarjon alla on myös muita ohjeita UAAG käyttäjäagentteja varten ja ATAG Web-kirjoitustyökaluja varten. Sinun pitäisi nyt kiinnostaa eniten WAI: n tekemiä ehdotuksia ja WAI: n sääntöjen mukaisia ​​ohjeita nimellä WCAG.

Tämä W3C: n vammaisten työ on erinomainen resurssi oppia lisää, ja jakaa tarinoita siitä, miten vammaiset pääsevät Internetiin. Voi olla vaikeaa ymmärtää kaikkia monimutkaisia ​​ongelmia, puhumattakaan siitä, miten ne voidaan ratkaista. Mutta paras lähde on ihmisiltä, ​​jotka kohtaavat nämä ongelmat päivittäin.

Toinen tärkeä aihe, jonka pitäisi ymmärtää, on WCAG: n vaatimustenmukaisuus. Tämä koskee verkkosivuston saavutettavuuden taso kattavat monenlaisia ​​tekijöitä. Tasot perustuvat vaatimustenmukaisuuteen A-, AA- ja AAA-luokitusjärjestelmä. Voit tarkistaa tämän verkkosovelluksen tarkistustyökalulla. Paras tulos on AAA.

Jos haluat lisätietoja näistä ohjeista, tutustu W3C: n Johdatus ymmärrettävään WCAG 2.0 -artikkeliin. Katso myös näitä linkkejä, jos haluat lisätietoja:

• WCAG 2.0 yksinkertaistettu
• Osa 508 WCAG-suorituskyky

Vaiheet, jotka mahdollistavat suunnittelun

Suosittelen vierailemaan A11Y-projektisivustossa käytännön esteettömyysvinkkejä varten. A11Y (joka on myös numeronimi) on ilmainen avoimen lähdekoodin projekti, joka on GitHubissa, tarjotaan tekniikoita, jotka mahdollistavat web-suunnittelun.

Voit selata esteettömyystarvikkeiden tarkistuslistaa tai jopa joukon suunnittelumalleja sellaisille elementeille, kuten pudotusvalikoista, välilehdistä, harmonikoista, painikkeista ja modalista ikkunoista (muun muassa).

On vaikea oppia kaikkia tätä tavaraa ja toteuttaa sitä samanaikaisesti. Ota se askel askeleelta ja ole valmis tutkimaan enemmän, jos saat sekaannusta.

Tutustu A11Y: n ohjeisiin ja nopeisiin vinkkeihin. Voit törmätä tiettyihin ehdotuksiin, kuten hyppy-sisältö-linkkeihin ja korkean kontrastin värimalleihin. Näillä tekniikoilla on omat yksityiskohtaisuutensa, joten toteutus on lähinnä testauksesta, jotta voidaan nähdä, mikä toimii.

Harkitse sokeita käyttäjiä, jotka saattavat käyttää automaattista sisällönlukijaa. Heillä voi olla myös äänikääntäjä tai jopa erityinen näppäimistö, jolla navigoidaan webissä näppäimillä eikä hiirellä. Tämän vuoksi oikea semanttinen HTML (katso tämä artikkeli) on niin tärkeä ominaisuuksia kuten tabindex ja pääsykoodi.

Jos haluat sukeltaa, harkitse sen, että olet valmis ottamaan käyttöön esteettömyyttä. Voit tutkia arkkitehtuuria ja muokata muotoilua projektisi mukaan.

Saavutettavuuden testaustyökalut

Jos haluat aloittaa vain, valitse alue esteettömyydestä ja kokeile sitä. Sitten voit käyttää testaustyökaluja arvioidaksesi menestystasosi.

On syytä mainita, että tämä prosessi voi olla turhauttavaa. On niin paljon harkittavaa, ja WCAG-ohjeet ovat niin vaikeasti ymmärrettäviä, että saatat päätyä tietojen ylikuormitukseen.

Tärkeintä on vain jatkaa liikkumista. Valitse yksi alue esteettömyydestä ja tee se keskittymään. Käytä sitten näitä työkaluja, joiden avulla voit säätää ja parantaa työsi.

Voit esimerkiksi yrittää työskennellä WCAG: n kontrastitietojen kanssa parantaa luettavuutta. Kun olet valinnut värisi, käytä tätä vapaata kontrastisuhdetta tarkistaaksesi, toimivatko ne yhdessä.

Valitettavasti WCAG 2.0: n ohjeet ovat niin hämmentäviä, että sinulla voi olla vaikeuksia ymmärtää vaatimukset. Mutta mitä enemmän yrität, sitä enemmän opit ja mitä enemmän ymmärrät.

Testaa sivusto, joka on jo verkossa, tutustu WAVE-ohjelmaan. Se on a vapaa visuaalinen tarkastaja joka näyttää virheet, hälytykset, kontrastikysymykset ja muut verkkosivuston tiedot. Saat visuaalisen näkymän ja luettelon ongelmista sivupalkissa.

Cynthia Says -sivustolla on toinen ilmainen sovellus, joka voi tarkista WCAG: n menestystarpeiden A, AA, AAA sivustot, ja 508 §: n säännösten mukaisesti.

Ja jos olet avoimeen lähdekoodiin, katso näitä ilmaisia ​​esteettömyyden testaustyökaluja GitHubissa.

• HTML CodeSniffer
• Automaattisen esteettömyyden testaustyökalu
• WCAG Validator

Selaimen lisäosat

Selaimen lisäosat tarjoavat todennäköisesti nopeimmin ja helpoin menetelmiä esteettömyyden testaamiseen. Voit käyttää niitä mistä tahansa tietokoneesta millä tahansa verkkosivustolla saadaksesi aidosti hyödyllisiä tuloksia.

Firefoxin AInspectoria pidetään välttämättömänä saavutettavuuden kannalta. Tämä tarkistaa kaiken, ja se on paljon perusteellisempi kuin WAVE-testaaja.

Mozilla-käyttäjät saattavat myös pitää WCAG Contrast Checkerista, joka on myös ilmainen lisäosa.

Chrome-käyttäjillä ei ole AInspectoria, mutta Googlella on virallisesti luomat Accessibility Developer Tools -työkalut. Tämä lisää ylimääräisiä työkaluja tarkastusikkunaan esteettömyysohjeiden tarkistamiseksi.

Chrome-käyttäjillä on myös kirkkauden tarkistajat värikontrasti ja muutkin vapaat laajennukset.

Valitettavasti en löytänyt paljon Safarin käyttäjille, mutta löysin yhden Opera-laajennuksen, joka tarkistaa WCAG 2.0: n vaatimustenmukaisuuden. Jos olet valmis etsimään Googlea tarpeeksi kovasti, saatat löytää lisää työkaluja.

Lue lisää

Jos olet tosissaan oppimassa web-esteettömyyttä, varaudu sitten pitkään tielle. Se ei ole helppoa, mutta se on hyvin täynnä.

Tähän mennessä sinun pitäisi ymmärtää enemmän web-saavutettavuuden todellisesta määritelmästä, miksi se on olemassa, ja pieniä yksityiskohtia siitä, mitä kehittäjien odotetaan tekevän parantamaan verkkosivustojaan. Seuraava askel on jatkotutkimus ja käytäntö näiden periaatteiden sisällyttämiseksi työnkulkuun.

Tutustu seuraaviin viesteihin saadaksesi lisätietoja, ja tutustu WCAG-ohjeisiin, jos haluat tietoa suoraan lähteestä.

• HTML-taulukon saavutettavuuden parantaminen merkinnällä
• Käytettävissä oleva vammaisten käyttäjien suunnittelu
• 6 Vinkkejä Web-sivuston saatavuuden parantamiseen
• Varmista, että sivustosi on käytettävissä näkövammaisille