Требования к доступности текста

В этом разделе рассматриваются требования к тексту для приложений Windows, включая контрастность, роли текста службы автоматизации пользовательского интерфейса и рекомендации по тексту в графике.

Коэффициенты контрастности

Не рассматривайте режим высокой контрастности как основное устранение проблем с низкой удобочитаемостью. Основывайте дизайн текста на достаточном контрасте между передним планом и фоном в стандартном интерфейсе.

Оценка контрастности детерминирована и не учитывает восприятие оттенка. Например, красный текст на зеленом фоне может быть нечитаемым для некоторых пользователей с нарушениями цветового восприятия, даже если эти цвета кажутся отчетливо различимыми людям без таких нарушений.

Рекомендации в этом разделе соответствуют G18: обеспечение того, что соотношение контрастности не менее 4.5:1 существует между текстом (и изображениями текста) и фоном за текстом в методах W3C для WCAG 2.0.

Для удовлетворения этого требования видимый текст должен иметь минимальное соотношение контрастности света 4,5:1 в фоновом режиме. Исключения включают логотипы и случайный текст, например текст в неактивном пользовательском интерфейсе.

Исключается декоративный текст, который не передает информацию. Например, слова, используемые только в качестве визуального фона и взаимозаменяемые без изменения смысла, не должны соответствовать этому критерию.

Используйте средства проверки контраста цветов, чтобы убедиться, что уровень контрастности видимого текста соответствует нормам. См. раздел "Методы для WCAG 2.0 G18" (в секции "Ресурсы") для инструментов, которые могут тестировать коэффициенты контрастности.

Роли текстовых элементов

Приложения Windows обычно используют следующие текстовые элементы и роли:

• TextBlock: роль — Text
• TextBox: роль " Изменить"
• RichTextBlock (и класс overflow RichTextBlockOverflow): роль — Text
• RichEditBox: роль — Edit

Когда элемент управления сообщает роль "Изменить ", вспомогательные технологии предполагают, что значение может быть изменено пользователем. Размещение статического текста в текстовом поле неправильно определяет модель ролей и взаимодействия.

Для статического текста используйте TextBlock и RichTextBlock. Это не подклассы control , не фокусируемые на клавиатуре, и обычно не отображаются в порядке табуляции, но средства чтения с экрана по-прежнему могут считывать их с помощью режимов чтения и навигации, которые не зависят от фокуса (например, поведение виртуального курсора).

Избегайте размещения статического текста в фокусируемых контейнерах, чтобы обеспечить доступ к нему через навигацию по вкладкам. Пользователи ожидают, что вкладки будут активными, а статическое содержимое в порядке переключения вкладок обычно является ухудшением юзабилити. Проверьте поведение с помощью экранного диктора.

Автоподсказка доступности

Автоподсказка — это паттерн, при котором список предложений обновляется в режиме реального времени по мере того, как пользователь вводит текст в поле ввода. Если вы используете XAML AutosuggestBox или встроенные элементы управления HTML, встроена большая часть функциональности доступности.

Чтобы сделать пользовательские реализации доступными, в дереве UIA должны быть связаны входные данные и список предложений. См. раздел "Реализация автоматического предложения".

Экранный диктор поддерживает этот шаблон с помощью интерфейса предложений. Когда входные данные и список подключены правильно, пользователи могут:

• Знайте, когда список присутствует и когда он закрывается.
• Узнайте, сколько предложений доступно
• Определите выбранный элемент, если таковой имеется
• Возможность переноса фокуса экранного диктора на список
• Возможность навигации по предложению со всеми другими режимами чтения

Пример списка предложений

Реализация автоматического предложения

Свяжите поле ввода и список предложений в дереве UIA. Используйте UIA_ControllerForPropertyId в классических приложениях или ControlledPeers в приложениях XAML.

Существует два распространенных поведения автоматического предложения.

Выбор по умолчанию
Если список имеет выбор по умолчанию, Экранный диктор ожидает UIA_SelectionItem_ElementSelectedEventId в настольных приложениях или AutomationEvents.SelectionItemPatternOnElementSelected в приложениях XAML.

При каждом изменении выбора, включая обновления, вызванные вводом или навигацией по списку, активируйте соответствующее событие.

Пример выбора по умолчанию

