Hoppa yfir valmynd

3.14 Aðgengisprófanir

3.14.1 Hvernig get ég skoðað og tryggt aðgengi?

Í þessum kafla er því lýst hvernig hægt er að skoða algeng aðgengisvandamál með stuttum texta, tilvísun í myndbönd og ábendingar um hugbúnað og lagfæringar. Í lok skjalsins er listi af myndböndum sem útskýra nánar hugtökin sem fjallað er um. Númer myndbandsins sem við á er birt innan hornklofa í textanum.

Hægt er að setja upp forrit sem meta aðgengi og aðstoða vefstjóra til að prófa síður eða hluta af síðum. Þetta eru tækjaslár (e. toolbars) sem falla inn í Internet Explorer, Mozilla Firefox og Google Chrome.

Wave toolbar fyrir Chome og Firefox frá WebAIM

Web Accessibility Toolbar 2012 frá Paciello Group

Worldspace FireEyes frá Deque Systems

Best er að hafa að minnsta kosti eitt þessara forrita uppsett og eyða nokkrum mínútum í að kynna sér hvernig þau virka.

Í einu forritinu er einnig mælt með að setja upp Juicy Studio toolbar [myndband 10]. Juicy Studio er einkar hentugt til að skoða litamótstöðu (e. color contrast), töflur, ARIA kennileiti (e. landmarks) og fleira á síðunni.

Aðgengisathugun á útliti og uppsetningu síðu

  1. Athugið hvort tungumál sé stillt fyrir síðuna (í html-header ætti langeigindið að vera „is“ fyrir íslenskar síður) [2].
  2. Skoðið mótsetningu (e. color contrast) á síðunni og tryggið að hún sé að minnsta kosti 4,5.
  3. Opnið aðgengisslána og skoðið hvernig bókamerki (e. headings) koma út. Tryggið að bókamerki séu til staðar fyrir helstu hluta síðunnar (ekki of margar, ekki of fáar). Mikilvægt er að nota rökrétta röð fyrirsagna, það er að segja h1, h2, h3 og svo framvegis en ekki h1, h3 og svo h2.
  4. Slökkvið á CSS-virkni og sjáið hvort innihald síðunnar sé enn rökrétt og í réttri efnisröð [3].

Virkni:

  1. Farið í gegnum síðuna með lyklaborði og passið að lyklaborðsfókusinn sé alltaf sýnilegur (sérstaklega þarf að skoða þetta þegar AJAX / custom controls eru til staðar). Gott er að prófa þetta í að minnsta kosti tveimur vöfrum, til dæmis IE og Firefox [12].
  2. Athugið hvort blikkandi eða hreyfanlegur texti sé til staðar og hvort hægt sé að stoppa hann.
  3. Ef Flash-efni er til staðar, skoðið hvort takkar á Flash-spilara séu merktir og hvort hægt sé að fara milli þeirra með lyklaborði [5].
  4. Ef síðan hefur að geyma myndbandsefni, spilið myndbandið og sjáið hvort búið sé að texta myndböndin. Sama gildir um hljóðskrár nema þegar innihaldi þeirra er fullkomlega gerð skil í meginmáli síðunnar.

