Original: http://accessibleculture.org/articles/2010/05/html5-aria/

Huomautus: Päivitetty tutkimustuloksiin maaliskuussa 2011.

On olemassa joitakin hyviä, hyödyllisiä esimerkkejä ja työskennellä siellä jo osoittaa, kuinka jotkut näytönlukijat käsittelemään hyvinkin HTML5 rakentaa ja ARIA rooleja. Tiedän silmälasit eivät olekaan vielä valmis ja avustavaa teknologiaa myyjät aina työn alla, mutta halusin pelata noin vähän ja vahvistaa itse, miten joidenkin johtavien ruudunlukijat Windowsille, nimittäin JAWS 11, Window-Eyes 7, 11, NVDA 2010, 1, ja SAToGo 3.0.202, tällä hetkellä käsittele perus HTML5 otsikointikäskyt elementtejä sekä ARIA ja muita rooleja. On ollut ehdotettu, että ennen kuin selaimet ja näytönlukijat tukevat täysin HTML5 elementtejä ja niiden implisiittinen ARIA roolit, meidän pitäisi olla selkeästi täydentämisestä tiettyjen HTML5 elementtejä niihin liittyvien ARIA roolit.

Päivitys: Tulokset VoiceOverin MacOS X Snow Leopard Safari 4.0.3 lisätty. -Toukokuu 07, 2010

Testitapauksista

Ensimmäinen testi tapaus käyttää vain HTML5 elementit, erityisesti:

• header
• nav
• section
• article
• aside
• footer

Toinen testi tapaus koskee myös seuraavat ARIA roolit:

• banner
• navigation
• main
• article
• complementary
• contentinfo

Testasin neljän näytönlukuohjelmia käyttäen sekä Internet Explorer 8 ja Firefox 3.6.

Huomautus: Riippuen näytönlukija ja selaimen yhdistelmä käytät, sisäisiä sivun linkit testitapauksista, erityisesti ne, joilla tavoitteet, jotka ovat yksinkertaisia otsikot kanssa  id määrite, voi tai ei voi oikein asettaa tarkennuksen ja päivittää asema  TAB järjestyksessä. Tämä on ongelma, tarpeeksi hyvin dokumentoitu, erityisesti selainten ja näytönlukijat, ja liity käytön HTML5 ja ARIA rooleja. Se voi olla eri lieventää lisäämällä tabindex="-1" ja / tai todellisia a elementtejä eri tavoin sen sijaan, mutta se on eri joukko testitapauksia.

Tulokset

Lyhyesti, NVDA tekee erittäin hyvin HTML5 ja HTML5 ARIA rooleja testitapauksia, onko IE8 tai FF3.6. Liikkuminen, lukeminen, ja vuorovaikutuksessa HTML5 markup ja Aaria maamerkkejä on vain yksinkertainen. Niin paljon, että se ei takaa muun muassa sen testitulokset: Riittää sanoa, että NVDA kiviä.

JAWS ei hyvin, vaikka FF3.6 se ei näytä pitävän nav elementtiä sisäkkäin sisällä header. Nyt ainakin se voi olla järkevää välttää pesiviä navelementtejä headerelementtejä. Päivitys (27 elokuu 2010): Katso huomautus # 3 Terrill Thompson alla. Valitettavasti, leukojen 11 Firefoxissa 3.6 ei käsitellä hyvin headerelementin mahdollisessa toteuttamisessa.

SAToGo tekee myös kunnossa, ja nyt jopa mahdollistaa navigointi ARIA, vaikka se ei automaattisesti ilmoittaa tyypin maamerkki, koska se tulee sen poikki. Ja voisin vain saada se navigoida maamerkin yhteen suuntaan IE8, kun taas FF3.6, voisin navigoida sekä seuraavan ja edellisen maamerkki painamalla; ja  Shift+ ;vastaavasti. Päivitys: Uusi tulokset SAToGo versio 3.1.24 21. toukokuuta, 2010.

Window-Eyes 7.11, toisaalta, ja tämä on yksi asia tiesimme jo, ei tunnista ARIA roolit ollenkaan. Edelleen, Window-Eyes vain näyttää balk IE8 kun se tulee HTML5 ja ARIA rooleja käytetään yhdessä: in ”Selaustila” se ei löydä mitään linkkejä sisällä HTML5 otsikointikäskyt elementti, joka on myös ARIA rooli. Jos otat ”Selaustila” pois, se löytää kaikki linkit, mutta tämä tarkoittaa sinun pitäisi jatkuvasti vaihtaa ”Selaustila” päälle ja pois itse lukea ja käyttää sivun.

