Esposizione delle informazioni di base sugli elementi dell'interfaccia utente (HTML)

Applies to Windows and Windows Phone

Stai cercando la versione di questo argomento relativa a C#/VB/C++/XAML? Vedi Esposizione delle informazioni di base sugli elementi dell'interfaccia utente (XAML).

Gli strumenti di Assistive Technology, ad esempio le utilità di lettura dello schermo, necessitano di informazioni sugli elementi dell'interfaccia utente presenti in un'app. Il sistema offre le informazioni in base al markup HTML di un'app. Descriveremo il codice HTML da implementare per garantire che la tua app esponga le informazioni di base necessarie per gli strumenti di Assistive Technology.

Nome accessibile

Un nome accessibile è una stringa di testo descrittiva breve usata da un'utilità per la lettura dello schermo per annunciare un elemento dell'interfaccia utente. Dovresti impostare il nome accessibile per gli elementi di interfaccia utente che hanno un significato importante per la comprensione del contenuto o per l'interazione con l'interfaccia utente. Generalmente, tali elementi includono immagini, campi di immissione, pulsanti, controlli, aree e così via.

Nella tabella seguente viene descritto come definire un nome accessibile per vari tipi di elementi HTML.

Tipo di elementoDescrizione
Testo staticoPer testo e altri tag HTML, il nome accessibile è basato sul testo (interno) visibile. Gli esempi comprendono i tag p e h1.
ImmaginiPer le immagini, l'attributo alt viene usato come nome accessibile. Ciò si applica alle immagini specificate con il tag img, i pulsanti di immagine che specifichi con <input type="image"> e i tag area che utilizzi con mappe di immagine. Per altre informazioni sul mapping delle immagini, vedi Mapping delle immagini nelle specifiche HTML5 di W3C (World Wide Web Consortium) .
Campi modulo Il nome accessibile per un campo modulo, ad esempio <input type="text| password| checkbox| radio|..."> o per un tag select o textarea, deve essere uguale all'etichetta visualizzata per il campo. Il metodo migliore per l'associazione di un'etichetta a un campo di immissione è usare il tag label e impostare l'attributo for. Quando l'utente fa clic sul tag label, lo stato attivo si sposta al controllo associato. Per altre informazioni sull'assegnazione di etichette agli elementi di interfaccia utente, vedi Etichette e descrizioni in WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 1.0 Authoring Practices.
Pulsanti e collegamenti Per impostazione predefinita, il nome accessibile di un pulsante o collegamento è basato sul testo visibile. Per i tag a e button, il nome accessibile è basato sul testo interno del tag. Per un tag input di type="button", il nome accessibile è basato sull'attributo value.
TabelleIl nome accessibile di una tabella viene generalmente definito mediante un tag caption nella tabella.
Elementi strutturali e di riferimentoAttribuire etichette a elementi strutturali e di riferimento è importante perché le utilità di lettura dello schermo usano le etichette per spostarsi all'interno di un documento. Gli elementi che necessitano di etichette includono moduli, frame, aree e altri elementi con ruoli di riferimento quali "main", "navigation" e "search".
Elementi in un div

Per quanto riguarda tutti gli elementi tipicamente definiti mediante un tag div, inclusi gli elementi personalizzati, puoi impostare un nome accessibile ricorrendo a uno degli attributi seguenti:

  • aria-labelledby—per fare riferimento all'elemento contenente il testo da utilizzare come nome accessibile.
  • aria-label—per impostare direttamente il nome accessibile.
  • title—per creare una descrizione comando utilizzata anche come nome accessibile.

Usa gli attributi precedenti in caso di elementi di interfaccia utente personalizzati (ad esempio, con tag div) e quando desideri sovrascrivere gli attributi HTML predefiniti.

 

Questo esempio descrive come definire un nome accessibile per vari tipi di elementi HTML.


<!--Label landmark regions by using aria-labelledby or aria-label. -->      
<h1 id="formLabel">Personal Information</h1>
<form aria-labelledby="formLabel" ... > 

    <!-- The label tag with "for" attribute sets the name of the input field. -->
    <label for="fullname">Full Name</label>
    <input id="fullname" type="text" accesskey="N"/>

    <!-- Alt text is used as the image accessible name. -->      
    <img src="..." alt="Personal Photo" />

    <!-- An image button's accessible name is set with the alt attribute. -->
    <input type="image" src="images/back.png" alt="Back" onclick="..." />

    <!-- Inner text is used as the accessible name for A, BUTTON, P, and so on. -->
    <a href="...">More Photos</a> 

    <!-- The submit button uses default caption text as the accessible name. -->
    <input type="submit" /> 

</form>

Per i controlli di Windows Runtime, puoi usare il data binding per impostare il nome accessibile.


<!-- Data binding maps the image alt attribute to the data source title field -->
<div class="..." data-win-control="Win.Binding.Template">
    <div class="image" data-win-bind="...; alt: title"></div>
    <div class="text">
        <h1 class="title" data-win-bind="textContent: title"></h1>
        <p class="description" data-win-bind="textContent: description"></p>
    </div>
</div>

<!-- List view can set the accessible name with aria-labelledby or aria-label. -->
<h1 id="pageTitle">Items collection page</ h1>
<div data-win-control="Win.UI.ListView" data-win-options="{...}" 
    aria-labelledby="pageTitle">
</div>

Nota  La piattaforma di accessibilità dell'automazione dell'interfaccia utente Microsoft genera la rappresentazione dell'albero dell'interfaccia utente delle app per l'uso da parte dei client di automazione dell'interfaccia utente. Rappresenta la struttura degli elementi di interfaccia utente disponibili per l'ispezione e l'interazione con gli strumenti di Assistive Technology. Non specifichi direttamente le informazioni di automazione interfaccia utente. Sfrutti invece il supporto incorporato dell'host di Windows Runtime che converte qualunque attribuzione rivelante per il contenuto HTML in informazioni equivalenti di automazione interfaccia utente, creando una rappresentazione di automazione o accessibilità comune di ogni app visualizzata.

