Vefaðgengi fyrir fyrirtæki: hvað þarf að prófa áður en vefur fer í loftið

Aðgengi þarf að vera hluti af vefverkefninu, ekki lokapróf

Vefur getur litið vel út, verið hraður og samt útilokað fólk. Matseðill opnast ekki með lyklaborði, villuskilaboð sjást aðeins sem rauður rammi, texti hverfur við stækkun eða bókunarhnappur hefur ekkert skiljanlegt heiti fyrir skjálesara.

Þetta eru ekki jaðartilvik sem eitt viðbótarkerfi lagar eftir á. Þau snerta hvernig fólk finnur upplýsingar, fyllir út form, kaupir, bókar og fær aðstoð. Aðgengi þarf því að eiga sér markmið, eiganda og prófanir frá upphafi.

**Stutta útgáfan:** notaðu WCAG 2.2 sem sameiginlegt viðmið, stefndu almennt að A og AA viðmiðum og prófaðu raunveruleg lykilverkefni með lyklaborði, stækkun og aðgengistækni. Sjálfvirkt prófunartól finnur hluta vandans en getur ekki eitt staðfest að vefurinn sé aðgengilegur. Lagaðu fyrst hindranir sem stöðva kaup, bókun, innskráningu, samband eða aðgang að lykilupplýsingum.

Þessi grein er gæðaleið fyrir fyrirtækjavefi og netverslanir. Hún er ekki lögfræðiálit og segir ekki hvaða sérreglur gilda um ákveðna stofnun, atvinnugrein eða markað. Hún fjallar heldur ekki um farsímavæna hönnun almennt; vefur getur verið lipur í síma en samt óaðgengilegur.

Hvað WCAG 2.2 segir — og hvað það segir ekki

Web Content Accessibility Guidelines, WCAG, eru alþjóðleg viðmið frá W3C um að gera vefefni skynjanlegt, nothæft, skiljanlegt og traust fyrir ólíka notendur og hjálpartæki. Viðmiðin skiptast í þrjú stig:

| Stig | Hlutverk | Hagnýt túlkun í verkefni | | --- | --- | --- | | A | Grunnhindranir | Atriði sem geta lokað alveg á efni eða virkni | | AA | Algengt viðmið fyrir góða útfærslu | Nær meðal annars til fleiri krafna um birtuskil, fókus, stækkun og leiðsögn | | AAA | Strangasta stigið | Ekki sjálfgefið heildarmarkmið fyrir alla vefi; velja þarf viðeigandi viðmið eftir samhengi |

W3C mælir með nýjustu útgáfu WCAG 2 og WCAG 2.2 bætir við viðmiðum sem snerta meðal annars sýnilegan fókus, stærð snertiflata, dráttaraðgerðir og aðgengilega auðkenningu. Staðallinn er þó ekki hönnunarsniðmát. Hann segir hvað þarf að ná, en teymið þarf enn að velja skýrt efni, einfalt flæði og útfærslu sem virkar í raun.

Ekki skrifa „WCAG-vottað“ í verkbeiðni án þess að skilgreina útgáfu, stig, umfang og prófunaraðferð. Þá geta kaupandi og verktaki verið að tala um ólíka hluti.

Forgangsraðaðu eftir verkefnum sem fólk þarf að klára

Ekki byrja á hundrað staka villum úr skanna. Kortleggðu fyrst mikilvægustu leiðirnar á vefnum og prófaðu þær frá upphafi til enda.

| Verkefni notanda | Alvarleg hindrun | Fyrsta prófun | | --- | --- | --- | | Finna þjónustu og hafa samband | Matseðill, tengill eða form virkar ekki með lyklaborði | Farðu alla leið án músar og athugaðu fókus og villur | | Kaupa vöru | Vöruval, karfa eða greiðsla hefur ómerkt stjórntæki | Láttu skjálesara lesa heiti, stöðu og næsta skref | | Bóka tíma | Dagatal treystir eingöngu á lit eða músarsmell | Prófaðu lyklaborð, stækkun og skýr tilkynning um valinn tíma | | Skrá sig inn | Auðkenning krefst minnisþrautar eða copy/paste er bannað | Prófaðu lykilorðastjóra, innsetningu og skiljanleg villuskilaboð | | Lesa lykilupplýsingar | Texti er í mynd, myndband án texta eða rangt fyrirsagnatré | Slökktu á myndum, stækkaðu og skoðaðu uppbyggingu | | Fá aðstoð | Hjálparleið breytir um stað eða er aðeins í óaðgengilegu spjalli | Finndu sömu aðstoð úr öllum lykilskrefum |

Alvarleiki ræðst ekki aðeins af fjölda WCAG-viðmiða. Ein ómerkt greiðsluaðgerð getur verið brýnni en tuttugu minni háttar frávik á bloggsíðum. Forgangsröðunin á að sameina áhrif á notanda, tíðni, viðskiptalegt mikilvægi og umfang vandans.

