Teknisk fordypning Torbjrn Helland Solhaug torbjornfunkanu se Twitter
Teknisk fordypning Torbjørn Helland Solhaug torbjorn@funkanu. se Twitter: @solhell
En nettside kan ikke være tilgjengelig om den ikke har en høy grad av brukbarhet
Revisjonens ulike deler Kategorier innen UU på skjerm ► Teknikk Pedagogikk Innhold PDF Flash Web-TV Publiseringsverktøy
Utgangspunktet for Funkas revisjon • WCAG 2. 0 www. w 3. org/TR/WCAG 20/ • WAI-ARIA www. w 3. org/TR/wai-aria/ • Vår lange erfaring
WCAG ikke nok • Sterk på teknikk, svakere på pedagogikk og nesten fraværende på innhold • Omtaler ikke bruk av mus eller flerpekeskjerm • Praktisk testing nødvendig
Hva er Design for alle?
Grunnkonstruksjonen • • Bruk teknikker med støtte for UU Bruk korrekt kode Bruk effektiv kode Skill mellom innhold (HTML) og presentasjon (CSS)
Grunnkonstruksjonen T 1 – Kodekvalitet a) Dokumenttype er korrekt angitt <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd">
Grunnkonstruksjonen T 1 – Kodekvalitet b) Tegnsett er korrekt angitt <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859 -1" />
Grunnkonstruksjonen T 1 – Kodekvalitet c) HTML-koden validerer korrekt mot angitt standard http: //validator. w 3. org/ 100 sider om gangen (ikke HTML 5): http: //www. htmlhelp. com
Grunnkonstruksjonen T 1 – Kodekvalitet d) CSS-koden validerer korrekt http: //jigsaw. w 3. org/css-validator/
Grunnkonstruksjonen T 1 – Kodekvalitet e) HTML- og CSS-koden bør være kortest mulig
Grunnkonstruksjon T 2 – Separasjon av innhold og design a) Layouttabeller benyttes ikke
Grunnkonstruksjon T 2 – Separasjon av innhold og design b) CSS brukes for all presentasjon <font size="+2"> <b> <table bgcolor="#999999"> <tr bordercolor="#000000">
Grunnkonstruksjon T 2 – Separasjon av innhold og design c) CSS- og HTML-koden er separert <style type="text/css">. ikkeslik { font-family: Verdana, Geneva, sansserif; } </style> <div style="color: . . . <p style="size: . . .
Grunnkonstruksjon T 2 – Separasjon av innhold og design d) Innholdet er organisert slik at det er lesbart uten CSS
Grunnkonstruksjon T 2 – Separasjon av innhold og design e) Dekorasjonsbilder bør være plassert i CSS-koden #navigation { background: url(cssimg/bg_navigation. gif) #BF 2600 0 px 100% repeat-x; }
Grunnkonstruksjon T 3 – Grensesnittets fleksibilitet a) Nettstedet er fullt brukbart og lesbart ved forstørring
Grunnkonstruksjon T 3 – Grensesnittets fleksibilitet b) Grensesnittet fungerer bra i ulike skjermbredder
Grunnkonstruksjon T 4 – Rammer a) Rammer får bare brukes dersom det finnes spesielle årsaker
Grunnkonstruksjon T 4 – Rammer b) Formålet til hver ramme er beskrevet i attributtet title <iframe title="facebook". . . >
Grunnkonstruksjon T 4 – Rammer c) Ved bruk av nettlesere som ikke støtter rammer, får brukeren informasjon om hvorfor det har oppstått et problem og hva brukeren ellers kan gjøre <iframe. . . >Nettleseren din støtter dessverre ikke rammer. . . </iframe>
Script • • • Bruk script for å øke brukernytten Grunnleggende funksjonalitet må fungere uten script Tydelig info ved manglende støtte Må fungere med hjelpemiddel Supplér med WAI-ARIA
Script T 5 – Komplekse teknikker (Script, Flash m. m. ) a) Komplekse teknikker som Java, Flash og script benyttes for å øke brukerverdien
Script T 5 – Komplekse teknikker b) Om en kompleks teknikk benyttes, finnes også relevant hjelp eller informasjon dersom den aktuelle teknikken ikke støttes <div onload=“hide()“> Du har ikke javascript! </div> Eksempel: Bra informasjon i feilmeldinger
Script T 5 – Komplekse teknikker (Script, Flash m. m. ) c) Bruk av komplekse teknikker skaper ikke problemer for brukere med hjelpemiddel
Script T 5 – Komplekse teknikker (Script, Flash m. m. ) d) Når nye elementer legges inn i siden, skal de plasseres på rett plass både visuelt og strukturelt i DOM
Script T 5 – Komplekse teknikker (Script, Flash m. m. ) e) Bruk WAI-ARIA attributter for å forbedre opplevelsen med skjermlesere
Støtte i skjermlesere 2014
Script T 5 – Komplekse teknikker (Script, Flash m. m. ) f) Grunnleggende funksjoner som menyer og søk skal fungere uten komplekse teknikker
Menyer og navigasjon • Kunne bruke mus, tastatur og berøringsskjerm • Logisk tab-rekkefølge • Synlig fokus med mus og tastatur • Store klikkeflater • Snarveier for tastaturnavigering
Menyer og navigasjon T 6 – Navigasjon a) Brukeren kan velge fritt mellom mus og tastatur for navigasjon
Menyer og navigasjon T 6 – Navigasjon b) Tab-rekkefølgen er logisk
Menyer og navigasjon T 6 – Navigasjon c) Fokus er visuelt tydelig når brukeren flytter seg med tastaturet og musen a: hover { border-bottom: 0. 5 em solid #bdbdbd; } a: focus{ border-bottom: 0. 5 em solid #bdbdbd; }
Menyer og navigasjon T 6 – Navigasjon d) Klikkbare flater er tilstrekkelig store
Menyer og navigasjon T 6 – Navigasjon e) Nye vindu og dekkende lag åpnes ikke uten at brukeren har valgt å gjøre det Eksempel: Reklame rett i fleisen
Menyer og navigasjon T 6 – Navigasjon f) Når et dekkende lag åpnes får brukeren direkte fokus på relevant sted i dette laget h) Snarveier finnes for å muliggjøre raskere navigering med tastaturet <a name=“main“ id=“main“> <a href=“#main“> Eksempel: Registreringsskjema i lightbox Snarvei til innhold
Menyer og navigasjon T 6 – Navigasjon g) Lenkegrupper og informasjonsområder er gruppert
Menyer og navigasjon T 6 – Navigasjon i) Det bør finnes hurtigkommandoer for navigering <a href=“#main“ accesskey=“S“>
Menyer og navigasjon T 7 – Automatiske hendelser a) Automatiske oppdateringer av sider brukes bare om det finnes særskilte årsaker b) Automatisk videresending av besøkere skjer ikke på klientsiden c) Tidsgrenser benyttes bare om det finnes spesielle årsaker d) Om automatiske hendelser eller tidsgrenser brukes, varsles brukeren om dette, og det bør finnes en mulighet til å forlenge tidsintervallet
Menyer og navigasjon T 7 – Automatiske hendelser e) Om automatisk utlogging brukes, skal om mulig data som brukeren har fylt inn, lagres og finnes igjen når brukeren logger inn neste gang f) Om et område oppdateres uten at siden lastes om bør dette være markert med WAI-ARIA attributtet aria-live
Skjemaer og e-tjenester T 8 – Skjemaer skal være korrekt konstruert a) Ledetekster er knyttet til respektive skjemaobjekt, og redegjør tydelig for skjemaobjektets funksjon b) Seksjoner i skjemaer er gruppert Eksempel: Etikett ikke kodet som etikett Etikett uten kobling
Skjemaer og e-tjenester T 8 – Skjemaer skal være korrekt konstruert c) Skjemalignende objekt er konstruert med teknikker for skjema
Struktur T 9 – Bruk riktig element til rett formål a) Overskriftselement brukes for å formidle dokumentets informasjonsstruktur med korrekt hierarki
Struktur T 9 – Bruk riktig element til rett formål b) Lister er korrekt kodet og brukes på rett måte
Struktur T 9 – Bruk riktig element til rett formål c) Avsnitt er laget med elementet p og brukes på rett måte
Struktur T 9 – Bruk riktig element til rett formål d) Sitat er markert med q eller blockquote e) Forkortelser og akronymer er forklart med henholdsvis abbr og acronym
Struktur T 10 – Datatabellers konstruksjon a) Tabelloverskrifter identifiseres ved hjelp av th og caption <table class="statistics"> <caption>Folkemengde, etter alder. Per 1. januar</caption>
Struktur T 10 – Datatabellers konstruksjon b) Avanserte tabeller forklares kort med hjelp av attributtet summary c) Tabellceller anvendes utelukkende for tabelldata
Struktur T 10 – Datatabellers konstruksjon d) Komplekse tabeller kompletteres med relevant kode <th id="rra">Ryk og Reis Airlines</th> <td headers="rra d 30122011 a middag">Ingen avgang</td>
Lenker T 11 – Lenkers funksjon og beskrivelse a) Lenker er konstruert slik at de er fremtredende uavhengig av innstillinger i nettleseren
Lyd, bilde og komplekse medieformat T 12 – Bruk ulike format til det de er tenkt å brukes til a) Tekst presenteres som tekst, ikke som bilder av tekst
Lyd, bilde og komplekse medieformat T 13 – Beskrivelser av bilder a) Likeverdige tekstbeskrivelser finnes for alle meningsbærende grafiske element på nettstedet
Lyd, bilde og komplekse medieformat T 13 – Beskrivelser av bilder b) Bildekart er klientbaserte, og har tekstbeskrivelser både for lenker og for bilder
Lyd, bilde og komplekse medieformat T 14 – Håndtering av lyd a) Informasjon som presenteres som lyd er forklart i tekst b) Bakgrunnslyd kan enkelt stenges av manuelt, eller avsluttes automatisk innen 3 sekunder
Lyd, bilde og komplekse medieformat T 15 – Håndtering av komplekse medieformat (PDF, Flash etc. ) a) Det finnes en passende tekstbeskrivelse av materiale i komplekse format i tilknytning til dette materialet b) Materiale som presenteres med komplekse medieformat har blitt tilgjengelighetssikret
Visuell presentasjon T 16 – Farger og kontraster a) Brukerens evne til å oppfatte ulike farger påvirker ikke forståelsen av innholdet
Visuell presentasjon T 16 – Farger og kontraster b) Forgrunns- og bakgrunnsfarger gir til sammen tilstrekkelig kontrast
Visuell presentasjon T 16 – Farger og kontraster c) Nettstedet blokkerer ikke brukerens mulighet til å gjøre egne innstillinger for farger og skrifttype i nettleseren
Visuell presentasjon T 16 – Farger og kontraster d) Tekst bør ikke presenteres mot bakgrunn som skifter i farge eller nyanse
Visuell presentasjon T 17 – Bevegelser i grensesnittet a) Nettstedet presenteres uten forstyrrende skjermflimmer, og uten bevegelige og blinkende elementer som ikke kan stoppes Eksempel: Karusell som ikke stopper
Informasjon og hjelp T 18 – Beskrivelse av sider a) Sidene har unike og relevante sidetitler
Informasjon og hjelp T 18 – Beskrivelse av sider b) Metadata består av informasjon som har betydning for siden og nettstedet <meta name="keywords" <meta name="description" <meta name="DC. Title"
Informasjon og hjelp T 18 – Beskrivelse av sider c) Sidens hovedspråk er angitt i koden <html id="ctl 00_Html. Element" xmlns="http: //www. w 3. org/1999/xhtml" lang="en">
Informasjon og hjelp T 18 – Beskrivelse av sider d) Språk som avviker fra sidens hovedspråk angis <div lang="en"> <p lang="en"> <span lang="en">
Informasjon og hjelp T 18 – Beskrivelse av sider e) Forklaringer for hvordan funksjoner skal håndteres må være koblet sammen med funksjonen det gjelder
Responsive Design og uu
Universell utforming betyr • Design for alle • Ta utgangspunkt i de som har det vanskeligst • Ta menneskers ulikheter i betraktning • Lage 1 løsning som fungerer for ALLE
Responsive design betyr • Design for alle (ulike enheter) • Lag det slik at det fungerer for de med de enkleste enhetene • Lag 1 løsning som fungerer for ALLE • Kombineres ofte med progressiv forbedring
Her er det likheter som vi bare må ivareta!
1 2 3 4 5 7 6
1 2 3 6 4 5 6 7
1 2 3 4 5 6 7 http: //www. responsinator. com/
Utfordrende områder • • • Sidehode Navigasjonen Størrelse vs. Plass Tekst Innmating
Sidehode
Navigasjonen
Størrelse vs. Plass
Tre ganger så mange synes at det er vanskelig å klikke på et objekt på websider, enn de som synes at det er vanskelig å klikke på et objekt i apps, i mobilen
Tekst
Innmating
Opprinnelig er Responsive Design bra, men vi står overfor mange utfordringer
Pass på å… • Prioritere, spesielt i sidehode • Tenke igjennom navigasjonskonseptet • Ikke la objektene bli for små og ikke høyrejuster • Skjul, men ikke fjern • Minimere innmatingen • 1 løsning for ALLE
HTML 5
HTML 5 og uu • Varierende støtte i nettleserne – www. html 5 test. com • Varierende tolking av hvordan HTML 5 skal brukes • Hjelpemidler ikke oppdatert til å håndtere de nye elementene
Bra i HTML 5 • • • Flere input-typer Større muligheter for å strukturere Støtter WAI-ARIA Støtter video og lyd Bedre støtte for utvikling rettet mobile enheter
Problemer med HTML 5 • Krever ofte fallback grunnet manglende kompatibilitet • Elementene Article og Section skaper krøll med overskriftsnivåer for opplesende hjelpemidler • Se også http: //blog. paciellogroup. com/2012/08/not es-on-html 5 -accessibility-support-in-ie-10/
WAI-ARIA Accessible Rich Internet Applications
Hva er ARIA Økt tilgjengelighet i RIA: • Landmarks Navigation, Search, Main • • Live regions Off, Polite, Assertive, Rude Eksempler: Aria-controls WAI-ARIA Assosiere en kontroll med et område
Hva er ARIA • Aria-describedby Assosiere en beskrivelse med et område • Role: Alert For meldinger som dukker opp • Role: Alertdialog For meldinger som dukker opp og krever et valg Eksempler: WAI-ARIA
Å skjule objekter • • visibility: hidden display: none Aria-hidden left: -20000 px;
Oppdateringer • • • Varsle brukeren Viktig <> mindre viktig Visuelt Lyd? Informasjon?
HTML 5 og WAI-ARIA Tanken er at HTML 5 skal erstatte WAIARIA HTML 5 element article footer header WAI-ARIA role main contentinfo banner navigation
HTML 5 og WAI-ARIA Kombiner HTML 5 og WAI-ARIA Eksempel: Bruk elementet nav i html 5 og legg rollen/landmerket "navigation" direkte i nav-elementet. <nav role="navigation">
Progressiv forbedring • Innhold og navigering først – HTML • Tilpassing av presentasjon og navigering for ulike plattformer – CSS • Tilleggsfunksjoner for å forbedre brukeropplevelsen – RIA/ARIA
Tips og triks • Validering av kode – WDG HTML Validator • Verktøy for sjekk av nettsteder – Accessibility Toolbar (IE) – Accessibility Evaluation Toolbar (Firefox) – Web Developer Toolbar (Firefox) • Evaluering av farger – Color Contrast Analyser • Opplesende hjelpemiddel – JAWS 14. 0 • Eksempel WAI-ARIA – http: //test. cita. illinois. edu/aria/index. php • Eksempel Ajax – www. oaa-accessibility. org/examples/ • Lesestøtte – Talende Web
Det finnes ingen gjennomsnittsbrukere
- Slides: 127
