Condividi tramite

Esporre informazioni di accessibilità di base

I concetti fondamentali sull'accessibilità si mappano a nome, ruolo e valore. Questo argomento illustra come esporre queste proprietà nell'app in modo che le tecnologie di assistive technology possano interpretare correttamente l'interfaccia utente.

Nome accessibile

Un nome accessibile è l'etichetta che un'utilità per la lettura dello schermo annuncia per un elemento dell'interfaccia utente. Impostarlo su elementi che trasmettono significato o supportano l'interazione, incluse immagini, campi di input, pulsanti, controlli e aree.

La tabella seguente descrive come definire o ottenere un nome accessibile per vari tipi di elementi in un'interfaccia utente XAML.

Tipo di elemento Descrizione
Testo statico Per TextBlock e RichTextBlock elementi, un nome accessibile viene determinato automaticamente dal testo visibile (interno). Tutto il testo in tale elemento viene usato come nome. Vedi Nome dal testo interno.
Immagini L'elemento Image XAML non ha un equivalente diretto all'attributo alt di HTML dell'elemento img e ad elementi simili. Usare AutomationProperties.Name per fornire un nome, oppure utilizzare la tecnica di sottotitolazione. Vedere Nomi accessibili per le immagini.
Elementi del modulo Il nome accessibile per un elemento del modulo deve corrispondere all'etichetta visualizzata per tale elemento. Vedere etichette e LabeledBy.
Pulsanti e collegamenti Per impostazione predefinita, il nome accessibile di un pulsante o di un collegamento si basa sul testo visibile, usando le stesse regole descritte in Nome dal testo interno. Nei casi in cui un pulsante contiene solo un'immagine, usare AutomationProperties.Name per fornire un equivalente di sola testo dell'azione prevista del pulsante.

La maggior parte degli elementi del contenitore (ad esempio i pannelli) non espone un nome accessibile. In Automazione interfaccia utente gli elementi figlio significativi devono fornire il nome e il ruolo, mentre il contenitore espone principalmente la struttura per l'attraversamento.

Ruolo e valore

I controlli XAML espongono il ruolo (e, se applicabile, il valore) tramite il supporto predefinito di Automazione dell'interfaccia utente. Esaminare queste proprietà con gli strumenti di automazione interfaccia utente o nella documentazione di AutomationPeer di ogni controllo. I ruoli vengono mappati a AutomationControlType e sono esposti alle tecnologie assistive tramite il AutomationPeer del controllo.

Solo i controlli con semantica dei valori espongono un valore di automazione interfaccia utente. Ad esempio, TextBox supporta IValueProvider tramite TextBoxAutomationPeer, in modo che le tecnologie assistive possano rilevare e leggere il valore corrente.

Annotazioni

Se si imposta AutomationProperties.Name in modo esplicito, non ripetere termini di ruolo/tipo, ad esempio "button" o "list" nel nome. Role/type deriva da LocalizedControlType e molte tecnologie di assistive technology lo aggiungono al nome. Il testo del ruolo ripetuto può produrre un output come "pulsante pulsante". Convalidare questo comportamento con il Narratore.

Influenza sugli alberi di visualizzazione dell'automazione dell'interfaccia utente

Automazione Interfaccia Utente rappresenta le relazioni tra elementi in tre visualizzazioni ad albero: grezzo, controllo e contenuto. Ogni visualizzazione ha uno scopo diverso. La visualizzazione non elaborata include quasi tutti gli elementi di automazione, la visualizzazione di controllo enfatizza i controlli interattivi e i punti di navigazione strutturali, e la visualizzazione del contenuto si concentra sugli elementi che trasmettono contenuti destinati all'utente. In pratica, le tecnologie di assistive technology e gli strumenti di ispezione dell'accessibilità si basano più spesso sulla visualizzazione di controllo, perché offre l'equilibrio più utile tra completezza e usabilità.

