Forelesning 5: Universell uforming 2
David Massey
david.massey@jbi.hio.no
Uke 6, 2011
Retningslinjer for universell utforming av nettsider
Basert på:
Hvorfor?
- Lag nettsider for alle
- Andre gevinster:
- Nettsidene vil være lettere å finne i søk (Google, Bing, osv.)
- Nettsidene vil være lettere å bruke for alle
- Unngå rettsaken
Nettsider for alle
| Gruppe |
Antall |
| Blinde og svaksynte |
130.000 |
| Fargeblind |
Menn 8 % (190.000), Kvinne 1 % (24.000) |
| Betydelig nedsatt hørsel |
600.000 |
| Bevegelseshemmede |
350.000 |
| Dyslektikere |
5-10 % av befolkningen
(200.000-400.000)
|
| Antall over 67 år |
13 % (630.000) |
| Antall over 67 år i 2040 |
23 % (1.115.000) |
Antall voksne med leseferdighet
som ikke er bedre enn nivået på
6. skoletrinn |
40 % (over 1.000.000) |
Får flere besøk - lett å finne
"I have been a search engine optimizer for several years,
but only recently have become infatuated with web accessibility.
The goal of
accessibility is to make web content accessible to as many people
as possible, including those who experience that content under
technical, physical, or other constraints. It may be useful
to think of search engines as users with substantial constraints:
they can’t read text in images, can’t interpret JavaScript or applets,
and can’t 'view' many other kinds of multimedia content. These are
the types of problems that accessibility is supposed to solve in
the first place."
Andy Hagans,
High Accessibility Is Effective Search Engine Optimization
Behold brukere - lett å bruke
Forskning utført av Jakob Nielsen viser at brukere bruker i gjennomsnitt 27 sekunder
på en nettside. Brukere er utålmodige og det finnes mange andre nettsider
som frister. Tekst som er vanskelig å lese vil føre til at du miste brukere.
Behold brukere - lett å bruke
Forskning utført av Jakob Nielsen viser at brukere bruker i gjennomsnitt 27 sekunder
på en nettside. Brukere er utålmodige og det finnes mange andre nettsider
som frister. Tekst som er vanskelig å lese vil føre til at du miste brukere.
DETTE ER KJEMPE VIKTIG
Behold brukere - lett å bruke
Husk at brukere bruker bare 27 sekunder på en nettside, dvs. de skanner sider
etter overskrifter og lenker. Her
kan du finne en artikkel om hvordan tilgjengelige
nettsider er mer brukervennlige.
Husk at brukere bruker bare 27 sekunder på en nettsider, dvs. de skanner sider
etter overskrifter og lenker. Her kan
du finne en artikkel om hvordan tilgjengelige
nettsider er mer brukervennlige.
Loven
Hvordan?
De største problemene:
- Liten skrift, som ikke kan skaleres
- Dårlig kontrast mellom tekst og bakgrunn
- Manglende tekster til bilder og grafikk (ALT-tekster)
- Intetsigende lenketekster ("les mer")
- Bruk av Java, Flash etc. som overstyrer vanlige navigasjonsmåter
- Avvik fra standard HTML
Inkluder alternativer til lyd og visuelt innhold
- Bruk alt- og longdesc-attributtene til img-element
- Dersom et element ikke har innholdsmessig betydning, kan alt-attributtet
angis uten innhold
Ikke gjør sidene avhengige av farger
- Gjør all informasjon som blir formidlet ved bruk av farge,
tilgjengelig uten (for eksempel ut fra sammenhengen eller gjennom markeringen)
- Lag bakgrunns- og forgrunnsfarger med nok kontrast, slik at den kan sees av
fargeblinde og på skjermer uten farge
- Verktøy: AccessColor
(http://www.accesskeys.org/tools/color-contrast.html)
- Verktøy:
Color contrast samples (http://trace.wisc.edu/contrast-ratio-examples/)
Bruk HTML-markering og stilark, og bruk dette korrekt
- Lag dokumenter som kan valideres
- Bruk stilark til presentasjon
- Bruk relative, ikke absolutte målenheter
- Lag korrekt strukturerte dokumenter (overskrifter, lister, sitater etc.)
- Gi hver side en beskrivende tittel (title-element)
- Dokumentene må kunne leses og forstås uten stilark
Spesifiser språk og språkbruk
Bruk markering som letter uttale og tolkning
av forkortet eller utenlandsk tekst
- Spesifiser språk for delene av dokumentet som bryter med
hovedspråkformen
- Bruk xml:lang på
elementet som inneholder et annet språk
- Eksempel på engelsk sitat:
<blockquote
xml:lang="en-GB">
- Angi hovedspråk i dokumentet
- Bruk attributtet xml:lang
på html-elementet
- Eksempel på norsk språk:
<html
xml:lang="no-nb">
Tabeller
Sørg for at tabeller har tilstrekkelig markering
til at de kan transformeres, og er tilgjengelige for ulike nettlesere.
Tabeller skal kun brukes til tabellbasert informasjon
- Marker rad- og kolonneoverskrifter i
datatabeller
- Overskriftsceller: th
- Dataceller: td
- I datatabeller som har to eller flere logiske nivåer
med rad- og kolonneoverskrifter, bør markering koble
datacellene med overskriftscellene
- Elementene thead,
tbody og
tfoot brukes for å gruppere
rader
- Elementene col og
colgroup brukes til å
gruppere kolonner
- Ikke bruk tabeller til grafisk utforming/layout
Skjemaer (form-element)
- Bruk label-elementet for å gjør klar sammenheng mellom tekst og
utfyllingselementer i skjemaet
Javascript
- Sørg for at nettstedet kan fungere uten bruk av javascript
- Sørg for alle rutiner som reagerer på en mus også kan fungere via
tastatur
Flimring / blinking
NB! Aldri ha flimring eller blinking med frekvenser på 4 – 59 blink i sekundet!
Navigering
Lag sider som er maskinvareuavhengige
Sørg for at sideelementer kan aktiveres på flere
måter (mus, tastatur osv.)
Tenk på størrelsen på sideelementer, f.eks. er de lett å klikke på? Avstand
mellom sideelementer, f.eks. er det lett å klikke feil?
Navigering med hurtigtaster på regjeringen.no:

Navigasjonsmekanismer
Ha klare navigasjonsmekanismer
- Gjør målet til en lenke tydelig
- Lenketekster bør være forståelige når de leses ute av
sammenhengen – enten alene eller som en del av en lenkeliste
- Lenketeksten bør være kort og konsis
- Skriv en informativ / beskrivende klikkbar tekst i stedet for «Klikk her»
Språk
Sørg for at språket i dokumentene er klart
og lettfattelig
- Bruk det klareste og enkleste språket som passer til innholdet
på nettstedet
Verktøy
-
Firefox
- Tools > Web Developer > Disable > Disable Javascript > All javascript
- Tools > Web Developer > CSS > Disable styles > All styles
- Tools > Web Developer > Images > Disable images > All images
- Tools > Web Developer > Tools > Validate WAI
- Opera
- View > Images > Show images
- View > Style > User mode
- Tools > Quick preferences > Enable javascript