Wymagania dotyczące tekstu z ułatwieniami dostępu

W tym temacie opisano najlepsze rozwiązania dotyczące ułatwień dostępu tekstu w aplikacji, zapewniając, że kolory i tła spełniają wymagany współczynnik kontrastu. W tym temacie omówiono również role automatyzacji interfejsu użytkownika firmy Microsoft, które mogą zawierać elementy tekstowe w aplikacji platformy uniwersalnej systemu Windows (UWP) oraz najlepsze rozwiązania dotyczące tekstu w grafice.

Współczynniki kontrastu

Mimo że użytkownicy zawsze mają możliwość przełączenia się do trybu dużego kontrastu, projekt aplikacji dla tekstu powinien traktować tę opcję jako ostateczną. Znacznie lepszym rozwiązaniem jest upewnienie się, że tekst aplikacji spełnia określone wytyczne dotyczące poziomu kontrastu między tekstem a tłem. Ocena poziomu kontrastu jest oparta na technikach deterministycznych, które nie uwzględniają odcieni kolorów. Jeśli na przykład masz czerwony tekst na zielonym tle, tekst może nie być czytelny dla osoby z upośledzeniem ślepoty kolorów. Sprawdzanie i poprawianie współczynnika kontrastu może zapobiec tym typom problemów z ułatwieniami dostępu.

Zalecenia dotyczące kontrastu tekstu udokumentowane w tym miejscu są oparte na standardzie dostępności sieci Web, G18: Zapewnienie, że współczynnik kontrastu wynoszący co najmniej 4,5:1 istnieje między tekstem (a obrazami tekstu) i tłem za tekstem. Te wskazówki istnieją w specyfikacji WCAG 2.0 technik W3C .

Aby był uważany za dostępny, widoczny tekst musi mieć minimalny współczynnik kontrastu jaskrawości wynoszący 4,5:1 na tle. Wyjątki obejmują logo i tekst uboczny, na przykład tekst, który jest częścią nieaktywnego składnika interfejsu użytkownika.

Tekst, który jest dekoracyjny i nie przekazuje żadnych informacji, nie jest wykluczony. Jeśli na przykład do tworzenia tła są używane losowe wyrazy, a wyrazy można zmienić lub zastąpić bez zmiany znaczenia, wyrazy są uważane za dekoracyjne i nie muszą spełniać tego kryterium.

Użyj narzędzi kontrastu kolorów, aby sprawdzić, czy widoczny współczynnik kontrastu tekstu jest akceptowalny. Zobacz Techniki dla WCAG 2.0 G18 (sekcja Zasoby), aby zapoznać się z narzędziami, które mogą testować współczynniki kontrastu.

Role elementów tekstowych

Aplikacja platformy UNIWERSALNEJ systemu Windows może używać tych domyślnych elementów (często nazywanych elementami tekstowymi lub kontrolkami textedit):

• TextBlock: rola to Tekst
• TextBox: rola to Edycja
• RichTextBlock (i overflow, klasa RichTextBlockOverflow): rola to Tekst
• RichEditBox: rola to Edycja

Gdy raport kontrolny ma rolę Edytuj, technologie pomocnicze zakładają, że istnieją sposoby zmiany wartości przez użytkowników. Dlatego jeśli umieścisz tekst statyczny w polu tekstowym, błędnie zgłaszasz rolę, a tym samym nieprawidłowo zgłaszasz strukturę aplikacji użytkownikowi ułatwień dostępu.

W modelach tekstu dla języka XAML istnieją dwa elementy, które są używane głównie na potrzeby tekstu statycznego, TextBlock i RichTextBlock. Żadna z nich nie jest podklasą Kontrolka i jako taka żadna z nich nie jest w stanie skupić się na klawiaturze lub może być wyświetlana w kolejności tabulacji. Ale to nie oznacza, że technologie pomocnicze nie mogą lub nie będą je odczytywać. Czytniki zawartości ekranu są zwykle przeznaczone do obsługi wielu trybów odczytywania zawartości w aplikacji, w tym dedykowanego trybu odczytu lub wzorców nawigacji wykraczających poza fokus i kolejność tabulatorów, takich jak "kursor wirtualny". Dlatego nie umieszczaj statycznego tekstu w kontenerach z fokusem, aby kolejność tabulacji pobierała użytkownika. Użytkownicy technologii pomocniczych oczekują, że wszystko w kolejności tabulacji jest interaktywne, a jeśli napotka tam tekst statyczny, jest to bardziej mylące niż pomocne. Należy przetestować to samodzielnie z Narratorem, aby zrozumieć środowisko użytkownika w aplikacji podczas korzystania z czytnika zawartości ekranu w celu zbadania tekstu statycznego aplikacji.

