Laste ned presentasjonen
Presentasjon lastes. Vennligst vent
1
WAI-ARIA – hva, hvorfor og hvordan
Torbjørn Helland Solhaug @solhell
2
Navnet WAI ARIA Web Accessibility Initiative
Gruppe i W3C W3C står for alt av standarder på nett ARIA Accessible Rich Internet Applications Primært relatert til script Også støtte til ren HTML
3
Hva? Egenskaper for økt tilgjengelighet for brukere med hjelpemidler
Nettopp etablert som standard Kan gi valideringsfeil Ettersom ikke standard kan det bli valideringsfeil
4
Skjermleser Hjelpemiddel for sterkt svaksynte Opplesing av tekst
Fortløpende punktskrift
5
Skjermleser vs bare tastatur
Med skjermleser er piltaster ofte primærmetoden Med tastatur alene er Tab normalt den eneste metoden
6
WAI-ARIA vs pre-HTML5 Pre-HTML5 WAI-ARIA
7
WAI-ARIA vs HTML5 HTML5 WAI-ARIA
8
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
9
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
10
For mye til å gå i dybden
11
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
12
Hvordan ikke bruke WAI-ARIA?
Ikke erstatning for god HTML-kode Ikke lurt å være triggerhappy!
13
Merverdi for brukeren - eksempler fra ULOBA
14
Utvid og kollaps Lenker som ikke åpner ny side
Eksempler fra ULOBA Utvid og kollaps Lenker som ikke åpner ny side Forskjellen må formidles kode aria-expanded="false" aria-expanded="true"
15
Obligatoriske felt Krevende å håndtere feil og mangler
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">
16
Replisere visuell info
Eksempler fra Uloba Replisere visuell info Helligdag - med HTML og CSS kode <abbr title="torsdag"> Tor</abbr> <span class="hiddenText"> helligdag </span> <abbr title="torsdag"> Tor</abbr> <span class="hidden"> helligdag </span>
17
Visuell info over flere celler
Eksempler fra uloba Visuell info over flere celler Med WAI-ARIA, HTML og CSS KODE <div>Assistentb Amundsen </div> <div class="hidden"> , torsdag</div> <div aria-hidden="true"> – 10.00</div> <div aria-hidden="true"> (Torsdag)</div>
18
Skjult og synlig informasjon
Skjule visuelt, presentere for hjelpemiddel: CSS: position: absolute; left: px; Presentere visuelt, skjule for hjelpemiddel: WAI-ARIA: aria-hidden=“true“ Skjule for alle: CSS: display: none;
19
Modalboks Bakgrunn: tabindex="-1" aria-hidden="true" Modalboks:
role="alertdialog" fokusplassering
20
Avansert funksjonalitet
WAI-ARIA har kapasitet til at flere kan benytte Flik-funksjonalitet Automatisk oppdatering av områder Drag and drop
21
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 Veiledning også nødvendig for bare tastatur Skifte av navigasjonskonsept er problematisk
22
Avanserte grensesnitt
23
Backup for HTML5
24
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“>
25
Ikke splitt opp <nav> <div role=navigation> Resultat: navigation navigation <article> <div role=article> Resultat: article article
26
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: Søk landemerke Søk tekstfelt Søk knapp
27
Supplement til HTML5
28
Supplering av datalist
Søkeforslag innenfor et definert datasett Funksjonaliteten formidles ikke av HTML kode aria-autocomplete="list" aria-haspopup="true"
29
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" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
30
Støtte i programvare
31
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
32
Mye etterslep Nettlesere takler HTML5 forskjellig
Nettlesere takler WAI-ARIA forskjellig Skjermlesere på samme måte
33
Mange versjoner IE 8 9 10 11 Firefox (vanligvis siste)
Safari (vanligvis siste) JAWS Window-Eyes Supernova NVDA 2013:1 2013:2 VoiceOver innebygd
34
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
35
Ofte lite forutsigbart
Aria-live
36
Støtte i ulike nettlesere
Firefox litt bedre enn Internet Explorer Safari støttes bare av VoiceOver Chrome støttes ikke av globale skjermlesere
37
Støtte i skjermlesere 2013
38
Støtte i skjermlesere 2014
39
Noen sikre kort Role=navigation Role=checkbox Aria-checked
Aria-labeledby Role=button
40
Kontinuerlig utvikling
Nye versjoner av nettlesere Nye versjoner av skjermlesere Ergo: Test! (Men ikke vent til alle er klare)
41
Noen tips til slutt
42
Hvorfor gjøre det vanskelig?
<a href=“side.html“>Lenketekst</a> vs <div tabindex=“0“ role=“link“ onclick=“openPage(side.html)“> Lenketekst</div>
43
Begrens kompleksitet Det enkle er ofte det beste
Flere nivåer med utvid/kollaps blir veldig krevende role=“application“ vil sperre ute brukere
44
Oppsummering Når HTML5 ikke er dekkende Backup for HTML5
Supplement til HTML5 For å forbedre brukeropplevelsen Viktigst: Test!
45
Alt vi anbefaler er testet i virkeligheten
Liknende presentasjoner
© 2024 SlidePlayer.no Inc.
All rights reserved.