Per impostazione predefinita, la maggior parte degli elementi derivati dal Controllo viene visualizzata nella visualizzazione controlli quando l'app viene esposta tramite UI Automation. Nelle interfacce utente composte, questo può introdurre nodi duplicati o a basso valore che aggiungono rumore per gli utenti di assistive technology. Usare AutomationProperties.AccessibilityView per controllare la modalità di esposizione di elementi specifici nelle visualizzazioni albero. Ad esempio, l'inserimento di un elemento in Raw mantiene in genere l'elemento disponibile per scenari di diagnosi e percorribilità, escludendolo dalle visualizzazioni principali usate da molte tecnologie assistive. Per esaminare i modelli reali, esaminare i modelli di controllo in generic.xaml e cercare AutomationProperties.AccessibilityView.

Nome dal testo interno

Molti controlli XAML possono derivare un nome accessibile predefinito dal testo già visibile nell'interfaccia utente. Questo comportamento riduce la necessità di impostare AutomationProperties.Name in modo esplicito per i modelli comuni basati su testo e aiuta a mantenere ciò che gli utenti sentono allineato a ciò che vedono.

  • TextBlock, RichTextBlock e TextBox in genere alzano di livello il contenuto del testo come nome accessibile predefinito.
  • Le sottoclassi ContentControl valutano il valore Content e usano una strategia iterativa "ToString" per estrarre il contenuto testuale per il nome accessibile predefinito.

Annotazioni

UI Automation imposta un massimo di 2048 caratteri per il nome accessibile. Se la generazione automatica dei nomi produce una stringa più lunga, il valore viene troncato.

Nomi accessibili per le immagini

Per contenuti come immagini e grafici che non contengono testo, fornire un'alternativa di testo in modo che le utilità per la lettura dello schermo possano identificare e annunciare correttamente l'elemento. Poiché questi elementi in genere non espongono testo interno, Automazione interfaccia utente non può derivare automaticamente un nome accessibile predefinito. Gli oggetti visivi puramente decorativi o strutturali sono un'eccezione e in genere non devono essere denominati. Quando è necessario annunciare un'immagine significativa, impostare AutomationProperties.Name in modo esplicito, come illustrato nell'esempio seguente.

<Image
    Source="Assets/product.png"
    AutomationProperties.Name="Customer using the product" />

In alternativa, esporre una didascalia visibile e associarla all'immagine tramite AutomationProperties.LabeledBy. In questo modo l'etichetta parlata viene allineata al testo sullo schermo ed evita la duplicazione di stringhe nel markup. L'esempio di WinUI seguente illustra questo modello:

<StackPanel Spacing="8">
    <Image
        x:Name="heroImage"
        Width="480"
        Source="Assets/snoqualmie-NF.jpg"
        AutomationProperties.LabeledBy="{Binding ElementName=heroCaption}" />
    <TextBlock x:Name="heroCaption" Text="Mount Snoqualmie Skiing" />
</StackPanel>

Etichette e LabeledBy

Per i campi modulo, il modello di etichettatura preferito consiste nel creare il testo visibile dell'etichetta usando un TextBlock e fare riferimento a tale elemento dal controllo di input tramite AutomationProperties.LabeledBy. In questo modo viene creata un'associazione tra l'etichetta dell'interfaccia utente e il controllo nell'albero di automazione, in modo che le tecnologie di assistive technology possano annunciare un nome di campo corrispondente a quello visualizzato sullo schermo. Questo modello è in genere più gestibile rispetto alla duplicazione del testo dell'etichetta in più proprietà perché la stessa stringa di origine determina l'etichettatura sia visiva che accessibile.

<StackPanel x:Name="LayoutRoot" Spacing="12">
    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="firstNameLabel" Text="First name" />
        <TextBox
            x:Name="firstNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=firstNameLabel}" />
    </StackPanel>

    <StackPanel Orientation="Horizontal" Spacing="8">
        <TextBlock x:Name="lastNameLabel" Text="Last name" />
        <TextBox
            x:Name="lastNameTextBox"
            Width="180"
            AutomationProperties.LabeledBy="{Binding ElementName=lastNameLabel}" />
    </StackPanel>