Prófaðu lyklaborðið áður en þú opnar sértæk tól

Settu músina til hliðar og notaðu Tab, Shift+Tab, Enter, Space og örvatakka þar sem þeir eiga við. Þú átt að geta farið í gegnum gagnvirk atriði í rökréttri röð, séð alltaf hvar fókusinn er og virkjað aðgerðir án þess að festast.

Athugaðu sérstaklega:

• sleppitengil sem fer fram hjá endurteknum haus og beint í meginefni
• matseðla, fellilista, glugga, flipaviðmót og samþykkisborða
• að fókus fari inn í opinn glugga og aftur á réttan stað þegar honum er lokað
• að falin eða óvirk atriði fái ekki fókus
• að röðin fylgi merkingu síðunnar, ekki tilviljanakenndu CSS- eða DOM-skipulagi
• að fókusrammi sjáist og sé ekki falinn undir föstum haus eða borða

Ef sérsmíðaður takki er í raun `div` með smellivirkni fylgir lyklaborðshegðun sjaldnast sjálfkrafa. Notaðu venjuleg HTML-stjórntæki þegar þau leysa verkefnið; þau koma með merkingu og hegðun sem þarf annars að endursmíða.

Stækkun og birtuskil þurfa að halda efninu nothæfu

Prófaðu vefinn við 200% stækkun og þrengra skjábreiddarsamhengi. Texti má ekki leggjast yfir annan texta, mikilvæg virkni má ekki hverfa og notandinn á ekki að þurfa að skruna bæði lárétt og lóðrétt til að lesa venjulegt efni.

Birtuskil eru ekki bara smekksatriði. Prófa þarf texta, hnappa, tengla, fókusmerki, villur og stöðu stjórntækja. Ekki treysta á lit einan til að segja „villa“, „valið“ eða „uppselt“. Bættu við texta, tákni með merkingu eða annarri sýnilegri vísbendingu.

Stór leturstærð leysir ekki veikt efni. Skýr millifyrirsögn, stutt málsgrein og lýsandi tengitexti hjálpa fólki að skanna og skilja síðuna þegar sjón, athygli eða lestraraðstæður eru ólíkar.

Form þurfa heiti, leiðbeiningar og gagnlegar villur

Form er oft staðurinn þar sem aðgengisvilla verður beint tekjutap. Hver reitur þarf sýnilegt heiti sem er tæknilega tengt við reitinn. Placeholder-texti er ekki fullnægjandi heiti; hann hverfur þegar skrifað er og er oft of daufur.

Þegar innsláttur bregst þarf notandinn að fá að vita:

1. að villa hafi komið upp 2. í hvaða reit hún er 3. hvað þarf að leiðrétta 4. hvernig halda má áfram án þess að slá allt aftur inn

Setningin „eitthvað fór úrskeiðis“ hjálpar lítið. „Símanúmer þarf sjö tölustafi“ er skýrari þegar það er raunveruleg regla. Færðu fókus eða villuyfirlit á fyrirsjáanlegan stað og tryggðu að skjálesari fái tilkynningu um breytinguna.

Ekki banna að líma inn lykilorð eða staðfestingarkóða. Það getur gert lykilorðastjóra og hjálpartæki gagnslaus og eykur villuhættu fyrir alla.

Myndir, myndbönd og fyrirsagnir þurfa rétt hlutverk

Alt-texti á að flytja tilgang myndarinnar í samhengi. Mynd sem er aðeins skraut getur haft tóman alt-texta; upplýsingamynd þarf jafngildar upplýsingar og mynd með texta þarf oft sýnilegan texta á síðunni. Leiðin um SEO fyrir myndir fjallar nánar um muninn á lýsandi, hagnýtum og skrautmyndum.

Myndbönd með töluðu máli þurfa texta þegar efnið á að vera aðgengilegt án hljóðs. Ef mikilvæg sjónræn aðgerð sést en er ekki útskýrð getur þurft hljóðlýsingu eða textalega leið. Sjálfvirkur texti er upphafspunktur, ekki fullunnin útgáfa; nöfn, íslensk beyging og sérorð þarf að yfirfara.

Fyrirsagnir eiga að mynda skiljanlegt yfirlit, ekki vera valdar eftir stærð. Ein skýr meginyfirskrift og rökrétt H2/H3 röð hjálpar bæði skjálesaranotanda og þeim sem skanna síðuna sjónrænt.

Sjálfvirkur skanni er mælitæki, ekki vottun

Sjálfvirk tól geta fundið til dæmis vantar heiti, sum birtuskilavandamál, brotna ARIA-notkun og ákveðin uppbyggingarfrávik. Þau vita hins vegar ekki alltaf hvort alt-texti sé gagnlegur, fókus rökréttur, villuskilaboð skiljanleg eða kaupferli raunverulega kláranlegt.