Valore

Se un elemento dell'interfaccia utente dispone di un valore associato importante per la comprensione della condizione dell'elemento di interfaccia utente, devi esporre questa informazione per i framework di accessibilità.

Ad esempio, un controllo HTML ospitato in un tag div il cui attributo role è impostato su "slider", "progressbar" o "spinbutton", deve esporre gli attributi aria-valuemax, aria-valuemin e aria-valuenow. Inoltre, l'app deve gestire l'attributo aria-valuenow in modo dinamico affinché rifletta le modifiche nell'elemento. Una pratica consigliata è quella di impostare l'attributo aria-valuetext affinché restituisca la stringa di testo corrispondente al valore corrente dell'attributo aria-valuenow.


<div id="sl" role="slider" ... 
    aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"...>
</div>

<script>
    function manageValue()
    {
        ...
        // Dynamically maintain aria properties for the current value and text.
        sl.setAttribute("aria-valuenow", currentValue);
        sl.setAttribute("aria-valuetext", currentValueText);
        ...
    }
}
</script>


Stato

A volte è importante impostare e conservare lo stato di accessibilità di un elemento dell'interfaccia utente (ad esempio, attraverso l'attributo aria-disabled). L'impostazione e il mantenimento dello stato di accessibilità è particolarmente importante per gli elementi dell'interfaccia utente personalizzati. Il sistema dispone di un supporto integrato per il mantenimento dello stato di accessibilità per tutti gli elementi di interfaccia utente standard e per i controlli di Windows.


<!-- Declaring accessibility attributes for a custom image button. -->
<div id="folders" role="tree" aria-label="Folders">
...
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if ( e.keyCode === Win.Utilities.Key.leftArrow) {
            // The node is collapsed if it has children
            e.srcElement.setAttribute('aria-expanded', false );
        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {
            // The node is expanded if it has children
            e.srcElement.setAttribute('aria-expanded', true );
        }
    });
</script>

Nota  Per rimuovere un elemento e tutto il relativo contenuto dall'albero di automazione dell'interfaccia utente, usa l'attributo aria-hidden con il valore impostato su true.

Ruolo

Assegna un ruolo WAI-ARIA valido (non astratto) agli elementi di interfaccia utente personalizzati. Ciò fornisce alle utilità di lettura dello schermo più informazioni sul comportamento e sulle proprietà da aspettarsi da elementi di interfaccia utente.

È importante anche impostare il ruolo degli elementi a cui fa riferimento l'attributo aria-labelledby e degli elementi che espongono elementi di interfaccia utente importanti per l'interazione dell'utente.

Nell'esempio seguente, gli elementi di una visualizzazione struttura contrassegnati con i ruoli WAI-ARIA corrispondenti per consentire alle utilità di lettura dello schermo di comprendere la struttura della visualizzazione struttura e per esporre il comportamento di espansione–riduzione.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0" 
        aria-activedescendant="n-0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

Per illustrare al meglio i concetti di accessibilità, la visualizzazione struttura dell'esempio precedente è stata semplificata per includere un singolo elemento per ciascun nodo di visualizzazione della struttura. In un'implementazione effettiva, i nodi espandibili includerebbero due elementi secondari, uno per rappresentare la funzionalità di espansione–riduzione e un altro per esporre la funzionalità di attivazione del nodo (ad esempio, caricando un elenco dei file e delle cartelle contenuti).


<!-- An example of the expandable and actionable node. -->
...
    <div role="presentation">
    <img src="images/expand.png" role="presentation" onclick="expColl(event)"/>
    <span id="n-0" role="treeitem" onclick="activateItem(event)"
        aria-expanded="true" >Libraries</span>
    </div>
...

Nell'esempio precedente, role="presentation" rimuove gli elementi che non hanno valore semantico dalla struttura dell'interfaccia utente(o dalla struttura di accessibilità). role="presentation" rimuove l'elemento corrente dalla struttura dell'interfaccia utente ma non influenza gli elementi secondari contenuti. Per rimuovere l'elemento dell'interfaccia utente e tutti gli elementi figlio dalla struttura dell'interfaccia utente, usa aria-hidden="true".

Alcuni tag HTML5, ad esempio a o img, hanno ruoli impliciti forti che non possono essere sovrascritti tranne che con il ruolo "presentation".

Descrizione accessibile (facoltativa)

La descrizione accessibile offre altre informazioni di accessibilità su un particolare elemento dell'interfaccia utente. Fornisci una descrizione accessibile quando il solo nome accessibile non esprime in maniera adeguata lo scopo di un elemento.

L'utilità per la lettura dello schermo Assistente vocale legge la descrizione accessibile di un elemento solo quando l'utente richiede altre informazioni sull'elemento premendo BLOC MAIUSC + F.

Il modo migliore per aggiungere una descrizione accessibile è usare l'attributo aria-describedby. Questo attributo fa riferimento a uno o più elementi dell'interfaccia utente diversi il cui contenuto di testo verrà usato dal sistema come descrizione accessibile. In alternativa, puoi aggiungere la descrizione accessibile implementando una descrizione comando che includa l'attributo title. Per altre info, vedi Rendere accessibili le descrizioni comando.


<!-- Declaring visible text as the accessible description of a table. -->
<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>
<table aria-describedby="tableDesc">...<table>

Argomenti correlati

Come soddisfare i requisti minimi di accessibilità

 

 

Mostra:
© 2014 Microsoft