Aðgengi fyrir forritara: Bygging inngildandi kóða
Forritarar eru arkitektar aðgengis á innleiðingarstigi. Þó hönnuðir setji sjónrænar og samskiptaundirstöður er það kóðinn sem ræður að lokum hvort vefsíða virki með lyklaborðsleiðsögn, miðli rétt til skjálesara og viðhaldi aðgengi þvert á vafra og tæki.
Góðu fréttirnar eru þær að flestar bestu starfsvenjur aðgengis eru í samræmi við almennar bestu starfsvenjur fyrir hreinan, merkingarfræðilegan, staðlasamhæfðan kóða. Að skrifa aðgengilegan kóða snýst ekki um að bæta við flækjustig — það snýst um að skrifa kóða rétt frá upphafi.
Merkingarfræðilegt HTML fyrst
Það mikilvægasta sem þú getur gert fyrir aðgengi er að nota merkingarfræðilega HTML-þætti rétt. HTML5 býður upp á ríkulegt orðaforða þátta sem bera innbyggða merkingu og aðgengiseiginleika. <button> þáttur er sjálfkrafa fókusanlegur, virkjanlegur með lyklaborði og tilkynntur sem hnappur af skjálesurum. <div> með onclick meðhöndlara hefur ekkert af þessum eiginleikum án verulegrar viðbótarvinnu.
Notaðu <nav> fyrir leiðsagnarsvæði, <main> fyrir aðalefnið, <header> og <footer> fyrir viðkomandi hluta, <section> og <article> fyrir efnissvæði, <h1> til <h6> fyrir fyrirsagnir í réttri stigveldiröð, <ul> og <ol> fyrir lista, <table> með <th> fyrir töfluleg gögn, <label> með for eigindum fyrir eyðublaðsstýringar, og innfædda <button> og <a> þætti fyrir gagnvirkar stýringar.
Þessir þættir búa til aðgengistré sem hjálpartækni notar til að kynna efnið þitt fyrir notendum. Þegar þú notar þá rétt er mikið af aðgenginu sjálfkrafa sinnt.
Uppbygging fyrirsagna
Fyrirsagnir búa til skipulagsyfirlit síðunnar. Skjálesaranotendur leiðsögn oft eftir fyrirsögnum til að skilja skipulag efnis og finna tiltekna hluta. Sérhver síða ætti að hafa nákvæmlega eitt <h1> og fyrirsagnir ættu að fylgja rökréttri stigveldiröð án þess að sleppa stigum — <h3> ætti ekki að fylgja <h1> án <h2> á milli.
Notaðu aldrei fyrirsagnarþætti til sjónrænnar stílfæringar. Ef þú þarft stóran feitletraðan texta sem er ekki fyrirsögn skaltu nota CSS á annan þátt. Öfugt, ef efni virkar sem fyrirsögn skaltu merkja það sem slíkt óháð sjónrænni framsetningu.
Lyklaborðsaðgengi
Öll virkni verður að vera nothæf í gegnum lyklaborðsviðmót eitt og sér. Þetta þýðir að sérhver gagnvirkur þáttur — hlekkir, hnappar, eyðublaðsstýringar, valmyndir, gluggafallsgluggar, rennibrautir, flipar — verða að vera aðgengilegir með Tab-lyklinum (eða Shift+Tab til baka), virkjanlegir með Enter eða bilslá og hægt að loka þar sem við á.
Búðu aldrei til lyklaborðsgildrur þar sem notendur geta flipað inn í þátt en ekki flipað út úr honum. Gluggafallsgluggar ættu að fanga fókus innan gluggans meðan hann er opinn og skila fókus til ræsandi þáttarins þegar honum er lokað, en Escape ætti alltaf að loka glugganum.
Tryggðu að fókusröðin fylgi rökréttri röð sem samsvarar sjónrænni framsetningu. DOM röðin ætti almennt að samsvara sjónrænni framsetningu. Forðastu að nota jákvæð tabindex gildi sem hnekkja náttúrulegri fókusröð og skapa rugling. Notaðu tabindex="0" til að gera ógagnvirka þætti fókusanlega þegar nauðsynlegt er, og tabindex="-1" fyrir þætti sem ættu aðeins að vera fókusanlegir forritunarlega.
Tungumál síðu
Stilltu sjálfgefið tungumál hverrar síðu með lang eigindinu á <html> þættinum. Þetta segir skjálesurum hvaða framburðarreglur eiga að nota. Ef tungumálið breytist innan efnisins — til dæmis frönsk setning á enskri síðu — merktu breytinguna með lang eigindi á umlykjandi þætti.
Aðgengi eyðublaða
Eyðublöð eru þar sem notendur veita inntak, og þau eru tíð uppspretta aðgengisbilunar. Sérhver eyðublaðsstýring verður að hafa forritunarlega tengt merki, venjulega með <label> þætti með for eigindi sem samsvarar id stýringarinnar. Hópaðu tengdar stýringar með <fieldset> og <legend>.
Þegar innsláttarvillur finnast skaltu auðkenna reitinn í villu og lýsa villunni í texta. Gefðu tillögur að leiðréttingu þar sem hægt er. Fyrir reiti sem samþykkja sérstök snið skaltu gefa skýrar leiðbeiningar um áætlað snið. Notaðu autocomplete eigindið til að virkja sjálfvirka útfyllingu vafrans fyrir algeng svið eins og nafn, netfang, heimilisfang og símanúmer.
Stöðuboð sem fá ekki fókus — eins og „vöru bætt í körfu" eða „3 niðurstöður fundust" — verða að vera tilkynnt skjálesaranotendum í gegnum ARIA lifandi svæði eða stöðuhlutverk.
Varatexti
Sérhver mynd sem ekki er skreytingarmynd verður að hafa merkingarbæran varatexta sem lýsir efni hennar eða virkni. Fyrir upplýsingamyndir skaltu lýsa því sem myndin miðlar. Fyrir virknimyndir (eins og merki sem tengist á heimasíðuna) skaltu lýsa virkninnin. Fyrir skreytingarmyndir sem bæta engum upplýsingum við skaltu nota tómt alt eigindi (alt="") svo skjálesarar sleppi þeim alveg.
Flóknar myndir eins og töflur, línurit eða skýringarmyndir gætu þurft lengri lýsingar veittar í gegnum myndatexta, aðliggjandi texta eða tengda ítarlega lýsingu.
WAI-ARIA
Accessible Rich Internet Applications staðallinn veitir viðbótar merkingarfræði fyrir aðstæður þar sem innfætt HTML dugar ekki. ARIA gerir þér kleift að miðla hlutverkum, stöðum og eiginleikum til hjálpartækni fyrir sérsniðna búnað og kraftmikið efni.
Hins vegar ætti ARIA að vera notað varlega. Fyrsta regla ARIA er: ef þú getur notað innfæddan HTML-þátt sem hefur merkingarfræðina og hegðunina sem þú þarft, gerðu það. ARIA bætir ekki við virkni — það bætir aðeins við merkingarfræði. <div role="button"> þarf enn JavaScript fyrir lyklaborðsmeðhöndlun, á meðan innfæddur <button> meðhöndlar það sjálfkrafa.
Notaðu ARIA kennileitahlutverk (eða HTML5 jafngildi þeirra) til að skilgreina svæði síðu. Notaðu aria-label og aria-labelledby til að veita aðgengileg nöfn þar sem sýnilegur texti dugar ekki. Notaðu aria-expanded, aria-selected, aria-checked og önnur stöðueigindir til að miðla núverandi stöðu gagnvirkra búnaðar. Notaðu aria-live svæði til að tilkynna breytingar á kraftmiklu efni.
Móttækileg hönnun og endurflæði
Efni verður að vera framsetjanlegt án taps á upplýsingum við 320 CSS pixla breidd án þess að þurfa lárétta skrunun. Þetta tryggir að notendur sem auka í 400% á venjulegum skjáborðsskjá geti enn nálgast allt efni. Hannaðu skipulag þitt til að endurflæða efni í einn dálk á þröngum breiddum frekar en að krefjast skrunar í tvær áttir.
Flýtihlekkir
Bjóddu lyklaborðsnotendum upp á kerfi til að fara framhjá endurteknum efnisblokkum, eins og leiðsagnarvalmyndum, og hoppa beint á aðalefnið. Algengasta útfærslan er „Fara á aðalefni" hlekkur sem er fyrsti fókusanlegi þátturinn á síðunni og verður sýnilegur þegar fókus er á honum.
Prófunargátlisti forritara
Áður en þú dreifir einhverri virkni skaltu staðfesta: öll virkni virkar með lyklaborði einu og sér; fókusröð er rökrétt; fókus er sýnilegur á öllum gagnvirkum þáttum; allar myndir hafa viðeigandi alt-texta; allar eyðublaðsstýringar hafa merki; tungumál síðu er stillt; stigveldi fyrirsagna er rétt; ARIA er notað rétt og aðeins þegar nauðsynlegt er; efni endurflæðist við 320px breidd; og breytingar á kraftmiklu efni eru tilkynntar skjálesurum.
Í þessum hluta
Er vefsíðan þín aðgengileg?
Skannaðu vefsíðuna þína ókeypis og fáðu WCAG-einkunn þína á nokkrum mínútum.
Skannaðu síðuna þína ókeypis