Pange oma ühe lehe rakendused ekraanilugejatega tööle

Autor: Monica Porter
Loomise Kuupäev: 13 Märts 2021
Värskenduse Kuupäev: 15 Mai 2024
Anonim
Pange oma ühe lehe rakendused ekraanilugejatega tööle - Loominguline
Pange oma ühe lehe rakendused ekraanilugejatega tööle - Loominguline

Ühelehelised rakendused on vaate muudatustest teavitamisel märkimisväärne juurdepääsetavuse probleem. Ilma lehe värskendamiseta ei võta ekraanilugejad neid olulisi kasutajaliidese muudatusi, jättes nägemispuudega kasutajad segadusse ja teadmatusse.

Üks lahendus on luua sõnum lehe pealkirja põhjal ja kasutada ARIA reaalajas regionaalselt kasuliku sõnumi abil selgesõnaliselt uut vaate laadimist. Kõigepealt looge funktsioon, mida kutsutakse, kui viewContent värskendatakse. AngularJS pakub selleks otstarbeks sündmust $ viewContentLoaded. Kontrolleri koodis kuulake sündmust ja kutsuge funktsioon (CoffeeScriptis):

app.controller 'PageController', ($ ulatus, $ asukoht, $ http) -> $ ulatus. $ on '$ viewContentLoaded', announce_view_loaded

Funktsioonis announc_view_loaded värskendage lehe pealkirja ja kuulutage teade. Kuigi ühe lehe raamistikud ei uuenda lehtede pealkirju automaatselt, parandab lehe pealkirja sünkroonimine praeguse vaatega kasutajate vaadet.


Üks võimalus selleks on vaate pealkirja salvestamiseks kusagil vaates kasutada andmete atribuuti:

document.title = $ (’[data-viewtitle]’). andmed ’viewtitle’

Nüüd looge värskendatud lehe pealkirja abil sõnum ja teatage sellest:

$ .announce (document.title + ’, vaade laaditud’)

$ .announce () on funktsioon jQuery, mis kasutab sisu kuulutamiseks ühte, nähtamatut reaalajas piirkonda. See lähenemisviis aitab lihtsustada koodi ja silumispüüdlusi võrreldes aktiivsete piirkondade ad hoc kasutamisega. Siiski on meeles pidada mõningaid häid tavasid.

Kõigepealt looge oma lehel üks „diktori” reaalajas piirkond, et aria-live = "viisakas | enesekehtestav" abil sisust teada anda. Ärge kasutage muid aktiivseid piirkondi, sealhulgas reaalajas olevaid rolle (nt role = "alarm | taimer | log"). Näide elavast piirkonnast:

div aria-live = "viisakas" id = "teadustaja"> (siin lisatud või uuendatud tekst teatatakse) / div>

Teiseks tühjendage otsepiirkonna sisu varsti pärast sisu värskendamist. See takistab kasutajatel vanade sõnumite otsa komistamast.


Lõpuks, nagu ka kõigi juurdepääsetavustehnikate puhul, kasutage mõistlikult $ .announce (). Seda tuleks kasutada ainult oluliste kasutajaliidese värskenduste edastamiseks.

Sõnad: Patrick Fox

Patrick Fox on Austini Razorfishi veebi kasutajaliidese tehnoloogia direktor. See artikkel ilmus algselt netiajakirja 271. numbris.

Meeldis see? Loe neid!

  • Disaineri juhend digitaalse juurdepääsetavuse kohta
  • Parimad tasuta skriptifondid
  • Tasuta graffiti fontide valik
Uued Postitused
Loomad ületavad uusi horisonte: nädala moekujundused
Loe Rohkem

Loomad ületavad uusi horisonte: nädala moekujundused

Lockdown on äratanud ootamatute kohtade loovu t, olgu ellek ii filmitegijad, ke mei terdavad kodu t lühifilme, köögikun tnikud kat etavad uu i uuendu likke ret epte, või inime...
Tippprinteri valimine: juhend
Loe Rohkem

Tippprinteri valimine: juhend

Teoreetili elt on tippkla i printeri valimi e teadmine ka ulik kõigile loomemajandu e töötavatele inime tele, olgu ii kun tnik, loovjuht või graafiline di ainer. Trükitehnoloo...
iPadi kunst: kuidas kõikjal visandada ja maalida
Loe Rohkem

iPadi kunst: kuidas kõikjal visandada ja maalida

Järgmi e digitaal e maali loomi ek pole vaja Maci ja nutitelefoni. Tahvelarvuti või nutitelefon teeb eda.Autori Richard Mathe oni portree (ülal) lõi Flickri ka utaja New Chemical H...