Создание доступных приложений с помощью семантических свойств

  • Статья

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

Рекомендации по специальным возможностям веб-содержимого (WCAG) — это глобальный стандарт специальных возможностей и юридический тест для веб-приложений и мобильных устройств. Эти рекомендации описывают различные способы, в которых приложения можно сделать более понятными, операбельными, понятными и надежными для всех.

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

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

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

Большинство средств чтения с экрана будут автоматически читать любой текст, связанный с элементом управления, который получает фокус на специальные возможности. Это означает, что для пользователя будут доступны такие элементы управления, как Label или Button, имеющие Text набор свойств. Однако Image, ImageButton, ActivityIndicator и другие элементы могут отсутствовать в дереве специальных возможностей, так как с ними не связан определенный текст.

Многоплатформенный пользовательский интерфейс приложений .NET (.NET MAUI) поддерживает два подхода к предоставлению доступа к специальным возможностям базовой платформы. Семантические свойства — это подход .NET MAUI для предоставления значений специальных возможностей в приложениях и рекомендуемый подход. Свойства автоматизации — это подход Xamarin.Forms к предоставлению значений специальных возможностей в приложениях и заменен семантических свойств. В обоих случаях порядок специальных возможностей элементов управления по умолчанию совпадает с тем же порядком, в котором они перечислены в XAML или добавляются в макет. Однако различные макеты могут иметь дополнительные факторы, влияющие на порядок специальных возможностей. Например, порядок StackLayout специальных возможностей также основан на его ориентации, а порядок Grid специальных возможностей основан на его расположении строк и столбцов. Дополнительные сведения о упорядочении контента см. в блоге Xamarin.

Примечание.

WebView Когда отображается доступный веб-сайт, он также будет доступен в приложении .NET MAUI. И наоборот, если WebView отображается веб-сайт, который недоступен, он не будет доступен в приложении .NET MAUI.

Семантические свойства

Семантические свойства используются для определения сведений о том, какие элементы управления должны получать фокус специальных возможностей и какой текст следует читать вслух пользователю. Семантические свойства — это присоединенные свойства, которые можно добавить к любому элементу, чтобы задать API-интерфейсы специальных возможностей платформы.

Важно!

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

Класс SemanticProperties определяет следующие присоединенные свойства:

  • Descriptionstringтип , представляющий описание, которое будет читаться вслух средством чтения с экрана. Дополнительные сведения см. в статье Description.
  • Hintstringтип , который аналогиченDescription, но предоставляет дополнительный контекст, например назначение элемента управления. Дополнительные сведения см. в разделе "Подсказка".
  • HeadingLevelтип SemanticHeadingLevel, который позволяет элементу быть помечен как заголовок для упорядочивания пользовательского интерфейса и упростить навигацию. Дополнительные сведения см. в разделе "Уровни заголовков".

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

Description

Присоединенное Description свойство представляет короткое описательное string , что средство чтения с экрана использует для объявления элемента. Это свойство должно быть задано для элементов, которые имеют значение, важное для понимания содержимого или взаимодействия с пользовательским интерфейсом. Задание этого свойства можно выполнить в XAML:

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

Кроме того, его можно задать в C#:

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

Кроме того, SetValue этот метод также можно использовать для задания присоединенного Description свойства:

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

Сведения о специальных возможностях элемента также можно определить для другого элемента. Например, расположение Label рядом с Switch можно использовать для описания того, что представляет Switch. Это можно сделать в XAML следующим образом:

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

Кроме того, его можно задать в C# следующим образом:

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

Предупреждение

  • Избегайте настройки присоединенного Description свойства в объекте Label. Это приведет к остановке Text чтения с экрана свойства. Это связано с тем, что визуальный текст в идеале должен соответствовать тексту, считываемого вслух средством чтения с экрана.
  • Избегайте настройки присоединенного Description свойства на Entry устройстве или Editor в Android. Это приведет к остановке работы действий Talkback. Вместо этого используйте Placeholder свойство или присоединенное Hint свойство.
  • Если в iOS задано Description свойство на любом элементе управления с дочерними элементами, средство чтения с экрана не сможет получить доступ к дочерним элементам. Это связано с тем, что iOS не предоставляет специальные возможности, позволяющие переходить от родительского элемента к дочернему элементу.

