okay, quindi stavi fissando questo
Scivola qui per alcuni minuti probabilmente
chiedendosi perché ci sono persone che cavalcano
bici mi capita di amare davvero le biciclette
e siamo ad Amsterdam, quindi sembra strano
di adattarsi a usare questa immagine per dirlo
l’accessibilità riguarda le persone le persone
in questa immagine ce n’è uno o due
ipovedenti e acque L
chi sta pilotando una bicicletta tandem Steve
sawsan chi è cieco è seduto dietro di lei
abbiamo fatto un’attività in cui abbiamo accoppiato
persone ipovedenti con vista
persone che abbiamo fatto per un giro in bicicletta in tandem
ed è stato fantastico e l’esperienza
per me come un ciclista che ha un cieco
persona seduta dietro di me parlando di
quanto si sentiva libera mentre cavalcavamo questo tandem
in bici da San Diego per me questo è
cos’è l’accessibilità per te
non avere sempre una persona cieca seduta
dietro di te dicendo questo è fantastico grazie
per renderlo accessibile ma
le persone sono sempre lì e lo fanno sempre
abbiamo bisogno di noi per creare siti web e web
applicazioni che sono accessibili in modo che
li stiamo supportando anche quando lo sono
non sei seduto dietro la nostra spalla
ecco alcuni di voi che sono venuti ad ascoltare
per me Marcy Sutton parla di accessibile
angularjs Vengo da Seattle negli Stati Uniti
dove sono un ingegnere di accessibilità, lo sono
effettivamente unendo Adobe quando torno a casa
in una nuova posizione, ma sono anche un
membro della squadra di nucleo angolare e per il
ultimi 10 o 11 mesi ho lavorato
sulla progettazione di materiali angolari in un’azienda
dove ero appaltatore essenzialmente ma
Ho lavorato sull’accessibilità e
angolare per quasi un anno ora così oggi
mi sentirai parlare di
sfide di accessibilità in angolare in
design dei materiali e tutte le cose che
Ho raccolto l’anno scorso il mio
le slide sono online su marcy sutton calm /
andare a con loro sono anche su github e
sono nella nota a piè di pagina delle mie diapositive
puoi accedervi in qualsiasi momento
accessibilità e angolare non ha
il miglior curriculum che ammetterò e
questo è il motivo per cui mi sono appassionato perché io
capacità con applicazioni angolari ha
è stata una parte piuttosto triste della comunità
l’opinione di angolare era che fosse
piuttosto terribile per l’accessibilità di essere
onestamente ho un tweet dal mio
il collega Paul Adam ha in mano un
l’immagine di un libro di testo su angolare ha
un semplice modello HTML con qualche forma
controlli in esso ma lo sta chiamando
Le app web di angularjs non sono mai accessibili
perché anche i libri su di esso iniziano
esempi inaccessibili è lo stesso con
i documenti ci sono innumerevoli post sul blog
là fuori dove se stai mostrando
qualcosa che è specifico di JavaScript
forse non hai intenzione di spendere tutto il
tempo per rendere accessibile il tuo HTML ma
quello che succede come sottoprodotto di quello è
che stai parlando di anti-schemi
per l’accessibilità e così via
anti-pattern che lo rende un blog
pubblicare o in un libro di testo mostra il
persona che scrive il codice JavaScript che
è una buona pratica, quindi tutto il tempo
di questi esempi sono stati costruiti fino a a
cultura di applicazioni web inaccessibili
ma quello ha reso un’opportunità ho visto un
opportunità per renderlo migliore e
migliorare l’accessibilità di angolare
applicazioni quindi è quello che stiamo andando
di cui parlare un po ‘ oggi
come sono entrato in angolare l’ ho menzionato
era ho visto l’occasione e volevo
rendere l’accessibilità migliore in Engler
attraverso l’ essere rumoroso su Twitter, in realtà
è stato invitato a parlare per l’ultima volta in Europa
cadono e attraverso questo impegno è sorta
di un in poche parole come sono diventato
coinvolto con la squadra angolare e loro
mi ha invitato a lavorare su materiale angolare
a tempo pieno, quindi ho lavorato su open
fonte come un appaltatore il mio ultimo giorno
quello era due settimane fa quindi è ancora
molto fresco nella mia mente oggi stiamo andando
parlare di design dei materiali e
accessibilità e alcune delle sfide
che ho trovato in quello cose
abbiamo migliorato essendo a tempo pieno
accessibilità persona su angolare I have a
waffle è una cialda dei cartoni animati se mi ridacchia
probabilmente sarà perché sto guardando
questa immagine di un waffle ma questo questo
immagine della cialda in realtà
segna un concetto importante in
accessibilità e nel client reso
applicazioni così al di fuori dell’angolare
app se vedi la waffle questa è una
concetto importante in accessibilità e
nelle applicazioni web lato client siamo
parlerò anche di ng Aria
modulo di accessibilità in angolare 1 e
Sono il principale manutentore di ciò
modulo Sto lavorando su alcuni miglioramenti
per questo ci sono altre persone che
Contribuisci anche a questo, ma lo faremo
parla di che aria è e che cosa
non è e quello che può fare per te lo faremo
parlare di goniometro il fine-fine
quadro di prova per angolare e come
puoi usare il goniometro per testare
accessibilità nelle vostre applicazioni e
poi toccheremo un po ‘su angolare
2 che è decisamente bello da vedere
i discorsi questa mattina su angolare 2 il
la storia dell’accessibilità in angolare è
già meglio di quanto non fosse un angolare 1
quindi lo tocco un po ‘ ma
principalmente su ciò su cui ci concentreremo
è angolare 1 e di nuovo se vedi il
waffle significa che è importante
concetto nel design dei materiali di accessibilità
l’abbiamo sentito nominare alcune volte
già oggi ci sto lavorando
per un certo periodo il design dei materiali l’obiettivo di
è creare un design coeso
linguaggio su tutte le piattaforme quindi non c’è
una versione di Android c’è un polimero
implementazione del design dei materiali e
le specifiche di progettazione sono una specie di
ispirazione e il punto di partenza
usiamo per materiale angolare per dire come
dovrebbe formare i controlli si comportano quando un utente
interagisce con loro o ciò che è comune
tavolozze di colori e tipografia e cose
questo lo renderà coesivo a tutti
piattaforme così perché Google è molto
impegnato nel design dei materiali, ovviamente
aveva senso rendere angolare
implementazione e c’è più di
uno ma il materiale angolare ufficiale
l’implementazione è la progettazione materiale per
angolare è a materiale angularjs org
questo è il sito della documentazione che c’è
una ricca comunità su github molti
problemi di github aperti
e vestiti ci sono alcune missioni e
un sacco di attività della comunità che rende
è abbastanza combattuto in battaglia è molto
quadro completo alcune delle chiavi
cose nel design dei materiali e un angolo
che sono importanti per l’accessibilità
la prima cosa di cui parleremo
su di te vedi i waffle quindi questo significa
questo è un argomento importante per l’interattività
le cose che sono interattive dovrebbero essere
raggiungibili da una tastiera dovrebbero essere
utilizzabile da uno screen reader questo garantisce
che le persone con disabilità lo faranno
essere ancora in grado di interagire con la tua app
quindi ho un paio di esempi da angolare
materiale che include una barra degli strumenti che sono
interagire con esso un po ‘
un po ‘ così se uso la tastiera e I tab
su questa barra degli strumenti posso effettivamente vedere il mio
concentrati su di esso e poi posso colpire
tasti diversi e dalla tastiera
è questo esempio non è in realtà ma
non è cablato per fare altro che
è raggiungibile dalla tastiera, quindi il mio
l’attenzione è su questo pulsante e poi vado a
l’ elemento successivo ed è una casella di controllo è
carina è un po ‘piccola sulla mia
schermo ma la casella di controllo quando registro
su di esso ha un cerchio di inchiostro che
Cresce dal centro e questo è un
stile che vedi nel design dei materiali
un po ‘così, mentre sposto la mia attenzione
la pagina ottengo feedback su dove sono
e se colpisco la barra spaziatrice posso attivare a
spuntare la casella o un interruttore on e off in questo modo
assicura che le persone che fanno affidamento sulle parole chiave
o gli screen reader saranno effettivamente in grado
usare questi controlli e il sembra
piuttosto semplice ma sorprendentemente questo livello
di supporto non è comune in tutti
materiale angolare o in ogni materiale
implementazione della progettazione o no
ricevi feedback dalla tastiera o da te
solo non sarà in grado di raggiungerlo affatto
dalla tastiera perché cosa succede
come sviluppatori, tendiamo a progettare e
sviluppare per noi stessi e noi lo dimentichiamo
non tutti possono usare il trackpad o no
tutti possono usare il mouse così ce la facciamo
lavora con uno stato di hover e fai clic su
con un mouse pensiamo che il nostro lavoro sia fatto
Ti sfido a guardare un po ‘di più
o prova a guardarlo da un altro
prospettiva e navigare le tue app utilizzando
una tastiera e uno screen reader così dentro
iniziare con la tastiera è il
la cosa più semplice inoltre è così
checkbox e cambia esempio i pulsanti
sono anche raggiungibili da tastiera e
Ho un po ‘di feedback a colori uno
cosa ho spinto il design del materiale
la squadra su un po ‘è il colore
contrasto di questi ed è probabilmente
in realtà questo sembra abbastanza buono sul
monitorare su un monitor a minor contrasto o se
hai avuto un deficit visivo di qualche tipo
il livello di contrasto che in realtà
ottenere come gli stili che sono nel
linee guida sulla progettazione dei materiali che potrebbero essere
migliorato di più quindi è qualcosa che spero
per vedere un po ‘in futuro
perché il contrasto di colori che noi
attualmente potrebbero presentare problemi per
persone che hanno problemi di vista ma
almeno nella parte interattiva
di questo ogni ogni controllo o pulsante è
raggiungibile dalla tastiera e dalla volontà
guarda un po ‘di come possiamo realmente
fare quel lavoro ma poi è anche possibile
possiamo fare cose da questi controlli così
Ho anche alcuni pulsanti radio lasciami
assicurati di essere sull’articolo giusto, sì così
se uso i tasti freccia attraverso questo
selezione dei pulsanti di opzione che sono
essenzialmente un controllo quindi è una casella di controllo
un oggetto isolato controllerà o
deseleziona qualcosa un gruppo di radio
i pulsanti si escludono a vicenda e così via
vuoi selezionarne solo uno se lo sei
usando la tastiera se usi la freccia
le chiavi dovresti essere in grado di attivarti
sapere scegliere un singolo pulsante di opzione
semantica in realtà poiché abbiamo molto
di tempo tornerò indietro e guarderò
quello che sembra davvero guarderemo
negli strumenti di sviluppo per vedere cosa rende questi
interattivo quindi guardiamo il
esempio di pulsante radio prima quindi la radio
il gruppo è è l’oggetto che noi in realtà
scheda su e il pezzo importante
Voglio che tu guardi qui è il
tabIndex quindi aggiungendo un indice di tabulazione sulla
questo oggetto perché questo non è in realtà un
pulsante radio nativo è un angolare
direttiva e questo è molto comune
questo è il motivo per cui ho voluto approfondire
e mostralo a te il gruppo radio MD
è il controllo che abbiamo impostato su un angolo
materiale per creare pulsanti radio da selezionare
a loro perché è un gruppo radio MD
in sostanza un div aggiungiamo un indice tab di 0
e quindi puoi effettivamente raggiungerlo
controllo e quindi usiamo lo stesso
JavaScript per cambiare tra gli articoli
ma l’abilità di raggiungere usando tab
indice è quello che volevo che tu vedessi così
prossimo grande argomento dopo l’interattività che
puoi sempre controllare se c’è qualcosa
interattivo semplicemente usando la tastiera
ma per screen reader e assistive
le tecnologie è davvero importante
usiamo la semantica il problema è che a
angolare e anche nei componenti web noi
ora possiamo creare elementi personalizzati che possiamo
creare le nostre direttive nominate e
è fantastico ma dovremmo saperlo
qualcosa su ciò che questo fa a
screen reader quindi in materiale angolare il
L’ API HTML per la creazione di un pulsante è md
pulsante come un elemento così nel tuo lo sai
nel nome del tag hai appena detto md dash
pulsante e quindi inserire il testo e quindi
il materiale angolare sarà effettivamente trans
lo ha capito in un vero bottone questo è
importante capire che se tu fossi
uno specialista dell’accessibilità e tu
guardato questo si direbbe wow che md
il pulsante non è in realtà un pulsante ed è
importante sapere che siamo effettivamente
trasformandolo in un pulsante e ce ne sono alcuni
pro e contro di farlo in quel modo
ma quello che volevo che voi due vedeste è il
codice che ha effettivamente rendering al
fine di questo processo di inclusione dove
sostituisce il nome dell’elemento personalizzato con
un elemento pulsante nativo quindi questo pulsante
l’elemento è raggiungibile dalla tastiera
perché i pulsanti sono elementi nativi loro
vieni con tabindex che in realtà non lo facciamo
è necessario aggiungere tabindex su un nativo
elemento che attiverà anche eventi da
la tastiera che non dobbiamo fare
qualsiasi cosa speciale possiamo solo mettere
clicca direttamente su un pulsante nativo
Elemento in modo da da sapendo che siamo
aggiungendo alcuni
ci sono volute versioni che questo può migliorare
l’accessibilità delle nostre applicazioni
fare un ulteriore passo avanti così il pulsante
l’elemento è un elemento nativo altro
esempio sarebbe un input nativo
per cui ottieni molta accessibilità
libero perché questi controlli sono stati costruiti
essere controlli di forma ma perché possiamo
creare i nostri articoli e un buon esempio
per dare un’occhiata più da vicino questo è il md
casella di controllo e abbiamo già guardato il
gruppo di pulsanti di opzione md che era un’abitudine
elemento che abbiamo creato che siamo
aggiungendo tutto l’accessibilità indietro
in così è in realtà un sacco di lavoro e
Consiglierei di iniziare con un nativo
input perché se guardiamo all’esempio
della casella di controllo MD per rendere questo
accessibile dobbiamo aggiungere tabindex così noi
avere un tabindex di 0 e ciò che fa è
significa che l’ordine è tuo
codice appare nel tuo documento è il
ordina l’ordine di tabulazione che otterrà se
usi l’indice di tabulazione di 0 numeri più in alto
di 0 devi effettivamente gestire il
ordine di tabulazione di tutto e quello può essere
ingombrante quindi lo consiglierei a te
stanno creando un controllo personalizzato come a
checkbox si dovrebbe aggiungere indice tab di 0
e quindi sarà raggiungibile a
in realtà dire che questo div fantasia non lo è
un div ma una casella di controllo per uno screen reader
dobbiamo aggiungere un ruolo e il concetto di
un ruolo è che potresti pensarlo come cosa
questa cosa fa così vuoto
checkbox che è essenzialmente un div
può raggiungerlo ora ma quando lo schermo
lettore schede utente sulla casella di controllo noi
voglio che sia annunciato come casella di controllo
possiamo farlo aggiungendo un ruolo di
checkbox e ce ne sono di diversi tipi
di ruoli sai che c’è un pulsante radio
ruolo e ci sono ruoli fondamentali e
cose veramente belle in aria che se
non hai familiarità con Aria che sta in piedi
per Internet accessibile accessibile
applicazioni e ho una risorsa a
la fine delle mie diapositive sull’utilizzo di Aria in
HTML perché è importante che usiamo
correttamente non possiamo semplicemente mettere alcun vecchio
cosa nell’attributo ruolo che non possiamo
compongono i ruoli non possiamo solo decidere che
è il nuovo attributo dei dati
un ruolo è un’aria è uno standard che ha a
set di attributi approvati che possiamo
aggiungere quindi il ruolo di casella di controllo è uno di
questi ruoli riservati ed essenzialmente
annuncia la cosa come una casella di controllo um
altra cosa che dobbiamo aggiungere perché
questo è un div di fantasia è l’ aria controllata
attributo e quindi questo dirà uno schermo
lettore se la casella di controllo è selezionata
o non potresti chiederti perché
non dovrei semplicemente usare il controllato
attribuire l’attributo verificato di
di per sé funzionerà solo su un nativo
inserisci quindi se hai un tipo di input di
Casella di controllo si potrebbe utilizzare l’HTML5
attributo verificato ma perché questo è md
dash checkbox ed è un nome tag personalizzato
dobbiamo usare Aria e cosa fa
questo è un buon esempio che è un
esempio reale di vita reale di dove usiamo
Aria e l’idea è che si sta riempiendo
le lacune in cui questo è un elemento personalizzato
e non ha tutto questo
supporto per l’accessibilità possiamo aggiungere il
supporto dell’accessibilità compilando il
lacune con Aria così i tre principali
componenti di Aria se sei nuovo ad esso
sono gli stati e le proprietà del ruolo
il ruolo è di nuovo ciò che fa questa cosa
gli stati sono cose come Aria
controllato o Aria disabilitata e poi
c’è un secchio pieno di proprietà
di cose aggiuntive e ti incoraggio
se sei se sei a questo livello tu
dovrebbe leggere su un’aria
attributo quando vai ad usarlo io
tipicamente andrà a guardare qualcosa
dirò che voglio usare Aria ha controllato che io sia
andando a rinfrescare la mia memoria e fare
sicuro che sto usando questo correttamente in modo che io
sapere quale dovrebbe essere il supporto per tastiera
per questa cosa quindi cosa troverai
per Aria ho controllato per esempio io sono
creando una casella di controllo e ho intenzione di andare
guarda aria controllata e io scoprirò
che il comportamento previsto della tastiera è
si seleziona la casella di controllo e si colpisce
la barra spaziatrice che abbiamo visto nella mia demo
prima ho colpito la barra spaziatrice e
dovrebbe abilitare e disabilitare la casella di controllo
e così questo è il tipo di cose che
dovresti sapere
quindi un’altra importante area di accessibilità
e le applicazioni client renderizzate sono le
concetto di un testo alternativo quanti
di te hai idea di cosa sia un testo
l’alternativa è una tazza va bene così parecchi
è una specie di un termine che una volta tu
so cosa vuol dire che è come va bene
questo, ma voglio fare in modo che sia
non solo questo gergo parla che non lo fa
ha senso quindi è un’alternativa testuale
testo che può essere utilizzato da uno screen reader
per sapere cosa è qualcosa perché se
stai usando un’interfaccia e quando siamo
progettare cose che il design non è solo
l’alternativa del testo visivo è un modo di raccontare
un utente di screen reader che cosa è qualcosa
quindi alcuni esempi di codice su come creare
alternative testuali una molto comune
esempio è quello di avvolgere il testo che dovrebbe essere
per uno screen reader ma non è necessario
essere reso o non ha bisogno di essere
visualizzato possiamo solo avvolgerlo in un intervallo
e aggiungi una classe CSS e ci sono
diversi metodi per creare ciò che è
chiamato visivamente testo visivamente nascosto
nascosto il metodo che usiamo in angolare
il materiale è penso lo stesso del
esempio di html5 boilerplate e questi sono
classi di utilità che sono totalmente a posto
copiare da altri posti e così via
classe visivamente nascosta, solo che la penso
Clips il testo e forse lo riduce a
un pixel alto e mi piace questo
raccolta di cose che l’idea era
visivamente nascosto è che in realtà
rende il testo ma non lo vedi
il vecchio metodo era di bloccarlo
lo schermo utilizzando una proprietà sinistra e a
posizione assoluta, penso che sia il metodo
per fare ciò si è evoluto, ma il fondamentale
l’idea è che stai nascondendo visivamente il
testo all’interno di qualche altro elemento
un altro esempio di alternativa testuale
sarebbe l’etichetta per un modulo di input così
se noi e questo siamo super comuni da dimenticare
in realtà stavo solo guardando il
angular 2 documentation e questo è un
l’oggetto che dimenticano è importante
che effettivamente etichettiamo una casella di controllo o
pulsante radio così
l’utente dello screen reader saprà cosa
il controllo è per e penso nel
all’inizio abbiamo visto un’immagine da a
libro di testo questa è una cosa molto comune
è stato il problema nel libro di testo
esempio è stato che abbiamo dimenticato un’etichetta così
etichettare correttamente un input come questo
HTML 101 e sono davvero dispiaciuto che io
Devo dirtelo, ma lo dimentichiamo
abbastanza spesso che vale la pena ricordare
basta aggiungere l’ attributo 4 su un’etichetta
elemento abbinarlo a un input e quindi
saranno accoppiati roba semplice per a
pulsante dire che hai avuto un pulsante che aveva
un’icona in esso e si voleva avere
solo l’icona visiva ma il testo questo
è molto comune, solo che non vogliamo
testo vogliamo solo l’icona a senso unico
effettivamente etichettare qualcosa è aggiungere il
Attributo etichetta Aria che potresti utilizzare anche
questo sull’input sopra se non l’hai fatto
avere un’etichetta effettiva che ha reso il rendering
o non faceva parte del design che potevi
aggiungi un attributo etichetta aria e lo farebbe
etichetta anche qualcosa e infine
dovresti aggiungere un attributo alt per qualsiasi
immagine che ha contenuto e ho
smettila di parlare e vai avanti come mia
didascalia perché sono un po ‘ sconcertante
in questo momento sta andando molto bene
voi ragazzi imporre le alternative testuali
quindi volevo tirarlo fuori perché dentro
materiale angolare ho visto di nuovo un
opportunità di rendere un quadro un importante
quadro più accessibile così abbiamo aggiunto
utilità nel quadro per effettivamente
incoraggiare le migliori pratiche e forse
ricordati se hai dimenticato di etichettare
qualcosa che non posso dirti quanti
la gente mi chiede come disattivare questa cosa
perché dimentichiamo tutti i buchi alle gambe
apparentemente così l’ esempio che io sono
mostrando è il pulsante di opzione così nel
documenti materiale angolare ce ne sono alcuni
diversi esempi di pulsanti radio in
la demo di uno di loro è un’icona, quindi è possibile
scegli tra un avatar l’immagine di
di per sé non fornisce alcun testo
etichettalo devi fare un ulteriore passo avanti
e cercando di essere un framework accessibile
che devi ricordare a qualcuno quando
hanno dimenticato un dettaglio importante questo
l’utilità accederà alla console che tu
Ho dimenticato un’etichetta che ti indicherà
il nodo che in realtà hai dimenticato il
etichetta e in questo modo puoi farlo
aiutarti a trovarlo e rintracciarlo
invece di voi lanciando un avvertimento
e dicendo hey hai dimenticato di etichettarlo
in realtà ti indirizzerà allo specifico
nodo e trovo che sia davvero importante
per davvero aggiustare la cosa ma molto
di persone pensano che questo sia il rumore e
non pensano che l’accessibilità sia
come fanno loro non è solo un requisito
per la loro app questo è davvero importante
roba perché dovremmo creare app
che tutti possono usare e anche se lo sei
solo creando una demo o è solo
qualcosa che sto hackerando insieme se
lo stai solo hackerando insieme
gli avvisi nella console non dovrebbero essere a
grosso problema ma se in realtà stai creando
app che la gente avrebbe usato io sfida
tu a guardare il tuo pubblico e il tuo
ipotesi su chi pensi tu
il pubblico è posso scommettere che potrei trovare
un esempio di qualcuno che userebbe il tuo
app di fitness o la tua app di whisky o
qualunque cosa sia che tu sia
è probabile che siano qualcuno
utilizzando uno screen reader che avrebbe bisogno
questa alternativa testuale quindi questa è solo una
pratica che potremmo usare per provare e
rendere le app più accessibili a tutti
sono tutti quelli che usano questa struttura
potrebbe rendere un’app più accessibile così
correggi questi avvisi invece di disabilitarli
la console come se qualcuno ci credesse
dovrebbe fare per riparare effettivamente questi avvertimenti
per l’esempio del pulsante radio MD I
avere il codice sorgente senza l’etichetta
quindi possiamo guardare questo e dire bene
si sta ripetendo su alcuni dati è
mostrando che in realtà sputerà
un pulsante di opzione per ciascun elemento nel
il set di dati all’interno del pulsante radio è
la direttiva icona vuota che puoi
utilizzare per inserire icone in cose come
pulsanti e barre degli strumenti e pulsanti di opzione
ma manca una sorta di testo
o l’icona ne ha bisogno perché il
icona è la cosa che il contenuto sia
che potrebbe essere etichettato o possiamo solo aggiungere
un’etichetta sul genitore perché il genitore
del pulsante radio è il reale
controllalo
ha bisogno dell’etichetta e quindi cosa fa
quando lo etichettiamo significa che il
lo user reader in realtà lo saprà
cosa è questo pulsante radio per questo
particolare pulsante radio in modo che possiamo vedere
non c’è testo, c’è solo un
l’ icona al suo interno per risolvere effettivamente
questo avviso basta aggiungere l’etichetta Aria e
poi ha tirato il contenuto da quei dati
impostare e quindi etichetterà la cosa
è abbastanza facile da risolvere per non farlo
sai perché la gente non lo fa solo ma
perché ho questa domanda un sacco i
ho pensato di mostrarti come effettivamente
aggiustalo, quindi aggiungi solo un’etichetta d’aria
rendere tutti più felici gli altri
concetto principale in angolare accessibile
le applicazioni sono l’idea di messa a fuoco
gestione e in realtà questo è vero
fuori dall’angolare come possiamo vedere dal
waffle ogni volta che esegui il rendering
qualcosa sul client dice di avere
viste e quando si aggiorna qualcosa
rerenderò la vista immagina se tu
erano focalizzati su un elemento di forma che era
in una sezione della tua pagina che ha ottenuto
posteriore per qualche motivo forse tu
fatto una selezione e il tuo obiettivo era
l’oggetto e lo spazza via
concentrati quindi se stai effettivamente facendo affidamento su a
tastiera è super frustrante se
ti stai affidando a uno screen reader
lo rende completamente inutilizzabile perché tu
non so dove eri necessariamente così
se ti riprende in cima al
pagina che devi recuperare completamente
e questo può fare qualcosa di carino
inutilizzabile quindi in materiale angolare lì
sono alcuni componenti che aggiungiamo attenzione
gestione in e uno di quelli è il
lato nav e in realtà sto andando a mostrare
un video di come è fatto
inizia da questo in modo che il nostro focus inizi
la parte superiore della pagina e come noi realmente
vado a schermo intero con questo
okay, iniziando il focus nella parte superiore di
la pagina passa al collegamento del contenuto
è venuto fuori e l’abbiamo colpito
ciò che il salto al collegamento di contenuti è che
ci salterà da questo lato sinistro
navigazione perché è una sorta di dolore
per sfogliare ogni singolo oggetto in modo che questo
è il motivo per cui saltare i collegamenti è così fantastico perché
se ti affidi a una tastiera, puoi farlo
basta saltare da tutto ed è carina
basso overhead per aggiungere un collegamento salta così noi
avere uno nel materiale angolare
banchine così abbiamo colpito il link che invierà
il nostro obiettivo principale è il principale
area dei contenuti sulla destra e di nuovo è
Sto avendo spiegare davvero un sacco di
la roba perché il contrasto di colore è
non abbastanza alto, quindi voglio indicarlo
fuori a voi dove il nostro obiettivo è così ora
siamo nel campo in cui ci hanno cacciato
la barra degli strumenti mentre apriamo questa barra laterale
il diretto che il componente ha effettivamente
gestione mirata built-in così che cosa
per impostazione predefinita, riproduciamo di nuovo questo
mentre apri il navigatore laterale il predefinito in
questo componente è solo su cui concentrarsi
l’involucro del nav laterale come a
quadro non necessariamente sempre
vuoi mettere a fuoco l’elemento del wrapping
abbiamo avuto molte richieste per farti sapere
bisogno di concentrarsi su una cosa specifica non
che le persone volevano disabilitarlo
completamente, ma che volevano
personalizzalo a loro piacimento e così noi
aggiunto supporto per l’invio di focus a
oggetti arbitrari e vedremo questo
più tempo in modo da poter vedere il che abbiamo colpito il
pulsante di attivazione che apre la barra laterale
manda il tuo focus su di esso e poi quando
chiudiamo il nav lato colpendo il
Tasto Esc o facendo clic sul pulsante
al di fuori di esso invierà il focus a
l’oggetto che l’ha attivato così l’ idea
è che il tuo obiettivo è stato rimandato indietro
e avanti e lo stiamo gestendo per te
e ogni volta che scrivi un’app che è
client reso o reagisce
o brace o spina dorsale o spina dorsale
queste cose questo è importante
concetto quindi il codice per il lato nav il
componente reale per il navigatore laterale è md
nav lato e poi all’interno di esso è possibile
inserire qualsiasi combinazione di direttive secondarie
che vuoi puoi nidificare altre cose
al suo interno per esempio l’input
inserimento di testo in Inghilterra
materiale l’API per questo è il md
contenitore di input e quindi all’interno di esso
potresti mettere un’etichetta che potresti mettere a
inserisci la cosa che voglio chiamare tua
attenzione a questa direttiva bambino
che abbiamo creato per renderlo possibile
concentrarsi arbitrariamente su ciò che vuoi
questo sito nav andrà a cercare il
Direttiva sulla prova di fuoco laterale md quando
scopre che invierà l’attenzione lì
invece dell’elemento di avvolgimento e questo
è un modello che penso che abbiamo bisogno di
aggiungilo ai dialoghi di qualsiasi altro componente
che gestiamo l’attenzione di default che abbiamo
per renderlo un po ‘più personalizzabile
perché quello che ho trovato è quello
ci sono infiniti casi d’uso per ciascuno di
questi componenti e infinito
combinazioni di componenti e la dimensione
del github materiale angolare
il repository lo evidenzierà ma è così
davvero bello vedere come effettivamente le persone
voglio usare la gestione del focus non solo
che come oh è bello lo fa per
voi ma oh ho il caso d’uso specifico
che tutto ad un tratto ora che questo è un
opzione le persone stanno pensando a come
potrebbero inviare attenzione ai loro
componenti sì sì il nav laterale lo fa
penso che il dialogo si concentri
gestione ma non è così personalizzabile
abbastanza ancora così un altro concetto in
materiale angolare o inaccessibile
di angolare sta notificando l’utente così
abbiamo visto l’interattività che abbiamo visto
gestione della messa a fuoco semantica che notifica il
l’utente è un’altra cosa che è in realtà un
vantaggio nelle applicazioni lato client
che possiamo dire che stai scrivendo in un modulo
e hai qualche messaggio di errore e
ma tu sei concentrato su un oggetto tu
non voglio mandare l’attenzione di qualcuno fuori
a un messaggio di avviso perché ciò potrebbe
essere stridenti potrebbe essere fonte di confusione, quindi noi
bisogno di una sorta di meccanismo web per
annunciare cambiamenti quando qualcosa è
accadendo sia messaggi di errore o
forse stai filtrando una lista e tu
vuoi mantenere l’ attenzione degli utenti
da qualche parte ma tu vuoi annunciare ehi
hai filtrato una lista ci sono 13 partite
o qualcosa del genere quindi questo concetto
di notifica all’utente è importante in
applicazioni client rese per
accessibilità e un modello in cui utilizziamo
questo in materiale angolare è il
completamento automatico in modo che il nome del tag sia md
dash autocomplete e cosa tu cosa
essenzialmente è inserire un tag di input
e quindi puoi collegarlo a qualsiasi dato
fonte locale o remota e it
aggiungerà un elenco di cose che puoi
mentre digiti il filtro è così importante
che a ha annunciato che ci sono
opzioni ma poi mentre lo digiti filtri
più e annuncia più cose così come a
esempio comune sarebbe un elenco di stati
o intendo che abbiamo demo per il
completamento automatico ma quello che ho sul
lo schermo è una lista di stati quindi scrivo w
ci sono quattro partite e poi come me
digita un’altra lettera che li filtrerà
più il codice per questo e il concetto
di notificare all’utente su cui ci stiamo affidando
qualcosa chiamato vivo e questo è
un’altra parte di questa aria standard e
è un concetto abbastanza grande ma è super
cool che è possibile aggiungere un ruolo di stato
c’è anche il ruolo di avviso e il
i livelli di rivivere sono assertivi
ed educato, quindi è importante saperlo
quali sono queste differenze perché
a volte dobbiamo scegliere quale
livello a seconda di ciò che l’utente
l’interazione dovrebbe essere così e un
avviso assertivo sarebbe qualcosa di simile
un grande errore come qualcosa di cui hai bisogno
annunciare immediatamente userebbe il
ruolo assertivo ma se è qualcosa
forse potrebbe aspettare fino a qualunque cosa
l’utente sta facendo quindi è possibile utilizzare questo
ruolo passivo o educato per un
completamento automatico sei nel mezzo
digitandoti hai bisogno di dirtelo
in quel secondo che l’errore è così tu
può effettivamente legarli insieme
se l’annuncio del filtro ha atteso fino a
tutto è stato fatto non lo faremo
in realtà sapere cosa fosse
annunciando così per filtrare un elenco di
afferma che abbiamo bisogno di un feedback immediato così noi
usa il tiro di allarme o l’assertivo
ambientazione
quindi per il completamento automatico in realtà
annunciare questi cambiamenti abbiamo una sorta di
una direttiva bambino nascosta chiamata
stato di arie e questa direttiva
tecnicamente è reso così se lo metti
non visualizzare nessuno su di esso non annuncerà
allo screen reader deve essere
presente quando la pagina si carica così sono
alcune cose che dovresti sapere e il
cose che hanno l’aria vivono ruoli e
le proprietà su di loro devono essere effettivamente
presente e quindi l’idea è che tu
basta aggiungere messaggi a questo elemento e
diventa il centro messaggi che quando
un utente ha uno screen reader che lo esegue
annunceremo appena questi cambiamenti così il
completamento automatico ci sono due parti
HTML che viene inserita dal
controller del completamento automatico e quindi
c’è il l’interruttore in in
JavaScript per il controller lo farà
aggiungi messaggi a questa cosa e come
compaiono e scompaiono lo farà
in realtà basta collegarli allo schermo
lettore così da avvisare l’utente che usi re
viva vale la pena sottolineare che
angolare ama l’open source e il
il repository angolare è enorme
il deposito materiale angolare è enorme
anche l’angolare 2 è on on github
ma puoi andare e contribuire puoi andare
su problemi di file e dire hey questo
componente in Inghilterra materiale è possibile
essere meglio su Android o qualsiasi altra cosa
qualunque sia il tuo caso d’uso che amano avere
quella parte di input di questa cultura creata
ng aria e ng aria è un modulo che era
creato per fare un po ‘di sollevamento pesante per
roba di accessibilità in cui il quadro
dovrebbe davvero gestirlo per te
come se stai usando ng disabilitato
non dovrebbe anche andare a gestire il
aria per quella aria così fa per quello
sei stato nel framework da allora
angolare 1.3 ma non c’è davvero nulla a
critico che richiede che tu usi
1,3 angolari come se si utilizza angolare
1.2 potresti inserire Aria come a
dipendenza del modulo e andrebbe bene
ma c’è una buona documentazione su
online
sul punto del sito Web di Doc angolare a
includi Aria che hai appena incluso come
dipendenza e poi c’è in realtà a
oggetto di configurazione in cui puoi girare
le cose dentro e fuori potresti dire di no
Voglio tabindex ho intenzione di gestire tale
e puoi semplicemente impostarlo su false in
oggetto di configurazione e tu lo includi semplicemente come
una dipendenza proprio accanto a angolare in
i tuoi script ng aria aggiunge il supporto a a
poche direttive scelte tra cui il modello ng
e disabilita ng-show ng hide ng-click
ng messaggi doppio clic e ng e
ci sono alcuni miglioramenti a questo arrivo
in futuro ma questo fa qualcosa
questo lo rende piuttosto utile come
dipendenza per esempio ng disabilitato come I
accennato sarebbe un po ‘un dolore per
usa ng disabilitato ma poi anche a
gestire Aria disabilita ciò che fa
simile all’esempio controllato come I
menzionato solo l’attributo verificato
funziona su un input nativo disabilitato è il
stessa situazione quindi solo in realtà
disabilitato un input nativo se stai usando
una casella di controllo vuota o div fantasia o alcuni
elemento personalizzato in realtà disabilitato
in uno screen reader devi usare Aria
e quello sarà per un’API di accessibilità
che in realtà disabiliterà la cosa così
ng Aria quando usi ng disabilitato lo farà
basta sputare Aria disabilitato e aggiornare
come tale condizione cambia così che è a
esempio abbastanza utile ng-clic questo è
una delle cose più grandi che Aria ha provato
risolvere e fa un buon lavoro
la cosa che sta cercando di risolvere è ng
clicca su un div ed è tecnicamente te
potrebbe aggiungere un evento click a un div
JavaScript nativo ma per qualche motivo
questo è diventato molto popolare in angolare
e penso sia perché non l’hanno fatto
scoraggiarlo e io ho un div con un
NG fai clic su di esso sul metodo che sta chiamando
è oh no non l’hai fatto perché per favore non farlo
fai questo perché diamo un’occhiata a cosa ng
Aria ha a che fare per risolvere questo problema in modo che il
problema con questo abbiamo un div che abbiamo
ng-click ricorda di cosa stavamo parlando
circa con l’interattività e il
roba semantica in anticipo
dover aggiungere tabindex a questo ovviamente
quello non ha tabindex questo non
avere un evento stampa chiave su di esso perché il
cliq non sparerà su un div che è il
lo stesso con JavaScript nativo e HTML
questo dovrebbe essere un elemento pulsante ma è
un div e questo succede così come a
manutentore di Aria ho guardato il
paesaggio e ha detto cosa potrebbe fare Aria
che in realtà migliorerebbe
accessibilità delle app web con tutto il
l’unica cosa che la gente dovrebbe fare è
aggiungi questa dipendenza bene questo ng-click
la situazione è piuttosto grande e sono venuto
in tutto eccitato e ottimista e poi io
ho imparato come Harry questo è perché tutti
il browser ci gestisce in modo diverso e così io
Sono orgoglioso di dire che ho presentato il mio primo
bug in un quadro importante con ng aria
ora è riparato ma c’è una sezione
di ng area dove sarebbe perché cosa
abbiamo risolto il problema aggiungendo il tabindex e
in realtà è già stato aggiunto da
ng model se stai usando quello che sarà
aggiungilo anche con ng-click ma aggiunto
questa scheda Nix ma dovevi ancora andare e
aggiungi ng keypress a fianco di ng-click in modo da
correggi che siamo sotto il cofano se aggiungi
e fai clic su un div lo faremo anche noi
legare l’evento stampa chiave e lo farà
sparare come se si stesse usando la tastiera
in realtà spara la tua richiamata
Funziona un passo in più siamo andati e
aggiunto il ruolo del pulsante che è un po ‘
controverso perché potresti esserlo
intenzionalmente usando ng-clic in qualche modo
e così questo ha cercato di risolverlo per come il
maggior parte dei casi d’uso, ma ovviamente tu
potrebbe essere completamente informato su
accessibilità e fare questo per il
giuste ragioni e quindi questo potrebbe farti
un po ‘a disagio, ma l’idea è
che possiamo fare di più questi tuffatori cliccati
accessibile semplicemente aggiungendo Aria
bug che ho menzionato è che non l’abbiamo fatto
effettivamente verificare se l’elemento che
il click su di esso era un controllo nativo
o no quindi se fosse un pulsante quale
in realtà ha l’evento stampa chiave
ne licenzierebbe due
funzioni di callback quindi è stato divertente
è stato un buon tempo e qualcosa di simile
introdotto in angolare è ora risolto
e ho imparato molto su cosa sia questo
dovrebbe fare come questo genere di cose
succede nei browser sapendo che a
l’elemento del pulsante effettivamente fa scattare un clic I
non l’avevo mai guardato da vicino
l’evento click quindi questa è un’utilità
quello realmente usa appena un tasto e poi
non dovremmo fare cose come questa
non dovrebbe venire e scrivere un modulo
quello prova a riparare l’accessibilità sul
web perché usi solo un pulsante e
tutto sarebbe molto meglio così noi
vedere di nuovo la cialda, questa è una grande cosa
come usare i pulsanti di utilizzo della marcatura semantica
perché la quantità di lavoro che tu e
Dovrò fare per rendere il web più
accessibile sarà molto meno ok
proiettore in realtà sta prendendo molto
più tempo ho pensato rapidamente al goniometro
è un’applicazione per la riga di comando di questo
gira su un webdriver di selenio che puoi
scegli quale framework di test vuoi e
è ottimo per l’integrazione continua se
vuoi impedire un materiale accessibile
dal renderlo fuori nel mondo
ha scritto un plug-in per il goniometro che tu
può usare per testare il tuo sito con il
strumenti di sviluppo per l’accessibilità al cromo
che è una libreria open source e 10
e I / O che è un’API di accessibilità
eseguirà ogni test che lo scrivi
eseguirà il tuo codice contro questi
utilità e dirvi se avete
problemi di installazione per il goniometro
plugin di accessibilità puoi farlo
con lo sviluppatore di accessibilità del cromo
libreria di strumenti lo abbassa come un MPN
modulo e quindi è sufficiente aggiungere questo
flag di true o false per abilitarlo 10
e I / O è come entrambi sono
opzionale ma l’ opzione I / O del tenone è
più robusto richiede una chiave API e
un account la versione di cromo è gratuita
che ho un piccolo grafico nelle mie diapositive
circa dovrei quale si può usare il
Lo strumento di sviluppo per l’accessibilità di Chrome è
gratis viene eseguito localmente sulla tua macchina così
il tuo codice non farà crescere le gambe
la versione è più robusta e hanno
effettivamente liberato dei loro liberi
conti limitati ora, ma se tu fossi
in realtà
test per la conformità all’accessibilità
tenone ti darebbe modo più pace di
mente e più copertura di prova così potresti
dite bene perché dovrei usare il tenone è
perché è un insieme di test più robusto
alcune strategie di test che puoi controllare
per le etichette in modo da poter controllare le cose
come l’esempio del pulsante radio che potresti
convalidare che hai usato il corretto
ruolo di aria o l’attributo corretto
perché in realtà è solo roll non lo è
un tiro rapido è solo roll e questi
sono errori davvero facili anche se mi piacciono
Ho fatto l’errore che ti ho detto
conoscere il ruolo dell’immagine e ho scritto che sono un GE
invece di IMG è un po ‘il mio esempio
che vado sempre perché ho fatto
questo errore quindi se automatizzi il tuo
testarlo troverà questa roba per
tu puoi trovare ciò che l’arte guarda Daria
proprietà per assicurarsi che si aggiornino
al momento giusto può testare il tuo
interazioni e assicurarsi di avere
tabindex o che le cose sono raggiungibili
e infine puoi controllare il colore
contrasto che è una cosa che deve
migliorare rapidamente la progettazione dei materiali
angolare 2 che abbiamo già sentito
oggi un po ‘su alcuni dei
maggiori cambiamenti per l’interazione dell’utente
lato che sono decisamente più in
lato ingegneria utente o ingegneria UX
non c’è più definizione di direttiva
oggetto è basato su più componenti web
il tuo legame direttamente con proprietà e
non attributi così per cose come utente
interazione questi cambiamenti di sintassi sono
piuttosto importante non c’è più JQ
involucro di dom luce perché non abbiamo bisogno
le web API sono diventate molto
meglio negli ultimi cinque anni e poi
es6 moduli che in realtà non hanno molto
fare con l’interazione dell’utente inerte
sono semplicemente fantastici per il legame con l’evento
usato per fare ng focus e ng click e
allora sai usare l’interpolazione e il lato
di attributi sul pulsante nativo per
esempio ora abbiamo solo al posto del ng
concentrati su come legare l’evento usando
parentesi e poi come abbiamo questo è
in realtà una sorta di evoluzione sta accadendo
con l’angolare 2 in questo momento è il
prefisso di proprietà
non è una buona idea solo inquinare
la tua app con spaziatura senza nome senza nome
Proprietà ho un esempio di waffle
ID se si effettivamente prefisso il
La proprietà ID mi serve per andare effettivamente e
controlla ma se hai avuto qualche arbitrario
proprietà che stavi usando, lo faresti
voglio prefisso con qualcosa e
c’è una discussione davvero interessante su
github sulle decisioni che sono
facendo in angolare 2 e puoi andare e
partecipa è piuttosto cool angolare 2
include il supporto di arias quindi non abbiamo bisogno
ng Aria in angular 2 stanno facendo molto
più ora per includerlo effettivamente dal
inizio e quindi è abbastanza bello non lo facciamo
ho bisogno di una cosa che aiuti la banda come Angie Aria
vieni a sistemarlo, quindi sono entusiasta di vedere
come questo si evolve in futuro di nuovo te
può contribuire all’angolare 2 su github
ci sono problemi di accessibilità aperti e
le conversazioni in corso su te conosci modale
dialoga cose che hanno bisogno di input come
hanno bisogno di essere ricordati di messa a fuoco
gestione e semantica e tutti
queste cose penso che ci sia già un
conversazione in corso ma volevo quello che ho
volevo dirti che è possibile
partecipare se non si è già avvolti
cose su ho alcune risorse nel mio
diapositive compreso l’utilizzo di Aria e HTML
questo è abbastanza importante se lo sei
scrivendo queste direttive personalizzate come md
checkbox dovresti sapere cosa sono
le regole di Aria il cromo
strumenti di sviluppo di accessibilità sia il
estensione del browser e libreria di controllo
Ho appena tenuto un discorso su automatizzato
test di accessibilità a jas conf e
era tutto su quel lato delle cose a
un po ‘sulla roba del goniometro
e così via c’è un’angolazione ufficiale
post sul blog di novembre a proposito di ng
Aria e quali sono gli obiettivi
erano e tipo di capire dove
iniziare ho una documentazione
per il plugin di accessibilità del goniometro
che consiglio vivamente di utilizzare
perché è solo un’installazione NPM
è super facile da inserire nella tua app
se sei curioso di saperne di più sul
complessità dell’accessibilità in angolare
il mio collega Dylan Burrell ha fatto davvero
buona serie
sull’applicazione MVC accessibile a fare
che è il client canonico reso
esempio di applicazione ma non lo fanno
avere sempre la migliore accessibilità quindi
quello era buono e infine io
avere un post su come controllare un sito web
per l’accessibilità se ti va bene
è bello parlare con noi per 45 minuti
cosa farò dopo che potrebbe essere un bene
posto per iniziare è una domanda
Ho creato la waffle sì e ha fatto
mi fa ridere la cialda è quadrata e
ha occhi finti come se fossi letteralmente
ho cercato occhi finti e quello è gli occhi
è come se avesse una faccia da spugna
sì, ho creato la waffle ma se tu
avere accessibilità legittima
domande posso rispondere a quelle due certe
la domanda riguardava la tastiera
scorciatoie penso che sarebbe fantastico
finché lavorano con gli screen reader
che hanno le loro scorciatoie da tastiera
Penso di non essermi intromesso in questo discorso
ma c’è il concetto di virtuale
cursore in uno screen reader dove c’è
fondamentalmente una barriera tra l’utente
con lo screen reader e il reale
browser web dove verrà installato lo screen reader
cattura l’input così come se volessi colpire il
Tasto H per saltare attorno a due titoli
una scorciatoia di riserva per uno screen reader
quindi potrebbe essere qualcosa a cui pensare
ma tutto ciò che puoi fare per fare la tastiera
accessibilità migliori pollici per me
tu
tu
Scivola qui per alcuni minuti probabilmente
chiedendosi perché ci sono persone che cavalcano
bici mi capita di amare davvero le biciclette
e siamo ad Amsterdam, quindi sembra strano
di adattarsi a usare questa immagine per dirlo
l’accessibilità riguarda le persone le persone
in questa immagine ce n’è uno o due
ipovedenti e acque L
chi sta pilotando una bicicletta tandem Steve
sawsan chi è cieco è seduto dietro di lei
abbiamo fatto un’attività in cui abbiamo accoppiato
persone ipovedenti con vista
persone che abbiamo fatto per un giro in bicicletta in tandem
ed è stato fantastico e l’esperienza
per me come un ciclista che ha un cieco
persona seduta dietro di me parlando di
quanto si sentiva libera mentre cavalcavamo questo tandem
in bici da San Diego per me questo è
cos’è l’accessibilità per te
non avere sempre una persona cieca seduta
dietro di te dicendo questo è fantastico grazie
per renderlo accessibile ma
le persone sono sempre lì e lo fanno sempre
abbiamo bisogno di noi per creare siti web e web
applicazioni che sono accessibili in modo che
li stiamo supportando anche quando lo sono
non sei seduto dietro la nostra spalla
ecco alcuni di voi che sono venuti ad ascoltare
per me Marcy Sutton parla di accessibile
angularjs Vengo da Seattle negli Stati Uniti
dove sono un ingegnere di accessibilità, lo sono
effettivamente unendo Adobe quando torno a casa
in una nuova posizione, ma sono anche un
membro della squadra di nucleo angolare e per il
ultimi 10 o 11 mesi ho lavorato
sulla progettazione di materiali angolari in un’azienda
dove ero appaltatore essenzialmente ma
Ho lavorato sull’accessibilità e
angolare per quasi un anno ora così oggi
mi sentirai parlare di
sfide di accessibilità in angolare in
design dei materiali e tutte le cose che
Ho raccolto l’anno scorso il mio
le slide sono online su marcy sutton calm /
andare a con loro sono anche su github e
sono nella nota a piè di pagina delle mie diapositive
puoi accedervi in qualsiasi momento
accessibilità e angolare non ha
il miglior curriculum che ammetterò e
questo è il motivo per cui mi sono appassionato perché io
capacità con applicazioni angolari ha
è stata una parte piuttosto triste della comunità
l’opinione di angolare era che fosse
piuttosto terribile per l’accessibilità di essere
onestamente ho un tweet dal mio
il collega Paul Adam ha in mano un
l’immagine di un libro di testo su angolare ha
un semplice modello HTML con qualche forma
controlli in esso ma lo sta chiamando
Le app web di angularjs non sono mai accessibili
perché anche i libri su di esso iniziano
esempi inaccessibili è lo stesso con
i documenti ci sono innumerevoli post sul blog
là fuori dove se stai mostrando
qualcosa che è specifico di JavaScript
forse non hai intenzione di spendere tutto il
tempo per rendere accessibile il tuo HTML ma
quello che succede come sottoprodotto di quello è
che stai parlando di anti-schemi
per l’accessibilità e così via
anti-pattern che lo rende un blog
pubblicare o in un libro di testo mostra il
persona che scrive il codice JavaScript che
è una buona pratica, quindi tutto il tempo
di questi esempi sono stati costruiti fino a a
cultura di applicazioni web inaccessibili
ma quello ha reso un’opportunità ho visto un
opportunità per renderlo migliore e
migliorare l’accessibilità di angolare
applicazioni quindi è quello che stiamo andando
di cui parlare un po ‘ oggi
come sono entrato in angolare l’ ho menzionato
era ho visto l’occasione e volevo
rendere l’accessibilità migliore in Engler
attraverso l’ essere rumoroso su Twitter, in realtà
è stato invitato a parlare per l’ultima volta in Europa
cadono e attraverso questo impegno è sorta
di un in poche parole come sono diventato
coinvolto con la squadra angolare e loro
mi ha invitato a lavorare su materiale angolare
a tempo pieno, quindi ho lavorato su open
fonte come un appaltatore il mio ultimo giorno
quello era due settimane fa quindi è ancora
molto fresco nella mia mente oggi stiamo andando
parlare di design dei materiali e
accessibilità e alcune delle sfide
che ho trovato in quello cose
abbiamo migliorato essendo a tempo pieno
accessibilità persona su angolare I have a
waffle è una cialda dei cartoni animati se mi ridacchia
probabilmente sarà perché sto guardando
questa immagine di un waffle ma questo questo
immagine della cialda in realtà
segna un concetto importante in
accessibilità e nel client reso
applicazioni così al di fuori dell’angolare
app se vedi la waffle questa è una
concetto importante in accessibilità e
nelle applicazioni web lato client siamo
parlerò anche di ng Aria
modulo di accessibilità in angolare 1 e
Sono il principale manutentore di ciò
modulo Sto lavorando su alcuni miglioramenti
per questo ci sono altre persone che
Contribuisci anche a questo, ma lo faremo
parla di che aria è e che cosa
non è e quello che può fare per te lo faremo
parlare di goniometro il fine-fine
quadro di prova per angolare e come
puoi usare il goniometro per testare
accessibilità nelle vostre applicazioni e
poi toccheremo un po ‘su angolare
2 che è decisamente bello da vedere
i discorsi questa mattina su angolare 2 il
la storia dell’accessibilità in angolare è
già meglio di quanto non fosse un angolare 1
quindi lo tocco un po ‘ ma
principalmente su ciò su cui ci concentreremo
è angolare 1 e di nuovo se vedi il
waffle significa che è importante
concetto nel design dei materiali di accessibilità
l’abbiamo sentito nominare alcune volte
già oggi ci sto lavorando
per un certo periodo il design dei materiali l’obiettivo di
è creare un design coeso
linguaggio su tutte le piattaforme quindi non c’è
una versione di Android c’è un polimero
implementazione del design dei materiali e
le specifiche di progettazione sono una specie di
ispirazione e il punto di partenza
usiamo per materiale angolare per dire come
dovrebbe formare i controlli si comportano quando un utente
interagisce con loro o ciò che è comune
tavolozze di colori e tipografia e cose
questo lo renderà coesivo a tutti
piattaforme così perché Google è molto
impegnato nel design dei materiali, ovviamente
aveva senso rendere angolare
implementazione e c’è più di
uno ma il materiale angolare ufficiale
l’implementazione è la progettazione materiale per
angolare è a materiale angularjs org
questo è il sito della documentazione che c’è
una ricca comunità su github molti
problemi di github aperti
e vestiti ci sono alcune missioni e
un sacco di attività della comunità che rende
è abbastanza combattuto in battaglia è molto
quadro completo alcune delle chiavi
cose nel design dei materiali e un angolo
che sono importanti per l’accessibilità
la prima cosa di cui parleremo
su di te vedi i waffle quindi questo significa
questo è un argomento importante per l’interattività
le cose che sono interattive dovrebbero essere
raggiungibili da una tastiera dovrebbero essere
utilizzabile da uno screen reader questo garantisce
che le persone con disabilità lo faranno
essere ancora in grado di interagire con la tua app
quindi ho un paio di esempi da angolare
materiale che include una barra degli strumenti che sono
interagire con esso un po ‘
un po ‘ così se uso la tastiera e I tab
su questa barra degli strumenti posso effettivamente vedere il mio
concentrati su di esso e poi posso colpire
tasti diversi e dalla tastiera
è questo esempio non è in realtà ma
non è cablato per fare altro che
è raggiungibile dalla tastiera, quindi il mio
l’attenzione è su questo pulsante e poi vado a
l’ elemento successivo ed è una casella di controllo è
carina è un po ‘piccola sulla mia
schermo ma la casella di controllo quando registro
su di esso ha un cerchio di inchiostro che
Cresce dal centro e questo è un
stile che vedi nel design dei materiali
un po ‘così, mentre sposto la mia attenzione
la pagina ottengo feedback su dove sono
e se colpisco la barra spaziatrice posso attivare a
spuntare la casella o un interruttore on e off in questo modo
assicura che le persone che fanno affidamento sulle parole chiave
o gli screen reader saranno effettivamente in grado
usare questi controlli e il sembra
piuttosto semplice ma sorprendentemente questo livello
di supporto non è comune in tutti
materiale angolare o in ogni materiale
implementazione della progettazione o no
ricevi feedback dalla tastiera o da te
solo non sarà in grado di raggiungerlo affatto
dalla tastiera perché cosa succede
come sviluppatori, tendiamo a progettare e
sviluppare per noi stessi e noi lo dimentichiamo
non tutti possono usare il trackpad o no
tutti possono usare il mouse così ce la facciamo
lavora con uno stato di hover e fai clic su
con un mouse pensiamo che il nostro lavoro sia fatto
Ti sfido a guardare un po ‘di più
o prova a guardarlo da un altro
prospettiva e navigare le tue app utilizzando
una tastiera e uno screen reader così dentro
iniziare con la tastiera è il
la cosa più semplice inoltre è così
checkbox e cambia esempio i pulsanti
sono anche raggiungibili da tastiera e
Ho un po ‘di feedback a colori uno
cosa ho spinto il design del materiale
la squadra su un po ‘è il colore
contrasto di questi ed è probabilmente
in realtà questo sembra abbastanza buono sul
monitorare su un monitor a minor contrasto o se
hai avuto un deficit visivo di qualche tipo
il livello di contrasto che in realtà
ottenere come gli stili che sono nel
linee guida sulla progettazione dei materiali che potrebbero essere
migliorato di più quindi è qualcosa che spero
per vedere un po ‘in futuro
perché il contrasto di colori che noi
attualmente potrebbero presentare problemi per
persone che hanno problemi di vista ma
almeno nella parte interattiva
di questo ogni ogni controllo o pulsante è
raggiungibile dalla tastiera e dalla volontà
guarda un po ‘di come possiamo realmente
fare quel lavoro ma poi è anche possibile
possiamo fare cose da questi controlli così
Ho anche alcuni pulsanti radio lasciami
assicurati di essere sull’articolo giusto, sì così
se uso i tasti freccia attraverso questo
selezione dei pulsanti di opzione che sono
essenzialmente un controllo quindi è una casella di controllo
un oggetto isolato controllerà o
deseleziona qualcosa un gruppo di radio
i pulsanti si escludono a vicenda e così via
vuoi selezionarne solo uno se lo sei
usando la tastiera se usi la freccia
le chiavi dovresti essere in grado di attivarti
sapere scegliere un singolo pulsante di opzione
semantica in realtà poiché abbiamo molto
di tempo tornerò indietro e guarderò
quello che sembra davvero guarderemo
negli strumenti di sviluppo per vedere cosa rende questi
interattivo quindi guardiamo il
esempio di pulsante radio prima quindi la radio
il gruppo è è l’oggetto che noi in realtà
scheda su e il pezzo importante
Voglio che tu guardi qui è il
tabIndex quindi aggiungendo un indice di tabulazione sulla
questo oggetto perché questo non è in realtà un
pulsante radio nativo è un angolare
direttiva e questo è molto comune
questo è il motivo per cui ho voluto approfondire
e mostralo a te il gruppo radio MD
è il controllo che abbiamo impostato su un angolo
materiale per creare pulsanti radio da selezionare
a loro perché è un gruppo radio MD
in sostanza un div aggiungiamo un indice tab di 0
e quindi puoi effettivamente raggiungerlo
controllo e quindi usiamo lo stesso
JavaScript per cambiare tra gli articoli
ma l’abilità di raggiungere usando tab
indice è quello che volevo che tu vedessi così
prossimo grande argomento dopo l’interattività che
puoi sempre controllare se c’è qualcosa
interattivo semplicemente usando la tastiera
ma per screen reader e assistive
le tecnologie è davvero importante
usiamo la semantica il problema è che a
angolare e anche nei componenti web noi
ora possiamo creare elementi personalizzati che possiamo
creare le nostre direttive nominate e
è fantastico ma dovremmo saperlo
qualcosa su ciò che questo fa a
screen reader quindi in materiale angolare il
L’ API HTML per la creazione di un pulsante è md
pulsante come un elemento così nel tuo lo sai
nel nome del tag hai appena detto md dash
pulsante e quindi inserire il testo e quindi
il materiale angolare sarà effettivamente trans
lo ha capito in un vero bottone questo è
importante capire che se tu fossi
uno specialista dell’accessibilità e tu
guardato questo si direbbe wow che md
il pulsante non è in realtà un pulsante ed è
importante sapere che siamo effettivamente
trasformandolo in un pulsante e ce ne sono alcuni
pro e contro di farlo in quel modo
ma quello che volevo che voi due vedeste è il
codice che ha effettivamente rendering al
fine di questo processo di inclusione dove
sostituisce il nome dell’elemento personalizzato con
un elemento pulsante nativo quindi questo pulsante
l’elemento è raggiungibile dalla tastiera
perché i pulsanti sono elementi nativi loro
vieni con tabindex che in realtà non lo facciamo
è necessario aggiungere tabindex su un nativo
elemento che attiverà anche eventi da
la tastiera che non dobbiamo fare
qualsiasi cosa speciale possiamo solo mettere
clicca direttamente su un pulsante nativo
Elemento in modo da da sapendo che siamo
aggiungendo alcuni
ci sono volute versioni che questo può migliorare
l’accessibilità delle nostre applicazioni
fare un ulteriore passo avanti così il pulsante
l’elemento è un elemento nativo altro
esempio sarebbe un input nativo
per cui ottieni molta accessibilità
libero perché questi controlli sono stati costruiti
essere controlli di forma ma perché possiamo
creare i nostri articoli e un buon esempio
per dare un’occhiata più da vicino questo è il md
casella di controllo e abbiamo già guardato il
gruppo di pulsanti di opzione md che era un’abitudine
elemento che abbiamo creato che siamo
aggiungendo tutto l’accessibilità indietro
in così è in realtà un sacco di lavoro e
Consiglierei di iniziare con un nativo
input perché se guardiamo all’esempio
della casella di controllo MD per rendere questo
accessibile dobbiamo aggiungere tabindex così noi
avere un tabindex di 0 e ciò che fa è
significa che l’ordine è tuo
codice appare nel tuo documento è il
ordina l’ordine di tabulazione che otterrà se
usi l’indice di tabulazione di 0 numeri più in alto
di 0 devi effettivamente gestire il
ordine di tabulazione di tutto e quello può essere
ingombrante quindi lo consiglierei a te
stanno creando un controllo personalizzato come a
checkbox si dovrebbe aggiungere indice tab di 0
e quindi sarà raggiungibile a
in realtà dire che questo div fantasia non lo è
un div ma una casella di controllo per uno screen reader
dobbiamo aggiungere un ruolo e il concetto di
un ruolo è che potresti pensarlo come cosa
questa cosa fa così vuoto
checkbox che è essenzialmente un div
può raggiungerlo ora ma quando lo schermo
lettore schede utente sulla casella di controllo noi
voglio che sia annunciato come casella di controllo
possiamo farlo aggiungendo un ruolo di
checkbox e ce ne sono di diversi tipi
di ruoli sai che c’è un pulsante radio
ruolo e ci sono ruoli fondamentali e
cose veramente belle in aria che se
non hai familiarità con Aria che sta in piedi
per Internet accessibile accessibile
applicazioni e ho una risorsa a
la fine delle mie diapositive sull’utilizzo di Aria in
HTML perché è importante che usiamo
correttamente non possiamo semplicemente mettere alcun vecchio
cosa nell’attributo ruolo che non possiamo
compongono i ruoli non possiamo solo decidere che
è il nuovo attributo dei dati
un ruolo è un’aria è uno standard che ha a
set di attributi approvati che possiamo
aggiungere quindi il ruolo di casella di controllo è uno di
questi ruoli riservati ed essenzialmente
annuncia la cosa come una casella di controllo um
altra cosa che dobbiamo aggiungere perché
questo è un div di fantasia è l’ aria controllata
attributo e quindi questo dirà uno schermo
lettore se la casella di controllo è selezionata
o non potresti chiederti perché
non dovrei semplicemente usare il controllato
attribuire l’attributo verificato di
di per sé funzionerà solo su un nativo
inserisci quindi se hai un tipo di input di
Casella di controllo si potrebbe utilizzare l’HTML5
attributo verificato ma perché questo è md
dash checkbox ed è un nome tag personalizzato
dobbiamo usare Aria e cosa fa
questo è un buon esempio che è un
esempio reale di vita reale di dove usiamo
Aria e l’idea è che si sta riempiendo
le lacune in cui questo è un elemento personalizzato
e non ha tutto questo
supporto per l’accessibilità possiamo aggiungere il
supporto dell’accessibilità compilando il
lacune con Aria così i tre principali
componenti di Aria se sei nuovo ad esso
sono gli stati e le proprietà del ruolo
il ruolo è di nuovo ciò che fa questa cosa
gli stati sono cose come Aria
controllato o Aria disabilitata e poi
c’è un secchio pieno di proprietà
di cose aggiuntive e ti incoraggio
se sei se sei a questo livello tu
dovrebbe leggere su un’aria
attributo quando vai ad usarlo io
tipicamente andrà a guardare qualcosa
dirò che voglio usare Aria ha controllato che io sia
andando a rinfrescare la mia memoria e fare
sicuro che sto usando questo correttamente in modo che io
sapere quale dovrebbe essere il supporto per tastiera
per questa cosa quindi cosa troverai
per Aria ho controllato per esempio io sono
creando una casella di controllo e ho intenzione di andare
guarda aria controllata e io scoprirò
che il comportamento previsto della tastiera è
si seleziona la casella di controllo e si colpisce
la barra spaziatrice che abbiamo visto nella mia demo
prima ho colpito la barra spaziatrice e
dovrebbe abilitare e disabilitare la casella di controllo
e così questo è il tipo di cose che
dovresti sapere
quindi un’altra importante area di accessibilità
e le applicazioni client renderizzate sono le
concetto di un testo alternativo quanti
di te hai idea di cosa sia un testo
l’alternativa è una tazza va bene così parecchi
è una specie di un termine che una volta tu
so cosa vuol dire che è come va bene
questo, ma voglio fare in modo che sia
non solo questo gergo parla che non lo fa
ha senso quindi è un’alternativa testuale
testo che può essere utilizzato da uno screen reader
per sapere cosa è qualcosa perché se
stai usando un’interfaccia e quando siamo
progettare cose che il design non è solo
l’alternativa del testo visivo è un modo di raccontare
un utente di screen reader che cosa è qualcosa
quindi alcuni esempi di codice su come creare
alternative testuali una molto comune
esempio è quello di avvolgere il testo che dovrebbe essere
per uno screen reader ma non è necessario
essere reso o non ha bisogno di essere
visualizzato possiamo solo avvolgerlo in un intervallo
e aggiungi una classe CSS e ci sono
diversi metodi per creare ciò che è
chiamato visivamente testo visivamente nascosto
nascosto il metodo che usiamo in angolare
il materiale è penso lo stesso del
esempio di html5 boilerplate e questi sono
classi di utilità che sono totalmente a posto
copiare da altri posti e così via
classe visivamente nascosta, solo che la penso
Clips il testo e forse lo riduce a
un pixel alto e mi piace questo
raccolta di cose che l’idea era
visivamente nascosto è che in realtà
rende il testo ma non lo vedi
il vecchio metodo era di bloccarlo
lo schermo utilizzando una proprietà sinistra e a
posizione assoluta, penso che sia il metodo
per fare ciò si è evoluto, ma il fondamentale
l’idea è che stai nascondendo visivamente il
testo all’interno di qualche altro elemento
un altro esempio di alternativa testuale
sarebbe l’etichetta per un modulo di input così
se noi e questo siamo super comuni da dimenticare
in realtà stavo solo guardando il
angular 2 documentation e questo è un
l’oggetto che dimenticano è importante
che effettivamente etichettiamo una casella di controllo o
pulsante radio così
l’utente dello screen reader saprà cosa
il controllo è per e penso nel
all’inizio abbiamo visto un’immagine da a
libro di testo questa è una cosa molto comune
è stato il problema nel libro di testo
esempio è stato che abbiamo dimenticato un’etichetta così
etichettare correttamente un input come questo
HTML 101 e sono davvero dispiaciuto che io
Devo dirtelo, ma lo dimentichiamo
abbastanza spesso che vale la pena ricordare
basta aggiungere l’ attributo 4 su un’etichetta
elemento abbinarlo a un input e quindi
saranno accoppiati roba semplice per a
pulsante dire che hai avuto un pulsante che aveva
un’icona in esso e si voleva avere
solo l’icona visiva ma il testo questo
è molto comune, solo che non vogliamo
testo vogliamo solo l’icona a senso unico
effettivamente etichettare qualcosa è aggiungere il
Attributo etichetta Aria che potresti utilizzare anche
questo sull’input sopra se non l’hai fatto
avere un’etichetta effettiva che ha reso il rendering
o non faceva parte del design che potevi
aggiungi un attributo etichetta aria e lo farebbe
etichetta anche qualcosa e infine
dovresti aggiungere un attributo alt per qualsiasi
immagine che ha contenuto e ho
smettila di parlare e vai avanti come mia
didascalia perché sono un po ‘ sconcertante
in questo momento sta andando molto bene
voi ragazzi imporre le alternative testuali
quindi volevo tirarlo fuori perché dentro
materiale angolare ho visto di nuovo un
opportunità di rendere un quadro un importante
quadro più accessibile così abbiamo aggiunto
utilità nel quadro per effettivamente
incoraggiare le migliori pratiche e forse
ricordati se hai dimenticato di etichettare
qualcosa che non posso dirti quanti
la gente mi chiede come disattivare questa cosa
perché dimentichiamo tutti i buchi alle gambe
apparentemente così l’ esempio che io sono
mostrando è il pulsante di opzione così nel
documenti materiale angolare ce ne sono alcuni
diversi esempi di pulsanti radio in
la demo di uno di loro è un’icona, quindi è possibile
scegli tra un avatar l’immagine di
di per sé non fornisce alcun testo
etichettalo devi fare un ulteriore passo avanti
e cercando di essere un framework accessibile
che devi ricordare a qualcuno quando
hanno dimenticato un dettaglio importante questo
l’utilità accederà alla console che tu
Ho dimenticato un’etichetta che ti indicherà
il nodo che in realtà hai dimenticato il
etichetta e in questo modo puoi farlo
aiutarti a trovarlo e rintracciarlo
invece di voi lanciando un avvertimento
e dicendo hey hai dimenticato di etichettarlo
in realtà ti indirizzerà allo specifico
nodo e trovo che sia davvero importante
per davvero aggiustare la cosa ma molto
di persone pensano che questo sia il rumore e
non pensano che l’accessibilità sia
come fanno loro non è solo un requisito
per la loro app questo è davvero importante
roba perché dovremmo creare app
che tutti possono usare e anche se lo sei
solo creando una demo o è solo
qualcosa che sto hackerando insieme se
lo stai solo hackerando insieme
gli avvisi nella console non dovrebbero essere a
grosso problema ma se in realtà stai creando
app che la gente avrebbe usato io sfida
tu a guardare il tuo pubblico e il tuo
ipotesi su chi pensi tu
il pubblico è posso scommettere che potrei trovare
un esempio di qualcuno che userebbe il tuo
app di fitness o la tua app di whisky o
qualunque cosa sia che tu sia
è probabile che siano qualcuno
utilizzando uno screen reader che avrebbe bisogno
questa alternativa testuale quindi questa è solo una
pratica che potremmo usare per provare e
rendere le app più accessibili a tutti
sono tutti quelli che usano questa struttura
potrebbe rendere un’app più accessibile così
correggi questi avvisi invece di disabilitarli
la console come se qualcuno ci credesse
dovrebbe fare per riparare effettivamente questi avvertimenti
per l’esempio del pulsante radio MD I
avere il codice sorgente senza l’etichetta
quindi possiamo guardare questo e dire bene
si sta ripetendo su alcuni dati è
mostrando che in realtà sputerà
un pulsante di opzione per ciascun elemento nel
il set di dati all’interno del pulsante radio è
la direttiva icona vuota che puoi
utilizzare per inserire icone in cose come
pulsanti e barre degli strumenti e pulsanti di opzione
ma manca una sorta di testo
o l’icona ne ha bisogno perché il
icona è la cosa che il contenuto sia
che potrebbe essere etichettato o possiamo solo aggiungere
un’etichetta sul genitore perché il genitore
del pulsante radio è il reale
controllalo
ha bisogno dell’etichetta e quindi cosa fa
quando lo etichettiamo significa che il
lo user reader in realtà lo saprà
cosa è questo pulsante radio per questo
particolare pulsante radio in modo che possiamo vedere
non c’è testo, c’è solo un
l’ icona al suo interno per risolvere effettivamente
questo avviso basta aggiungere l’etichetta Aria e
poi ha tirato il contenuto da quei dati
impostare e quindi etichetterà la cosa
è abbastanza facile da risolvere per non farlo
sai perché la gente non lo fa solo ma
perché ho questa domanda un sacco i
ho pensato di mostrarti come effettivamente
aggiustalo, quindi aggiungi solo un’etichetta d’aria
rendere tutti più felici gli altri
concetto principale in angolare accessibile
le applicazioni sono l’idea di messa a fuoco
gestione e in realtà questo è vero
fuori dall’angolare come possiamo vedere dal
waffle ogni volta che esegui il rendering
qualcosa sul client dice di avere
viste e quando si aggiorna qualcosa
rerenderò la vista immagina se tu
erano focalizzati su un elemento di forma che era
in una sezione della tua pagina che ha ottenuto
posteriore per qualche motivo forse tu
fatto una selezione e il tuo obiettivo era
l’oggetto e lo spazza via
concentrati quindi se stai effettivamente facendo affidamento su a
tastiera è super frustrante se
ti stai affidando a uno screen reader
lo rende completamente inutilizzabile perché tu
non so dove eri necessariamente così
se ti riprende in cima al
pagina che devi recuperare completamente
e questo può fare qualcosa di carino
inutilizzabile quindi in materiale angolare lì
sono alcuni componenti che aggiungiamo attenzione
gestione in e uno di quelli è il
lato nav e in realtà sto andando a mostrare
un video di come è fatto
inizia da questo in modo che il nostro focus inizi
la parte superiore della pagina e come noi realmente
vado a schermo intero con questo
okay, iniziando il focus nella parte superiore di
la pagina passa al collegamento del contenuto
è venuto fuori e l’abbiamo colpito
ciò che il salto al collegamento di contenuti è che
ci salterà da questo lato sinistro
navigazione perché è una sorta di dolore
per sfogliare ogni singolo oggetto in modo che questo
è il motivo per cui saltare i collegamenti è così fantastico perché
se ti affidi a una tastiera, puoi farlo
basta saltare da tutto ed è carina
basso overhead per aggiungere un collegamento salta così noi
avere uno nel materiale angolare
banchine così abbiamo colpito il link che invierà
il nostro obiettivo principale è il principale
area dei contenuti sulla destra e di nuovo è
Sto avendo spiegare davvero un sacco di
la roba perché il contrasto di colore è
non abbastanza alto, quindi voglio indicarlo
fuori a voi dove il nostro obiettivo è così ora
siamo nel campo in cui ci hanno cacciato
la barra degli strumenti mentre apriamo questa barra laterale
il diretto che il componente ha effettivamente
gestione mirata built-in così che cosa
per impostazione predefinita, riproduciamo di nuovo questo
mentre apri il navigatore laterale il predefinito in
questo componente è solo su cui concentrarsi
l’involucro del nav laterale come a
quadro non necessariamente sempre
vuoi mettere a fuoco l’elemento del wrapping
abbiamo avuto molte richieste per farti sapere
bisogno di concentrarsi su una cosa specifica non
che le persone volevano disabilitarlo
completamente, ma che volevano
personalizzalo a loro piacimento e così noi
aggiunto supporto per l’invio di focus a
oggetti arbitrari e vedremo questo
più tempo in modo da poter vedere il che abbiamo colpito il
pulsante di attivazione che apre la barra laterale
manda il tuo focus su di esso e poi quando
chiudiamo il nav lato colpendo il
Tasto Esc o facendo clic sul pulsante
al di fuori di esso invierà il focus a
l’oggetto che l’ha attivato così l’ idea
è che il tuo obiettivo è stato rimandato indietro
e avanti e lo stiamo gestendo per te
e ogni volta che scrivi un’app che è
client reso o reagisce
o brace o spina dorsale o spina dorsale
queste cose questo è importante
concetto quindi il codice per il lato nav il
componente reale per il navigatore laterale è md
nav lato e poi all’interno di esso è possibile
inserire qualsiasi combinazione di direttive secondarie
che vuoi puoi nidificare altre cose
al suo interno per esempio l’input
inserimento di testo in Inghilterra
materiale l’API per questo è il md
contenitore di input e quindi all’interno di esso
potresti mettere un’etichetta che potresti mettere a
inserisci la cosa che voglio chiamare tua
attenzione a questa direttiva bambino
che abbiamo creato per renderlo possibile
concentrarsi arbitrariamente su ciò che vuoi
questo sito nav andrà a cercare il
Direttiva sulla prova di fuoco laterale md quando
scopre che invierà l’attenzione lì
invece dell’elemento di avvolgimento e questo
è un modello che penso che abbiamo bisogno di
aggiungilo ai dialoghi di qualsiasi altro componente
che gestiamo l’attenzione di default che abbiamo
per renderlo un po ‘più personalizzabile
perché quello che ho trovato è quello
ci sono infiniti casi d’uso per ciascuno di
questi componenti e infinito
combinazioni di componenti e la dimensione
del github materiale angolare
il repository lo evidenzierà ma è così
davvero bello vedere come effettivamente le persone
voglio usare la gestione del focus non solo
che come oh è bello lo fa per
voi ma oh ho il caso d’uso specifico
che tutto ad un tratto ora che questo è un
opzione le persone stanno pensando a come
potrebbero inviare attenzione ai loro
componenti sì sì il nav laterale lo fa
penso che il dialogo si concentri
gestione ma non è così personalizzabile
abbastanza ancora così un altro concetto in
materiale angolare o inaccessibile
di angolare sta notificando l’utente così
abbiamo visto l’interattività che abbiamo visto
gestione della messa a fuoco semantica che notifica il
l’utente è un’altra cosa che è in realtà un
vantaggio nelle applicazioni lato client
che possiamo dire che stai scrivendo in un modulo
e hai qualche messaggio di errore e
ma tu sei concentrato su un oggetto tu
non voglio mandare l’attenzione di qualcuno fuori
a un messaggio di avviso perché ciò potrebbe
essere stridenti potrebbe essere fonte di confusione, quindi noi
bisogno di una sorta di meccanismo web per
annunciare cambiamenti quando qualcosa è
accadendo sia messaggi di errore o
forse stai filtrando una lista e tu
vuoi mantenere l’ attenzione degli utenti
da qualche parte ma tu vuoi annunciare ehi
hai filtrato una lista ci sono 13 partite
o qualcosa del genere quindi questo concetto
di notifica all’utente è importante in
applicazioni client rese per
accessibilità e un modello in cui utilizziamo
questo in materiale angolare è il
completamento automatico in modo che il nome del tag sia md
dash autocomplete e cosa tu cosa
essenzialmente è inserire un tag di input
e quindi puoi collegarlo a qualsiasi dato
fonte locale o remota e it
aggiungerà un elenco di cose che puoi
mentre digiti il filtro è così importante
che a ha annunciato che ci sono
opzioni ma poi mentre lo digiti filtri
più e annuncia più cose così come a
esempio comune sarebbe un elenco di stati
o intendo che abbiamo demo per il
completamento automatico ma quello che ho sul
lo schermo è una lista di stati quindi scrivo w
ci sono quattro partite e poi come me
digita un’altra lettera che li filtrerà
più il codice per questo e il concetto
di notificare all’utente su cui ci stiamo affidando
qualcosa chiamato vivo e questo è
un’altra parte di questa aria standard e
è un concetto abbastanza grande ma è super
cool che è possibile aggiungere un ruolo di stato
c’è anche il ruolo di avviso e il
i livelli di rivivere sono assertivi
ed educato, quindi è importante saperlo
quali sono queste differenze perché
a volte dobbiamo scegliere quale
livello a seconda di ciò che l’utente
l’interazione dovrebbe essere così e un
avviso assertivo sarebbe qualcosa di simile
un grande errore come qualcosa di cui hai bisogno
annunciare immediatamente userebbe il
ruolo assertivo ma se è qualcosa
forse potrebbe aspettare fino a qualunque cosa
l’utente sta facendo quindi è possibile utilizzare questo
ruolo passivo o educato per un
completamento automatico sei nel mezzo
digitandoti hai bisogno di dirtelo
in quel secondo che l’errore è così tu
può effettivamente legarli insieme
se l’annuncio del filtro ha atteso fino a
tutto è stato fatto non lo faremo
in realtà sapere cosa fosse
annunciando così per filtrare un elenco di
afferma che abbiamo bisogno di un feedback immediato così noi
usa il tiro di allarme o l’assertivo
ambientazione
quindi per il completamento automatico in realtà
annunciare questi cambiamenti abbiamo una sorta di
una direttiva bambino nascosta chiamata
stato di arie e questa direttiva
tecnicamente è reso così se lo metti
non visualizzare nessuno su di esso non annuncerà
allo screen reader deve essere
presente quando la pagina si carica così sono
alcune cose che dovresti sapere e il
cose che hanno l’aria vivono ruoli e
le proprietà su di loro devono essere effettivamente
presente e quindi l’idea è che tu
basta aggiungere messaggi a questo elemento e
diventa il centro messaggi che quando
un utente ha uno screen reader che lo esegue
annunceremo appena questi cambiamenti così il
completamento automatico ci sono due parti
HTML che viene inserita dal
controller del completamento automatico e quindi
c’è il l’interruttore in in
JavaScript per il controller lo farà
aggiungi messaggi a questa cosa e come
compaiono e scompaiono lo farà
in realtà basta collegarli allo schermo
lettore così da avvisare l’utente che usi re
viva vale la pena sottolineare che
angolare ama l’open source e il
il repository angolare è enorme
il deposito materiale angolare è enorme
anche l’angolare 2 è on on github
ma puoi andare e contribuire puoi andare
su problemi di file e dire hey questo
componente in Inghilterra materiale è possibile
essere meglio su Android o qualsiasi altra cosa
qualunque sia il tuo caso d’uso che amano avere
quella parte di input di questa cultura creata
ng aria e ng aria è un modulo che era
creato per fare un po ‘di sollevamento pesante per
roba di accessibilità in cui il quadro
dovrebbe davvero gestirlo per te
come se stai usando ng disabilitato
non dovrebbe anche andare a gestire il
aria per quella aria così fa per quello
sei stato nel framework da allora
angolare 1.3 ma non c’è davvero nulla a
critico che richiede che tu usi
1,3 angolari come se si utilizza angolare
1.2 potresti inserire Aria come a
dipendenza del modulo e andrebbe bene
ma c’è una buona documentazione su
online
sul punto del sito Web di Doc angolare a
includi Aria che hai appena incluso come
dipendenza e poi c’è in realtà a
oggetto di configurazione in cui puoi girare
le cose dentro e fuori potresti dire di no
Voglio tabindex ho intenzione di gestire tale
e puoi semplicemente impostarlo su false in
oggetto di configurazione e tu lo includi semplicemente come
una dipendenza proprio accanto a angolare in
i tuoi script ng aria aggiunge il supporto a a
poche direttive scelte tra cui il modello ng
e disabilita ng-show ng hide ng-click
ng messaggi doppio clic e ng e
ci sono alcuni miglioramenti a questo arrivo
in futuro ma questo fa qualcosa
questo lo rende piuttosto utile come
dipendenza per esempio ng disabilitato come I
accennato sarebbe un po ‘un dolore per
usa ng disabilitato ma poi anche a
gestire Aria disabilita ciò che fa
simile all’esempio controllato come I
menzionato solo l’attributo verificato
funziona su un input nativo disabilitato è il
stessa situazione quindi solo in realtà
disabilitato un input nativo se stai usando
una casella di controllo vuota o div fantasia o alcuni
elemento personalizzato in realtà disabilitato
in uno screen reader devi usare Aria
e quello sarà per un’API di accessibilità
che in realtà disabiliterà la cosa così
ng Aria quando usi ng disabilitato lo farà
basta sputare Aria disabilitato e aggiornare
come tale condizione cambia così che è a
esempio abbastanza utile ng-clic questo è
una delle cose più grandi che Aria ha provato
risolvere e fa un buon lavoro
la cosa che sta cercando di risolvere è ng
clicca su un div ed è tecnicamente te
potrebbe aggiungere un evento click a un div
JavaScript nativo ma per qualche motivo
questo è diventato molto popolare in angolare
e penso sia perché non l’hanno fatto
scoraggiarlo e io ho un div con un
NG fai clic su di esso sul metodo che sta chiamando
è oh no non l’hai fatto perché per favore non farlo
fai questo perché diamo un’occhiata a cosa ng
Aria ha a che fare per risolvere questo problema in modo che il
problema con questo abbiamo un div che abbiamo
ng-click ricorda di cosa stavamo parlando
circa con l’interattività e il
roba semantica in anticipo
dover aggiungere tabindex a questo ovviamente
quello non ha tabindex questo non
avere un evento stampa chiave su di esso perché il
cliq non sparerà su un div che è il
lo stesso con JavaScript nativo e HTML
questo dovrebbe essere un elemento pulsante ma è
un div e questo succede così come a
manutentore di Aria ho guardato il
paesaggio e ha detto cosa potrebbe fare Aria
che in realtà migliorerebbe
accessibilità delle app web con tutto il
l’unica cosa che la gente dovrebbe fare è
aggiungi questa dipendenza bene questo ng-click
la situazione è piuttosto grande e sono venuto
in tutto eccitato e ottimista e poi io
ho imparato come Harry questo è perché tutti
il browser ci gestisce in modo diverso e così io
Sono orgoglioso di dire che ho presentato il mio primo
bug in un quadro importante con ng aria
ora è riparato ma c’è una sezione
di ng area dove sarebbe perché cosa
abbiamo risolto il problema aggiungendo il tabindex e
in realtà è già stato aggiunto da
ng model se stai usando quello che sarà
aggiungilo anche con ng-click ma aggiunto
questa scheda Nix ma dovevi ancora andare e
aggiungi ng keypress a fianco di ng-click in modo da
correggi che siamo sotto il cofano se aggiungi
e fai clic su un div lo faremo anche noi
legare l’evento stampa chiave e lo farà
sparare come se si stesse usando la tastiera
in realtà spara la tua richiamata
Funziona un passo in più siamo andati e
aggiunto il ruolo del pulsante che è un po ‘
controverso perché potresti esserlo
intenzionalmente usando ng-clic in qualche modo
e così questo ha cercato di risolverlo per come il
maggior parte dei casi d’uso, ma ovviamente tu
potrebbe essere completamente informato su
accessibilità e fare questo per il
giuste ragioni e quindi questo potrebbe farti
un po ‘a disagio, ma l’idea è
che possiamo fare di più questi tuffatori cliccati
accessibile semplicemente aggiungendo Aria
bug che ho menzionato è che non l’abbiamo fatto
effettivamente verificare se l’elemento che
il click su di esso era un controllo nativo
o no quindi se fosse un pulsante quale
in realtà ha l’evento stampa chiave
ne licenzierebbe due
funzioni di callback quindi è stato divertente
è stato un buon tempo e qualcosa di simile
introdotto in angolare è ora risolto
e ho imparato molto su cosa sia questo
dovrebbe fare come questo genere di cose
succede nei browser sapendo che a
l’elemento del pulsante effettivamente fa scattare un clic I
non l’avevo mai guardato da vicino
l’evento click quindi questa è un’utilità
quello realmente usa appena un tasto e poi
non dovremmo fare cose come questa
non dovrebbe venire e scrivere un modulo
quello prova a riparare l’accessibilità sul
web perché usi solo un pulsante e
tutto sarebbe molto meglio così noi
vedere di nuovo la cialda, questa è una grande cosa
come usare i pulsanti di utilizzo della marcatura semantica
perché la quantità di lavoro che tu e
Dovrò fare per rendere il web più
accessibile sarà molto meno ok
proiettore in realtà sta prendendo molto
più tempo ho pensato rapidamente al goniometro
è un’applicazione per la riga di comando di questo
gira su un webdriver di selenio che puoi
scegli quale framework di test vuoi e
è ottimo per l’integrazione continua se
vuoi impedire un materiale accessibile
dal renderlo fuori nel mondo
ha scritto un plug-in per il goniometro che tu
può usare per testare il tuo sito con il
strumenti di sviluppo per l’accessibilità al cromo
che è una libreria open source e 10
e I / O che è un’API di accessibilità
eseguirà ogni test che lo scrivi
eseguirà il tuo codice contro questi
utilità e dirvi se avete
problemi di installazione per il goniometro
plugin di accessibilità puoi farlo
con lo sviluppatore di accessibilità del cromo
libreria di strumenti lo abbassa come un MPN
modulo e quindi è sufficiente aggiungere questo
flag di true o false per abilitarlo 10
e I / O è come entrambi sono
opzionale ma l’ opzione I / O del tenone è
più robusto richiede una chiave API e
un account la versione di cromo è gratuita
che ho un piccolo grafico nelle mie diapositive
circa dovrei quale si può usare il
Lo strumento di sviluppo per l’accessibilità di Chrome è
gratis viene eseguito localmente sulla tua macchina così
il tuo codice non farà crescere le gambe
la versione è più robusta e hanno
effettivamente liberato dei loro liberi
conti limitati ora, ma se tu fossi
in realtà
test per la conformità all’accessibilità
tenone ti darebbe modo più pace di
mente e più copertura di prova così potresti
dite bene perché dovrei usare il tenone è
perché è un insieme di test più robusto
alcune strategie di test che puoi controllare
per le etichette in modo da poter controllare le cose
come l’esempio del pulsante radio che potresti
convalidare che hai usato il corretto
ruolo di aria o l’attributo corretto
perché in realtà è solo roll non lo è
un tiro rapido è solo roll e questi
sono errori davvero facili anche se mi piacciono
Ho fatto l’errore che ti ho detto
conoscere il ruolo dell’immagine e ho scritto che sono un GE
invece di IMG è un po ‘il mio esempio
che vado sempre perché ho fatto
questo errore quindi se automatizzi il tuo
testarlo troverà questa roba per
tu puoi trovare ciò che l’arte guarda Daria
proprietà per assicurarsi che si aggiornino
al momento giusto può testare il tuo
interazioni e assicurarsi di avere
tabindex o che le cose sono raggiungibili
e infine puoi controllare il colore
contrasto che è una cosa che deve
migliorare rapidamente la progettazione dei materiali
angolare 2 che abbiamo già sentito
oggi un po ‘su alcuni dei
maggiori cambiamenti per l’interazione dell’utente
lato che sono decisamente più in
lato ingegneria utente o ingegneria UX
non c’è più definizione di direttiva
oggetto è basato su più componenti web
il tuo legame direttamente con proprietà e
non attributi così per cose come utente
interazione questi cambiamenti di sintassi sono
piuttosto importante non c’è più JQ
involucro di dom luce perché non abbiamo bisogno
le web API sono diventate molto
meglio negli ultimi cinque anni e poi
es6 moduli che in realtà non hanno molto
fare con l’interazione dell’utente inerte
sono semplicemente fantastici per il legame con l’evento
usato per fare ng focus e ng click e
allora sai usare l’interpolazione e il lato
di attributi sul pulsante nativo per
esempio ora abbiamo solo al posto del ng
concentrati su come legare l’evento usando
parentesi e poi come abbiamo questo è
in realtà una sorta di evoluzione sta accadendo
con l’angolare 2 in questo momento è il
prefisso di proprietà
non è una buona idea solo inquinare
la tua app con spaziatura senza nome senza nome
Proprietà ho un esempio di waffle
ID se si effettivamente prefisso il
La proprietà ID mi serve per andare effettivamente e
controlla ma se hai avuto qualche arbitrario
proprietà che stavi usando, lo faresti
voglio prefisso con qualcosa e
c’è una discussione davvero interessante su
github sulle decisioni che sono
facendo in angolare 2 e puoi andare e
partecipa è piuttosto cool angolare 2
include il supporto di arias quindi non abbiamo bisogno
ng Aria in angular 2 stanno facendo molto
più ora per includerlo effettivamente dal
inizio e quindi è abbastanza bello non lo facciamo
ho bisogno di una cosa che aiuti la banda come Angie Aria
vieni a sistemarlo, quindi sono entusiasta di vedere
come questo si evolve in futuro di nuovo te
può contribuire all’angolare 2 su github
ci sono problemi di accessibilità aperti e
le conversazioni in corso su te conosci modale
dialoga cose che hanno bisogno di input come
hanno bisogno di essere ricordati di messa a fuoco
gestione e semantica e tutti
queste cose penso che ci sia già un
conversazione in corso ma volevo quello che ho
volevo dirti che è possibile
partecipare se non si è già avvolti
cose su ho alcune risorse nel mio
diapositive compreso l’utilizzo di Aria e HTML
questo è abbastanza importante se lo sei
scrivendo queste direttive personalizzate come md
checkbox dovresti sapere cosa sono
le regole di Aria il cromo
strumenti di sviluppo di accessibilità sia il
estensione del browser e libreria di controllo
Ho appena tenuto un discorso su automatizzato
test di accessibilità a jas conf e
era tutto su quel lato delle cose a
un po ‘sulla roba del goniometro
e così via c’è un’angolazione ufficiale
post sul blog di novembre a proposito di ng
Aria e quali sono gli obiettivi
erano e tipo di capire dove
iniziare ho una documentazione
per il plugin di accessibilità del goniometro
che consiglio vivamente di utilizzare
perché è solo un’installazione NPM
è super facile da inserire nella tua app
se sei curioso di saperne di più sul
complessità dell’accessibilità in angolare
il mio collega Dylan Burrell ha fatto davvero
buona serie
sull’applicazione MVC accessibile a fare
che è il client canonico reso
esempio di applicazione ma non lo fanno
avere sempre la migliore accessibilità quindi
quello era buono e infine io
avere un post su come controllare un sito web
per l’accessibilità se ti va bene
è bello parlare con noi per 45 minuti
cosa farò dopo che potrebbe essere un bene
posto per iniziare è una domanda
Ho creato la waffle sì e ha fatto
mi fa ridere la cialda è quadrata e
ha occhi finti come se fossi letteralmente
ho cercato occhi finti e quello è gli occhi
è come se avesse una faccia da spugna
sì, ho creato la waffle ma se tu
avere accessibilità legittima
domande posso rispondere a quelle due certe
la domanda riguardava la tastiera
scorciatoie penso che sarebbe fantastico
finché lavorano con gli screen reader
che hanno le loro scorciatoie da tastiera
Penso di non essermi intromesso in questo discorso
ma c’è il concetto di virtuale
cursore in uno screen reader dove c’è
fondamentalmente una barriera tra l’utente
con lo screen reader e il reale
browser web dove verrà installato lo screen reader
cattura l’input così come se volessi colpire il
Tasto H per saltare attorno a due titoli
una scorciatoia di riserva per uno screen reader
quindi potrebbe essere qualcosa a cui pensare
ma tutto ciò che puoi fare per fare la tastiera
accessibilità migliori pollici per me
tu
tu
Please follow and like us: