Kafli 7: Aðgengi

Aðgengi (eða stafrænt aðgengi) og aðgengismál (e. accessibility eða a11y, 11 stafir eru milli fyrsta og seinasta stafs) er oft tengt við það að „fatlað fólk“ geti notað vefina okkar en það er frekar takmörkuð sýn á aðgengi. Aðgengi snýst um að fólk geti notað vefina okkar. Við getum öll orðið „fötluð“ tímabundið, hvort sem það er vegna slyss sem setur okkur í gips á annarri hönd eða þreytu sem veldur því að erfitt sé að rýna í texta.

Í gegnum tíðina hefur það oft verið þannig að barátta fyrir auknu aðgengi skilar sér í betri heim fyrir okkur öll. Fyrir raunheima er þetta tekið saman í hugtakinu „algild hönnun“ eða „Universal Design“ sem stefnir að því að öll hönnun sé aðgengileg öllu fólki, alltaf. Gott dæmi um þetta eru niðurtektir (e. curb cuts) á gangstéttum, lækkun sem upphaflega var ætluð hjólastólum en í dag hentar mun fleiri aðilum, t.d.: fólki með barnavagna, sendlum, og fólki sem dregur ferðatöskur.

Sem fagaðilar ættum við auk þess ekki að mismuna fólki og það mun aðeins aukast að lög verði sett sem banna mismun, hvort sem hún er viljandi eða ekki eða að þessum lögum verði framfylgt með sektum. Því er það að segja „en fólk með fötlun mun ekki nota vefinn okkar“ lítið annað en afsökun fyrir því að huga ekki að virkni sem bætir vefinn fyrir alla.

P has Multiple Sclerosis, which affects both her vision and her ability to control a mouse. She often gets tingling in her hands that makes using a standard computer mouse for a long period of time painful and difficult.

7.1 WCAG

Að útfæra vef með grunn aðgengi í huga er ekki erfitt en getur verið dýrt að gera eftir á. W3C heldur úti staðli, Web Content Accessibility Guidelines 2.1. WCAG byggir á fjórum prinsippum um aðgengi á vefnum:

  1. Perceivable: Upplýsingar og notendaviðmót verða að vera sett upp þannig að notendur geti skynjað þau.
  2. Operable: Notendaviðmót og leiðsögukerfi (e. navigation) verða að vera nothæf.
  3. Understandable: Upplýsingar og notkun á notendaviðmóti verða að vera skiljanleg.
  4. Robust: Efni verður að vera nógu traust þannig að það geti verið túlkað áreiðanlega af breiðum hóp tækja, þar með talið hjálpartækjum.

Útfrá hverju prinsippi eru leiðbeiningar um hvernig stuðla megi að aðgengi, 13 í heildina. Fyrir hverja leiðbeiningu eru skilgreind árangursviðmið (e. success criteria) sem falla í einn af þrem flokkum:

Til að aðstoða okkur við að útfæra vefi sem standast tilmæli WCAG er hægt að fylgja Techniques for WCAG 2.1, sem útlistar aðferðir til að uppfylla WCAG með lýsingu og prófanalýsingum, t.d. Using alt attributes on img elements.

7.1.1 Aðgengi á Íslandi

Engin lög eru til staðar um aðgengi að vefjum á Íslandi, en stjórnvöld hafa beint þeim tilmælum til opinberra aðila að ná WCAG2.0 AA:

Íslensk stjórnvöld hafa beint þeim tilmælum til opinberra aðila að leiðbeiningum alþjóðlegu staðlasamtakanna Worldwide Web Consortium (W3C) sé fylgt hér á land. WCAG 2.0 AA leiðbeinir um hvernig ganga skuli frá vefefni þannig að það sé aðgengilegt öllum.

Birkir Rúnar sérfræðingur í aðgengismálum á vef, birti árið 2013 nokkrar greinar á vef Advania þar sem hann fór yfir stöðu aðgengismála á Íslandi:

Ástæðurnar fyrir því að gera aðgengisumbætur á vefjum eru margvíslegar en mikilvægasta grunnástæðan fyrir góðu aðgengi er ætíð sú sama. Hún er einfaldlega sú að með góðu aðgengi er verið að gera kraftaverk í lífi einhvers hvort sem það er einhver sem þið hafið aldrei hitt, einhver sem er ykkur kær, eða jafnvel framtíðarútgáfa af sjálfum ykkur.

7.1.2 Að smíða vef með aðgengi í huga