Einstök atriði á síðunni:

  1. Athugið hvort alt-eigindið sé til staðar fyrir myndir á síðunni (það má vera tómt ef myndin er einungis til skrauts en mikilvægt er að alt-eigindi sé alltaf skilgreint fyrir allar myndir (annars lesa skjálesarar nafn myndaskrárinnar sem getur ruglað notendur).
  2. Spyrjið ykkur hvernig síðan væri án myndarinnar og hvaða upplýsingum myndin bætir við efnið, notið alt textann til að koma þeim upplýsingum á framfæri fyrir þá sem sjá ekki myndina. Ef myndin skiptir ekki máli skal setja alt textann = „“ svo skjálesarar sleppi henni alveg.

Hafið í huga:

  • Forðist lýsingar á borð við „mynd“, „kona“, „póstkassi“.
  • Forðist langar lýsingar á borð við „tré stendur í blóma við hlið húss í niðurníðslu með rauðu þaki“. Lýsingar eiga að vera stuttar, hnitmiðaðar og koma því á framfæri sem myndin skýrir í samhengi textans.
  • Ef texti er á myndinni sjálfri skal afrita hann í alt eigindi hennar
  • Ef myndin ber titil (e. title) skal afrita það í alt eigindi hennar.
  • Alltaf skal setja alt eigindi myndarinnar, betra að hafa það = „“ sem sjálfgefna stillingu eða að skilja það eftir óskilgreint.

Athugið hvort lýsandi texti sé á öllum tenglum sem hægt væri að skilja úr samhengi textans í kring og inniheldur ekki orð á borð við „hér“, „meira“, „lesa“, „tengill“ og svo framvegis. Ímyndum okkur að texti tengilsins sé merktur með gæsalöppum í eftirfarandi dæmi:

(ófullnægjandi)

Frekari upplýsingar um launamál má sjá „hér“.

(rétt)

Frekari „upplýsingar um lánamál“ má lesa hér.

Það mætti líka setja alla setninguna inn í tengilinn, þó það sé í raun óþarfi.

  • Ef mynd er hluti af tengli þarf texti tengilsins eða alt eigindi myndarinnar að lýsa tilgangi hans. Ef fullnægjandi lýsing er í tenglinum skal setja alt eigindi myndarinnar = „“. Ef enginn texti er í tenglinum skal nota alt eigindi myndarinnar til að lýsa tilgangi tengilsins. Ekki má sleppa alt-eigindinu (annars les skjálesari nafn myndaskrárinnar) og óþarfi er að hafa bæði alt texta myndar og texta í tengli (tvítekning). Kynnið ykkur myndbandið til þess að skilja þetta betur [7]. Hér er einnig að finna grein um myndir og tengla: http://webaim.org/blog/alt-text-and-linked-images/
  • Ef síða inniheldur eyðublað (form) skoðið hvort allir reitir séu merktir og hvort upplýsingum sé komið til skila í texta og lit (ekki bara með lit) (best er að athuga eyðublöðin með aðstoð aðgengisforritanna sem þið settuð upp). Athugið hvort aria-required = „true“ eigindið sé sett á alla reiti sem skylda er að fylla út [4].
  • Skoðið hvort einhvers staðar sé notað „onDblClick“ í Javascript á síðunni. Ef svo er þarf líklega að skoða aðrar lausnir því onDblClick er bara til fyrir mús.
  • Ef þið útfærið AJAX hluti á síðunni, til dæmis tré, íhluti (e. widgets), valmyndir (e. flyout menus), sliders, myndaborða (e. carousels), eða notið div og span til þess að búa til ykkar eigin hnappa, tengla og svo framvegis. Sérstaklega ber að nefna „ARIA live regions“ þegar hluti af síðu uppfærist reglulega og sjálfkrafa, til dæmis í vefspjallskerfi [9].

Þegar öllu þessu er lokið keyrið aðgengisathugun í þeim hugbúnaði sem þið settuð upp. Ef þið fáið margar villur þarf að endurskoða síðuna ítarlega.

Ef þið fáið viðvaranir (e. warnings) er það ekki endilega merki um meiriháttar vandamál.

YouTube myndbönd með skýringum:

  1. Algengustu hjálpartæki fyrir blinda og sjónskerta, kynning: youtube.com/watch?v=lLaUx7BJ4r0
  2. Mikilvægi þess að skilgreina tungumál á síðu (lang eigindið): nomensa.com/blog/2011/new-youtube-video-release-using-the-lang-attribute/
  3. Mikilvægi þess að html efni sé í sömu röð og útlit síðu: nomensa.com/blog/2011/order-of-content/
  4. Merkingar (labels) á eyðublöðum (forms): youtube.com/watch?v=T5OClvFL8I8
  5. Útskýring á aðgengilegu og óaðgengilegu Flash efni: youtube.com/watch?v=u1xxAgVat64
  6. Aðgengismat með Wave toolbar: youtube.com/watch?v=uNFwj0_78hE
  7. Notkun alt texta með myndir sem eru tenglar: youtube.com/watch?v=sio1JzGq5OE 
  8. ARIA kennileiti (landmarks): youtube.com/watch?v=IhWMou12_Vk
  9. ARIA live regions: youtube.com/watch?v=9nZnTdSAkH0
  10. Notkun Juicy Studio (litamótstaða, töflur og ARIA kennileiti): youtube.com/watch?v=-Ka5v2auix0
  11. Rétt notkun fyrirsagna (e. headings) og hvernig hægt er að nota „outline view“ til að skoða þær: youtube.com/watch?v=3zmvZgzUkVA
  12. Sýnilegur lyklaborðsfókus: youtube.com/watch?v=6643CqEzDAI

Birkir Rúnar Gunnarsson hjá Blindrafélagi Íslands fær bestu þakkir fyrir innlegg sitt í þennan kafla og yfirlestur á aðgengishluta vefhandbókarinnar. Ráð hans voru ómetanleg í þessari vinnu.

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