Condividi tramite

Creare app accessibili con proprietà semantiche

La semantica per l'accessibilità riguarda la creazione di esperienze che rendono le tue app inclusive per le persone che usano la tecnologia in un'ampia gamma di ambienti e approcci all'interfaccia utente con una gamma di esigenze ed esperienze. In molte situazioni, i requisiti legali per l'accessibilità possono offrire agli sviluppatori un impulso per risolvere i problemi di accessibilità. Indipendentemente da ciò, è consigliabile creare app inclusive e accessibili in modo che le app raggiungano il maggior numero possibile di destinatari.

Le linee guida per l'accessibilità dei contenuti Web (WCAG) sono lo standard di accessibilità globale e il benchmark legale per il Web e i dispositivi mobili. Queste linee guida descrivono i vari modi in cui le app possono essere rese più percepibili, utilizzabili, comprensibili e affidabili, per tutti.

Molte esigenze di accessibilità degli utenti sono soddisfatte dai prodotti di assistive technology installati dall'utente o da strumenti e impostazioni forniti dal sistema operativo. Sono incluse funzionalità come i lettori di schermo, l'ingrandimento dello schermo e le impostazioni a contrasto elevato.

Le utilità per la lettura dello schermo in genere forniscono descrizioni uditive dei controlli visualizzati sullo schermo. Queste descrizioni consentono agli utenti di spostarsi nell'app e fornire riferimenti ai controlli, ad esempio immagini, che non hanno input o testo. I lettori di schermo sono spesso controllati tramite gesti sul touchscreen, sul trackpad o sulla tastiera. Per informazioni sull'abilitazione delle utilità per la lettura dello schermo, vedere Abilitare le utilità per la lettura dello schermo.

I sistemi operativi hanno i propri lettori di schermo con comportamento e configurazione unici. Ad esempio, la maggior parte dei screen reader legge il testo associato a un controllo quando riceve il focus, consentendo agli utenti di orientarsi mentre navigano l'app. Tuttavia, alcune utilità per la lettura dello schermo possono anche leggere l'intera interfaccia utente dell'app quando viene visualizzata una pagina, che consente all'utente di ricevere tutto il contenuto informativo disponibile della pagina prima di tentare di spostarsi.

La maggior parte dei lettori di schermo leggerà automaticamente qualsiasi testo associato a un controllo che riceve l'attenzione sull'accessibilità. Ciò significa che i controlli, ad esempio Label o Button, con un Text set di proprietà saranno accessibili per l'utente. Tuttavia, Image, ImageButton, ActivityIndicatore altri potrebbero non trovarsi nell'albero di accessibilità perché non è associato alcun testo.

.NET Multipiattaforma App UI (.NET MAUI) supporta due approcci per fornire l'accesso all'esperienza di accessibilità della piattaforma sottostante. Le proprietà semantiche sono l'approccio MAUI .NET per fornire valori di accessibilità nelle app e sono l'approccio consigliato. Le proprietà di automazione sono l'approccio Xamarin.Forms per fornire valori di accessibilità nelle app e sono state sostituite dalle proprietà semantiche. In entrambi i casi, l'ordine di accessibilità predefinito dei controlli è lo stesso ordine in cui sono elencati in XAML o aggiunti al layout. Tuttavia, layout diversi potrebbero avere fattori aggiuntivi che influenzano l'ordine di accessibilità. Ad esempio, l'ordine di accessibilità di StackLayout è basato anche sull'orientamento e l'ordine di accessibilità di è basato sulla relativa disposizione di Grid righe e colonne. Per altre informazioni sull'ordinamento dei contenuti, vedere Ordinamento significativo dei contenuti nel blog di Xamarin.

Annotazioni

Quando un WebView oggetto visualizza un sito Web accessibile, sarà accessibile anche in un'app MAUI .NET. Viceversa, quando un WebView oggetto visualizza un sito Web non accessibile, non sarà accessibile in un'app .NET MAUI.

Proprietà semantiche

Le proprietà semantiche vengono usate per definire informazioni sui controlli che devono ricevere lo stato attivo sull'accessibilità e sul testo da leggere ad alta voce all'utente. Le proprietà semantiche sono proprietà associate che possono essere aggiunte a qualsiasi elemento per impostare le API di accessibilità della piattaforma sottostanti.

