HTML 5 og tilgjengelighet
Spiller det noen rolle for tilgjengeligheten om du bruker HTML4 eller HTML5?
Skrevet av: Morten Tollefsen, 8.5.12
MTB: Dette er min personlige blogg, og artiklene er mer løse i stilen enn på f. eks medialt.no.
Stadig flere går over til HTML5, selv om standarden hverken er spikret eller støttes fullt ut av nettleserne. Jeg for ganske ofte spørsmål om hva dette innebærer i forhold til WCAG, tilgjengelighet, universell utforming osv. I dette notatet skal jeg forsøke å svare. Mitt inntrykk er at standarden er nokså uproblematisk mht. skjermleser, men jeg har forsøkt å "google" litt for å se om jeg kan finne potensielle problemer eller fordeler sammenliknet med HTML4. Mange tilgjengelighetskrav som f. eks kontrast, bruk av farger, blinking, ... er de samme i HTML4 og HTML5.
En ganske god oppsummering av tilgjengelighet og HTML5 finnes i [1].
Det pågår et intenst arbeid med standarden, og det er derfor litt vrient å si helt nøyaktig hva som blir det endelige resultatet. Foreløpig er det også litt tilfeldig hvilke nettlesere som støtter ulik funksjonalitet [2].
Tilgjengelighetsfunksjonalitet/koding som mangler i HTML5
Det kan se ut som følgende forsvinner:
- longdesc
- summary
longdesc attributtet brukes for å gi lange bildebeskrivelser. Verdien er en URL til en ny nettside. Grunnen til at longdesc er foreslått fjernet er at slike bildebeskrivelser brukes lite. I tillegg er det kun skjermlesere som har kunnet velge lenken til bildebeskrivelsen. Dette er ikke noe stort problem: du kan bare legge en lenke til "lang bildebeskrivelse" dersom det noen gang skulle være aktuelt. Alternativt kan du bruke de nye HTML5 tag'ene details/summary (som desverre ikke støttes av nettleserne enda).
summary-attributtet brukes for å formidle informasjon om tabeller (spesielt tenkt for skjermleserbrukere). Jeg har sett veldig få eksempler på at bruk av "summary" har vært nyttig, men det finnes likevel situasjoner der det å beskrive (eller oppsummere) tabeller har noe for seg. To aktuelle alternative teknikker for å formidle slik tabellinformasjon er aria-describedby eller details-elementet (summary i HTML5 er et element i
details og er altså ikke det samme som summary-attributtet i HTML4, se tabellen under).
Semantisk merking
HTML4 mangler tag'er (eller attributter) for å merke hva som er hovedinnhold, meny etc. I HTML5 finnes det en rekke tag'er for semantisk oppmerking/strukturering:
| Tag | Description |
|---|---|
| <article> | Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. |
| <aside> | For content aside from the content it is placed in. The aside content should be related to the surrounding content |
| <bdi> | For text that should not be bound to the text-direction of its parent elements |
| <command> | A button, or a radiobutton, or a checkbox |
| <details> | For describing details about a document, or parts of a document |
| <summary> | A caption, or summary, inside the details element |
| <figure> | For grouping a section of stand-alone content, could be a video |
| <figcaption> | The caption of the figure section |
| <footer> | For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information |
| <header> | For an introduction of a document or section, could include navigation |
| <hgroup> | For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings |
| <mark> | For text that should be highlighted |
| <meter> | For a measurement, used only if the maximum and minimum values are known |
| <nav> | For a section of navigation |
| <progress> | The stat of a work in progress |
| <ruby> | For ruby annotation (Chinese notes or characters) |
| <rt> | For explanation of the ruby annotation |
| <rp> | What to show browsers that do not support the ruby element |
| <section> | For a section in a document. Such as chapters, headers, footers, or any other sections of the document |
| <time> | For defining a time or a date, or both |
| <wbr> | Word break. For defining a line-break opportunity. |
HTML5 tag'ene kan erstatte landemerker i WAI-ARIA, men pga. overskrifter etc (se under) kan det muligens være lurt å beholde god struktur og landemerker fra HTML4 foreløpig!
Overskrifter (h-tag'er)
Brukes tag'er for å markere ulike seksjoner (article, aside, nav og section) anbefaler HTML-spesifikasjonen å bruke kun H1. Skjermleseren Jaws i kombinasjon med Internet Explorer 9 håndterer dette bra. Foreløpig er imidlertid strukturering vha. kun h1 mangelfullt implementert i andre nettlesere/skjermlesere. Jaws håndterer overskriftene feil dersom H2, H3 osv. brukes i seksjonene i IE.
Ingen andre skjermlesere/nettlesere håndterer bruk av kun H1 på riktig måte. Det kan derfor være best å gi overskriftene et eksplisitt nivå inntil videre. Detaljer rundt dette finnes på [3].
Video
Selve video-avspilleren i HTML5 ser ut til å virke fint med vanlige hjelpemidler (og de nettleserne som støtter HTML5). Det fungerer f. eks mye bedre enn Flash-avspillere (der du i prinsippet må lage html-knapper og skrive script for å få brukbar tilgjengelighet).
WebVTT [4] (Web Video Text Tracks) som utvikles av W3C støtter teksting, og det pågår også arbeid mht. synkronisering av ikke-tekstlig innhold (f. eks tegnspråk og synstolking) [5].
Canvas
Canvas-elementet er nytt i HTML5. Det pågår arbeid mht. tilgjengelighet, og to viktige egenskaper er en sub-DOM og muligheten for å tegne opp fokus i bildet (draw focus ring). Foreløpig er det å gi et tekstalternativ mest aktuelt [1]. I [1] vises et par teknikker for å gjøre canvas mer tilgjengelige.
Les mer:
- HTML5 and Accessibility
http://msdn.microsoft.com/en-us/magazine/hh204741.aspx - HTML5 accessibility
http://html5accessibility.com/ - JAWS, IE and Headings in HTML5
http://www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ - WebVTT (Web Video Text Tracks)
http://dev.w3.org/html5/webvtt/ - Media Multitrack Media API
http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitrack_Media_API
Verktøylinje
Tips noen om siden