Priverskite savo vieno puslapio programas dirbti su ekrano skaitytuvais

Autorius: Monica Porter
Kūrybos Data: 13 Kovas 2021
Atnaujinimo Data: 15 Gegužė 2024
Anonim
Priverskite savo vieno puslapio programas dirbti su ekrano skaitytuvais - Kūrybinis
Priverskite savo vieno puslapio programas dirbti su ekrano skaitytuvais - Kūrybinis

Vieno puslapio programos kelia nemenką prieinamumo iššūkį, kai reikia pranešti apie rodinio pakeitimus. Neatnaujinę puslapio, ekrano skaitytuvai neatsižvelgia į šiuos svarbius vartotojo sąsajos pakeitimus, todėl regėjimo negalią turintys vartotojai tampa sumišę ir nesupranta.

Vienas iš sprendimų yra sukurti pranešimą, pagrįstą puslapio pavadinimu, ir pasinaudoti tiesioginiu ARIA regionu, kad naudingu pranešimu aiškiai paskelbtumėte, kad įkelta nauja peržiūra. Pirmiausia sukurkite funkciją, kuri iškviečiama atnaujinus „viewContent“. „AngularJS“ šiam tikslui teikia $ viewContentLoaded įvykį. Valdiklio kode klausykite įvykio ir iškvieskite funkciją („CoffeeScript“):

„app.controller“ „PageController“, ($ sritis, $ vieta, $ http) -> $ sritis. $ ant '$ viewContentLoaded', announce_view_loaded

Funkcijoje announce_view_loaded atnaujinkite puslapio pavadinimą ir paskelbkite pranešimą. Nors vieno puslapio struktūros automatiškai neatnaujina puslapių pavadinimų, išlaikant puslapio pavadinimą sinchronizuotą su dabartiniu rodiniu, vartotojai geriau supranta rodinį.


Vienas iš būdų tai padaryti yra duomenų atributo naudojimas kur nors rodinyje, kad būtų išsaugotas rodinio pavadinimas:

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

Dabar sukurkite pranešimą naudodami atnaujintą puslapio pavadinimą ir paskelbkite apie tai:

$ .announce (document.title + ’, rodinys įkeltas’)

$ .announce () yra funkcija „jQuery“, kuri naudoja vieną nematomą tiesioginį regioną turinio paskelbimui. Šis metodas padeda supaprastinti kodą ir derinimo veiksmus, palyginti su gyvų regionų ad hoc naudojimu. Tačiau reikia atsiminti keletą geriausių praktikų.

Pirmiausia sukurkite vieną tiesioginį „diktoriaus“ regioną savo puslapyje, kad paskelbtumėte turinį naudodami „aria-live =“ mandagus | tvirtinantį “. Nenaudokite jokių kitų tiesioginių regionų, įskaitant tiesioginio regiono vaidmenis (pvz., Role = "alert | timer | log"). Gyvo regiono pavyzdys:

div aria-live = "mandagus" id = "diktorius"> (Čia bus paskelbtas pridėtas ar atnaujintas tekstas) / div>

Antra, netrukus atnaujinę turinį, išvalykite tiesioginio regiono turinį. Tai neleidžia vartotojams suklupti nuo senų pranešimų.


Galiausiai, kaip ir bet kurią prieinamumo techniką, protingai naudokite $ .announce (). Jis turėtų būti naudojamas tik pranešant apie svarbius vartotojo sąsajos naujinius.

Žodžiai: Patrickas Foxas

Patrickas Foxas yra „Web UI“ technologijų direktorius „Razorfish“, Ostine. Šis straipsnis iš pradžių pasirodė grynojo žurnalo 271 numeryje.

Jums tai patiko? Perskaitykite tai!

  • Dizainerio skaitmeninio prieinamumo vadovas
  • Geriausi nemokami scenarijų šriftai
  • Nemokamas grafiti šriftų pasirinkimas
Leidiniai
14 puikių nemokamų fotoaparatų programų
Atrasti

14 puikių nemokamų fotoaparatų programų

Ne varbu, ar labai domitė avo fotografija, ar tie iog norite žai ti u keliai pa paudimai čia ir ten, šio nemokamo kamerų programo lei jum ek perimentuoti u vi ų rūšių vaizdai .Jei negalvojate mokėti, ...
Protingi darbo su vaizdais būdai sistemoje „InDesign“
Atrasti

Protingi darbo su vaizdais būdai sistemoje „InDesign“

„InDe ign“ yra patikima žurnalų ir leidybo pramonė šakni : tai pagrindini įranki , naudojama gaminant vi ką nuo „Vogue“ iki kompiuterių meno.Nor maketo ir leidinio dizaina yra „InDe ign“ e mė, jo univ...
„Nintendo Switch“ apžvalga
Atrasti

„Nintendo Switch“ apžvalga

„ witch“ parašų prijungimo / nešiojamieji režimai galbūt yra pakankama prieža ti jį į igyti. Tačiau ji taip pat iūlo geriau ią „Nintendo“ žaidimų biblioteką, kurią, nepai ant žeme nių pecifikacijų ir ...