Yhden sivun sovellukset asettavat merkittävän esteettömyyshaasteen, kun on kyse viestien näkymämuutoksista. Ilman sivun päivitystä näytönlukijat eivät poimi näitä tärkeitä käyttöliittymämuutoksia, jolloin näkövammaiset käyttäjät ovat hämmentyneitä ja tietämättömiä.
Yksi ratkaisu on luoda viesti sivun otsikon perusteella ja hyödyntää ARIA-live-aluetta ilmoittamaan hyödyllisen viestin avulla nimenomaisesti uuden näkymän lataamisesta. Luo ensin toiminto, jota kutsutaan, kun viewContent päivitetään. AngularJS tarjoaa tähän tarkoitukseen $ viewContentLoaded -tapahtuman. Kuuntele ohjainkoodissa tapahtuma ja kutsu toiminto (CoffeeScript-muodossa):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', announce_view_loaded
Päivitä sivun otsikko announce_view_loaded-toiminnossa ja ilmoita viesti. Vaikka yhden sivun kehykset eivät päivitä sivujen otsikoita automaattisesti, sivun otsikon synkronointi nykyisen näkymän kanssa parantaa käyttäjien ymmärrystä näkymästä.
Yksi tapa tehdä tämä on käyttää tietomääritettä jonnekin näkymässä näkymän otsikon tallentamiseen:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Luo nyt viesti käyttämällä päivitettyä sivun otsikkoa ja ilmoita siitä:
$ .announce (document.title + ’, näkymä ladattu’)
$ .announce () on jQuery-toiminto, joka käyttää yhtä, näkymättömää live-aluetta sisällön ilmoittamiseen. Tämä lähestymistapa auttaa yksinkertaistamaan koodia ja virheenkorjaustoimia verrattuna live-alueiden tapauskohtaiseen käyttöön. On kuitenkin olemassa muutamia parhaita käytäntöjä muistaa.
Luo ensin sivullesi yksi ilmoittajan live-alue ilmoittaaksesi sisällöstä aria-live = "kohtelias | itsevarmana". Älä käytä muita live-alueita, mukaan lukien live-alueiden roolit (esim. Rooli = "hälytys | ajastin | loki"). Esimerkki elävästä alueesta:
div aria-live = "kohtelias" id = "kuuluttaja"> (tähän lisätty tai päivitetty teksti ilmoitetaan) / div>
Toiseksi tyhjennä suoran alueen sisältö pian sisällön päivittämisen jälkeen. Tämä estää käyttäjiä kompastumasta vanhoihin viesteihin.
Lopuksi, kuten minkä tahansa esteettömyystekniikan kohdalla, käytä $ .announce () järkevästi. Sitä tulisi käyttää vain merkittävien käyttöliittymäpäivitysten välittämiseen.
Sanat: Patrick Fox
Patrick Fox on Web-käyttöliittymätekniikan johtaja Razorfishissa Austinissa. Tämä artikkeli ilmestyi alun perin verkkolehden numerossa 271.
Piditkö tästä? Lue nämä!
- Suunnittelijan opas digitaaliseen saavutettavuuteen
- Parhaat ilmaiset fonttien fontit
- Ilmainen graffiti-fonttien valinta