Выбор по умолчанию отсутствует
Если выбор по умолчанию отсутствует, Narrator ожидает UIA_LayoutInvalidatedEventId в классических настольных приложениях или LayoutInvalidated в XAML приложениях при каждом обновлении списка.

Пример, когда выбор по умолчанию отсутствует

Реализация XAML

При использовании AutosuggestBox по умолчанию необходимое поведение доступности уже реализовано.

Для пользовательских реализаций (таких как TextBox плюс список), задайте automationProperties.ControlledPeers в TextBox. Fire AutomationPropertyChanged всякий раз, когда ControlledPeers добавляется или удаляется, и вызывает либо SelectionItemPatternOnElementSelected, либо LayoutInvalidated в зависимости от вашего сценария.

Реализация HTML

При использовании встроенных элементов управления HTML сопоставление UIA уже предоставляется. Пример:

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

При создании пользовательских элементов управления реализуйте необходимую семантику ARIA в соответствии со стандартами W3C.

Текст в графике

Избегайте внедрения текста в графику, когда это возможно. Текст, отображаемый внутри источника изображения , не является автоматически читаемым с помощью вспомогательных технологий.

Если требуется текст в графике, задайте AutomationProperties.Name эквивалентное содержимое (или краткое семантическое сводка). Примените тот же принцип к текстовому содержимому, отображаемому с помощью пути, или глифов.

Размер и масштаб шрифта текста

Слишком малый текст может привести к проблемам с удобочитаемостью. Начните с разумного размера по умолчанию во всем приложении.

Затем необходимо проводить проверку параметров специальных возможностей Windows, связанных с текстом, в том числе:

• Вытягиватель, который увеличивает часть пользовательского интерфейса. Убедитесь, что макет и оболочка линий остаются доступными для чтения при увеличении.
• Глобальные параметры масштабирования и разрешения в настройках системы - Display - Scale и разметка>>>. Доступные значения зависят от оборудования отображения.
• Параметры размера текста в Settings->Специальные возможности->Display. Сделать текст больше масштабирует текст в поддерживаемых элементах управления приложений и экранов (элементы управления текстом WinUI поддерживают это по умолчанию).

Многие текстовые элементы и элементы управления предоставляют IsTextScaleFactorEnabled, который по умолчанию имеет значение true. При включении текст автоматически масштабируется, и меньшие значения FontSize обычно подвержены влиянию больше, чем большие.

Установите IsTextScaleFactorEnabled в false только при необходимости.

Дополнительные сведения см. в разделе "Масштабирование текста ".

Используйте этот пример для сравнения поведения с и без IsTextScaleFactorEnabled при изменении размера текста .

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

Избегайте отключения масштабирования текста в целом. Согласованное масштабирование текста во всех приложениях — это важная функция доступности.

Элементы управления текстом WinUI поддерживают полнотекстовое масштабирование без каких-либо настроек или шаблонов. Для других приложений на основе WinRT можно отслеживать TextScaleFactorChanged и получать TextScaleFactor для реагирования на изменения размера системного текста:

private readonly Windows.UI.ViewManagement.UISettings _uiSettings = new();

public MainWindow()
{
    InitializeComponent();
    _uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
}

private void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    // Marshal to the UI thread before applying layout or visual updates.
    DispatcherQueue.TryEnqueue(() =>
    {
        var scale = sender.TextScaleFactor;
        // Apply updates for UI that depends on text scale.
    });
}

TextScaleFactor находится в диапазоне от 1 до 2.25. Его можно использовать для координации связанных элементов пользовательского интерфейса (например, масштабирование графики с текстом).

Не предполагайте равномерное масштабирование во всех размерах текста. Более крупный текст, как правило, влияет меньше, чем на меньший текст.

Эти типы имеют свойство IsTextScaleFactorEnabled :

• ContentPresenter
• Управление и производные классы
• FontIcon
• RichTextBlock
• TextBlock
• TextElement и производные классы

Примеры

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Связанные темы

• Масштабирование текста
• Обзор специальных возможностей
• Основные сведения о специальных возможностях
• Пример отображения текста XAML (архивированный устаревший пример )
• Пример редактирования текста XAML (архивированный пример прежних версий)
• Пример специальных возможностей XAML (архивированный устаревший пример )