Importante

Le proprietà semantiche non tentano di forzare il comportamento equivalente in ogni piattaforma. Si basano invece sull'esperienza di accessibilità fornita da ogni piattaforma.

La SemanticProperties classe definisce le proprietà associate seguenti:

  • Description, di tipo string, che rappresenta una descrizione che verrà letta ad alta voce dal lettore di schermo. Per altre informazioni, vedere Descrizione.
  • Hint, di tipo string, simile a Description, ma fornisce contesto aggiuntivo, ad esempio lo scopo di un controllo. Per altre informazioni, vedere Hint.
  • HeadingLevel, di tipo SemanticHeadingLevel, che consente di contrassegnare un elemento come intestazione per organizzare l'interfaccia utente e semplificare la navigazione. Per altre informazioni, vedere Livelli di intestazione.

Queste proprietà associate impostano i valori di accessibilità della piattaforma in modo che un'utilità per la lettura dello schermo possa parlare dell'elemento. Per ulteriori informazioni sulle proprietà associate, vedere Proprietà associate.

Descrizione

La Description proprietà associata rappresenta una breve descrizione string che un lettore di schermo utilizza per annunciare un elemento. Questa proprietà deve essere impostata per gli elementi che hanno un significato importante per comprendere il contenuto o interagire con l'interfaccia utente. L'impostazione di questa proprietà può essere eseguita in XAML:

<Image Source="dotnet_bot.png"
       SemanticProperties.Description="Cute dot net bot waving hi to you!" />

In alternativa, può essere impostato in C#:

Image image = new Image { Source = "dotnet_bot.png" };
SemanticProperties.SetDescription(image, "Cute dot net bot waving hi to you!");

Inoltre, il SetValue metodo può essere usato anche per impostare la Description proprietà associata:

image.SetValue(SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!");

Le informazioni sull'accessibilità per un elemento possono essere definite anche in un altro elemento. Ad esempio, è possibile usare un Label oggetto accanto a un Switch oggetto per descrivere ciò che rappresenta l'oggetto Switch . Questa operazione può essere eseguita in XAML come indicato di seguito:

<Label x:Name="label"
       Text="Enable dark mode: " />
<Switch SemanticProperties.Description="{Binding x:DataType='Label', Source={x:Reference label}, Path=Text}" />

In alternativa, può essere impostato in C# come indicato di seguito:

Label label = new Label
{
    Text = "Enable dark mode: "
};
Switch mySwitch = new Switch();
SemanticProperties.SetDescription(mySwitch, label.Text);

Avvertimento

  • Evitare di impostare la Description proprietà associata su un oggetto Label. Ciò impedirà alla Text proprietà di essere letta dall'utilità per la lettura dello schermo. Ciò è dovuto al fatto che il testo visivo dovrebbe idealmente corrispondere al testo letto ad alta voce dallo screen reader.
  • Evitare di impostare la Description proprietà associata su un oggetto Entry o Editor su Android. In questo modo le azioni di Talkback smetteranno di funzionare. Utilizzare invece la Placeholder proprietà o la Hint proprietà associata.
  • Su iOS, se si imposta la Description proprietà su qualsiasi controllo con figli, il "screen reader" non sarà in grado di raggiungere i figli. Ciò è dovuto al fatto che iOS non fornisce funzionalità di accessibilità che consentono la navigazione da un elemento padre a un elemento figlio.

Alludere

La Hint proprietà associata rappresenta un oggetto string che fornisce contesto aggiuntivo alla Description proprietà associata, ad esempio lo scopo di un controllo. L'impostazione di questa proprietà può essere eseguita in XAML:

<Image Source="like.png"
       SemanticProperties.Description="Like"
       SemanticProperties.Hint="Like this post." />

In alternativa, può essere impostato in C#:

Image image = new Image { Source = "like.png" };
SemanticProperties.SetDescription(image, "Like");
SemanticProperties.SetHint(image, "Like this post.");

Inoltre, il SetValue metodo può essere usato anche per impostare la Hint proprietà associata:

image.SetValue(SemanticProperties.HintProperty, "Like this post.");

In Android questa proprietà si comporta in modo leggermente diverso a seconda del controllo a cui è collegato. Ad esempio, per i controlli senza valori di testo, ad esempio Switch e CheckBox, i controlli visualizzeranno l'hint con il controllo . Tuttavia, per i controlli con valori di testo, l'hint non viene visualizzato e viene letto dopo il valore di testo.

Avvertimento

La Hint proprietà è in conflitto con la Entry.Placeholder proprietà su Android, che entrambi mappano alla stessa proprietà della piattaforma. Pertanto, impostare un valore diverso per Hint rispetto al valore di Entry.Placeholder non è consigliato.

Livelli di intestazione

La HeadingLevel proprietà associata consente di contrassegnare un elemento come intestazione per organizzare l'interfaccia utente e semplificare la navigazione. Alcuni screen reader consentono agli utenti di saltare rapidamente tra le intestazioni.

Le intestazioni hanno un livello compreso tra 1 e 9 e sono rappresentate dall'enumerazione SemanticHeadingLevel, che definisce i membri da None a Level1.

Importante

Anche se Windows offre 9 livelli di intestazioni, Android e iOS offrono solo un'intestazione singola. Pertanto, quando HeadingLevel è impostato in Windows, esegue il mapping al livello di titolo corretto. Tuttavia, quando è impostato su Android e iOS, viene mappato a un singolo livello di intestazione.

Nell'esempio seguente viene illustrata l'impostazione di questa proprietà associata:

<Label Text="Get started with .NET MAUI"
       SemanticProperties.HeadingLevel="Level1" />
<Label Text="Paragraphs of text go here." />
<Label Text="Installation"
       SemanticProperties.HeadingLevel="Level2" />
<Label Text="Paragraphs of text go here." />
<Label Text="Build your first app"
       SemanticProperties.HeadingLevel="Level3" />
<Label Text="Paragraphs of text go here." />
<Label Text="Publish your app"
       SemanticProperties.HeadingLevel="Level4" />
<Label Text="Paragraphs of text go here." />

In alternativa, può essere impostato in C#:

Label label1 = new Label { Text = "Get started with .NET MAUI" };
Label label2 = new Label { Text = "Paragraphs of text go here." };
Label label3 = new Label { Text = "Installation" };
Label label4 = new Label { Text = "Paragraphs of text go here." };
Label label5 = new Label { Text = "Build your first app" };
Label label6 = new Label { Text = "Paragraphs of text go here." };
Label label7 = new Label { Text = "Publish your app" };
Label label8 = new Label { Text = "Paragraphs of text go here." };
SemanticProperties.SetHeadingLevel(label1, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label3, SemanticHeadingLevel.Level2);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level3);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level4);

Inoltre, il SetValue metodo può essere usato anche per impostare la HeadingLevel proprietà associata:

label1.SetValue(SemanticProperties.HeadingLevelProperty, SemanticHeadingLevel.Level1);

Focus semantico

I controlli hanno un SetSemanticFocus metodo di estensione che forza il focus del lettore di schermo su un elemento specificato. Ad esempio, dato un Label denominato label, il focus del lettore di schermo può essere forzato sull'elemento con il codice seguente:

label.SetSemanticFocus();

Lettore di schermo semantico

.NET MAUI fornisce l'interfaccia ISemanticScreenReader con cui è possibile indicare a un'utilità per la lettura dello schermo di annunciare il testo all'utente. L'interfaccia viene esposta tramite la proprietà Default ed è disponibile nello spazio dei nomi Microsoft.Maui.Accessibility.

Per istruire un screen reader ad annunciare il testo, usa il metodo Announce, passando un argomento string che rappresenta il testo. L'esempio seguente illustra l'uso di questo metodo:

SemanticScreenReader.Default.Announce("This is the announcement text.");

Limitazioni

L'utilità per la lettura dello schermo della piattaforma predefinita deve essere abilitata per la lettura ad alta voce del testo.

Proprietà di automazione

