Transcript WAI-ARIA * hva, hvorfor og hvordan

WAI-ARIA – hva,
hvorfor og hvordan
Torbjørn Helland Solhaug
[email protected] @solhell
Navnet
• WAI
Web Accessibility
Initiative
• ARIA
Accessible Rich Internet
Applications
• Gruppe i W3C
• W3C står for alt av
standarder på nett
• Primært relatert til script
• Også støtte til ren HTML
Hva?
Egenskaper for økt tilgjengelighet for
brukere med hjelpemidler
Nettopp etablert som standard
Kan gi valideringsfeil
Skjermleser
• Hjelpemiddel for sterkt
svaksynte
• Opplesing av tekst
• Fortløpende punktskrift
Skjermleser vs bare tastatur
• Med skjermleser er piltaster
ofte primærmetoden
• Med tastatur alene er Tab
normalt den eneste
metoden
WAI-ARIA vs pre-HTML5
WAIARIA
PreHTML5
WAI-ARIA vs HTML5
WAIHTML5
ARIA
Roller
command
composite
input
landmark
range
roletype
section
sectionhead
select
structure
widget
window
combobox
grid
listbox
menu
menubar
radiogroup
tablist
tree
treegrid
article
columnheader
definition
directory
document
group
heading
img
list
listitem
math
note
presentation
region
row
rowgroup
rowheader
separator
toolbar
alert
alertdialog
button
checkbox
dialog
gridcell
link
log
marquee
menuitem
menuitemcheckbox
menuitemradio
option
progressbar
radio
scrollbar
slider
spinbutton
status
tab
tabpanel
textbox
timer
tooltip
treeitem
application
banner
complementary
contentinfo
form
main
navigation
search
Egenskaper
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-flowto
aria-pressed (state)
aria-readonly
aria-relevant
aria-required
aria-selected (state)
aria-setsize
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
aria-grabbed (state)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
aria-posinset
For mye til å gå i dybden
Hvordan bruke WAI-ARIA?
•
•
•
•
Når det gir merverdi for brukeren
Som backup for HTML5
Som supplement til HTML
Når HTML ikke er dekkende
Hvordan ikke bruke WAI-ARIA?
• Ikke erstatning for god HTML-kode
• Ikke lurt å være triggerhappy!
Merverdi for brukeren
- eksempler fra ULOBA
EKSEMPLER FRA ULOBA
Utvid og kollaps
• Lenker som ikke åpner ny side
• Forskjellen må formidles
KODE
aria-expanded="false"
aria-expanded="true"
EKSEMPLER FRA ULOBA
Obligatoriske felt
• Krevende å håndtere feil og
mangler
• Gir større sjanse for korrekt på
første forsøk
KODE
<input type="text"
name="Navn"
id="Navn" required
aria-required="true">
EKSEMPLER FRA ULOBA
Replisere visuell info
Helligdag - med HTML og CSS
• <abbr title="torsdag">
Tor</abbr> 17.04.14
<span class="hiddenText">
helligdag </span>
KODE
<abbr title="torsdag">
Tor</abbr> 17.04.14
<span class="hidden">
helligdag </span>
EKSEMPLER FRA ULOBA
Visuell info over flere celler
Med WAI-ARIA, HTML og CSS
KODE
<div>Assistentb
Amundsen </div>
<div class="hidden">
06.00 - 10.00,
torsdag</div>
<div aria-hidden="true">
06.00 – 10.00</div>
<div aria-hidden="true">
(Torsdag)</div>
Skjult og synlig informasjon
• Skjule visuelt, presentere for hjelpemiddel:
CSS: position: absolute; left: -20000px;
• Presentere visuelt, skjule for hjelpemiddel:
WAI-ARIA: aria-hidden=“true“
• Skjule for alle:
CSS: display: none;
Modalboks
Bakgrunn:
tabindex="-1"
aria-hidden="true"
Modalboks:
role="alertdialog"
fokusplassering
Avansert funksjonalitet
• WAI-ARIA har kapasitet til at flere
kan benytte
•
•
•
Flik-funksjonalitet
Automatisk oppdatering av
områder
Drag and drop
Men…
• Kompleks implementering
• Varierende støtte
• Mangler ofte veiledning
KODE
role=tablist
role=tab
role=tabpanel
role=presentation
tabindex=0/-1
aria-selected=true/false
aria-controls=id
aria-expanded=true/false
aria-hidden=true/false
aria-labelledby=id
Avanserte grensesnitt
Backup for HTML5
Hva når HTML5 er dekkende?
Ikke alle hjelpemidler er oppdatert,
så dobbelt opp er ofte en god idé
• <nav role=“navigation“>
• <header role=“contentinfo“>
• <article role=“article“>
• <aside role=“complementary“>
Ikke splitt opp
• <nav>
<div role=navigation>
Resultat: navigation navigation
• <article>
<div role=article>
Resultat: article article
All in – søkefunksjon
<div role=“search“>
<input type=“search“ title=“søk“
placeholder=“søk på nettstedet…“>
<button>Søk</button>
</div>
RESULTAT
Tre steg:
1. Søk landemerke
2. Søk tekstfelt
3. Søk knapp
Supplement til HTML5
Supplering av datalist
• Søkeforslag innenfor et definert
datasett
• Funksjonaliteten formidles ikke av
HTML
KODE
aria-autocomplete="list"
aria-haspopup="true"
Supplering av progressbar
• Nytt i HTML5
• Ikke alle gjenkjenner <progress>
• Aria-attributter gjør at flere
komboer formidler informasjonen
KODE
<progress
role="progressbar"
value="30" min="0"
max="100" ariavaluenow="30" ariavaluemin="0" ariavaluemax="100">
Støtte i programvare
Skjermlesere
• VoiceOver på iOS og OSX
• JAWS og Window-Eyes er de
største i Windows
• NVDA er åpen programvare
• Supernova og Cobra mindre
utbredt
Mye etterslep
• Nettlesere takler HTML5 forskjellig
• Nettlesere takler WAI-ARIA forskjellig
• Skjermlesere på samme måte
Mange versjoner
• IE 8 9 10 11
• Firefox (vanligvis siste)
• Safari (vanligvis siste)
•
•
•
•
•
JAWS 12 13 14 15
Window-Eyes 8.0 8.3 8.4
Supernova
NVDA 2013:1 2013:2
VoiceOver innebygd
Regresjon og kombinasjoner
• Ikke uvanlig at siste versjon har nye feil
• Skjermleser A + nettleser X = fungerer
• Skjermleser A + nettleser Y = fungerer ikke
• Skjermleser B + nettleser X = fungerer ikke
Ofte lite forutsigbart
Aria-live
IE 10
Jaws 13
Jaws 14
Window Eyes
SuperNova 13.51
NVDA 2013:1
Voice Over
Firefox 22
iOS
Støtte i ulike nettlesere
• Firefox litt bedre enn Internet
Explorer
• Safari støttes bare av VoiceOver
• Chrome støttes ikke av globale
skjermlesere
Støtte i skjermlesere 2013
IE 10
IE 10
Firefox 22
Jaws 13
SuperNova
13.51
Jaws 14
NVDA
2013:1
Window
Eyes
VoiceOver
(iOS)
Firefox 22
Safari
Støtte i skjermlesere 2014
IE 11
Jaws 15
Window
Eyes 8.4
SuperNova
13.55
IE 11
Firefox 27
NVDA
2013:1
VoiceOver
(iOS7)
VoiceOver
(OSX 10.9.2)
Firefox 27
Safari
Noen sikre kort
•
•
•
•
•
Role=navigation
Role=checkbox
Aria-checked
Aria-labeledby
Role=button
Kontinuerlig utvikling
• Nye versjoner av nettlesere
• Nye versjoner av skjermlesere
• Ergo: Test!
(Men ikke vent til alle er klare)
Noen tips til slutt
Hvorfor gjøre det vanskelig?
<a href=“side.html“>Lenketekst</a>
vs
<div tabindex=“0“ role=“link“
onclick=“openPage(side.html)“>
Lenketekst</div>
Begrens kompleksitet
• Det enkle er ofte det beste
• Flere nivåer med utvid/kollaps blir
veldig krevende
• role=“application“ vil sperre ute
brukere
Oppsummering
•
•
•
•
Når HTML5 ikke er dekkende
Backup for HTML5
Supplement til HTML5
For å forbedre brukeropplevelsen
• Viktigst: Test!
Alt vi anbefaler er
testet i virkeligheten