Neka vaše pojedinačne stranice rade s čitačima zaslona

Autor: Monica Porter
Datum Stvaranja: 13 Ožujak 2021
Datum Ažuriranja: 15 Svibanj 2024
Anonim
How to use the Narrator screen reader in Windows 10 | Microsoft
Video: How to use the Narrator screen reader in Windows 10 | Microsoft

Aplikacije za jednu stranicu predstavljaju značajan izazov za pristupačnost kada je riječ o komuniciranju promjena pogleda. Bez osvježavanja stranice čitači zaslona ne prihvaćaju ove važne promjene korisničkog sučelja, a korisnici s oštećenim vidom ostaju zbunjeni i nesvjesni.

Jedno je rješenje stvoriti poruku na temelju naslova stranice i iskoristiti ARIA područje uživo da izričito putem korisne poruke najavi da se učitao novi pogled. Prvo stvorite funkciju koja se poziva kada se viewContent ažurira. AngularJS u tu svrhu pruža događaj $ viewContentLoaded. U kodu kontrolera preslušajte događaj i pozovite funkciju (u CoffeeScriptu):

app.controller 'PageController', ($ opseg, $ lokacija, $ http) -> $ opseg. $ na '$ viewContentLoaded', announce_view_loaded

U funkciji identify_view_loaded ažurirajte naslov stranice i najavite poruku. Iako okviri s jednom stranicom ne ažuriraju automatski naslove stranica, sinhroniziranje naslova stranice s trenutnim prikazom poboljšava razumijevanje prikaza korisnika.


Jedan od načina za to je korištenje atributa podataka negdje u prikazu za spremanje naslova pogleda:

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

Sada izradite poruku pomoću ažuriranog naslova stranice i najavite je:

$ .announce (document.title + ’, pogled učitan’)

$ .announce () je funkcija jQuery koja koristi jednu, nevidljivu regiju uživo za najavu sadržaja. Ovaj pristup pomaže pojednostaviti kôd i napore za uklanjanje pogrešaka u usporedbi s ad hoc upotrebom živih regija. Međutim, postoji nekoliko najboljih praksi koje treba zapamtiti.

Prvo stvorite jedinstvenu regiju uživo za 'najavljivača' da biste najavili sadržaj pomoću aria-live = "pristojno | asertivno". Ne koristite nijednu drugu regiju uživo, uključujući uloge regije uživo (npr. Role = "alert | timer | log"). Primjer žive regije:

div aria-live = "ljubazno" id = "najavljivač"> (Tekst ovdje dodan ili ažuriran bit će objavljen) / div>

Drugo, očistite sadržaj žive regije ubrzo nakon ažuriranja sadržaja. To sprječava korisnike da nalete na stare poruke.


Napokon, kao i kod bilo koje tehnike pristupačnosti, razumno upotrijebite $ .announce (). Treba ga koristiti samo za priopćavanje značajnih ažuriranja korisničkog sučelja.

Riječi: Patrick Fox

Patrick Fox je direktor internetskog korisničkog sučelja u tvrtki Razorfish u Austinu. Ovaj se članak izvorno pojavio u broju 271 časopisa net.

Sviđa li vam se ovo? Pročitajte ovo!

  • Dizajnerov vodič za digitalnu dostupnost
  • Najbolji besplatni fontovi skripti
  • Besplatan izbor fontova za grafite
Preporučen
Opasnosti od novih imena domena
Unaprijediti

Opasnosti od novih imena domena

Je te li znali da po toji .travel naziv domene? Nema ih mnogo. Ali zapravo je do tupan gotovo edam godina.Ipak, ako tražite pojmove za odmor na Googleu, imat ćete reću da vidite web mje to .travel bez...
5 pametnih rasporeda na Instagramu koje morate vidjeti
Unaprijediti

5 pametnih rasporeda na Instagramu koje morate vidjeti

Kao društvena platforma za odabir mnogih dizajnera i ilu tratora, In tagram zahtijeva kreativno oko i inovativan dodir da bi e profil doi ta i ticao. I još od redizajna web tranice 2015. godine - mnog...
Vodič web dizajnera za Flexbox
Unaprijediti

Vodič web dizajnera za Flexbox

Je te li već počeli kori titi modul Flek ibilni ra pored okvira u vojim projektima? Iako modul po toji već neko vrijeme, dvije u glavne barijere koje prečavaju razvojne programere da ga kori te kao al...