Le proprietà di automazione sono proprietà associate che possono essere aggiunte a qualsiasi elemento per indicare come l'elemento viene segnalato al framework di accessibilità della piattaforma sottostante.

La AutomationProperties classe definisce le proprietà associate seguenti:

  • ExcludedWithChildren, di tipo bool?, determina se un elemento e i relativi elementi figlio devono essere esclusi dall'albero di accessibilità. Per altre informazioni, vedere ExcludedWithChildren.
  • IsInAccessibleTree, di tipo bool?, indica se l'elemento è disponibile nell'albero di accessibilità. Per altre informazioni, vedere IsInAccessibleTree.
  • Name, di tipo string, rappresenta una breve descrizione dell'elemento che funge da identificatore parlabile per tale elemento. Per altre informazioni, vedere Nome.
  • HelpText, di tipo string, rappresenta una descrizione più lunga dell'elemento, che può essere pensata come tooltip associato all'elemento. Per altre informazioni, vedere HelpText.
  • LabeledBy, di tipo VisualElement, che consente a un altro elemento di definire le informazioni di accessibilità per l'elemento corrente. Per altre informazioni, vedere LabeledBy.

Queste proprietà associate impostano i valori di accessibilità della piattaforma in modo che un'utilità per la lettura dello schermo possa parlare dell'elemento. Per ulteriori informazioni sulle proprietà associate, vedere Proprietà associate.

I diversi lettori di schermo leggono valori di accessibilità diversi. Pertanto, quando si usano le proprietà di automazione, è consigliabile eseguire test di accessibilità approfonditi in ogni piattaforma per garantire un'esperienza ottimale.

Importante

Le proprietà di automazione sono l'approccio Xamarin.Forms per fornire valori di accessibilità nelle app e sono state sostituite dalle proprietà semantiche. Per altre informazioni sulle proprietà semantiche, vedere Proprietà semantiche.

Escluso con Bambini

La ExcludedWithChildren proprietà associata, di tipo bool?, determina se un elemento e i relativi elementi figlio devono essere esclusi dall'albero di accessibilità. Ciò consente scenari come la visualizzazione di un AbsoluteLayout su un altro layout, ad esempio , StackLayoutcon l'elemento StackLayout escluso dall'albero di accessibilità quando non è visibile. Può essere usato da XAML come indicato di seguito:

<StackLayout AutomationProperties.ExcludedWithChildren="true">
...
</StackLayout>

In alternativa, può essere impostato in C# come indicato di seguito:

StackLayout stackLayout = new StackLayout();
...
AutomationProperties.SetExcludedWithChildren(stackLayout, true);

Quando questa proprietà associata è impostata, .NET MAUI imposta la IsInAccessibleTree proprietà associata su false sull'elemento specificato e sui relativi elementi figlio.

IsInAccessibleTree

Avvertimento

Questa proprietà associata deve in genere rimanere non configurata. La maggior parte dei controlli deve essere presente nell'albero di accessibilità e la AutomationProperties.ExcludedWithChildren proprietà associata può essere impostata negli scenari in cui un elemento e i relativi elementi figlio devono essere rimossi dall'albero di accessibilità.

La proprietà associata IsInAccessibleTree, di tipo bool?, determina se l'elemento è visibile ai screen reader. Deve essere impostato su true per usare le altre proprietà di automazione. Questa operazione può essere eseguita in XAML come indicato di seguito:

<Entry AutomationProperties.IsInAccessibleTree="true" />

In alternativa, può essere impostato in C# come indicato di seguito:

Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);

Avvertimento

In iOS, se la IsInAccessibleTree proprietà è true su qualsiasi controllo con elementi figlio, l'utilità per la lettura dello schermo non sarà in grado di raggiungere gli elementi figlio. Ciò è dovuto al fatto che iOS non fornisce funzionalità di accessibilità che consentono la navigazione da un elemento padre a un elemento figlio.

Nome

Importante

La Name proprietà associata è stata deprecata in .NET 8. Usare invece la Description proprietà associata.

Il Name valore della proprietà associata deve essere una stringa di testo breve e descrittiva usata da uno screen reader per descrivere un elemento. Questa proprietà deve essere impostata per gli elementi che hanno un significato importante per comprendere il contenuto o interagire con l'interfaccia utente. Questa operazione può essere eseguita in XAML come indicato di seguito:

