Vytváření přístupných aplikací pomocí sémantických vlastností

Sémantika přístupnosti se zabývá vytvářením prostředí, díky kterým jsou vaše aplikace inkluzivní pro lidi, kteří používají technologie v široké škále prostředí a přistupují k uživatelskému rozhraní s celou řadou potřeb a prostředí. V mnoha situacích můžou právní požadavky na přístupnost poskytnout vývojářům informace o řešení problémů s přístupností. Bez ohledu na to je vhodné vytvářet inkluzivní a přístupné aplikace, aby vaše aplikace dosáhly největší možné cílové skupiny.

Pravidla pro přístupnost webového obsahu (WCAG) jsou globálním standardem přístupnosti a právním srovnávacím testem pro web a mobilní zařízení. Tyto pokyny popisují různé způsoby, jak aplikace mohou být pro všechny srozumitelnější, funkční, srozumitelné a robustní.

Mnoho potřeb přístupnosti uživatelů splňuje produkty technologie usnadnění nainstalované uživatelem nebo nástroji a nastaveními poskytovanými operačním systémem. Patří sem funkce, jako jsou čtečky obrazovky, zvětšení obrazovky a nastavení vysokého kontrastu.

Čtečky obrazovky obvykle poskytují hledaný popis ovládacích prvků, které se zobrazují na obrazovce. Tyto popisy pomáhají uživatelům procházet aplikaci a poskytovat odkazy na ovládací prvky, jako jsou obrázky, které nemají žádný vstup nebo text. Čtečky obrazovky se často řídí gesty na dotykové obrazovce, trackpadu nebo klávesnici. Informace o povolení čteček obrazovky najdete v tématu Povolení čteček obrazovky.

Operační systémy mají vlastní čtečky obrazovky s vlastním jedinečným chováním a konfigurací. Většina čteček obrazovky například přečte text přidružený k ovládacímu prvku, když dostane fokus, což uživatelům umožní orientovat se při procházení aplikace. Některé čtečky obrazovky ale můžou při zobrazení stránky také číst celé uživatelské rozhraní aplikace, což uživateli umožňuje získat veškerý dostupný informační obsah stránky před pokusem o navigaci.

Většina čteček obrazovky automaticky přečte veškerý text přidružený k ovládacímu prvku, který přijímá fokus přístupnosti. To znamená, že ovládací prvky, například Label nebo Button, které mají Text sadu vlastností, budou přístupné pro uživatele. Ale , , ImageButtonActivityIndicatora ostatní nemusí být ve stromu přístupnosti, Imageprotože žádný text není přidružen k nim.

Uživatelské rozhraní .NET Multi-platform App UI (.NET MAUI) podporuje dva přístupy k poskytování přístupu k prostředí přístupnosti základní platformy. Sémantické vlastnosti představují přístup .NET MAUI k poskytování hodnot přístupnosti v aplikacích a jsou doporučeným přístupem. Vlastnosti automatizace představují přístup Xamarin.Forms k poskytování hodnot přístupnosti v aplikacích a byly nahrazeny sémantickými vlastnostmi. V obou případech je výchozí pořadí přístupnosti ovládacích prvků stejné pořadí, ve kterém jsou uvedené v JAZYCE XAML nebo přidány do rozložení. Různá rozložení ale můžou mít další faktory, které ovlivňují pořadí přístupnosti. Pořadí StackLayout přístupnosti je například také založeno na orientaci a pořadí Grid přístupnosti vychází z uspořádání řádků a sloupců. Další informace o řazení obsahu najdete v tématu Smysluplné řazení obsahu na blogu Xamarin.

Poznámka

WebView Když se zobrazí web, který je přístupný, bude přístupný také v aplikaci .NET MAUI. Pokud se WebView naopak zobrazí web, který není přístupný, nebude přístupný v aplikaci .NET MAUI.

Sémantické vlastnosti

Sémantické vlastnosti slouží k definování informací o tom, které ovládací prvky by měly přijímat fokus přístupnosti a který text by se měl uživateli přečíst nahlas. Sémantické vlastnosti jsou připojené vlastnosti, které lze přidat do libovolného prvku pro nastavení rozhraní API pro usnadnění základní platformy.

Důležité