Þegar við smíðum vef eru nokkur atriði sem við getum sérstaklega haft í huga og eru þau sett hér fram í engri sérstakri röð. Þetta er ekki tæmandi listi, heldur einföld ráð til að útbúa aðgengilegri vefi.

Skilgreina lang attribute á <html> til að skilgreina á hvaða máli vefurinn er og er það notað t.d. af lesvöfrum til að velja tungumál.

Ef við höfum vef með fleiri en einu tungumáli getum við sett lang á þau element sem innihalda texta á öðru máli en rest af vefnum: 

<html lang="is">
 
  <body>
 
    <p>Halló, heimur!</p>
 
    <p lang="en">Hello, world!</p>
 
  </body>
 
</html>

Oftast eru þetta einföld gildi, t.d. is fyrir íslensku eða en fyrir ensku. Þar sem tungumál eru flókin, getur þetta gildi verið flókið. Eftirfarandi er löglegt: 

<html lang="en-GB-Cyrl-u-kn-true-x-unproof-t-jp-032-Zxxx-x-matsu">

Titill vefs, <title> er það fyrsta sem skjálesarar lesa og skal því vera lýsandi. Ekki ætti að nota sama titil á allar síður og ekki nota óljós eða of almenn orð. <title>Lærum vefforritun – forsíða</title> frekar en <title>Forsíða</title>.

Takmarka skal notkun á efni sem birtist aðeins þegar mús er haldið yfir (hover, sveimað) elementi, þar sem það felur almennt efni fyrir notendum, getur valdið rugling þegar smellt er og er ekki nothæft á snjalltækjum. Að láta hluti birtast þegar sveimað er yfir getur oft verið ódýr og fljótleg lausn þegar birta þarf mikið af upplýsingum, t.d. í valmynd, en það getur líka verið löt lausn.

Fyrir vídeó með töluðu máli getur verið mjög dýrmætt að bæta við texta. Fólk með slaka heyrn, fólk sem talar ekki málið eða þau sem ekki geta einhverra hluta vegna kveikt á hljóði græða öll. Hægt er að nýta <video> element með <track> elementi sem barni til að bæta við vtt skjali með texta. Þó að það sé ekki tæknilega flókið getur það verið afskaplega tímafrekt. 

<video controls>
 
  <source src="video.mp4" type="video/mp4">
 
  <track label="English" kind="subtitles" srclang="en" src="subs.vtt" default>
 
</video>

Skrifa ekki of flókinn texta, í of löngum línum eða með of smáu letri, þarsem texti er í eðli sínu það sem við notum til að miðla upplýsingum okkar. Því er mikilvægt að vanda frágang og birtingu hans.

Passa að nota ekki liti og litasamsetningar sem geta reynst erfiðar, þá bæði að litamótstaða (contrast) sé góð (hægt að nota tól eins og Color Contrast Checker) og að nota ekki litasamsetningar sem geta reynst litblindum erfiðar (Color Oracle er tól sem hermir eftir litblindu)

Skilgreina alt texta á myndir með <img alt="lýsandi texti fyrir mynd"> og ef mynd er aðeins til skrauts, skilja eftir tómt. Alt textinn er birtur ef mynd nær ekki að hlaðast, eða lesinn af lesvöfrum í samhengi við efni. Forðast í lengstu lög að hafa myndir af texta. Skjálesarar taka fram þegar alt texti er lesinn svo það er óþarfi að byrja textan á „mynd af…“ eða álíka.

Stundum er title atttibute ruglað saman við alt, og þá sérstaklega þegar óskað er eftir að fá tooltip, eða texta sem birtist þegar mús stoppar yfir elementi.

Nota fyrirsagnir rétt og í röð, frá <h1> til <h6> eins og farið var í að ofan <- burt með seinasta. outline og ekki mörg h1

Skrifa lýsandi texta þegar við búum til tengla, ekki smella hér. Oft á tíðum er texti tengils lesin sérstaklega í lesvöfrum og ætti því að innihalda eins mikið samræmi og hægt er. <p>Hægt er að eyða öllu með því að <a href="…">smella hér.</a>.

Fyrir vefi með stórar valmyndir sem koma á undan efni (í HTML kemur valmynd á undan, óháð birtingu), ætti að útbúa tengil alveg efst sem vísar beint í efni (svokallaður „skip navigation link“). Þennan tengil má fela með CSS þannig að skjálesarar finni hann aðeins og bjóði notendum upp á að sleppa við að fara í gegnum alla valmyndina og beint í efnið.