Automatyczne sugerowanie ułatwień dostępu

Gdy użytkownik wpisze je w polu wprowadzania i zostanie wyświetlona lista potencjalnych sugestii, ten typ scenariusza jest nazywany automatycznym sugerowaniem. Jest to typowe w polu Do: wiersz pola poczty, polu wyszukiwania Cortana w systemie Windows, polu wprowadzania adresu URL w przeglądarce Microsoft Edge, polu wprowadzania lokalizacji w aplikacji Pogoda itd. Jeśli używasz kontrolki wewnętrznej XAML AutosuggestBox lub HTML, to środowisko jest już domyślnie przyłączone. Aby zapewnić dostęp do tego środowiska, należy skojarzyć pole wprowadzania i listę. Wyjaśniono to w sekcji Implementowanie automatycznego sugerowania .

Narrator został zaktualizowany, aby ten typ środowiska był dostępny za pomocą specjalnego trybu sugestii. Na wysokim poziomie, gdy pole edycji i lista są prawidłowo połączone, użytkownik końcowy będzie:

• Znajomość listy jest obecna i gdy lista zostanie zamknięta
• Dowiedz się, ile sugestii jest dostępnych
• Znajomość wybranego elementu, jeśli istnieje
• Możliwość przeniesienia fokusu Narratora do listy
• Możliwość nawigowania po sugestii ze wszystkimi innymi trybami odczytu

Przykład listy sugestii

Implementowanie automatycznego sugerowania

Aby zapewnić dostęp do tego środowiska, pole wprowadzania i lista musi być skojarzona z drzewem UIA. To skojarzenie odbywa się z właściwością UIA_ControllerForPropertyId w aplikacjach klasycznych lub właściwości ControlledPeers w aplikacjach platformy UWP.

Na wysokim poziomie istnieją 2 typy funkcji automatycznego sugerowania.

Wybór domyślny
Jeśli na liście zostanie wybrany domyślny wybór, Narrator wyszukuje zdarzenie UIA_SelectionItem_ElementSelectedEventId w aplikacji klasycznej lub zdarzenie AutomationEvents.SelectionItemPatternOnElementSelected , które ma zostać wyzwolone w aplikacji platformy UWP. Za każdym razem, gdy wybór zmieni się, gdy użytkownik wpisze kolejną literę, a sugestie zostały zaktualizowane lub gdy użytkownik przejdzie przez listę, powinno zostać wyzwolone zdarzenie ElementSelected .

Przykład, w którym istnieje wybór domyślny

Brak zaznaczenia domyślnego
Jeśli nie ma wyboru domyślnego, takiego jak w polu Lokalizacja aplikacji Pogoda, Narrator szuka zdarzenia UIA_LayoutInvalidatedEventId pulpitu lub zdarzenia Układ platformy UWPWzględnionego na liście za każdym razem, gdy lista zostanie zaktualizowana.

Przykład, w którym nie ma wyboru domyślnego

Implementacja XAML

Jeśli używasz domyślnego elementu XAML AutosuggestBox, wszystko jest już podłączone do Ciebie. Jeśli tworzysz własne środowisko automatycznego sugerowania przy użyciu kontrolki TextBox i listy, musisz ustawić listę jako AutomationProperties.ControlledPeers w polu tekstowym. Należy uruchomić zdarzenie AutomationPropertyChanged dla właściwości ControlledPeers za każdym razem, gdy dodajesz lub usuwasz tę właściwość, a także uruchamiasz własne zdarzenia SelectionItemPatternOnElementSelected lub LayoutInvalidated zdarzenia w zależności od typu scenariusza, co zostało wyjaśnione wcześniej w tym artykule.

Implementacja HTML

Jeśli używasz kontrolek wewnętrznych w kodzie HTML, implementacja interfejsu użytkownika została już zamapowana. Poniżej przedstawiono przykład implementacji, która jest już podłączona do Ciebie:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Jeśli tworzysz własne kontrolki, musisz skonfigurować własne kontrolki ARIA, które zostały wyjaśnione w standardach W3C.