Sémantické vlastnosti se nepokouší vynutit ekvivalentní chování na každé platformě. Místo toho spoléhají na prostředí přístupnosti poskytované jednotlivými platformami.

Třída SemanticProperties definuje následující připojené vlastnosti:

• Description, typu string, který představuje popis, který čtečka obrazovky přečte nahlas. Další informace najdete v tématu Popis.
• Hint, typu string, který je podobný Description, ale poskytuje další kontext, jako je například účel ovládacího prvku. Další informace naleznete v nápovědě.
• HeadingLevel, typu SemanticHeadingLevel, který umožňuje, aby prvek byl označen jako nadpis pro uspořádání uživatelského rozhraní a usnadňuje navigaci. Další informace najdete v tématu Úrovně nadpisu.

Tyto připojené vlastnosti nastavují hodnoty přístupnosti platformy, aby čtečka obrazovky mohl mluvit o prvku. Další informace o připojených vlastnostech naleznete v tématu Připojené vlastnosti.

Description

Připojená SemanticProperties.Description vlastnost představuje krátký popisný string , který čtečka obrazovky používá k oznámení prvku. Tato vlastnost by měla být nastavena pro prvky, které mají význam, který je důležitý pro pochopení obsahu nebo interakci s uživatelským rozhraním. Nastavení této vlastnosti lze provést v jazyce XAML:

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

Případně ji můžete nastavit v jazyce C#:

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

Kromě toho lze metodu SetValue použít také k nastavení SemanticProperties.Description připojené vlastnosti:

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

Upozornění

Vyhněte se nastavení SemanticProperties.Description připojené vlastnosti na Label. Tím zastavíte mluvenou Text vlastnost čtečkou obrazovky. Důvodem je to, že vizuální text by měl ideálně odpovídat textu přečteným nahlas čtečkou obrazovky.

Informace o přístupnosti elementu lze také definovat na jiném prvku. Můžete například Label použít vedle symbolu Entry , který popisuje, co Entry představuje. To lze provést v XAML následujícím způsobem:

<Label x:Name="label"
       Text="Enter your name: " />
<Entry SemanticProperties.Description="{Binding Source={x:Reference label} Path=Text}" />

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

Label label = new Label
{
    Text = "Enter your name: "
};
Entry entry = new Entry();
SemanticProperties.SetDescription(entry, label.Text);

Nápovědy

Připojená SemanticProperties.Hintstring vlastnost představuje, který poskytuje další kontext k SemanticProperties.Description připojené vlastnosti, jako je například účel ovládacího prvku. Nastavení této vlastnosti lze provést v jazyce XAML:

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

Případně ji můžete nastavit v jazyce C#:

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

Kromě toho lze metodu SetValue použít také k nastavení SemanticProperties.Hint připojené vlastnosti:

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

Na Android se tato vlastnost chová mírně odlišně v závislosti na ovládacím prvku, ke kterému je připojen. Například pro ovládací prvky bez textových hodnot, například Switch a CheckBox, ovládací prvky zobrazí nápovědu s ovládacím prvkem. U ovládacích prvků s textovými hodnotami se ale nápověda nezobrazí a přečte se za textovou hodnotou.

Upozornění

Vlastnost SemanticProperties.Hint koliduje s Entry.Placeholder vlastností na Android, která se mapuje na stejnou vlastnost platformy. Proto se nedoporučuje nastavení jiné SemanticProperties.Hint hodnoty na Entry.Placeholder hodnotu.

Úrovně nadpisů

Připojená SemanticProperties.HeadingLevel vlastnost umožňuje, aby prvek byl označen jako nadpis pro uspořádání uživatelského rozhraní a usnadňuje navigaci. Některé čtečky obrazovky umožňují uživatelům rychle přecházení mezi nadpisy.

Nadpisy mají úroveň od 1 do 9 a jsou reprezentovány výčtem SemanticHeadingLevel , který definuje Nonea Level1 prostřednictvím Level9 členů.

Důležité

I když Windows nabízí 9 úrovní nadpisů, Android a iOS nabízejí jenom jeden nadpis. Proto když SemanticProperties.HeadingLevel je nastavena na Windows mapuje na správnou úroveň nadpisu. Pokud ale nastavíte Android a iOS se mapuje na jednu úroveň nadpisu.

Následující příklad ukazuje nastavení této připojené vlastnosti:

<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." />   

