Categories
Uncategorized

Come Web Works Accessibilit4 giu 2020 6 minuti di

TheMummichogblog è un partecipante al Amazon Services LLC Associates programma, un programma di affiliazione pubblicitario progettato per fornire un mezzo per siti per guadagnare tariffe pubblicitarie con la pubblicità e il link al amazon.com. Amazon, il logo di Amazon, AmazonSupply, e il logo AmazonSupply sono marchi di Amazon.com, Inc. o delle sue affiliate.

Come Web Works Accessibilità
4 giu 2020 – 6 minuti di lettura

Quando scriviamo HTML, i tag HTML non vengono eseguite nel browser. Il browser crea una rappresentazione ad albero del documento HTML dato ad essa. Questo albero è chiamato il Document Object Model (DOM). Questo è ciò che il browser si traduce in elementi sullo schermo. HTML è solo un DSL dichiarativa (Domain Specific Language) per esprimere il DOM. Se si ha familiarità con Reagire, è come JSX essere compilati a reagire Elements. Allo stesso modo, le nostre regole CSS si fondono con gli stili di default del programma utente per generare il CSS Object Model (CSSOM).

--------------------------------------------------------------------------------------------------



Vegliate dunque, perché non sapete in quale giorno il Signore vostro verrà.


Subscribe By E-mail:

Enter your email address:

Delivered by FeedBurner



----------------------------------------------------------------------------------------------

Il DOM e CSSOM sono responsabili di ciò che è reso sullo schermo. Questo è tutto abbiamo bisogno di fornire informazioni sul web per la maggior parte degli utenti senza eventuali perdite di valore debilitanti. Tuttavia, un sesto della popolazione soffre umani almeno una forma di disabilità e molti di loro richiedono tecnologie di assistenza di utilizzare il web. Come si ottengono in azione?

Accessibilità Object Model (AOM) permalink
Proprio come i browser generano il DOM e CSSOM, ma generano anche un oggetto Accessibilità modello. L’AOM è una struttura dati ad albero simile al Document Object Model (DOM), ma per le informazioni di accessibilità. Si tratta di una rappresentazione di ogni elemento sullo schermo e loro attributi di accessibilità legati come “nome” “title”, “alt”, “* aria-“, il contenuto del testo ecc Questo albero spesso corrisponde strettamente alla rappresentazione in un sistema operativo Accessibilità quadro.

Ogni sistema operativo mainstream è dotato di strutture di accessibilità e API. Per esempio, su MacOS c’è il protocollo NSAccessibility, Windows ha UI Automation per citarne alcuni.

Questi quadri specificano i comportamenti di widget UI comuni e modelli. I kit di sviluppo nativo per questi sistemi operativi forniscono primitive che si interfacciano con queste API di accessibilità che garantiscono che le interfacce utente delle applicazioni sono accessibili per impostazione predefinita. Ad esempio, qui è la classe casella di controllo System.Windows.Forms in dotnet nucleo, che definisce il comportamento e l’aspetto di una casella di controllo nativo sul sistema operativo Windows.

Sul web, abbiamo l’accessibilità anche nativo primitive per esempio il seguente blocco di codice crea una casella di controllo con il nome accessibile di “Accetto termini”.

Si comporta come una casella di controllo nativo similmente etichettati. Ha simili mouse e tastiera interazioni per impostazione predefinita. Un lettore di schermo riconosce come identica a una casella di controllo nativo. Un interruttore sa come interagire con esso per impostazione predefinita. Ciò che rende questo possibile? I quadri di accessibilità e le API accennato in precedenza rendono tutto questo possibile. Quando visitiamo una pagina web, il browser genera un AOM, molto simile al DOM, ma per le informazioni di accessibilità. Il browser può inviare queste informazioni accessibilità al quadro l’accessibilità del sistema operativo utilizzando le API di cui sopra. Quando usiamo le tecnologie assistive come screen reader, esse richiedono che le informazioni dal quadro sottostante o AOM del browser. Questo è il modo in cui imparano a conoscere ogni elemento, il loro stato attuale, e come interagire con loro.