Breyta sem minnst af grunnhegðun vafra, t.d.

Nota sjálfvirk tól til að hjálpa til en ekki treysta í blindni, t.d.

Þessi tól keyra „static analysis“ og bera saman við vel skilgreind viðmið, öll blæbrigði í útfærslu okkar týnast, þó þau séu aðgengileg, jafnvel aðgengilegri.

Góð leið til að prófa aðgengi vefs er að sleppa því að nota mús og sjá hvort við getum gert allt sem hægt er á vefnum. Margir nota ekki mús eða álíka og reiða sig að miklu leyti á lyklaborðið. Í þessu samhengi viljum við ekki fjarlægja sjónræn merki um hvar fókus er, þegar farið er í gegnum vef með því að nota Tab lykil á lyklaborðinu ætti alltaf að sjást hvaða gagnvirka elementi er valið.

tabindex

7.1.3 ARIA

Annar staðall frá W3C sem kemur að aðgengi er Accessible Rich Internet Applications. Þessi staðall skilgreinir auknar merkingar á element sem skjálesarar geta nýtt til að bæta upplifun. Hann gefur til kynna til hvers ákveðin svæði eru og hvert hlutverk þeirra er með role attribute. T.d. að innan einhvers elements sé leiðarkerfi með role="navigation" eða að það innihaldi leit með role="search".

Með ARIA getum við einnig skilgreint auka upplýsingar um element, t.d.:

Yfirleitt er þó betra að nýta rétt element (t.d. <nav>) og attribute (t.d. required) í staðinn fyrir að setja ARIA merkingar á allt. Sjá nánar í On HTML belts and ARIA braces.

Í öllum eftirfarandi dæmum eru ARIA merkingar óþarfar:

<button role="button">press me</button>
 
<h1 role="heading" aria-level="1">heading text</h1>
 
<input type="text" required aria-required="true">

Noktun á ARIA merkingum á mest við þegar verið er að skrifa flóknari vefforrit sem nýta JavaScript virkni til hins ítrasta. Í W3C skjalinu Using ARIA er farið yfir hvernig nýta megi ARIA en þá eru líka tilteknar fimm reglur fyrir notkun:

  1. Ef þú getur notað staðlað HTML element eða attribute með hegðun og merkingu sem þú þarftnast skal leitast við að nota það
  2. Í lengstu lög skal forðast að breyta merkingu staðlaðra HTML elementa, t.d. með <h1 role="button">
  3. Allar stýringar verða að vera nothæfar með lyklaborði
  4. Fyrir sýnilega hluti sem er hægt að fókusa, skal ekki láta sem þeir séu það ekki með role="presentation" eða aria-hidden="true"
  5. Öll gagnvirk element þurfa aðgengileg nöfn, sem eru annað hvort texti innan þeirra eða <label> sem vísar á element

7.1.4 Form & töflur

Til að gera form aðgengileg þurfum við helst að merkja reiti á aðgengilegan hátt með því að nota <label>. Ef fleiri upplýsingar eru tengdar við reitinn, t.d. frekari upplýsingar um hvernig fylla skuli út, er hægt að nota aria-describedby="id-a-reit" til að tengja þá saman, sjá dæmi. Ef form er langt getur verið nytsamlegt að skipta því upp með <fieldset>. 

<label for="password">Lykilorð</label>
 
<input type="password" id="password" aria-describedby="password-help">
 
<span id="password-help">Lykilorð verður að innihalda 8 stafi.</span>

Fyrir flóknari töflur þarf að skilgreina fyrir hvaða reiti fyrirsagnir eiga við með því að nota scope. Ef ekki, þá heyrir sá sem skoðar töfluna ekki samhengið, nánar um að smíða aðgengilegar töflur má lesa á WebAIM: Creating Accessible Tables

7.1.5 Skjálesarar

Helsta tólið, fyrir utan vafra, sem notað er til að lesa vefi eru skjálesarar. Tól sem sækja vefsíður, vinna úr þeim og lesa innihaldið upp. Hvernig virkar þinn uppáhaldsvefur ef þú þarft að hlusta á hann?

Hægt er að fá skjálesara fyrir flest stýrikerfi, t.d.:

Að prófa vef í skjálesara er í dag tiltölulega auðvelt, þá sérstaklega með VoiceOver og TalkBack. Með því að læra nokkrar skipanir er hægt að finna mörg aðgengisvandamál og fá betri sýn á hvernig vefurinn okkar er „lesinn“.