Sdílet prostřednictvím

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

  • Článek

Sémantika přístupnosti se zabývá vytvářením prostředí, díky kterým budou 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 podnět k řešení problémů s přístupností. Bez ohledu na to je vhodné vytvářet inkluzivní a přístupné aplikace, aby se vaše aplikace dostaly k největšímu možnému publiku.

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 se dají aplikace pro všechny lépe pochopitelné, funkční, pochopitelné 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. To zahrnuje funkce, jako jsou čtečky obrazovky, zvětšení obrazovky a nastavení vysokého kontrastu.

Čtečky obrazovky obvykle poskytují auditorské popisy 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ém displeji, 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í. Například většina čteček obrazovky 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, než se pokusí o jeho navigaci.

Většina čteček obrazovky automaticky přečte jakýkoli 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 další 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 zajiště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 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í přístupnosti StackLayout je například také založeno na jeho orientaci a pořadí přístupnosti je založeno na uspořádání Grid řá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. WebView Pokud se 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 mají přijímat fokus přístupnosti a který text by měl být uživateli přečtený nahlas. Sémantické vlastnosti jsou připojené vlastnosti, které lze přidat do libovolného prvku pro nastavení základních rozhraní API pro usnadnění přístupu platformy.

Důležité

Sémantické vlastnosti se nepokouší vynutit ekvivalentní chování na jednotlivých platformách. 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ý bude přečteno nahlas čtečkou obrazovky. Další informace najdete v tématu Popis.
  • Hint, typu string, který je podobný Description, ale poskytuje další kontext, jako je účel ovládacího prvku. Další informace naleznete v tématu Nápověda.
  • HeadingLevel, typu SemanticHeadingLevel, který umožňuje, aby prvek byl označen jako nadpis k uspořádání uživatelského rozhraní a usnadňuje navigaci. Další informace najdete v tématu Úrovně nadpisu.

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

Popis

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

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

Alternativně 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 Description použít také k nastavení připojené vlastnosti:

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

Informace o přístupnosti pro prvek mohou být také definovány v jiném prvku. Například k popisu toho, Label co představuje, je možné použít vedle symbolu Switch Switch. To lze provést v XAML následujícím způsobem:

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

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

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

Upozorňující

  • Vyhněte se nastavení Description připojené vlastnosti na objektu Label. Tím zastavíte Text mluvenou vlastnost čtečkou obrazovky. Je to proto, že text vizuálu by se měl ideálně shodovat s textem přečteným nahlas čtečkou obrazovky.
  • Vyhněte se nastavení Description připojené vlastnosti na zařízení s Androidem Entry nebo Editor v systému Android. Tím zastavíte fungování akcí talkbacku. Místo toho použijte Placeholder vlastnost nebo připojenou Hint vlastnost.
  • Pokud v iOSu nastavíte vlastnost u libovolného Description ovládacího prvku, který má podřízenou čtečku obrazovky, nebude moct kontaktovat podřízené položky. Důvodem je to, že iOS neposkytuje funkce přístupnosti, které umožňují navigaci z nadřazeného elementu do podřízeného prvku.

Nápovědy

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

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

Alternativně 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 Hint použít také k nastavení připojené vlastnosti:

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

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

Upozorňující

Tato Hint vlastnost je v konfliktu s vlastností v Androidu Entry.Placeholder , která se mapuje na stejnou vlastnost platformy. Proto se nedoporučuje nastavit jinou Hint hodnotu Entry.Placeholder na hodnotu.

Úrovně nadpisů

Připojená 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. Pokud je tedy ve Windows nastavená, HeadingLevel mapuje se na správnou úroveň nadpisu. Pokud ale nastavíte android a iOS, mapuje se 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." />

Alternativně 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 HeadingLevel použít také k nastavení připojené vlastnosti:

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

Sémantický fokus

Ovládací prvky mají rozšiřující metodu SetSemanticFocus , která vynutí fokus čtečky obrazovky na zadaný prvek. Pokud je například fokus čtečky obrazovky pojmenovaný Label label, 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 oznámila text. Rozhraní je vystaveno prostřednictvím Default vlastnosti a je k dispozici v Microsoft.Maui.Accessibility oboru názvů.

Pokud chcete, aby čtečka obrazovky oznámila text, použijte metodu Announce string a předáte 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í

Aby byl text čtený nahlas, musí být povolená výchozí čtečka obrazovky platformy.

Vlastnosti automatizace

Vlastnosti automatizace jsou připojené vlastnosti, které lze přidat do libovolného prvku, aby bylo možné určit, jak je prvek 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 vyslovitelný identifikátor pro tento prvek. Další informace najdete v tématu Název.
  • HelpText, typu stringpředstavuje delší popis prvku, který lze považovat za text popisu, který je přidružen k prvku. Další informace naleznete v tématu HelpText.
  • LabeledBy, typu VisualElement, který umožňuje další prvek definovat informace o přístupnosti pro aktuální prvek. Další informace naleznete v tématu LabeledBy.

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

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

Důležité

Vlastnosti automatizace představují 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á ExcludedWithChildren vlastnost typu bool?určuje, zda prvek a jeho podřízené položky by měly být vyloučeny ze stromu přístupnosti. To umožňuje scénáře, jako je zobrazení AbsoluteLayout nad jiným rozložením, jako StackLayoutje například , s StackLayout vyloučením ze stromu přístupnosti, když není viditelný. Můžete ho použít z XAML následujícím způsobem:

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

