Tarkastele ARIA-web-standardeja ja HTML-sovellusten esteettömyyttä
Todella avoin ja kattava verkko tarvitsee tekniikoita, joiden avulla vammaiset käyttäjät voivat käyttää aputeknologioita nauttimaan dynaamisesta web-sisällöstä ja nykyaikaisista web-sovelluksista. W3C: n helppokäyttöisyyden verkostostandardien tavoitteena on täyttää verkko, jossa on saatavilla helppokäyttöiset Internet-sovellukset (ARIA), joita vammaiset käyttäjät voivat käyttää tehokkaasti.
ARIA on yksi lukuisista esteettömyysstandardeista ja ohjeista, jotka julkaistaan Web Accessibility Intitiative (WAI). Se tarjoaa lisämerkinnän, joka voidaan helposti lisätä HTML-dokumentteihin. WAI-ARIA on monialainen ratkaisu, joka kohdistuu Open Web Platformiin, joten älä vain ajattele sivustoja, vaan myös pelejä, digitaalista viihdettä, terveydenhuoltoa, mobiilia ja muita sovelluksia.
Tässä viestissä tarkastelemme, miten voit lisätä HTML-asiakirjojen saatavuutta WAI-ARIA-standardien avulla.
ARIA-kehys
HTML-syntaksi ei aina anna kehittäjille mahdollisuuden kuvata elementtejä oikein, tunnistaa niiden roolit ja määrittää niiden väliset suhteet. Vaikka se on harvoin ongelma kävijöille, jotka ovat täysin aistinvaraisia, se voi estää apuvälineiden käyttäjiä ymmärtämästä, mitä näytöllä tapahtuu ja tutkitaan niiden vaihtoehtoja.
Tämä on se kohta, jossa ARIA tulee auttamaan, sillä se mahdollistaa eri elementtien tarkoituksen määrittämisen roolit, ja kuvata niiden luonnetta aria-etuliitteiset ominaisuudet. Aria-etuliitteillä on kaksi tyyppiä: ominaisuudet jotka kuvaavat ominaisuuksia, jotka eivät todennäköisesti muutu koko sivun elinkaaren aikana, ja valtiot jotka antavat tietoa asioista, jotka voivat usein muuttua käyttäjän vuorovaikutuksen vuoksi.
Maamerkkien roolit
Maamerkin roolit ovat ARIAn roolimallien tunnetuimpia muotoja (toiset ovat abstraktit roolit, widget-roolit ja asiakirjarakenteen roolit). Maamerkin roolit auttavat kehittäjiä tunnistamaan suuria tuntuvia alueita verkkosivulla, jonka apuvälineiden käyttäjät voivat haluta päästä nopeasti.
ARIA-maamerkin rooleja on 8, ja ne on lisättävä attribuutteina niihin liittyviin HTML-tunnisteisiin.
roolia =”lippu”
Bannerin rooli on tarkoitettu käytettäväksi pääasiassa koko sivustoon liittyvään sisältöön, ei vain yksittäisiin sivuihin. Se lisätään yleensä attribuuttina sivuston pääotsikkoon logon ja muun tärkeän sivuston kattavan informaation osalta. On tärkeää, että voit käyttää bannerin roolia vain kerran HTML-asiakirjoissa tai sovelluksissa.
roolia =”tärkein”
Tärkein maamerkin rooli liittyy asiakirjan pääsisältöön. Sitä ei voi käyttää useammin kuin kerran HTML-sivulla. Se seuraa yleensä Navigointirooli on tarkoitettu käytettäväksi osoittamaan aluetta, joka sisältää navigointielementtejä, kuten linkkejä ja luetteloita sivustossa. Täydentävä maamerkki rooli kuvaa lisäsisältöä, joka liittyy sivuston pääsisältöön. Se on sijoitettava samaan tasoon DOM-hierarkiassa kuin Contentinfo-rooli ilmoittaa käyttäjäagentteille alueen olemassaolosta, jossa löytyy erilaisia metatietoja, kuten tekijänoikeustietoja, oikeudellisia ja tietosuojalausuntoja. Sitä käytetään tyypillisesti sivuston alatunnisteeseen. Lomakkeen maamerkki rooli merkitsee lomaketta, joka odottaa käyttäjän syöttöä. Käytä hakulomakkeita, joita sinun pitäisi käyttää Hakutoiminto on melko itsestään selvä, sen tarkoituksena on auttaa aputeknologioita tunnistamaan verkkosivuston hakutoiminnot. Voit käyttää sovelluksen maamerkki roolia alueella, jonka haluat julistaa web-sovellukseksi, eikä Web-dokumentiksi. Ei ole suositeltavaa sisällyttää sitä perinteisiin verkkosivustoihin, sillä se auttaa apuohjelmia siirtymään normaalista selaustilasta sovellusten selaustilaan. Käytä tätä maamerkkiä vain hyvin huolellisesti. Vaikka roolien avulla voit määrittää HTML-tunnisteiden merkityksen, tilat ja ominaisuudet antavat käyttäjälle lisätietoja siitä, miten he voivat vuorovaikutuksessa niiden kanssa. Sekä tilat että ominaisuudet on merkitty aria-etuliitteiset ominaisuudet syntaksiin aaria-*. Tunnetuimmat ARIA-attribuutit ovat luultavasti aria-vaadittu ominaisuus ja aria-tarkistettu tila. Aria-pakollinen on a omaisuus koska se on tuloelementin pysyvä ominaisuus (eli käyttäjän on täytettävä se), kun taas aria-check on a osavaltio koska valintaruutu voi usein muuttaa sen arvoa käyttäjän vuorovaikutuksen vuoksi. Valtiot ja ominaisuudet ottavat joskus merkkiarvoja (rajoitettu joukko ennalta määritettyjä arvoja), esimerkiksi aria-live-ominaisuudessa voi olla 3 eri arvoa: pois päältä, kohtelias, itsevarma. Tämän esimerkin syntaksi näyttää tältä: Muissa tapauksissa aria-etukäteen määritettyjen attribuuttien arvoja edustaa jouset, numerot, kokonaislukuja, ID-viitteet tai tosi / epätosi arvot. Käytä suhde-määritteitä osoittamaan sivustosi eri elementtien välisiä suhteita, joita ei muuten voida määrittää asiakirjan rakenteesta. Esimerkiksi Kun olet asettanut ARIA-maamerkki-roolin HTML-sivun havaittavalle alueelle, se voi auttaa avustavia teknologioita paljon, jos vaihdat ARIA-etuliitettyjä tiloja ja lapsielementtien ominaisuuksia näytön tapahtumien mukaisesti. Tämä voi olla ratkaisevan tärkeää silloin, kun käyttäjien on toimittava vuorovaikutuksessa sivuston kanssa, esimerkiksi täyttämällä lomakkeen tai suorittamalla hakukysely. Saavutettavuuden suunnittelun yleinen nyrkkisääntö on, että käyttöliittymän nykyinen tila on aina ymmärrettävä apuvälineiden avulla. Jos käyttäjä esimerkiksi valitsee vaihtoehdon lomakkeessa, sen tulee näkyä myös aputeknologioissa. Tämä voidaan saavuttaa helposti käyttämällä aria-valittua tilaa seuraavalla syntaksilla: W3C: n WAI-ARIA-tekijänoikeuskäytännön ohjeet voivat antaa sinulle monia muita hyviä ideoita siitä, miten sivustosi visuaaliset ja käytettävissä olevat rajapinnat voidaan sovittaa oikein. ARIA-roolien ja attribuuttien käyttö voi joskus olla tarpeeton. Kun käytät HTML5: n semanttisia tunnisteita, kuten Esimerkiksi sitä ei tarvitse käyttää muoto maantieteellinen rooli määriteltäessä Joten jos olet jo lisännyt kätketty HTML-attribuutti lomakkeen syöttöön, ei ole tarpeen lisätä Aria-piilossa tila, koska selain sisältää sen oletusarvoisesti.. Viimeksi mainittu lisättiin W3C: n spesifikaatioihin tärkein ARIA: n maamerkki roolissa semanttiselle HTML-elementille. roolia =”suunnistus”
roolia =”täydentävä”
roolia = "main". Aiheeseen liittyviä viestejä, suosittuja artikkeleita, viimeisimmät kommentit ovat tyypillisiä esimerkkejä itsenäisestä täydentävästä sisällöstä.roolia =”contentinfo”
roolia =”muoto”
roolia = "Hae" sen sijaan.roolia =”Hae”
roolia =”hakemus”
Valinnat ja Ominaisuudet
Aria-etuliitteiden määritteiden syntaksi
ARIA-valtioiden ja ominaisuuksien käyttäminen
1. Rakenna suhteet elementtien väliseen suhteeseen
Aria-labelledby ominaisuus tunnistaa elementin, joka merkitsee nykyisen elementin.Aria-labelledby - monien muiden asioiden joukossa - voi sitoa otsikot ARIA-maamerkkialueisiin seuraavasti:Tämä on otsikko
Pääsisältö… 2. Synkronoi tilat ja ominaisuudet Elementin elinkaarella
3. Yhdistä visuaalinen ja esteettömät rajapinnat
.Älä käytä liikaa ARIA
tai , nykyaikaiset selaimet lisäävät oletusarvoisesti sopivan ARIA-semantiikan. Tällöin ei ole mitään järkeä määrittää ARIA-maamerkin roolit erikseen. elementti. Sen sijaan, että syntaksi on täysin riittänyt käyttämään vain . On myös tarpeetonta käyttää HTML: n alkuperäisiä attribuutteja yhdessä sopivan ARIA-määritteen kanssa.
