1 / 45

WAI-ARIA – hva, hvorfor og hvordan

WAI-ARIA – hva, hvorfor og hvordan. Torbjørn Helland Solhaug torbjorn@funkanu.se @solhell. Navnet. WAI Web Accessibility Initiative G ruppe 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.

sai
Télécharger la présentation

WAI-ARIA – hva, hvorfor og hvordan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WAI-ARIA – hva, hvorfor og hvordan Torbjørn Helland Solhaug torbjorn@funkanu.se@solhell

  2. Navnet • WAI 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

  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 slider spinbutton status tab tabpanel textbox timer tooltip treeitem application banner complementary contentinfo form main navigation search tree treegrid article columnheader definition directory document group heading img list listitem math note presentation region row rowgroup rowheader command composite input landmark range roletype section sectionhead select structure widget window combobox grid listbox menu menubar radiogroup tablist separator toolbar alert alertdialog button checkbox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio option progressbar radio scrollbar

  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. Eksempler fra ULOBA kode aria-expanded="false" aria-expanded="true" Lenker som ikke åpner ny side Forskjellen må formidles Utvid og kollaps

  15. Eksempler fra Uloba kode <input type="text" name="Navn" id="Navn" required aria-required="true"> Krevende å håndtere feil og mangler Gir større sjanse for korrekt på første forsøk Obligatoriske felt

  16. Eksempler fra Uloba 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> Replisere visuell info

  17. Eksempler fra uloba 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> Visuell info over flere celler

  18. 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;

  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. 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 Men…

  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“> • <articlerole=“article“> • <asiderole=“complementary“>

  25. Ikke splitt opp • <nav> <div role=navigation>Resultat: navigationnavigation • <article> <div role=article>Resultat: articlearticle

  26. <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 All in – søkefunksjon

  27. Supplement til HTML5

  28. Søkeforslag innenfor et definert datasett Funksjonaliteten formidles ikke av HTML kode aria-autocomplete="list" aria-haspopup="true" Supplering av datalist

  29. 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"> Supplering av progressbar

  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 12 13 14 15 • Window-Eyes 8.0 8.3 8.4 • 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

More Related