Semantic accessibili Rich Internet Applications HTML e (ARIA) permalink
Costruzione di siti web che utilizzano semantica HTML è il web equivalente di costruire un desktop o mobile app utilizzando la piattaforma primitivo. Queste primitive forniscono un sacco di informazioni e comportamenti fuori dalla scatola. Questa informazione viene trasmessa al AOM e il quadro di accessibilità della piattaforma. Per esempio, che rappresenta un elemento dell’interfaccia utente cliccabile con un pulsante HTML dice, la sua cliccabile / tappable, attivabile, la sua funzione è un pulsante, che è, clic su di esso fa qualcosa. Un ausili come un interruttore o un lettore di schermo può quindi interrogare queste informazioni e trasmetterlo ad un utente. Naturalmente la natura statica di HTML pone alcuni limiti alla sua efficacia nel rappresentare tutte le possibili informazioni sull’accessibilità, è per questo che abbiamo gli attributi di ARIA.

Siamo in grado di comporre più elementi HTML in altri widget UI complesse e legarli con lo scripting. Ad esempio, con un po ‘di script, un campo di input può essere composto con una lista non ordinata di elementi per fare un widget di completamento automatico. Anche se questo è possibile, abbiamo ancora ancora bisogno di un modo per dire al AOM che questi elementi sono infatti un widget composto non solo un campo di input e una lista. Questo è dove Aria-ruoli possono aiutare. L’impostazione di un ruolo della casella combinata sul contenitore dell’elemento di input e casella di riepilogo sulla lista non ordinata rappresenta il widget come una casella combinata e un lettore di schermo annuncerà come tale. Abbiamo ancora bisogno di alcune altre direttive ARIA, come Aria-controlli, aria-vivo, ecc, ma quei dettagli sono oltre la portata di questo articolo.

Personalizzato UI Widgetspermalink
Durante la progettazione o la costruzione di widget interfaccia utente personalizzata, è importante che noi consideriamo le implicazioni di accessibilità del design. Si può essere tentati di implementare la propria soluzione nel codice, ma prima di farlo, chiedere:

Può questo disegno essere adeguatamente rappresentata da modelli di interfaccia utente stabiliti e widget? Ritiene che UI modello esistono in natura?

Se le risposte sono “sì”, allora probabilmente c’è un insieme di linee guida di attuazione per esso già. Si dovrebbe seguire. Queste linee guida comprendono le interazioni del previsto, i ruoli e le associazioni. A seguito di questi modelli non significa che gli utenti non devono imparare ad usare la vostra applicazione, funzionerà come qualsiasi altra applicazione sul proprio sistema operativo. Inoltre, non sarà necessario fornire le istruzioni per tutte le diverse tecnologie assistive gli utenti potrebbero essere in uso. Un buon posto per iniziare è il PRATICHE W3C WAI ARIA

Summarypermalink
Ci sono modi standardizzati di rappresentare elementi dell’interfaccia utente in modo tale che essi funzionano bene per tutti gli utenti. Questi standard sono per lo più uniformemente implementate su piattaforme e sistemi operativi ed esposti come piattaforma API di accessibilità. tecnologie di assistenza dipendono queste API per rappresentare accuratamente l’interfaccia utente per gli utenti e li aiuto interagire con esso. Browser forniscono anche un’accessibilità Object Model che le tecnologie assistive possono interrogare.

PS: C’è lavori in corso per consentire agli sviluppatori Web Query l’AOM, in futuro, anche se ci sono preoccupazioni per la privacy e l’eventuale utilizzo discriminatorio di tali informazioni.

blog.segunolalive.com/posts/how-web-accessibility-works/

Amazon e il logo di Amazon sono marchi di Amazon.com, Inc., o delle sue affiliate.