Hvernig á að gera vefsíðuna þína aðgengilega: Byrjendaleiðbeining um WCAG 2.2

Til að gera vefsíðu aðgengilega skaltu smíða hana þannig að fólk geti notað hana með lyklaborði, skjálesara, aðdrætti eða rofatæki eins og með mús: notaðu raunveruleg HTML-element fyrir hnappa, hlekki, fyrirsagnir og merkimiða eyðublaða, gefðu myndum merkingarbæran alt-texta, hafðu birtuskil texta há og gerðu fókus sýnilegan. Staðallinn sem stefnt er að er WCAG 2.2 stig AA. Sjálfvirk prófunartól finna hluta vandans; tíu mínútna próf með lyklaborði og skjálesara finnur mikið af restinni.

Hvað „aðgengilegt“ þýðir í reynd

Aðgengi snýst um fólk: einhvern sem er blindur og notar skjálesara, einhvern með skjálfta sem ratar með lyklaborði, einhvern með litla sjón sem stækkar í 200%, einhvern sem les í sterku sólarljósi, einhvern með tímabundið brotið úlnlið. Gott aðgengi gerir síður yfirleitt betri fyrir alla — skýrari uppbyggingu, læsilegan texta, eyðublöð sem útskýra villur sínar.

Viðmiðunarstaðallinn er Web Content Accessibility Guidelines (WCAG) frá W3C. Frá og með september 2026 er núverandi útgáfa WCAG 2.2 (birt í október 2023, uppfærð í desember 2024); WCAG 3 er snemma drög. WCAG byggir á fjórum meginreglum — efni verður að vera skynjanlegt, nothæft, skiljanlegt og traust — og hefur þrjú samræmisstig:

Lög á nokkrum stöðum vísa í WCAG — til dæmis evrópsku aðgengislögin (European Accessibility Act), sem hafa gilt um margar stafrænar þjónustur til neytenda í ESB síðan í júní 2025. Hvaða reglur gilda um þig fer eftir því hvar þú starfar og hvað þú selur; leitaðu ráða hjá ráðgjafa ef þú ert ekki viss. Þessi leiðbeining fjallar um hagnýta vinnuna.

Leiðir: hvernig þú kemst þangað

Fyrir flestar litlar síður duga fyrstu tvær leiðirnar: segðu gervigreindinni að smíða aðgengilega frá upphafi, og gerðu síðan úttekt fyrir birtingu.

Lagfæringarnar sem skipta mestu máli

Notaðu réttu HTML-elementin

Mest af aðgengi kemur ókeypis með réttu HTML. <button> er hægt að fókusa, virkar með Enter og Space og er tilkynnt sem hnappur. <div> með smellisfalli er ekkert af þessu. Kóði sem gervigreind býr til notar stundum stílaða div fyrir allt; biddu um merkingarbær element:

• <button> fyrir aðgerðir, <a href> fyrir leiðsögn
• Einn <h1> á hverri síðu, síðan <h2>, <h3> í réttri röð — notendur skjálesara hoppa á milli fyrirsagna
• Kennileiti: <header>, <nav>, <main>, <footer>
• <label> tengt við hvern reit í eyðublaði
• Tungumál síðunnar í <html lang="en">

Notaðu ARIA-eigindi aðeins þegar ekkert innfætt element passar — til dæmis fyrir sérsmíðað flipasett eða combobox. Rangt ARIA er verra en ekkert.

Aðgangur með lyklaborði og sýnilegur fókus

Allt sem þú getur gert með mús verður að virka með lyklaborðinu einu saman (WCAG 2.1.1). Ýttu á Tab í gegnum síðuna: hver hlekkur, hnappur og reitur ætti að vera aðgengilegur í rökréttri röð, og þú ættir alltaf að sjá hvar fókusinn er (2.4.7 Focus Visible). WCAG 2.2 bætti við að fókuserað element má ekki vera alveg falið á bak við límandi hausa eða vafrakökuborða (2.4.11, stig AA).

Algeng vandamál: valmyndir sem opnast aðeins við yfirsveim, gluggar (modal) sem halda ekki fókus eða er ekki hægt að loka með Escape, og outline: none í CSS án nokkurs sem kemur í staðinn.

Textavalkostir

Hver marktæk mynd þarf alt-texta sem lýsir því sem hún sýnir í samhengi („Kokkur raðar smakkseðlinum á diska“, ekki „image1.jpg“). Skrautmyndir fá tóman alt="" svo skjálesarar sleppi þeim. Hnappar sem eru bara tákn þurfa aðgengilegt heiti („Loka“, „Leita“). Myndbönd þurfa skjátexta; hljóð þarf afrit.

Litir og birtuskil

WCAG 2.2 stig AA krefst birtuskila upp á að minnsta kosti 4,5:1 fyrir venjulegan texta og 3:1 fyrir stóran texta (1.4.3), og 3:1 fyrir viðmótshluta eins og jaðra reita og merkingarbær tákn (1.4.11). Ljósgrár platstexti og fölir hnappar eru algengustu vandamálin. Notaðu aldrei lit einan til að bera merkingu — rauður jaðar á ógildum reit þarf líka villuskilaboð.

Stærðarbreytingar og endurflæði

Texti verður að vera nothæfur þegar hann er stækkaður í 200% (1.4.4), og efni verður að virka við 320 CSS-pixla breidd án þess að skrolla til hliðar (1.4.10). Rétt svarandi uppsetning leysir flest af þessu.

Snertiflatarmál, eyðublöð og villur