</StackPanel>

Descrizione accessibile (facoltativo)

Una descrizione accessibile fornisce informazioni supplementari su un elemento dell'interfaccia utente quando il nome accessibile da solo non è sufficiente. Usarlo per aggiungere un contesto chiaro, ad esempio finalità, hint di utilizzo o dettagli importanti sul comportamento che aiutano gli utenti di assistive technology a comprendere come usare il controllo.

Nell'Assistente vocale la descrizione viene in genere letta su richiesta anziché come parte dell'annuncio predefinito. Gli utenti possono richiedere questo dettaglio aggiuntivo premendo CapsLock+F.

Considerare il nome accessibile come identificatore primario per il controllo e mantenerlo conciso. Quando è necessaria una spiegazione più dettagliata, fornire dettagli aggiuntivi tramite AutomationProperties.HelpText oltre a AutomationProperties.Name.

Test dell'accessibilità in anticipo e spesso

Il modo più affidabile per convalidare il supporto dell'utilità per la lettura dello schermo consiste nel testare l'app direttamente con un'utilità per la lettura dello schermo durante lo sviluppo, non solo in fase di rilascio. I test iniziali e ripetuti consentono di identificare i nomi accessibili mancanti o fuorvianti, l'esposizione non corretta del controllo e i problemi di navigazione, mentre le modifiche sono ancora poco costose da risolvere. Dopo ogni passaggio, perfezionare la struttura dell'interfaccia utente e le proprietà di automazione interfaccia utente in base a ciò che gli utenti sentono e come si spostano attraverso l'interfaccia. Per altri dettagli, vedere Test di accessibilità.

AccScope è uno strumento utile per questo flusso di lavoro perché visualizza l'interfaccia utente come albero di automazione, rendendo più semplice esaminare quali tecnologie di assistive technology possono individuare. La vista focalizzata sull'Assistente vocale consente di verificare come viene originato il testo e come gli elementi vengono raggruppati e ordinati per l'emissione vocale. Usarlo per tutto il ciclo di vita del prodotto, inclusa la convalida anticipata della progettazione e del modello di controllo, per rilevare i problemi di accessibilità strutturale prima che vengano visualizzati nei test utente. Per altri dettagli, vedere AccScope.

Nomi accessibili derivati da dati dinamici

Molti controlli Di Windows eseguono il rendering del contenuto tramite il data binding, il che significa che i nomi accessibili vengono spesso determinati dai dati di runtime anziché da XAML statici. Quando i modelli di elenco o elemento vengono popolati in modo dinamico, verificare che ogni elemento generato esponga un nome accessibile significativo al termine dell'associazione. A seconda del controllo e della composizione del modello, potrebbe essere necessario impostare o aggiornare le proprietà di accessibilità a livello di codice, in modo che l'albero di automazione rifletta lo stato di rendering finale. Per un esempio completo, consulta il "Scenario 4" nell'esempio di accessibilità XAML (esempio legacy archiviato).

Nomi accessibili e localizzazione

I nomi accessibili devono essere localizzati con lo stesso rigore del testo visibile dell'interfaccia utente. Archiviare le stringhe di etichetta nelle risorse di localizzazione e connetterle tramite i mapping delle direttive x:Uid in modo che l'output parlato corrisponda alla lingua dell'utente. Se si imposta AutomationProperties.Name in modo esplicito, assicurarsi che il valore provenga anche da risorse localizzate anziché da testo hardcoded.

Le proprietà associate in AutomationProperties usano una sintassi di chiave di risorsa qualificata per consentire la localizzazione della proprietà associata su un elemento specifico. Ad esempio, se l'elemento è denominato MediumButton, la chiave di risorsa per AutomationProperties.Name è MediumButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name.

  • Last updated on