Případně ji můžete nastavit v jazyce 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);

Kromě toho lze metodu SetValue použít také k nastavení SemanticProperties.HeadingLevel připojené vlastnosti:

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

Sémantický fokus

Ovládací prvky mají metodu rozšíření definovanou SetSemanticFocus v Microsoft.Maui oboru názvů, která vynutí fokus čtečky obrazovky na zadaný prvek. Například s názvem label, čtečka Label obrazovky fokus může být vynucen k elementu s následujícím kódem:

label.SetSemanticFocus();

Sémantická čtečka obrazovky

Rozhraní .NET Maui poskytuje ISemanticScreenReader rozhraní, se kterým můžete dát čtečkě obrazovky pokyn, aby uživateli oznamoval text. Rozhraní je vystaveno prostřednictvím SemanticScreenReader.Default vlastnosti a je k dispozici v Microsoft.Maui.Accessability oboru názvů.

Pokud chcete čtečku obrazovky instruovat, aby oznamoval text, použijte metodu Announce a předáte string argument, který představuje text. Následující příklad ukazuje použití této metody:

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

Omezení

Výchozí čtečka obrazovky platformy musí být povolená pro čtení textu nahlas.

Vlastnosti automatizace

Vlastnosti automatizace jsou připojené vlastnosti, které lze přidat do libovolného prvku, aby bylo možné indikovat, jak je element hlášen do architektury přístupnosti základní platformy.

Třída AutomationProperties definuje následující připojené vlastnosti:

• ExcludedWithChildren, typu bool?, určuje, zda prvek a jeho podřízené položky by měly být vyloučeny ze stromu přístupnosti. Další informace naleznete v tématu ExcludedWithChildren.
• IsInAccessibleTree, typu bool?označuje, zda je prvek dostupný ve stromu přístupnosti. Další informace naleznete v tématu IsInAccessibleTree.
• Name, typu stringpředstavuje krátký popis prvku, který slouží jako přečístelný identifikátor pro daný prvek. Další informace najdete v tématu Název.
• HelpText, typu string, představuje delší popis prvku, který lze považovat za text popisu, který je přidružený k prvku. Další informace najdete v nápovědě.
• LabeledBy, typu VisualElement, který umožňuje dalšímu prvku definovat informace o přístupnosti pro aktuální prvek. Další informace najdete v tématu LabeledBy.

Tyto připojené vlastnosti nastavují hodnoty přístupnosti platformy, aby čtečka obrazovky mohl mluvit o prvku. Další informace o připojených vlastnostech naleznete v tématu Připojené vlastnosti.

Různé čtečky obrazovky čtou různé hodnoty přístupnosti. Proto při použití vlastností automatizace doporučujeme provést důkladné testování přístupnosti na každé platformě, aby se zajistilo optimální prostředí.

Důležité

Vlastnosti automatizace jsou přístup Xamarin.Forms k poskytování hodnot přístupnosti v aplikacích a byly nahrazeny sémantickými vlastnostmi. Další informace o sémantických vlastnostech naleznete v tématu Sémantické vlastnosti.

ExcludedWithChildren

Připojená AutomationProperties.ExcludeWithChildren vlastnost typu bool?určuje, zda má být prvek a jeho podřízené položky vyloučeny ze stromu přístupnosti. To umožňuje scénáře, jako je zobrazení AbsoluteLayout nad jiným rozložením, jako je například , StackLayouts StackLayout vyloučením ze stromu přístupnosti, když není viditelný. Dá se použít z XAML takto:

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

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

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

Pokud je tato připojená vlastnost nastavena, .NET MAUI nastaví připojenou AutomationProperties.IsInAccessibleTree vlastnost na false zadaný prvek a jeho podřízené položky.

IsInAccessibleTree

Upozornění

Tato připojená vlastnost by obvykle měla zůstat nezamnožená. Většina ovládacích prvků by měla být ve stromu přístupnosti a AutomationProperties.ExcludedWithChildren připojená vlastnost se dá nastavit ve scénářích, kdy prvek a jeho podřízené prvky potřebují odebrat ze stromu přístupnosti.

Připojená AutomationProperties.IsInAccessibleTreebool?vlastnost typu určuje, zda je prvek viditelný pro čtečky obrazovky. Musí být nastavena tak, aby true používala další vlastnosti automatizace. To lze provést v XAML následujícím způsobem:

<Entry AutomationProperties.IsInAccessibleTree="true" />

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

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

Name

Důležité

Připojená AutomationProperties.Name vlastnost byla nahrazena připojenou SemanticProperties.Description vlastností.

Připojená AutomationProperties.Name hodnota vlastnosti by měla být krátký popisný textový řetězec, který čtečka obrazovky používá k oznámení prvku. Tato vlastnost by měla být nastavena pro prvky, které mají význam, který je důležitý pro pochopení obsahu nebo interakci s uživatelským rozhraním. To lze provést v XAML následujícím způsobem:

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

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

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

Helptext

Důležité

Připojená AutomationProperties.HelpText vlastnost byla nahrazena připojenou SemanticProperties.Hint vlastností.

Připojená AutomationProperties.HelpText vlastnost by měla být nastavena na text, který popisuje prvek uživatelského rozhraní, a lze si představit jako popis textu přidruženého k prvku. To lze provést v XAML následujícím způsobem:

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

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

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

U některých platforem může být vlastnost pro úpravy ovládacích prvků, jako Entryje například , HelpText někdy vynechána a nahrazena zástupným textem. Například "Sem zadejte své jméno" je vhodný kandidát pro Entry.Placeholder vlastnost, která umístí text do ovládacího prvku před skutečným vstupem uživatele.

Labeledby

Důležité

Připojená AutomationProperties.LabeledBy vlastnost byla nahrazena vazbami. Další informace najdete v tématu SémanticProperties: Description.

Připojená AutomationProperties.LabeledBy vlastnost umožňuje jinému prvku definovat informace o přístupnosti pro aktuální prvek. Můžete například použít vedle symbolu LabelEntry k popisu toho Entry , co představuje. To lze provést v XAML následujícím způsobem:

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

Případně ji můžete nastavit v jazyce C# následujícím způsobem:

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

Důležité

Nepodporuje se AutomationProperties.LabeledByProperty u iOS.

Testování přístupnosti

Aplikace .NET MAUI obvykle cílí na více platforem, což znamená testování funkcí přístupnosti podle platformy. Na těchto odkazech se dozvíte, jak otestovat přístupnost na jednotlivých platformách:

• Otestujte přístupnost aplikace na Android.
• Ověření přístupnosti aplikací na iOS
• Testování přístupnosti v OS X
• Testování přístupnosti na Windows

S testováním přístupnosti vám můžou pomoct následující nástroje:

• Přehledy přístupnosti pro aplikace Android a Windows.
• Skener přístupnosti pro Android aplikace
• Kontrola přístupnosti pro aplikace iOS a macOS
• Android Studio Layout Inspector pro aplikace Android.
• Xcode Zobrazit ladicí program pro aplikace iOS a macOS.

Žádný z těchto nástrojů ale nemůže dokonale emulovat uživatelské prostředí čtečky obrazovky a nejlepší způsob, jak otestovat a vyřešit problémy s aplikacemi pro usnadnění přístupu, bude vždy ručně na fyzických zařízeních se čtečkami obrazovky.

Povolení čtečky obrazovky

Každá platforma má jinou výchozí čtečku obrazovky, která bude popisovat hodnoty přístupnosti:

• Android má TalkBack. Informace o povolení aplikace TalkBack naleznete v tématu Povolení aplikace TalkBack.
• iOS a macOS mají VoiceOver. Informace o povolení VoiceOveru najdete v tématu Povolení VoiceOveru.
• Windows má Předčítání. Informace o povolení Předčítání najdete v tématu Povolení Předčítání.

Povolení funkce TalkBack

TalkBack je primární čtečka obrazovky použitá na Android. Jak je povolená, závisí na výrobci zařízení, Android verzi a verzi TalkBacku. Čtečka TalkBack ale může být obvykle na vašem Android zařízení povolená prostřednictvím nastavení zařízení:

1. Otevřete aplikaci Nastavení.
2. Vyberte položku TalkBack pro usnadnění> přístupu.
3. Zapněte funkci TalkBack .
4. Vyberte OK.

Poznámka

I když se tyto kroky vztahují na většinu zařízení, můžete zaznamenat některé rozdíly.

Při prvním povolení aplikace TalkBack se automaticky otevře kurz TalkBacku.

