Специальные возможности клавиатуры

  • Статья

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

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

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

Чтобы взаимодействовать с элементом управления с помощью клавиатуры, элемент управления должен иметь фокус. Чтобы получить фокус (без использования указателя), элемент управления должен быть доступен с помощью навигации по вкладкам. По умолчанию порядок вкладок элементов управления совпадает с порядком их добавления в область конструктора, объявленной в 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 циклирует между адресной строкой, панелью закладок, панелью вкладок и панелью содержимого. Так как веб-страница может иметь сотни табуляционных элементов управления, F6 может упростить доступ пользователей клавиатуры к панели вкладок и адресной строке без использования сочетаний клавиш для конкретного приложения.

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

Внимание

Вы должны реализовать навигацию F6 в приложении, так как она не поддерживается в собственном коде.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Внимание

Настройка AutomationProperties.AcceleratorKey или AutomationProperties.AccessKey не включает функции клавиатуры. Это только указывает, какие ключи следует использовать для платформы модель автоматизации пользовательского интерфейса, а затем передавать пользователям с помощью вспомогательных технологий.

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

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

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

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

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

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

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

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

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

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

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

Все фокусируемые элементы управления 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.VisualStateGroups и VisualStateManager , которое применяется к корневому элементу, который определяет композицию.

<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). Средства чтения с экрана могут считывать текстовые данные из SIP текста , и пользователи могут обнаружить, где находятся их пальцы, так как средство чтения с экрана может обнаружить, что пользователь сканирует ключи и считывает вслух имя отсканированного ключа. Кроме того, некоторые понятия специальных возможностей, ориентированных на клавиатуру, можно сопоставить с соответствующими вспомогательными технологиями поведения, которые вообще не используют клавиатуру. Например, несмотря на то, что SIP не будет включать клавишу TAB, экранный диктор поддерживает сенсорный жест, который эквивалентен нажатию клавиши TAB, поэтому наличие полезного порядка вкладок через элементы управления в пользовательском интерфейсе по-прежнему crtical для специальных возможностей. Экранный диктор также поддерживает множество других жестов касания, включая клавиши со стрелками для навигации в сложных элементах управления (см . команды клавиатуры экранного диктора и жесты сенсорного ввода).

Примеры

Совет

Откройте приложение коллекции WinUI 3 и просмотрите поддержку специальных возможностей клавиатуры в действии.

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