• Stærð snertisvæðis: WCAG 2.2 stig AA krefst að bendilssvæði séu að minnsta kosti 24 x 24 CSS-pixlar, eða nægilegt bil í kringum smærri (2.5.8). Stærra er vinsamlegra í símum.
• Eyðublöð: sýnilegir merkimiðar (ekki bara platstexti), skýrar leiðbeiningar og villuskilaboð sem segja hvað er rangt og hvernig á að laga það, við hliðina á reitnum.
• Innskráning: ekki láta fólk leysa þraut eða afrita kóða án valkosts; leyfðu lykilorðastjórum og líma (3.3.8 Accessible Authentication).

Fyrirmæli sem virka

Smíðaðu þessa síðu þannig að hún uppfylli WCAG 2.2 stig AA: merkingarbær HTML-kennileiti, einn h1 á hverri síðu með fyrirsögnum í réttri röð, raunveruleg hnapp- og hlekkjaelement, merkimiðar á hverjum reit í eyðublaði, sýnilegur fókusstíll, birtuskil texta að minnsta kosti 4,5:1, alt-texti á marktækum myndum og alt="" á skrautmyndum, og html lang stillt.

Gerðu úttekt á aðgengi á síðunum /signup og /checkout. Athugaðu notkun eingöngu með lyklaborði, röð fókus, sýnilegan fókus, merkimiða, villuskilaboð, birtuskil og heiti fyrir skjálesara á táknhnöppum. Skráðu hvert vandamál með WCAG-viðmiðinu og lagaðu það síðan án þess að breyta sjónrænni hönnun meira en þörf krefur.

Farsímavalmyndina er ekki hægt að nota með lyklaborði. Gerðu hana að hnappi með aria-expanded, færðu fókus inn í valmyndina þegar hún opnast, lokaðu henni með Escape og skilaðu fókus á hnappinn.

Skref fyrir skref

1. Keyrðu sjálfvirka athugun. Lighthouse-hlutinn Accessibility í Chrome DevTools, eða axe-viðbótina í vafra, á hverri helstu síðu. Lagaðu allt sem hún bendir á.
2. Taktu músina úr sambandi. Ferðastu með Tab í gegnum hverja síðu og ljúktu öllum lykilverkefnum — skráning, leit, greiðsla. Skrifaðu niður allt sem þú nærð ekki til, sérð ekki fókus á eða kemst ekki út úr.
3. Stækkaðu í 200% og þrengdu gluggann niður í breidd síma. Ekkert má vera afskorið eða þurfa skrun til hliðar.
4. Prófaðu skjálesara í tíu mínútur: VoiceOver á Mac og iPhone, TalkBack á Android, eða NVDA á Windows (ókeypis). Hlustaðu á fyrirsagnir, hlekki og reiti í eyðublöðum. „Hnappur“ án heitis, eða „hlekkur, smelltu hér“, þýðir að það er verk að vinna.
5. Athugaðu birtuskil fyrir texta, hnappa og innsláttarreiti með birtuskilaprófara.
6. Lagaðu, prófaðu síðan aftur sömu verkefni.
7. Birtu yfirlýsingu um aðgengi sem segir hvaða staðal þú stefnir að og hvernig eigi að tilkynna vandamál — og svaraðu þeim tilkynningum.

Algeng mistök

• Að treysta á yfirlagsbúnað í stað þess að laga kóðann.
• Að fjarlægja fókusrammana vegna þess að þeir líta óreiðukenndir út, án staðgengils.
• Platstexti sem eini merkimiðinn. Hann hverfur þegar fólk byrjar að skrifa og er oft með lágum birtuskilum.
• „Smelltu hér“ og „Lesa meira“ hlekkir. Án samhengis heyra notendur skjálesara lista af eins hlekkjum.
• Alt-texti troðinn með leitarorðum. Alt-texti er fyrir fólk; lýstu myndinni.
• Prófa einu sinni. Hver ný viðbót getur brotið aðgang með lyklaborði. Bættu lyklaborðsyfirferð við prófanir fyrir birtingu.

Gátlisti fyrir aðgengi

• Sjálfvirk athugun (Lighthouse eða axe) hrein á helstu síðum
• Hvert verkefni er hægt að ljúka með lyklaborðinu einu saman
• Fókus er alltaf sýnilegur og aldrei falinn á bak við límandi element
• Merkingarbærar fyrirsagnir, kennileiti, hnappar og hlekkir; lang stillt
• Marktækur alt-texti; skrautmyndir með alt=""; skjátextar á myndböndum
• Birtuskil texta ≥ 4,5:1 (stór texti ≥ 3:1); viðmótshlutar ≥ 3:1
• Virkar við 200% aðdrátt og 320 px breidd
• Hver reitur í eyðublaði hefur sýnilegan merkimiða og skýr villuskilaboð
• Yfirlýsing um aðgengi með leið til að tilkynna vandamál

Til að lesa um hugmyndirnar á bak við þetta, sjáðu hvað er vefaðgengi. Aðgengileg hönnun og góð hönnun skarast mikið; hvernig á að hanna gott útlit á appi með gervigreind fjallar um sjónrænu hliðina.

Aðgengi á Mythex

Mythex smíðar eftir þeim staðli sem þú biður um, svo settu „WCAG 2.2 AA“ í fyrstu beiðnina og í eftirfylgjandi skilaboð. Þú getur notað ramma í símastærð í forskoðuninni til að athuga lítil skjáir (Forskoðun og kóði), en prófanir á lyklaborði, aðdrætti og skjálesara virka best á birtu vefslóðinni eða forskoðun opnaðri í eigin flipa. Biddu umboðsmanninn um að gera úttekt á síðu, lagfæra það sem hann finnur og prófaðu síðan lagfæringarnar sjálf/ur — sjálfvirk yfirferð er upphafið, ekki samþykkið.

Spurningar