Alternativní metody povolení aplikace TalkBack najdete v tématu Zapnutí nebo vypnutí aplikace Talkback.

Povolení VoiceOveru

VoiceOver je primární čtečka obrazovky použitá na iOS a macOS. Na iOS lze VoiceOver povolit následujícím způsobem:

1. Otevřete aplikaci Nastavení.
2. Vyberte položku TalkBack pro usnadnění> přístupu.
3. Zapněte VoiceOver .
4. Vyberte OK.

Kurz VoiceOveru lze otevřít výběrem možnosti VoiceOver Practice, jakmile je VoiceOver povolený.

Alternativní metody povolení VoiceOveru najdete v tématu Zapnutí a procvičení VoiceOveru na iPhone a zapnutí a procvičování VoiceOveru na iPad.

Na macOS lze VoiceOver povolit následujícím způsobem:

1. Otevřete předvolby systému.
2. VyberteVoiceOverpro usnadnění> přístupu.
3. Vyberte Povolit VoiceOver.
4. Vyberte Použít VoiceOver.

Kurz VoiceOveru je možné otevřít výběrem možnosti Otevřít trénování VoiceOveru....

Alternativní metody povolení VoiceOveru najdete v tématu Zapnutí nebo vypnutí VoiceOveru na Macu.

Povolení Předčítání

Předčítání je primární čtečka obrazovky použitá na Windows. Předčítání můžete povolit stisknutím klávesy s logem + WindowsCtrl + Enter. Tyto klávesy můžete znovu stisknout a zastavit Předčítání.

Další informace o Předčítání najdete v tématu Kompletní průvodce Předčítání.

Kontrolní seznam přístupnosti

Postupujte podle těchto tipů a ujistěte se, že jsou vaše aplikace .NET MAUI přístupné pro nejširší možnou cílovou skupinu:

• Zajistěte, aby vaše aplikace byla srozumitelná, funkční, srozumitelná a robustní pro všechny, a to pomocí pokynů pro přístupnost webového obsahu (WCAG). WCAG je globální standard přístupnosti a právní srovnávací test pro web a mobilní zařízení. Další informace najdete v tématu Přehled pokynů pro přístupnost webového obsahu (WCAG).
• Ujistěte se, že uživatelské rozhraní popisuje sám sebe. Otestujte, že všechny prvky uživatelského rozhraní jsou přístupné čtečkou obrazovky. V případě potřeby přidejte popisný text a rady.
• Ujistěte se, že obrázky a ikony obsahují alternativní popisy textu.
• Podpora velkých písem a vysokého kontrastu Vyhněte se rozměrům ovládacího prvku pevně zakódování a raději upřednostněte rozložení, která se změní tak, aby vyhovovala větším velikostem písma. Otestujte barevná schémata v režimu vysokého kontrastu, abyste měli jistotu, že jsou čitelné.
• Návrh vizuálního stromu s ohledem na navigaci Použijte vhodné ovládací prvky rozložení, aby navigace mezi ovládacími prvky pomocí alternativních metod zadávání byla stejná logická tok jako při dotykovém ovládání. Kromě toho vyloučíte nepotřebné prvky ze čtečky obrazovky (například dekorativní obrázky nebo popisky pro pole, která jsou již přístupná).
• Nespoléhejte jenom na zvuk nebo barevné pomůcky. Vyhněte se situacím, kdy je jediným indikátorem průběhu, dokončení nebo jiného stavu zvuk nebo změna barvy. Buď navrhujte uživatelské rozhraní tak, aby obsahovalo jasné vizuální upozornění, s zvukem a barvou pouze pro výztužnost, nebo přidejte specifické indikátory přístupnosti. Při výběru barev se snažte vyhnout paletě, která je pro uživatele s barvoslepostí obtížně odlišená.
• Zadejte titulky pro obsah videa a čitelný skript pro zvukový obsah. Je také užitečné poskytnout ovládací prvky, které upravují rychlost zvukového nebo video obsahu a zajišťují, aby ovládací prvky hlasitosti a přenosu byly snadno najít a používat.
• Lokalizace popisů přístupnosti, když aplikace podporuje více jazyků.
• Otestujte funkce přístupnosti vaší aplikace na každé platformě, na které cílí. Další informace najdete v tématu Testování přístupnosti.