Bëni që aplikacionet tuaja në një faqe të funksionojnë me lexuesit e ekranit

Autor: Monica Porter
Data E Krijimit: 13 Marsh 2021
Datën E Azhurnimit: 15 Mund 2024
Anonim
Bëni që aplikacionet tuaja në një faqe të funksionojnë me lexuesit e ekranit - Krijues
Bëni që aplikacionet tuaja në një faqe të funksionojnë me lexuesit e ekranit - Krijues

Aplikacionet në një faqe paraqesin një sfidë të konsiderueshme të aksesit kur bëhet fjalë për komunikimin e ndryshimeve të pamjes. Pa një rifreskim të faqes, lexuesit e ekranit nuk marrin këto ndryshime të rëndësishme të ndërfaqes së përdoruesit, duke i lënë përdoruesit e dëmtuar nga shikimi të hutuar dhe të pavetëdijshëm.

Një zgjidhje është të krijoni një mesazh të bazuar në titullin e faqes dhe të shfrytëzoni një rajon ARIA drejtpërdrejt për të njoftuar qartë, përmes një mesazhi të dobishëm, se një pamje e re është ngarkuar. Së pari krijoni një funksion që thirret kur azhurnohet viewContent. AngularJS ofron një ngjarje $ viewContentLoaded për këtë qëllim. Në kodin e kontrolluesit, dëgjoni për ngjarjen dhe thirrni një funksion (në CoffeeScript):

app.controller 'PageController', ($ fushë, $ vendndodhje, $ http) -> $ fushë. $ në '$ viewContentLoaded', shpallë_pamje_shkarkuar

Në funksionin shpallje_shikimi_ngarkuar, azhurnoni titullin e faqes dhe njoftoni mesazhin. Ndërsa kornizat me një faqe nuk azhurnojnë automatikisht titujt e faqeve, mbajtja e titullit të faqes të sinkronizuar me pamjen aktuale përmirëson kuptimin e përdoruesve për pamjen.


Një mënyrë për ta bërë këtë është të përdorni një atribut të të dhënave diku në pamje për të ruajtur titullin e pamjes:

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

Tani krijoni një mesazh duke përdorur titullin e azhurnuar të faqes dhe njoftoni atë:

$ .announce (dokumenti. Titulli + ', shikimi u ngarkua')

$ .announce () është një funksion jQuery që përdor një rajon të vetëm të drejtpërdrejtë, jo të dukshëm për të njoftuar përmbajtjen. Kjo qasje ndihmon në thjeshtimin e kodit dhe përpjekjet për korrigjimin e gabimeve në krahasim me përdorimin ad hoc të rajoneve të drejtpërdrejta. Sidoqoftë, ka disa praktika më të mira për t'u mbajtur mend.

Së pari, krijoni një rajon të vetëm drejtues të drejtpërdrejtë në faqen tuaj për të njoftuar përmbajtjen duke përdorur aria-live = "i sjellshëm | pohues". Mos përdorni ndonjë rajon tjetër të drejtpërdrejtë, duke përfshirë rolet e rajonit të drejtpërdrejtë (p.sh. role = "alert | timer | log"). Një shembull rajoni i gjallë:

div aria-live = "i sjellshëm" id = "njoftues"> (Teksti i shtuar ose azhurnuar këtu do të shpallet) / div>

Së dyti, pastroni përmbajtjen e rajonit të drejtpërdrejtë pak pasi të keni azhurnuar përmbajtjen. Kjo parandalon përdoruesit të pengohen në mesazhet e vjetra.


Së fundi, si me çdo teknikë të hyrjes, përdorni $ .announce () me mençuri. Duhet të përdoret vetëm për të komunikuar azhurnime të rëndësishme të ndërfaqes së përdoruesit.

Fjalët: Patrick Fox

Patrick Fox është drejtor i teknologjisë Web UI në Razorfish në Austin. Ky artikull fillimisht u shfaq në numrin 271 të revistës net.

Te pelqen kjo? Lexoni këto!

  • Udhëzuesi i projektuesit për aksesin dixhital
  • Shkronjat më të mira falas të shkrimit
  • Zgjedhja falas e shkronjave të mbishkrimeve
Zgjedhja E Lexuesve
Klasikja ime e dizajnit: BMW R50 e vitit 1960
Lexo Më Shumë

Klasikja ime e dizajnit: BMW R50 e vitit 1960

Kla ikja ime e dizajnit ë htë motori BMW 1960 R50. Mbi 50 vjeç, ende funk ionon i kampion dhe duket mirë. Nga edilja e cilë i ë ë mirë e tilit të vetë...
20 dizenjot më të mira të atleteve të të gjitha kohërave
Lexo Më Shumë

20 dizenjot më të mira të atleteve të të gjitha kohërave

Pavarë i ht në e i njihni me një emër tjetër (trajnerë, goditje, vrapue , dap , o e në ra tin tim, 'bebet e mia'), nuk mund të mohohet që tërh...
Behance portofolin e javës: Jack Radcliffe
Lexo Më Shumë

Behance portofolin e javës: Jack Radcliffe

Jack Radcliffe ë htë një fotograf dhe arti t me qendër në Baltimore, Maryland. Fotografitë e tij, të prodhuara zakoni ht i një eri imazhe h të bëra n&...