Joitakin uusia nopeaan testaukseen En osoitti, että IE8, Window-Eyes ei ole vaikeuksia löytää linkit yksinkertainen  div että myös han aaria rooli tai sisällä HTML5 otsikointikäskyt elementti ilman ARIA rooli, mutta yhdistää kaksi ja Window-Eyes IE8 vain katoaa. Tämän vahvistaa, esimerkiksi Bruce Lawsonin sivusto, jolla on käyttöä HTML5 ja ARIA. Jos käyt Brucen sivusto Window-Eyes ja IE8, yksikään linkkejä  header tai #sidebar  nav löytyy koska kumpikin näistä HTML5 elementtejä myös ARIA rooleja täytäntöön. Mutta ei ole ongelma linkkien pääsisältöalueen, vaikka se on  role="main", koska se vain käyttää säännöllisesti  div. Jos se käytti sectionelementti sijaan suurin osa linkeistä sivulla olisi vain kadota Window-Eyes IE8.

Vaikka minulla ei ole numeroita todistaa se, että eiköhän suurin osa Window-Eyes käyttäjien suorittaa Internet Explorerin sijaan Firefox, joten tämä voi olla syy välttää HTML5 ja ARIA rooleja yhdessä toistaiseksi, riippuen siitä, kuinka suhtaudut catering Window-Eyes käyttäjille IE8. On mielenkiintoista nähdä, miten asiat muuttuvat, kun IE9 ja Window-Eyes 8 ovat poissa.

Yksityiskohtaisemmat tulokset ovat alla. Ellei toisin mainita, näytönlukijaohjelma suoritetaan voisi toivoa ja odottaisi käyttökelpoista kokemusta.

Update # 1 (30 kesäkuu 2010): Näyttää siltä, että jopa pesivät elementti, jolla on  role määrite vanhemman HTML5 otsikointikäskyt elementti samalla aiheuttaa ongelmia Window-Eyes. Esimerkiksi yhdistää sisällä  ul kanssa  role="navigation" sisäkkäin vanhemman navelementti ei saapuvat Window-Eyes.

Päivitä # 2 (heinäkuu 5, 2010):  Toisaalta, ja mielenkiintoisesti, pesiviä HTML5 elementin sisällä  div, jossa on ARIA  role ei näytä laukaista ongelman Window-Eyes. Esimerkiksi linkit  nav elementti, joka on sisäkkäin sisällä  div, jossa  role="navigation" on edelleen saapuvat Window-Eyes. Joten tämä on, nyt, ehkä paras tapa käyttää HTML5 elementtejä ja ARIA roolit yhteen ilman haittavaikutuksia Window-Eyes käyttäjille.

Update # 3 (heinäkuu 7, 2010):  Kun uusin päivitys Window-Eyes 7.2, linkit HTML5 elementtejä, joilla on ARIA  role löytyy nyt ja käyttökelpoinen. Valitettavasti, sisäkkäin ainakin jotkut semanttinen HTML-4 elementtien  role määrite vanhemman HTML5 leikkaamista elementti aiheuttaa edelleen ongelmia Window-Eyes 7.2. Eli yhteyksiä sisällä  ul kanssa  role="navigation" sisäkkäin vanhemman  nav elementin, esimerkiksi vielä ole löydetty ja käytännöllisiä käyttämällä tätä uusinta versiota Window-Eyes.

Update # 4 (heinäkuu 21, 2010):  Mielestäni olen onnistunut tekemään asioita hieman sekava tässä vaiheessa, joten tehdään kertaus: Internet Explorer 8, Window-Eyes versiot 7.2 ja alla, kun normaalissa Selaustila, on joitakin ongelmia löytää ja käyttää linkkejä sisältöön, joissa ARIA  roles käytetään yhdessä HTML5 otsikointikäskyt elementtejä tietyissä järjestelyissä. Käyttäen linkkejä HTML5 elementin, jolla on ARIA  role attribuutti on ongelma Window-Eyes 7,11 ja alle. Tämä ei ole ongelma Window-Eyes 7.2, mutta versio 7.2 siellä tekee edelleen ongelma ainakin järjestämättömiä ja järjestettyjä listoja, ja mahdollisesti joitakin muita tekijöitä kuin hyvin, että on ARIA  role sovellettu. Kumpikaan Window-Eyes 7,11 eikä 7,2 voivat käyttää linkit  ul elementti  role="navigation", onko se on sisäkkäin sisällä nav elementti. Sama pätee, esimerkiksi linkkejä sisällä  ol elementti  role="contentinfo". (Tämä Window-Eyes bugi näkyy myös jonkin verran Firefox 3.6). Kuitenkin, sisäkkäin HTML5 elementti geneerinen  div kanssa ARIA  role, tai päinvastoin, Pesiä divARIA role sisällä HTML5 elementti, ei näytä aiheuttavan ongelmia Window-Eyes. Niin, esimerkiksi, yksi voisi kietovat  navelementti  <div role="navigation"> tai, vaihtoehtoisesti, kietoa sisäisen sisällön  nav on  div kanssa ARIA role. Esimerkkejä näistä erilaisia järjestelyjä löytyvät tällä erityistä Testisivulla Window-Eyes .

