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 le utilità per la lettura dello 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. Le utilità per la lettura dello schermo vengono spesso controllate tramite movimenti 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 le proprie utilità per la lettura dello schermo con il proprio comportamento e configurazione univoci. Ad esempio, la maggior parte delle utilità per la lettura dello schermo legge il testo associato a un controllo quando riceve lo stato attivo, consentendo agli utenti di orientarsi mentre passano attraverso 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 delle utilità per la lettura dello schermo legge automaticamente il testo associato a un controllo che riceve lo stato attivo per l'accessibilità. Ciò significa che i controlli, ad esempio Label o Button, con un Text set di proprietà saranno accessibili per l'utente. Altri elementi come Image, ImageButton e ActivityIndicator, invece, potrebbero non essere presenti nell'albero di accessibilità perché non sono associati ad 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.

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.

La SemanticProperties classe definisce le proprietà associate seguenti:

• Description, di tipo string, che rappresenta una descrizione che verrà letta ad alta voce dall'utilità per la lettura dello schermo. Per altre informazioni, vedere Description.
• 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 altre informazioni sulle proprietà associate, vedere Proprietà associate.

Descrizione

La Description proprietà associata rappresenta un breve descrittivo string utilizzato da un'utilità per la lettura dello schermo 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, un elemento Label accanto a un controllo Switch può essere utilizzato per descrivere che cosa rappresenta Switch. Per ottenere questo risultato, è possibile procedere come segue in XAML:

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

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

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

Suggerimento

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.

Livelli intestazione

La HeadingLevel proprietà associata consente di contrassegnare un elemento come intestazione per organizzare l'interfaccia utente e semplificare la navigazione. Alcune utilità per la lettura dello schermo consentono agli utenti di spostarsi rapidamente tra le intestazioni.

Le intestazioni hanno un livello compreso tra 1 e 9 e sono rappresentate dall'enumerazione SemanticHeadingLevel , che definisce Nonee Level1 attraverso Level9 i membri.

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.Level1);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level1);

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

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

Stato attivo semantico

I controlli hanno un SetSemanticFocus metodo di estensione che forza lo stato attivo dell'utilità per la lettura dello schermo a un elemento specificato. Ad esempio, dato un Label denominato label, lo stato attivo dell'utilità per la lettura dello schermo può essere forzato all'elemento con il codice seguente:

label.SetSemanticFocus();

Utilità per la lettura dello schermo semantica

.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 Default proprietà ed è disponibile nello spazio dei Microsoft.Maui.Accessibility nomi .

Per indicare a un'utilità per la lettura dello schermo di annunciare il testo, usare il Announce metodo , passando un string argomento che rappresenta il testo. L'esempio seguente illustra l'uso di questo metodo:

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

Limiti

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 Name.
• HelpText, di tipo string, rappresenta una descrizione più lunga dell'elemento, che può essere considerata come testo della descrizione comando 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 altre informazioni sulle proprietà associate, vedere Proprietà associate.

Le utilità per la lettura dello schermo diverse 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.

ExcludedWithChildren

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 impostata 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

La IsInAccessibleTree proprietà associata, di tipo bool?, determina se l'elemento è visibile alle utilità per la lettura dello schermo. Deve essere impostato su true per usare le altre proprietà di automazione. Per ottenere questo risultato, è possibile procedere come segue in XAML:

<Entry AutomationProperties.IsInAccessibleTree="true" />

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

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

Name

Il valore della proprietà associata Name deve essere una stringa di testo breve e descrittiva che l'utilità per la lettura dello schermo possa usare per annunciare un elemento. Questa proprietà deve essere impostata per gli elementi indispensabili per comprendere il contenuto o l'interazione con l'interfaccia utente. Per ottenere questo risultato, è possibile procedere come segue in XAML:

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

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

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

HelpText

La proprietà associata HelpText deve essere impostata su testo che descriva l'elemento dell'interfaccia utente e assimilabile al testo della descrizione comando associata all'elemento. Per ottenere questo risultato, è possibile procedere come segue in XAML:

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

In alternativa, può essere impostata 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ò essere talvolta omessa e sostituita con testo segnaposto. Ad esempio, "Inserisci qui il tuo nome" è un buon candidato per la proprietà Entry.Placeholder che inserisce il testo nel controllo prima dell'effettivo input dell'utente.

LabeledBy

La proprietà associata LabeledBy consente a un altro elemento di definire le informazioni di accessibilità per l'elemento corrente. Ad esempio, un elemento Label accanto a un controllo Entry può essere utilizzato per descrivere che cosa rappresenta Entry. Per ottenere questo risultato, è possibile procedere come segue in XAML:

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

In alternativa, può essere impostata 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);

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. Per informazioni su come eseguire il test dell'accessibilità in ogni piattaforma, visitare i collegamenti seguenti:

• Testare l'accessibilità dell'app in Android.
• Verifica dell'accessibilità delle app in iOS.
• Test per l'accessibilità in OS X
• Test di accessibilità in Windows.

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

• Informazioni dettagliate sull'accessibilità per app Android e Windows.
• Scanner di accessibilità per le app Android.
• Controllo accessibilità per le app iOS e macOS.
• Controllo layout di Android Studio per le app Android.
• Xcode View Debugger per le app iOS e macOS.

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 delle utilità per la lettura dello schermo

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

• Android ha TalkBack. Per informazioni sull'abilitazione di TalkBack, vedere Abilitare TalkBack.
• iOS e macOS hanno VoiceOver. Per informazioni sull'abilitazione di VoiceOver, vedere Abilitare VoiceOver.
• Windows ha Assistente vocale. Per informazioni sull'abilitazione dell'Assistente vocale, vedere Abilitare l'Assistente vocale.

Abilitare TalkBack

La principale utilità per la lettura dello schermo usata in Android è TalkBack. 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. Selezionare OK.

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 di abilitazione di VoiceOver, vedi Attivare e praticare VoiceOver su i Telefono 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(Apri training voiceover).

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. Questi tasti possono essere premuti di nuovo 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: