Fyrirlestur — Aðgengi

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Aðgengi

Aðgengi snýst ekki um að fatlað fólk geti notað vefina okkar
Aðgengi snýst um að fólk geti notað vefina okkar
Við getum öll orðið „fötluð“ tímabundið

D is color blind. Most websites think of him, but most people making PowerPoint presentations or charts and graphs at work do not.

—An Alphabet of Accessibility Issues

Q is ninety-nine. You name the body part, and it doesn’t work as well as it used to.

—An Alphabet of Accessibility Issues

W had a stroke in his early forties. Now he’s re-learning everything from using his primary arm to reading again.

—An Alphabet of Accessibility Issues

Af hverju aðgengi?

Viljum ekki mismuna fólki vegna fötlunar
Getur verið mjög dýrt að gera aðgengilegt eftir á
Samlegðaráhrif! Vefurinn okkar verður betri fyrir alla
Lagasetningar (munu?) banna okkur að mismuna fólki á vefnum

WCAG 2.1

W3C staðall: Web Content Accessibility Guidelines (WCAG) 2.1
Listi af tilmælum og prinsippum til að gera vefi aðgengilegri
Þrjár tegundir:
- A, minnsta stig
- AA, það stig sem við ættum að stefna að
- AAA, öll skilyrði uppfyllt

WCAG prinsipp

Perceivable - Upplýsingar og notendaviðmót verða að vera sett upp þannig að notendur geti skynjað þau
Operable - Notendaviðmót og leiðsögukerfi (navigation) verða að vera nothæf
Understandable - Upplýsingar og notkun á notendaviðmóti verða að vera skiljanleg
Robust - Efni verður að vera nógu traust þ.a. getur verið túlkað áreiðanlega af breiðum hóp tækja, þar með talið hjálpartækjum

WCAG Techniques

Techniques for WCAG 2.1
Listi af aðferðum til að uppfylla WCAG2.1 með lýsingum og prófanalýsingum
- Using alt attributes on img elements

Íslensk stjórnvöld hafa beint þeim tilmælum til opinberra aðila að leiðbeiningum alþjóðlegu staðlasamtakanna Worldwide Web Consortium (W3C) sé fylgt hér á land. WCAG 2.0 AA leiðbeinir um hvernig ganga skuli frá vefefni þannig að það sé aðgengilegt öllum.

—Aðgengi og nytsemi í Vefhandbók Innanríkisráðuneytisins

Ástæðurnar fyrir því að gera aðgengisumbætur á vefjum eru margvíslegar en mikilvægasta grunnástæðan fyrir góðu aðgengi er ætíð sú sama. Hún er einfaldlega sú að með góðu aðgengi er verið að gera kraftaverk í lífi einhvers hvort sem það er einhver sem þið hafið aldrei hitt, einhver sem er ykkur kær, eða jafnvel framtíðarútgáfa af sjálfum ykkur.

—Birkir Rúnar Gunnarsson: Gott aðgengi gerir kraftaverk – þess vegna er ég rafviti

Höfum í huga

Titill síðu er það fyrsta sem skjálesarar lesa og skal því vera lýsandi
Nota alt texta á myndir, tóman ef mynd er aðeins til skrauts annars lýsandi fyrir mynd – engar myndir af texta
Huga að lesblindum
Huga að litblindum

Tungumál síðu skal vera skilgreint, <html lang="is">
- Ef við höfum fleiri en eitt tungumál getum við merkt þá hluta með lang
Litamótstaða (color contrast) skal vera góð
Nota fyrirsagnir rétt og í röð, <h1> til <h6>
Skrifa lýsandi tenglatexta (ekki smelltu hér)

Breyta sem minnst grunnhegðun vafra
- T.d. banna að zooma síðu
Takmarka notkun á efni sem birtist aðeins þegar mús er hoverað yfir
Fyrir vídeó með töluðu máli, íhuga að texta þau
Skrifa einfaldan texta

Lyklaborð

Höfum allt aðgengilegt með lyklaborði
Margir nota ekki mús eða álíka og reiða sig á lyklaborðið
Allar upplýsingar og aðgerðir skulu aðgengilegar með lyklaborði
Fjarlægjum ekki öll sjónræn merki um hvar fókus er

Form

Merkja form á aðgengilegan hátt, nota <label>, merkja reiti sem fylla þarf út skilmerkilega

Án <label>:

Ég samþykki skilmála

Með <label>:

Ég samþykki skilmála

<label>
  <input type="checkbox">
  Ég samþykki skilmála
</label>

Töflur

Fyrir flóknar töflur þarf að tengja fyrirsagnir við reiti
Ef ekki, þá heyrir sá sem skoðar töfluna ekki samhengið
WebAIM: Creating Accessible Tables

Sjálfvirk tól

ARIA

W3C staðall: Accessible Rich Internet Applications
Auknar merkingar á element sem skjálesarar geta nýtt til að bæta upplifun
Gefur til kynna til hvers ákveðin svæði eru, setjum upp kennileiti (landmarks), stöður á þeim o.fl.
Getum einnig merkt stöður á elementum, t.d. ef þær eru birtar með Ajax

ARIA roles

Skilgreina hlutverk ákveðinna elementa
role="main" segir að meginverkefni síðu liggi innan merkts elements
Hægt að skilgreina eigin, t.d. <div role="region" aria-label="Hafa samband">

ARIA dæmi

Kennileiti
- <section role="main"> — svæði er meginmál síðu
- role="navigation" — svæði inniheldur valmynd síðu
- role="search" — svæði inniheldur leit á síðu

aria-expanded="true" — svæði er opið eða lokað, t.d. trjávalmynd
aria-describedby="heading" — element er útskýrt af því sem er í element með Id “heading”

Þurfum ekki að skilgreina á element sem bera merkingar í eðli sínu, t.d. <button role="button">
Ættum ekki að bæta við, nema að vel athuguðu máli
- Erum að búa til ný element (t.d. með Web Components)
- Flóknari JavaScript útfærslur

Skjálesarar

JAWS, vinsæll skjálesari fyrir Windows
NVDA Screen Reader, ókeypis, open source skjálesari fyrir Windows
VoiceOver, skjálesari frá Apple byggður inn í OS X, iOS og Apple TV
Mjög gott að prófa, hvernig virkar þinn uppáhaldsvefur ef þú þarft að hlusta á hann?
TalkBack, skjálesari innbyggður í Android

Dæmi

Aðgengi