HTML5 Vain koetinkivi

JAWS 11

IE8

• ei selviä ongelmia tai kysymyksiä

FF3.6

• ei pidä  nav sisällä  header elementtiä: Sivulla kuormitus, leukojen hyppää jonnekin alle  header ja ryhtyy lukemaan, usein  h1 tai ”ensimmäinen osa” sisäistä sivun linkin; ja  nav linkit sisällä  header eivät näy leukojen linkkejä lista
• painaa  TAB tavoittaa jokaisen linkin, mutta vuonna VirtualPC Kursoritilassa, linkkejä sisällä  header, kun valitaan näppäimistön, rekisteröi ja toimii riippumatta linkin ulkopuolella  headeraikaisemmin ollut tarkennus (esim usein ”ensimmäinen osa” sisäistä sivun linkin sisällä ” main”  section)
• jossa VirtualPC Kursoritilassa pois, linkit  header toimivat hyvin näppäimistöstä
• olevia linkkejä  header näytä toimivan hyvin, kun valitaan hiirellä, onko VirtualPC Kursoritilassa päällä vai ei
• linkit ulkopuolella  header ovat kaikki kirjataan ja toimi kunnolla

Window-Eyes 7,11

IE8 JA FF3.6

• ei selviä ongelmia tai kysymyksiä

SAToGo 3.0.202

IE8 JA FF3.6

• ei selviä ongelmia tai kysymyksiä

Selostus

SAFARI 4.0.3

• ei selviä ongelmia tai kysymyksiä

HTML5 + ARIA roolit koetinkivi

JAWS 11

IE8

• sama kuin HTML5 Vain version, paitsi että
• kaikki ARIA maamerkit löydetään ja purjehduskelpoinen
• katsoo myös  role="article" maamerkki

FF3.6

• samoja kysymyksiä kanssa  nav on  header kuin HTML5 Vain versio
• kaikki ARIA maamerkit löytyvät ja purjehduskelpoisia paitsi  navigation ARIA sisäkkäin header
• katsoo myös  role="article" maamerkki

Window-Eyes 7,11

IE8

• no ARIA maamerkkejä löydy
• Linkkejä ei löytynyt  , sillä sivun kolmeen pääluokkaan HTML5 elementtejä yhdessä ARIA roolit
• header kanssa  role="banner",  section kanssa  role="main", ja  footerjossa  role="contentinfo" on kunkin hyväksytyn kontrolleina (esim, ne voidaan avata painamalla  C) ja ovat  TAB järjestyksessä

FF3.6

• no ARIA maamerkkejä löydy
• kaikki linkit löytyvät, toisin kuin IE8
• headerThe  section kanssa  role="main", ja  footer ei ole kirjattu valvonta kuin ne ovat IE8

SAToGo 3.0.202

IE8

• kaikki ARIA maamerkit löytyvät ja purjehduskelpoinen, mutta vain yhteen suuntaan (painamalla  ; seuraavaa maamerkki), ja tyyppi maamerkki rooli ei ilmoittanut

FF3.6

• kaikki ARIA maamerkit löytyvät ja liikennöintikelpoisia molempiin suuntiin (painamalla  ; ja  Shift+ ;), mutta tyyppi maamerkki rooli ei ilmoittanut

SAToGo 3.1.24 (21 toukokuu 2010)

IE8

• Vaikka tämä versio SAToGo mahdollistaa nyt navigointi ARIA molempiin suuntiin IE8 (painamalla  ; ja  Shift+ ;), se ei enää löytää  complementary maamerkki rooli
• tyyppi maamerkki rooli säilyy ennalta ilmoittamatta

FF3.6

• SAToGo vielä löytää kaikki maamerkit mahdollistaa navigoinnin molempiin suuntiin, ja tyyppi maamerkki rooli säilyy ennalta ilmoittamatta

Selostus

SAFARI 4.0.3

• no ARIA maamerkkejä löydy

 

 

Ellei toisin mainita, tämän sivuston sisältö on lisensoitu Creative Commons Attribution-NonCommercial-ShareAlike 3.0 -lisenssillä.