Подсказка

Присоединенное Hint свойство представляет string собой дополнительный контекст Description для присоединенного свойства, например назначение элемента управления. Задание этого свойства можно выполнить в XAML:

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

Кроме того, его можно задать в C#:

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

Кроме того, SetValue этот метод также можно использовать для задания присоединенного Hint свойства:

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

В Android это свойство работает немного по-разному в зависимости от элемента управления, к которому он подключен. Например, для элементов управления без текстовых значений, таких как Switch и CheckBox, элементы управления будут отображать подсказку с элементом управления. Однако для элементов управления с текстовыми значениями подсказка не отображается и считывается после текстового значения.

Предупреждение

Свойство Hint конфликтует со свойством Entry.Placeholder в Android, которое сопоставляется с одинаковым свойством платформы. Поэтому не рекомендуется задавать другое Hint значение Entry.Placeholder .

Уровни заголовков

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

Заголовки имеют уровень от 1 до 9 и представлены перечислением, который определяет Noneи Level1 через SemanticHeadingLevelLevel9 элементы.

Важно!

Хотя Windows предлагает 9 уровней заголовков, Android и iOS предлагают только один заголовок. Поэтому при HeadingLevel установке в Windows он сопоставляется с правильным уровнем заголовка. Однако при установке в Android и iOS он сопоставляется с одним уровнем заголовка.

В следующем примере показано, как задать это присоединенное свойство:

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

Кроме того, его можно задать в 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);

Кроме того, SetValue этот метод также можно использовать для задания присоединенного HeadingLevel свойства:

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

Семантическая фокусировка

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

label.SetSemanticFocus();

Семантическое средство чтения с экрана

.NET MAUI предоставляет ISemanticScreenReader интерфейс, с помощью которого можно указать средству чтения с экрана объявить текст пользователю. Интерфейс предоставляется через Default свойство и доступен в Microsoft.Maui.Accessibility пространстве имен.

Чтобы указать средству чтения с экрана объявить текст, используйте Announce метод, передав string аргумент, представляющий текст. В следующем примере показано использование этого метода:

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

Ограничения

Средство чтения с экрана платформы по умолчанию должно быть включено для чтения текста вслух.

Свойства автоматизации

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

Класс AutomationProperties определяет следующие присоединенные свойства:

  • ExcludedWithChildrenbool?Тип , определяет, должен ли элемент и его дочерние элементы быть исключены из дерева специальных возможностей. Дополнительные сведения см. в разделе "ИсключенныеWithChildren".
  • IsInAccessibleTreebool?Тип , указывает, доступен ли элемент в дереве специальных возможностей. Дополнительные сведения см. в разделе IsInAccessibleTree.
  • NamestringТип , представляет краткое описание элемента, который служит в качестве говорящего идентификатора для этого элемента. Дополнительные сведения см. в статье Name.
  • HelpTextstringТип , представляет более длинное описание элемента, который можно рассматривать как текст подсказки, связанный с элементом. Дополнительные сведения см. в разделе HelpText.
  • LabeledByтип , который позволяет другому элементу определять сведения о специальных возможностях VisualElementдля текущего элемента. Дополнительные сведения см. в разделе LabeledBy.

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

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

Важно!

Свойства автоматизации — это подход Xamarin.Forms к предоставлению значений специальных возможностей в приложениях и заменен семантических свойств. Дополнительные сведения о семантических свойствах см. в разделе "Семантические свойства".

ИсключенныеWithChildren