Alternativně 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 IsInAccessibleTree vlastnost na false zadaný prvek a jeho podřízené položky.

IsInAccessibleTree

Upozorňující

Tato připojená vlastnost by měla obvykle zůstat nenasazená. 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á IsInAccessibleTree vlastnost typu bool?určuje, zda je prvek viditelný pro čtečky obrazovky. Musí být nastavená tak, aby true používala další vlastnosti automatizace. To lze provést v XAML následujícím způsobem:

<Entry AutomationProperties.IsInAccessibleTree="true" />

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

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

Upozorňující

Pokud je true vlastnost v iOSu IsInAccessibleTree na libovolném ovládacím prvku, který má podřízené prvky, čtečka obrazovky nebude mít přístup k podřízeným položkám. Důvodem je to, že iOS neposkytuje funkce přístupnosti, které umožňují navigaci z nadřazeného elementu do podřízeného prvku.

Název

Důležité

Připojená Name vlastnost je v .NET 8 zastaralá. Místo toho použijte připojenou Description vlastnost.

Připojená 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é jsou 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" />

Alternativně 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á HelpText vlastnost je v .NET 8 zastaralá. Místo toho použijte připojenou Hint vlastnost.

Připojená HelpText vlastnost by měla být nastavena na text, který popisuje prvek uživatelského rozhraní, a lze si představit jako popisek text přidružený 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" />

Alternativně 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");

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

Labeledby

Důležité

Připojená LabeledBy vlastnost je v .NET 8 zastaralá. Místo toho použijte SemanticProperties.Description vazbu. Další informace naleznete v tématu SémanticProperties: Description.

Připojená LabeledBy vlastnost umožňuje dalšímu prvku definovat informace o přístupnosti pro aktuální prvek. Například k popisu toho, Label co představuje, je možné použít vedle symbolu Entry Entry. 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}" />

Alternativně 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 v iOSu AutomationProperties.LabeledByProperty .

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:

Testování přístupnosti vám může pomoct následující nástroje:

Žá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 řešit potíže s aplikacemi pro usnadnění přístupu, bude vždy ručně na fyzických zařízeních se čtečkami obrazovky.

Povolení čteček obrazovky

Každá platforma má jinou výchozí čtečku obrazovky pro pojmenování hodnot přístupnosti:

Povolení aplikace TalkBack

TalkBack je primární čtečka obrazovky používaná v Androidu. Způsob jeho povolení závisí na výrobci zařízení, verzi Androidu a verzi TalkBacku. Aplikaci TalkBack ale můžete na zařízení s Androidem obvykle povolit prostřednictvím nastavení zařízení:

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

Poznámka:

I když se tento postup vztahuje na většinu zařízení, může docházet k určitým rozdílům.

Kurz talkbacku se automaticky otevře při prvním povolení aplikace TalkBack.

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

Povolení VoiceOveru

VoiceOver je primární čtečka obrazovky používaná v iOSu a macOS. V iOSu můžete VoiceOver povolit takto:

  1. Otevřete aplikaci Nastavení.
  2. Vyberte VoiceOver pro usnadnění přístupu>.
  3. Zapněte VoiceOver .

Kurz VoiceOveru můžete 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 i Telefon a zapnutí a procvičení VoiceOveru na iPadu.

V systému macOS je možné VoiceOver povolit takto:

  1. Otevřete předvolby systému.
  2. Vyberte VoiceOver pro 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 Open VoiceOver Training....

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

Povolení Předčítání

Program Předčítání je primární čtečka obrazovky používaná ve Windows. Program Předčítání je možné povolit stisknutím klávesy + s logem Windows Ctrl + Enter. Tyto klávesy je možné znovu stisknout a předčítání zastavit.

Další informace o programu Předčítání najdete v průvodci předčítáním.

Kontrolní seznam pro přístupnost

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

  • Pomocí pokynů WCAG (Web Content Accessibility Guidelines) se ujistěte, že je vaše aplikace srozumitelná, srozumitelná a robustní. WCAG je globální standard přístupnosti a právní srovnávací test pro web a mobilní zařízení. Další informace naleznete v tématu Web Content Accessibility Guidelines (WCAG) Přehled.
  • Ujistěte se, že uživatelské rozhraní popisuje sám sebe. Otestujte, že všechny prvky uživatelského rozhraní jsou přístupné pro čtečku obrazovky. V případě potřeby přidejte popisný text a rady.
  • Zajistěte, aby obrázky a ikony měly alternativní popisy textu.
  • Podpora velkých písem a vysokého kontrastu Vyhněte se pevně zakódování rozměrů ovládacího prvku a raději upřednostňujte rozložení, která mají velikost větší velikosti 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 už přístupná).
  • Nespoléhejte jenom na zvuk nebo barevné pomůcky. Vyhněte se situacím, kdy se jediný indikátor průběhu, dokončení nebo jiného stavu změní zvuk nebo barva. Buď navrhujte uživatelské rozhraní tak, aby obsahovalo jasné vizuální pomůcky, se zvukem a barvou pouze pro zesílení, nebo přidejte konkrétní indikátory přístupnosti. Při volbě barev se snažte vyhnout paletě, která se obtížně rozlišuje pro uživatele s barvoslepostí.
  • Poskytuje popis pro videoobsáv a čitelný skript pro zvukový obsah. Je také užitečné poskytovat ovládací prvky, které upravují rychlost zvukového obsahu nebo videa a zajišťují, aby ovládací prvky hlasitosti a přenosu byly snadno najít a používat.
  • Lokalizovat popisy 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.