<ActivityIndicator AutomationProperties.IsInAccessibleTree="true"
                   AutomationProperties.Name="Progress indicator" />

In alternativa, può essere impostato in C# come indicato di seguito:

ActivityIndicator activityIndicator = new ActivityIndicator();
AutomationProperties.SetIsInAccessibleTree(activityIndicator, true);
AutomationProperties.SetName(activityIndicator, "Progress indicator");

Testo di aiuto

Importante

La HelpText proprietà associata è stata deprecata in .NET 8. Usare invece la Hint proprietà associata.

La HelpText proprietà associata deve essere impostata su un testo che descrive l'elemento dell'interfaccia utente e può essere considerato come una descrizione comando associata all'elemento. Questa operazione può essere eseguita in XAML come indicato di seguito:

<Button Text="Toggle ActivityIndicator"
        AutomationProperties.IsInAccessibleTree="true"
        AutomationProperties.HelpText="Tap to toggle the activity indicator" />

In alternativa, può essere impostato in C# come indicato di seguito:

Button button = new Button { Text = "Toggle ActivityIndicator" };
AutomationProperties.SetIsInAccessibleTree(button, true);
AutomationProperties.SetHelpText(button, "Tap to toggle the activity indicator");

In alcune piattaforme, per i controlli di modifica come Entry, la proprietà HelpText può talvolta essere omessa e sostituita con un testo segnaposto. Ad esempio, "Immettere il nome qui" è un buon candidato per la Entry.Placeholder proprietà che inserisce il testo nel controllo prima dell'input effettivo dell'utente.

EtichettatoDa

Importante

La LabeledBy proprietà associata è stata deprecata in .NET 8. Invece, usa un'associazione SemanticProperties.Description. Per altre informazioni, vedere SemanticProperties: Description.

La LabeledBy proprietà associata consente a un altro elemento di definire le informazioni di accessibilità per l'elemento corrente. Ad esempio, è possibile usare un Label oggetto accanto a un Entry oggetto per descrivere ciò che rappresenta l'oggetto Entry . Questa operazione può essere eseguita in XAML come indicato di seguito:

<Label x:Name="label" Text="Enter your name: " />
<Entry AutomationProperties.IsInAccessibleTree="true"
       AutomationProperties.LabeledBy="{x:Reference label}" />

In alternativa, può essere impostato in C# come indicato di seguito:

Label label = new Label { Text = "Enter your name: " };
Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);
AutomationProperties.SetLabeledBy(entry, label);

Importante

La funzionalità AutomationProperties.LabeledByProperty non è supportata su iOS.

Test dell'accessibilità

Le app MAUI .NET hanno in genere come destinazione più piattaforme, il che significa testare le funzionalità di accessibilità in base alla piattaforma. Seguire questi collegamenti per informazioni su come testare l'accessibilità in ogni piattaforma:

Gli strumenti seguenti possono essere utili per i test di accessibilità:

Tuttavia, nessuno di questi strumenti può emulare perfettamente l'esperienza utente dell'utilità per la lettura dello schermo e il modo migliore per testare e risolvere i problemi delle app per l'accessibilità sarà sempre manualmente nei dispositivi fisici con utilità per la lettura dello schermo.

Abilitazione dei lettori di schermo

Ogni piattaforma ha un'utilità per la lettura dello schermo predefinita diversa per raccontare i valori di accessibilità:

Abilitare TalkBack

TalkBack è l'utilità per la lettura dello schermo principale usata in Android. La modalità di abilitazione dipende dal produttore del dispositivo, dalla versione Android e dalla versione talkBack. Tuttavia, TalkBack può in genere essere abilitato nel dispositivo Android tramite le impostazioni del dispositivo:

  1. Aprire l'app Impostazioni .
  2. Selezionare Accessibilità>TalkBack.
  3. Attivare Usa TalkBack .
  4. Seleziona OK.

Annotazioni

Anche se questi passaggi si applicano alla maggior parte dei dispositivi, potrebbero verificarsi alcune differenze.