Notaðu þrjú lög í prófun:

| Lag | Hvað það finnur vel | Takmörkun | | --- | --- | --- | | Sjálfvirk skönnun | Endurtekin tæknileg mynstur og augljós frávik | Sér aðeins hluta viðmiða og skilur ekki alltaf samhengi | | Handvirk prófun | Lyklaborð, stækkun, fókus, flæði og efnismerkingu | Krefst skýrrar aðferðar og færni prófanda | | Prófun með notendum | Raunverulegar hindranir, málfar og ófyrirséð hegðun | Lítið úrtak sannar ekki fulla samræmingu við öll viðmið |

Skjálesaraprófun á að ná yfir að minnsta kosti fyrirsagnayfirlit, tengla, stjórntæki, stöðubreytingar og lykilform. Eitt tæki í einum vafra er ekki algild sönnun, en markviss prófun finnur oft alvarlegar hindranir sem skanni missir af.

Settu aðgengi í tilboð, samþykktarskilyrði og ritstjórn

„Vefurinn verður aðgengilegur“ er of óskýrt afhendingarskilyrði. Skráðu frekar:

• hvaða WCAG-útgáfa og samræmisstig er markmiðið
• hvaða síður, sniðmát, innbyggð kerfi og lykilflæði eru innan umfangs
• hvaða vafrar og hjálpartæki verða notuð í prófun
• hver skráir frávik, alvarleika, eiganda og lokadag
• hvort óháð yfirferð eða notendaprófun sé hluti af afhendingu
• hvernig breytingar eftir birtingu verða prófaðar

Þriðja aðila bókunarkerfi, greiðslugátt eða spjall fellur ekki úr upplifuninni af því að annar birgir á kóðann. Kortleggðu hindranirnar, fáðu viðbragðsáætlun frá birgi og bjóððu aðra leið ef ekki er hægt að laga mikilvægt flæði strax.

Ritstjórar þurfa líka einfaldar reglur um fyrirsagnir, tengitexta, alt-texta, töflur, myndbönd og skjöl. Annars getur tæknilega góður vefur versnað með hverri nýrri færslu.

Gátlisti fyrir birtingu

• markmið um WCAG-útgáfu, stig og umfang er skráð
• lykilverkefni notenda hafa verið prófuð frá upphafi til enda
• öll gagnvirk virkni er nothæf með lyklaborði
• fókus sést, fylgir rökréttri röð og festist ekki
• síðan heldur merkingu og virkni við stækkun og þrengra útlit
• texti, stjórntæki, fókus og stöður hafa næg birtuskil
• litur er ekki eina leiðin til að miðla villu eða stöðu
• formreitir hafa heiti og villuskilaboð segja hvernig á að laga vandann
• fyrirsagnir, kennileiti og síðutitill lýsa uppbyggingunni rétt
• myndir hafa viðeigandi alt-texta eða eru rétt merktar sem skraut
• myndbönd hafa yfirfarinn texta og nauðsynlegar sjónupplýsingar eru útskýrðar
• innbyggð kerfi og samþykkisborðar hafa verið prófuð, ekki aðeins aðalvefurinn
• sjálfvirk og handvirk prófun hafa báðar farið fram
• alvarleg frávik hafa eiganda og lokadag
• ritstjórn veit hvernig aðgengið er varðveitt eftir birtingu

Niðurstaða

Vefaðgengi er ekki merki sem er sett í footer þegar vefurinn er tilbúinn. Það er mælanlegur eiginleiki efnis, hönnunar, kóða og reksturs. Besti tíminn til að ákveða kröfurnar er áður en sniðmát, form og þriðja aðila kerfi hafa verið valin; næstbesti tíminn er áður en fleiri notendur rekast á sömu hindrun.

Byrjaðu á mikilvægustu verkefnunum, prófaðu þau með fleiri en einni aðferð og skráðu hver lagar hvað. Markmiðið er ekki aðeins færri villur í skanna heldur að fleiri geti fundið upplýsingar, tekið ákvörðun og lokið erindi án aðstoðar.

Ef nýr vefur eða endurhönnun er í undirbúningi getur vefsíðugerð hjá 55.is tengt aðgengiskröfur við efnisuppbyggingu, hönnun, þróun og samþykktarprófanir. Taktu aðgengi með í umfangið áður en tilboð eru borin saman; greinin um kostnað vefsíðu hjálpar að greina hvað raunverulega fylgir afhendingunni.

Heimildir og gagnlegar leiðbeiningar

• W3C WAI: Yfirlit yfir WCAG 2
• W3C WAI: Hvað er nýtt í WCAG 2.2
• W3C WAI: WCAG 2 í stuttu máli
• Stafrænt Ísland: Aðgengisstefna Ísland.is