Присоединенное ExcludedWithChildren свойство типа bool?определяет, следует ли исключить элемент и его дочерние элементы из дерева специальных возможностей. Это позволяет использовать такие сценарии, как отображение AbsoluteLayout другого макета, например, StackLayoutиз дерева специальных возможностей, StackLayout если оно не отображается. Его можно использовать из XAML следующим образом:

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

Кроме того, его можно задать в C# следующим образом:

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

Если это присоединенное свойство задано, .NET MAUI задает IsInAccessibleTree присоединенное свойство false для указанного элемента и его дочерних элементов.

IsInAccessibleTree

Предупреждение

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

Присоединенное IsInAccessibleTreebool?свойство типа определяет, отображается ли элемент средства чтения с экрана. Его необходимо задать для true использования других свойств автоматизации. Это можно сделать в XAML следующим образом:

<Entry AutomationProperties.IsInAccessibleTree="true" />

Кроме того, его можно задать в C# следующим образом:

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

Предупреждение

В iOS, если IsInAccessibleTree свойство находится true на любом элементе управления с дочерними элементами, средство чтения с экрана не сможет связаться с дочерними элементами. Это связано с тем, что iOS не предоставляет специальные возможности, позволяющие переходить от родительского элемента к дочернему элементу.

Имя.

Важно!

Присоединенное Name свойство устарело в .NET 8. Вместо этого используйте присоединенное Description свойство.

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

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

Кроме того, его можно задать в C# следующим образом:

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

HelpText

Важно!

Присоединенное HelpText свойство устарело в .NET 8. Вместо этого используйте присоединенное Hint свойство.

Для присоединенного свойства HelpText нужно задать текст, который описывает данный элемент пользовательского интерфейса и может рассматриваться как текст подсказки, связанный с элементом. Это можно сделать в XAML следующим образом:

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

Кроме того, его можно задать в C# следующим образом:

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

На некоторых платформах для редактирования элементов управления, таких как Entry, свойство HelpText иногда можно опустить и заменить текстом заполнителя. Например, элемент "Введите здесь свое имя" является хорошим кандидатом для использования в свойстве Entry.Placeholder, которое помещает текст в элемент управления до фактического ввода данных пользователем.

LabeledBy

Важно!

Присоединенное LabeledBy свойство устарело в .NET 8. Вместо этого используйте привязку SemanticProperties.Description . Дополнительные сведения см. в разделе SemanticProperties: Description.

Присоединенное свойство LabeledBy позволяет другому элементу определить сведения о специальных возможностях для текущего элемента. Например, расположение Label рядом с Entry можно использовать для описания того, что представляет Entry. Это можно сделать в XAML следующим образом:

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

Кроме того, его можно задать в C# следующим образом:

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

Важно!

Не AutomationProperties.LabeledByProperty поддерживается в iOS.

Тестирование специальных возможностей

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

Следующие средства могут помочь в тестировании специальных возможностей:

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

Включение средств чтения с экрана

Каждая платформа имеет разные значения специальных возможностей по умолчанию для чтения с экрана:

  • В Android есть TalkBack. Сведения о включении TalkBack см. в разделе Enable TalkBack.
  • iOS и macOS имеют VoiceOver. Сведения о включении VoiceOver см. в разделе "Включить VoiceOver".
  • В Windows есть экранный диктор. Сведения о включении экранного диктора см. в разделе "Включить экранный диктор".

Включение TalkBack

TalkBack — это основное средство чтения с экрана, используемое в Android. Как она включена, зависит от производителя устройства, версии Android и версии TalkBack. Тем не менее, TalkBack обычно можно включить на устройстве Android с помощью параметров устройства:

  1. Откройте приложение Параметры .
  2. Выберите Специальные>возможности TalkBack.
  3. Включите функцию TalkBack .
  4. Нажмите ОК.

Примечание.

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

Учебник TalkBack открывается автоматически при первом включении TalkBack.

Альтернативные методы включения TalkBack см. в разделе "Включение или отключение Talkback".

Включение VoiceOver