Tekst w grafice

Jeśli to możliwe, unikaj dołączania tekstu do grafiki. Na przykład dowolny tekst uwzględniony w pliku źródłowym obrazu wyświetlany w aplikacji jako element obrazu nie jest automatycznie dostępny ani czytelny przez technologie pomocnicze. Jeśli musisz użyć tekstu w grafice, upewnij się, że wartość AutomationProperties.Name , którą podajesz jako odpowiednik tekstu alternatywnego, zawiera ten tekst lub podsumowanie znaczenia tekstu. Podobne zagadnienia mają zastosowanie w przypadku tworzenia znaków tekstowych z wektorów w ramach ścieżki lub przy użyciu symboli Glyphs.

Rozmiar i skala czcionki tekstowej

Użytkownicy mogą mieć trudności z odczytywaniem tekstu w aplikacji, gdy czcionki są po prostu za małe, dlatego upewnij się, że dowolny tekst w aplikacji jest rozsądnym rozmiarem.

Po wykonaniu oczywistych czynności system Windows zawiera różne narzędzia i ustawienia ułatwień dostępu, które użytkownicy mogą wykorzystać i dostosować do własnych potrzeb i preferencji dotyczących odczytywania tekstu. Są to:

• Narzędzie Lupa, które powiększa wybrany obszar interfejsu użytkownika. Upewnij się, że układ tekstu w aplikacji nie utrudnia odczytywania tekstu.
• Globalne ustawienia skalowania i rozwiązywania w obszarze Ustawienia-System-Display-Scale>>> i układ. Dokładnie, które opcje określania rozmiaru są dostępne, mogą się różnić, ponieważ zależy to od możliwości urządzenia wyświetlania.
• Ustawienia rozmiaru tekstu w obszarze Ustawienia Łatwość> dostępu do wyświetlania>. Dostosuj ustawienie Ustaw większy tekst , aby określić tylko rozmiar tekstu w kontrolkach pomocniczych we wszystkich aplikacjach i ekranach (wszystkie kontrolki tekstu platformy UWP obsługują środowisko skalowania tekstu bez dostosowywania ani tworzenia szablonów).

Różne elementy tekstowe i kontrolki mają właściwość IsTextScaleFactorEnabled . Ta właściwość ma wartość true domyślnie. W przypadku wartości true rozmiar tekstu w tym elemecie można skalować. Skalowanie wpływa na tekst, który ma mały rozmiar FontSize do większego stopnia niż ma wpływ na tekst o dużym rozmiarze FontSize. Automatyczne zmienianie rozmiaru można wyłączyć, ustawiając właściwość IsTextScaleFactorEnabled elementu na false.

Aby uzyskać więcej szczegółów, zobacz Skalowanie tekstu .

Dodaj następujący znacznik do aplikacji i uruchom go. Dostosuj ustawienie Rozmiar tekstu i zobacz, co się stanie z każdym elementem TextBlock.

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Nie zalecamy wyłączania skalowania tekstu, ponieważ uniwersalne skalowanie tekstu interfejsu użytkownika we wszystkich aplikacjach jest ważnym środowiskiem ułatwień dostępu dla użytkowników.

Możesz również użyć zdarzenia TextScaleFactorChanged i właściwości TextScaleFactor , aby dowiedzieć się więcej o zmianach ustawienia Rozmiar tekstu na telefonie. Oto jak:

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

Wartość TextScaleFactor jest dwukrotnie częścią zakresu [1,2,25]. Najmniejszy tekst jest skalowany w górę o tę ilość. Możesz użyć wartości, np. skalowania grafiki, aby dopasować tekst. Pamiętaj jednak, że nie cały tekst jest skalowany przez ten sam współczynnik. Mówiąc ogólnie, większy tekst to początek, tym mniej ma to wpływ na skalowanie.

Te typy mają właściwość IsTextScaleFactorEnabled :

• ContentPresenter
• Klasy sterujące i pochodne
• FontIcon
• RichTextBlock
• Blok tekstu
• TextElement i klasy pochodne

Przykłady

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Tematy pokrewne

• Skalowanie tekstu
• Dostępność
• Podstawowe informacje o ułatwieniach dostępu
• Przykład wyświetlania tekstu XAML
• Przykład edytowania tekstu XAML
• Przykład ułatwień dostępu XAML