Hoppa yfir valmynd

3.3 Framsetning á efni

3.3.1 Ólík tæki og tól lesi sömu upplýsingar

Tilgangurinn með þessu viðmiði er að tryggja að upplýsingar og samskipti sem felast annað hvort í sjón- eða hljóðrænni framsetningu varðveitist ef notandi nýtir sér aðra tækni en talist getur hefðbundin. Þetta á til dæmis við þegar notandi breytir sjálfur stílsniði (e. CSS) eftir sínu höfði eða þegar efni er lesið með skjálesara.
 

Skilgreiningar: html = innihald, javascript = virkni, CSS = útlit.

Aðskilja á milli útlits og innihalds

Gera þarf vefinn þannig úr garði að hann sé tæknilega óháður því hvaða vafra notendur velja. Kerfin þurfa enn fremur að geta skilið á milli útlits og innihalds og styðja við „CSS-staðalinn“. Einn helsti kostur CSS-staðalsins er að geta miðstýrt útliti vefsins, leturskilgreiningum og litavali. Notkun stílsniða er lykilatriði til að tryggja aðgengi fatlaðra einstaklinga að þjónustu á vefnum. Einnig gera stílsnið það að verkum að uppfærsla vefja í nýtt útlit verður mun auðveldara.

Þegar útlit er stillt í CSS-staðlinum er mikilvægt að nýta allan staðalinn til að aðskilja algjörlega útlit og innihald. Í CSS-staðlinum eru leturstærðir og allar stærðir einstakra eininga á vefsíðum skilgreindar í hlutfalli (prósentu) frekar en ákveðnum algildum stærðum. Með þeim hætti verður auðveldara fyrir skjástækkunarforrit að aðlaga texta að skjáum en slíkt hentar einnig fyrir farsíma- og snjallsímanotendur sem eru að skoða netið.

Upplýsingum, uppbyggingu og tengslum sé þannig miðlað til notenda eða á forritunarmáli til þeirrar tækni sem hver og einn nýtir sér. Hafa ber í huga við framsetningu efnis með aðstoð CSS að skjálesarar lesa ekki síðuna eins og hún birtist, heldur lesa þeir hana eins og hún er skilgreind í kóðanum bak við síðuna (e. document object model). Því skal varast að nota CSS til að færa til texta á síðu nema lesröð sé breytt í html-kóða síðunnar.

Dæmi um hvenær þetta á við:

Athugið að skjálesarar og skjástækkunarforrit með mikilli stækkun koma ekki til skila upplýsingum um staðsetningu texta á skjá. Þegar um eyðublöð er að ræða er því ekki nóg að texti birtist við hlið reits sem honum er ætlað að útskýra, heldur þarf að tengja hann við reitinn með notkun „label for“ merkinga, eða „ARIA-labelledBy“ eigindisins.

Eyðublað með opnum svæðum. Eyðublað inniheldur nokkra nauðsynlega reiti. Ekki er nægjanlegt að merkja tilskilin svæði þannig að þau birtist í rauðu. Í lok hvers svæðis verður einnig að vera stjarna sem gefur öðrum tólum til kynna að þarna sé svæði sem þurfi að fylla út *. Í leiðbeiningum um útfyllingu eyðublaðsins þarf að koma fram að „öll nauðsynleg svæði birtist í rauðum lit og séu einnig merkt með stjörnu *.

Eyðublað með lit og texta til að sýna nauðsynlega reiti. Eyðublað inniheldur bæði nauðsynleg og valfrjáls svæði. Leiðbeiningar útskýra að fylla þurfi í reiti merkta með rauðum texta og einnig með táknmynd sem segi í „alt“-texta: „Þörf er á að fylla út þennan reit“. Bæði rauður texti og táknmyndin eru í tengslum við viðeigandi reiti í forminu þannig að hjálpartæki notenda geta á auðveldan hátt séð hvað þarf að gera og hvað ekki.

Óþarfi er að setja alt-eigindi á táknmynd ef * er til staðar í texta, það gagnast ekki skjálesaranotendum að tvítaka upplýsingar.

3.3.2 Form og eyðublöð

Stofnanir og sveitarfélög nota í auknum mæli form á vefnum til að gefa notendum kost á að senda efni í gegnum vefinn. Þetta geta verið eyðublöð, umsóknir, skoðanakannanir eða fyrirspurnir. Mikilvægt er að setja slík form rétt upp svo að skjálesarar geti með góðu móti lesið úr forminu og gert notendum kleift að setja inn efni á rétta staði.
 
Til að skjálesari nái að lesa úr formi þarf að ganga úr skugga um að allir reitir séu rétt merktir og að upplýsingar, framsetning formsins sé sett fram á kerfisbundin hátt.  Í kóða er nauðsynlegt að vinna með HTML eigindin „label“ og „for“ inntakið „id“ sem nota má til að tengja inn á einhvers konar virkni (e. form control). Þessi þrjú HTML-eigindi er hægt að nota með nánast öllum reitum í formum, þar á meðal textasvæði (e. text fields), reiti sem hægt er að merkja í (e. checkbox) og aðra algenga reiti. „Id“-eigindið þarf þó að vera einstakt og má ekki endurtaka á milli reita.

Dæmi

<form action="#" method="post">

  <div>

    <label for="nm">Nafn </label>

    <input id="nm" type="text" name="nafn" value="">

  </div>

  <div>

    <input id="ja" name="request" value="Ja" type="radio">

    <label for="ja">Já</label> &nbsp;

    <input id="nei" name="request" value="Nei" type="radio">

    <label for="nei">Nei</label>

  </div>