Un'esercitazione di TalkBack viene aperta automaticamente la prima volta che si abilita TalkBack.

Per metodi alternativi di abilitazione di TalkBack, vedere Attivare o disattivare Talkback.

Abilitare VoiceOver

VoiceOver è l'utilità per la lettura dello schermo principale usata in iOS e macOS. In iOS, VoiceOver può essere abilitato come segue:

  1. Aprire l'app Impostazioni .
  2. Selezionare Accessibilità>VoiceOver.
  3. Attivare VoiceOver .

È possibile aprire un'esercitazione su VoiceOver selezionando VoiceOver Practice,una volta abilitato VoiceOver.

Per metodi alternativi per abilitare VoiceOver, vedi Attivare e praticare VoiceOver su iPhone e attivare e praticare VoiceOver su iPad.

In macOS, VoiceOver può essere abilitato come segue:

  1. Aprire Le preferenze di sistema.
  2. Selezionare Accessibilità>VoiceOver.
  3. Selezionare Abilita VoiceOver.
  4. Selezionare Usa VoiceOver.

È possibile aprire un'esercitazione su VoiceOver selezionando Open VoiceOver Training...

Per metodi alternativi per abilitare VoiceOver, vedi Attivare o disattivare VoiceOver su Mac.

Abilitare l'Assistente vocale

Assistente vocale è l'utilità per la lettura dello schermo principale usata in Windows. È possibile abilitare l'Assistente vocale premendo il tasto Logo di Windows + Ctrl + Invio insieme. Premete nuovamente questi tasti per arrestare l'Assistente vocale.

Per altre informazioni sull'Assistente vocale, vedere La guida completa all'Assistente vocale.

Elenco di controllo per l'accessibilità

Seguire questi suggerimenti per assicurarsi che le app MAUI .NET siano accessibili al pubblico più ampio possibile:

  • Assicurarsi che l'app sia percepibile, operabile, comprensibile e affidabile per tutti seguendo le linee guida per l'accessibilità del contenuto Web (WCAG). WCAG è lo standard di accessibilità globale e il benchmark legale per web e dispositivi mobili. Per altre informazioni, vedere Linee guida per l'accessibilità del contenuto Web (WCAG).
  • Assicurarsi che l'interfaccia utente sia autodescrittiva. Verificare che tutti gli elementi dell'interfaccia utente siano accessibili dall'utilità per la lettura dello schermo. Aggiungere testo descrittivo e hint quando necessario.
  • Assicurarsi che le immagini e le icone abbiano descrizioni di testo alternative.
  • Supporta tipi di carattere di grandi dimensioni e contrasto elevato. Evitare di fissare in modo rigido le dimensioni del controllo e preferire invece layout che si ridimensionano per contenere caratteri di dimensioni maggiori. Testare le combinazioni di colori in modalità a contrasto elevato per assicurarsi che siano leggibili.
  • Progettare la struttura ad albero visuale tenendo presente la navigazione. Usare i controlli di layout appropriati in modo che lo spostamento tra i controlli usando metodi di input alternativi segua lo stesso flusso logico dell'uso del tocco. Inoltre, escludere dagli lettori di schermo elementi non necessari (ad esempio, immagini decorative o etichette per campi già accessibili).
  • Non fare affidamento solo su segnali audio o colori. Evitare situazioni in cui l'unica indicazione dello stato di avanzamento, del completamento o di un altro stato è una modifica del suono o del colore. Progettare l'interfaccia utente per includere segnali visivi chiari, con suono e colore solo per rinforzo o aggiungere indicatori di accessibilità specifici. Quando si scelgono i colori, provare a evitare una tavolozza difficile da distinguere per gli utenti con cecità di colore.
  • Fornire didascalie per il contenuto video e uno script leggibile per il contenuto audio. È anche utile fornire controlli che regolano la velocità del contenuto audio o video e assicurano che i controlli volume e trasporto siano facili da trovare e usare.
  • Localizzare le descrizioni di accessibilità quando l'app supporta più lingue.
  • Testare le funzionalità di accessibilità dell'app in ogni piattaforma di destinazione. Per altre informazioni, vedere Test dell'accessibilità.