Доступность клавиатуры

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

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

Навигация по клавиатуре между элементами пользовательского интерфейса

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

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

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

Вы можете сделать порядок вкладок соответствующим визуальному порядку, изменив XAML или переопределив порядок вкладок по умолчанию. В следующем примере показано, как использовать свойство TabIndex с макетом сетки , использующим навигацию на вкладке column-first.

<Grid>
  <Grid.RowDefinitions>...</Grid.RowDefinitions>
  <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

  <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock>
  <TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock>

  <TextBlock Grid.Row="1">First name</TextBlock>
  <TextBox x:Name="GroomFirstName" Grid.Row="1" Grid.Column="1" TabIndex="1"/>
  <TextBox x:Name="BrideFirstName" Grid.Row="1" Grid.Column="2" TabIndex="3"/>

  <TextBlock Grid.Row="2">Last name</TextBlock>
  <TextBox x:Name="GroomLastName" Grid.Row="2" Grid.Column="1" TabIndex="2"/>
  <TextBox x:Name="BrideLastName" Grid.Row="2" Grid.Column="2" TabIndex="4"/>
</Grid>

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

Если вы хотите исключить интерактивный элемент управления из порядка вкладок, можно задать для свойства IsTabStop значение false.

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

Если вы настраиваете значения TabIndex или используете порядок по умолчанию, применяются следующие правила:

• Если tabIndex не задан для элемента, значение по умолчанию — Int32.MaxValue , а порядок табуляции основан на порядке объявления в XAML или дочерних коллекциях.
• Если TabIndex задан для элемента:
  • Элементы пользовательского интерфейса с TabIndex равным 0 добавляются в порядок вкладок на основе порядка объявления в XAML или в дочерних коллекциях.
  • Элементы пользовательского интерфейса с TabIndex больше 0 добавляются в порядок табуляции на основе значения TabIndex.
  • Элементы пользовательского интерфейса с TabIndex меньше 0 добавляются в порядок вкладок и отображаются перед любым нулевым значением.

В следующем фрагменте кода показана коллекция элементов с различными параметрами TabIndex (B назначается значение Int32.MaxValue или 2 147 483 647).

<StackPanel Background="#333">
  <StackPanel Background="#FF33FF">
    <Button>A</Button>
    <Button TabIndex="2147483647">B</Button>
    <Button>C</Button>
  </StackPanel>
  <StackPanel Background="#33FFFF">
    <Button TabIndex="1">D</Button>
    <Button TabIndex="1">E</Button>
    <Button TabIndex="0">F</Button>
  </StackPanel>
</StackPanel>

Это приведет к следующему порядку табуляции:

1. F
2. D
3. E
4. A
5. B
6. C

Навигация между областями приложений с помощью F6

Область приложения — это логическая область видного пользовательского интерфейса в окне приложения (например, панели Microsoft Edge включают адресную строку, панель закладки, панель вкладок, панель вкладок и панель содержимого). Клавиша F6 может использоваться для перехода между этими панелями, где к группам дочерних элементов можно затем получить доступ с помощью стандартной навигации по клавиатуре.

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

• Прослушивание F6 для перехода между важными разделами пользовательского интерфейса.
• Добавление сочетаний клавиш для обычных действий в пользовательском интерфейсе.
• Добавление клавиш доступа к важным элементам управления в пользовательском интерфейсе.

Дополнительные сведения о реализации сочетаний клавиш и ключей доступа см. в разделе Сочетания клавиш ниже и Ключи доступа.

Оптимизация для F6

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

Например, F6 в Microsoft Edge циклирует между адресной строкой, панелью закладок, панелью вкладок и панелью содержимого. Так как веб-страница может иметь сотни элементов, управляемых с помощью клавиши Tab, F6 может упростить доступ пользователей клавиатуры к панели вкладок и адресной строке без использования специальных клавиш для приложения.

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

По возможности регионы в цикле F6 должны иметь доступное имя: через ориентир или вручную добавив AutomationProperties.Name в корневой элемент региона.

Shift-F6 должен циклировать в противоположном направлении.

Навигация по клавиатуре в элементе пользовательского интерфейса

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

Варианты клавиатуры для действий и событий указателя для определенных элементов управления

Элементы пользовательского интерфейса, которые можно щелкнуть, также должны вызываться с помощью клавиатуры. Чтобы использовать клавиатуру с элементом пользовательского интерфейса, элемент должен иметь фокус (только классы, производные от Control, поддерживают фокус и навигацию с помощью клавиши Tab).

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

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

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

<!--Don't do this.-->
<Image Source="sample.jpg" PointerPressed="Image_PointerPressed"/>

<!--Do this instead.-->
<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

Сочетания клавиш

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

Сочетание клавиш shortcut позволяет пользователю получить доступ к функциональным возможностям приложения. Существует два типа сочетаний клавиш:

• Ускорители — это сочетания клавиш, которые вызывают команду приложения. Ваше приложение может или не предоставлять определенный пользовательский интерфейс, соответствующий команде. Ускорители обычно состоят из клавиш CTRL и буквы.
• ключи Access — это сочетания клавиш, которые задают фокус для определенного пользовательского интерфейса в приложении. Ключи доступа обычно состоят из клавиши Alt и клавиши с буквой.

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

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

В следующем примере показано, как документировать сочетания клавиш для кнопок воспроизведения, паузы и остановки мультимедиа.

<Grid KeyDown="Grid_KeyDown">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <MediaElement x:Name="DemoMovie" Source="xbox.wmv"
    Width="500" Height="500" Margin="20" HorizontalAlignment="Center" />

  <StackPanel Grid.Row="1" Margin="10"
    Orientation="Horizontal" HorizontalAlignment="Center">

    <Button x:Name="PlayButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+P"
      AutomationProperties.AcceleratorKey="Control P">
      <TextBlock>Play</TextBlock>
    </Button>

    <Button x:Name="PauseButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+A"
      AutomationProperties.AcceleratorKey="Control A">
      <TextBlock>Pause</TextBlock>
    </Button>

    <Button x:Name="StopButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+S"
      AutomationProperties.AcceleratorKey="Control S">
      <TextBlock>Stop</TextBlock>
    </Button>
  </StackPanel>
</Grid>

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

Для простоты в предыдущем примере не указано использование ресурсов для строк, таких как CTRL+A. Однако во время локализации необходимо также учитывать сочетания клавиш. Локализация сочетаний клавиш имеет значение, так как выбор ключа для использования в качестве сочетания клавиш обычно зависит от видимой текстовой метки элемента.

Дополнительные сведения о реализации сочетаний клавиш см. в разделе Сочетания клавиш руководства по взаимодействию с пользователем Windows.

Реализация обработчика событий клавиатуры

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

Пример кода, демонстрирующий запись обработчика событий ключа, который включает проверку модификаторов, таких как клавиша CTRL, см. в разделе "Взаимодействие с клавиатурой".

Навигация по клавиатуре для пользовательских элементов управления

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

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

Пример визуального состояния для индикатора фокуса

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

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

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

XAML

<ControlTemplate TargetType="Button">
...
    <Rectangle
      x:Name="FocusVisualWhite"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="1.5"/>
    <Rectangle
      x:Name="FocusVisualBlack"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="0.5"/>
...
</ControlTemplate>

До сих пор это только композиция. Чтобы управлять видимостью индикатора фокуса, вы определяете визуальные состояния, которые переключают свойство Видимости . Это делается с помощью VisualStateManager и присоединяемого свойства VisualStateManager.VisualStateGroups, которое применяется к корневому элементу, задающему композицию.

<ControlTemplate TargetType="Button">
  <Grid>
    <VisualStateManager.VisualStateGroups>
       <!--other visual state groups here-->
       <VisualStateGroup x:Name="FocusStates">
         <VisualState x:Name="Focused">
           <Storyboard>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualWhite"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualBlack"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
         </VisualState>
         <VisualState x:Name="Unfocused" />
         <VisualState x:Name="PointerFocused" />
       </VisualStateGroup>
     <VisualStateManager.VisualStateGroups>
<!--composition is here-->
   </Grid>
</ControlTemplate>

Обратите внимание, что только одно из именованных состояний настраивает видимость непосредственно, в то время как другие, по-видимому, пусты. При использовании визуальных состояний, как только элемент управления использует другое состояние из той же VisualStateGroup, все анимации, применяемые предыдущим состоянием, немедленно отменяются. Поскольку видимость по умолчанию в композиции Скрыта, прямоугольник не будет отображаться. Логика управления управляет этим путем прослушивания событий фокуса, таких как GotFocus, и изменения состояний с помощью GoToState. Часто это уже обрабатывается, если вы используете элемент управления по умолчанию или настраиваете на основе элемента управления, который уже имеет такое поведение.

Доступность клавиатуры и устройства без физической клавиатуры

Некоторые устройства не имеют выделенной аппаратной клавиатуры и используют вместо этого панель обратимого ввода (SIP). Средства чтения с экрана могут считывать текстовые данные из Text SIP, и пользователи могут обнаружить, где находятся их пальцы, так как средство чтения с экрана может определить, что пользователь сканирует клавиши и воспроизводит имя отсканированной клавиши вслух. Кроме того, некоторые концепции, связанные с доступностью клавиатуры, можно сопоставить со сходными поведениями вспомогательных технологий, которые вообще не используют клавиатуру. Например, несмотря на то что SIP не будет включать клавишу Tab, Экранный диктор поддерживает сенсорный жест, который эквивалентен нажатию клавиши Tab, поэтому наличие полезного порядка следования через элементы управления в пользовательском интерфейсе по-прежнему критично для специальных возможностей. Экранный диктор также поддерживает множество других жестов касания, а также клавиши со стрелками для навигации в сложных элементах управления (см. команды клавиатуры экранного диктора и жесты сенсорного ввода).

Примеры

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

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

• Доступность
• Взаимодействие с помощью клавиатуры
• пример клавиатуры Touch
• пример доступности XAML