</form>

Það ber að geta tveggja eiginda hér sem koma að verulegu gagni. Í fyrsta lagi er hægt að merkja reiti sem er skylda að fylla út með aria-required=“true“. Seinna eigindið er aria-label en það inniheldur viðbótartexta sem skjálesaranotandi gæti þurft á að halda en sést ekki á skjánum.

<input id="ja" aria-required="true" aria-label="Hér máttu fylla út..." name="request" value="Ja" type="radio">

Frekari gagnvirkni og aðgengi

Verkefni á vegum alþjóðlegu staðlasamtakanna W3C undir nafninu WAI-ARIA (e. Accessible Rich Internet Application Suite) snýst um að skilgreina leiðir til að gera efni á vefnum sem hannað er með nútímatækni, til dæmis Ajax, HTML og Javascript, aðgengilegt fyrir fólk með fötlun. WAI-ARIA fjallar um þessi viðfangsefni og áhugasömum um gagnvirkni á vefsíðum er bent á ítarefni til að kynna sér þessi atriði frekar.

Ítarefni

Myndband um hvernig ganga skuli frá merkingu á reitum í eyðublöðum

Accessible Forms using WCAG 2.0

Notkun á WAI-ARIA staðlinum til að tryggja aðgengi í formum

Sjá dæmi um notkun á legend og fieldset

3.3.3 Töflunotkun

Framsetning efnis í töfluformi hefur oft verið til vandræða sökum þess að skjálesarar eiga í erfiðleikum með að lesa úr töflum nema þær séu rétt skilgreindar. Sjálfsagt er að nýta töflur til að koma upplýsingum á framfæri á vefsíðum en þá verður að vanda til verka.

Röng töflunotkun

Eftirfarandi upplýsingar sýna komu flóttafólks til Íslands frá árinu 1956.

KomuárHeimalandFjöldi
1956Ungverjaland52
1959Júgóslavía32
1979Víetnam34
1982Pólland26
1990Víetnam30
1991Víetnam30
Samtals 204

Framsetningu á upplýsingunum er hér breytt til að sýna ranga töflunotkun. Við fyrstu sýn virðist ekkert óeðlilegt við þessa töflu og er uppbygging hennar skiljanleg fyrir flesta notendur. Þegar einstaklingar sem nota skjálesara heyra upplestur á þessari töflu kemur þó í ljós galli á þessari framsetningu.

Lestur töflunnar með aðstoð frá skjálesara myndi gefa notendum eftirfarandi upplýsingar í þessari röð: „Komuár Heimaland Fjöldi 1956 Ungverjaland 52 1959 Júgóslavía 32 1979 Víetnam 34 1982 Pólland 26 1990 Víetnam 30 1991 Víetnam 30 Samtals 204“.

Taflan hér að ofan er dæmi um ranga uppsetningu á töflu sem er því miður of algeng á mörgum vefsvæðum. Rétt er að benda á að framsetning taflna í PDF-skjölum lýtur sömu reglum og hægt er að nýta aðgengisstýringar innan Adobe Professional til að tryggja aðgengi á svipaðan hátt og hér er lýst.

Rétt töflunotkun

Til þess að gera töfluna læsilegri þarf að skilgreina hvernig taflan er uppbyggð. Í flestum tilfellum hjálpa vefumsjónarkerfi notendum að bæta þessum upplýsingum inn. Ef þau gera það ekki er nauðsynlegt að gera það handvirkt beint í kóða:

Skilgreina þarf fyrirsagnir töflunnar sérstaklega með því að nota th-merki í stað td-merkis í kóða.

Þannig veit vafrinn og einnig skjálesari að þarna sé fyrirsögn og hann gefur notanda það til kynna. Skilgreina þarf allar fyrirsagnir töflunnar og á það við bæði um dálka og raðir. Ef fyrsta röðin er nokkurs konar fyrirsagnaröð skal einnig nota th-eigindið þar.

Næsta skref er að gefa töflunni heiti og örstutta lýsingu með því að nota caption-eigindið. Þetta er í raun titill töflunnar og nýtist öllum notendum. Næsta skref er að búa til stutta lýsingu og nota til þess summary-eigindið.

Einstaklingar sem sjá ekki töfluna og nota skjálesara átta sig nú betur á efnivið hennar og geta þá ákveðið hvort þeir vilji fá nánari upplestur á henni eða halda áfram.

 KomuárHeimaland  Fjöldi
 1956 Ungverjaland 52
 1959 Júgóslavía 32
 1979 Víetnam 34
 1982 Pólland 26
 1990 Víetnam 30
 1991 Víetnam 30
 Samtals  204


Ítarefni

Ýmsar aðrar leiðir eru mögulegar til að tryggja að töflur séu aðgengilegar öllum sem ekki hefur verið fjallað um hér.

Making accessible tables - how to guide

Töflunotkun - myndband

Var efnið hjálplegt?Nei
Takk fyrir

Ábendingin verður notuð til að bæta gæði þjónustu og upplýsinga á vef Stjórnarráðsins. Hikaðu ekki við að hafa samband ef þig vantar aðstoð.

Af hverju ekki?

Hafa samband

Ábending / fyrirspurn


Þessi síða notar vafrakökur Lesa meira