VoiceOver — это основное средство чтения с экрана, используемое в iOS и macOS. В iOS функция VoiceOver может быть включена следующим образом:

  1. Откройте приложение Параметры .
  2. Выберите Специальные>возможности VoiceOver.
  3. Включите VoiceOver .

Руководство по VoiceOver можно открыть, выбрав метод VoiceOver, после включения VoiceOver.

Альтернативные методы включения VoiceOver см. в разделе "Включение и практика VoiceOver на i Телефон" и включение и использование VoiceOver на iPad.

В macOS функция VoiceOver может быть включена следующим образом:

  1. Откройте системные настройки.
  2. Выберите Специальные>возможности VoiceOver.
  3. Выберите Включить VoiceOver.
  4. Выберите "Использовать VoiceOver".

Руководство по VoiceOver можно открыть, выбрав команду Open VoiceOver Training....

Альтернативные методы включения VoiceOver см. в разделе "Включить или отключить VoiceOver" на Mac.

Включение экранного диктора

Экранный диктор — это основное средство чтения с экрана, используемое в Windows. Экранный диктор можно включить, нажав клавишу с логотипом + Windows CTRL + ВВОД вместе. Эти клавиши можно нажимать еще раз, чтобы остановить экранный диктор.

Дополнительные сведения о экранном дикторе см. в руководстве по полному использованию экранного диктора.

Accessibility checklist (Контрольный список специальных возможностей)

Следуйте этим советам, чтобы убедиться, что ваши приложения MAUI .NET доступны для самой широкой аудитории:

  • Убедитесь, что приложение доступно для восприятия, операбельно, понятно и надежно для всех, следуя рекомендациям по специальным возможностям веб-содержимого (WCAG). WCAG — это глобальный стандарт специальных возможностей и юридический тест для веб-приложений и мобильных устройств. Дополнительные сведения см. в разделе "Рекомендации по специальным возможностям веб-содержимого" (WCAG).
  • Убедитесь, что пользовательский интерфейс самоописывается. Убедитесь, что все элементы пользовательского интерфейса доступны для чтения с экрана. При необходимости добавьте описательный текст и подсказки.
  • Убедитесь, что изображения и значки имеют альтернативные текстовые описания.
  • Поддержка больших шрифтов и высокой контрастности. Избегайте измерения элементов управления жесткой кодировкой и вместо этого предпочитайте макеты, которые изменяют размер шрифта для размещения более крупных размеров шрифтов. Проверьте цветовые схемы в режиме высокой контрастности, чтобы убедиться, что они доступны для чтения.
  • Проектирование визуального дерева с учетом навигации. Используйте соответствующие элементы управления макетом, чтобы переход между элементами управления с помощью альтернативных методов ввода соответствовал тому же логическому потоку, что и при использовании сенсорного ввода. Кроме того, исключите ненужные элементы из средств чтения с экрана (например, декоративные изображения или метки для полей, которые уже доступны).
  • Не полагаться на звук или цветные подсказки в одиночку. Избегайте ситуаций, когда единственным признаком хода выполнения, завершения или другого состояния является изменение звука или цвета. Создайте пользовательский интерфейс, чтобы включить четкие визуальные подсказки, с звуком и цветом только для подкрепления, или добавить определенные индикаторы специальных возможностей. При выборе цветов старайтесь избежать палитры, которую трудно различать для пользователей с цветовой слепотой.
  • Предоставьте подпись для видеоконтента и удобочитаемого скрипта для звукового содержимого. Кроме того, рекомендуется предоставлять элементы управления, которые настраивают скорость аудио- или видеосодержимого содержимого, а также позволяют легко находить и использовать элементы управления громкости и транспорта.
  • Локализация описаний специальных возможностей при поддержке приложения нескольких языков.
  • Проверьте специальные возможности вашего приложения на каждой платформе, на которых она предназначена. Дополнительные сведения см. в разделе "Тестирование специальных возможностей".