Реализация специальных возможностей клавиатуры (XAML)

Версию для HTML и JavaScript см. в разделе Реализация специальных возможностей клавиатуры (HTML).

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

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

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

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

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

Регулирование, реализуемое на XAML, позволяет последовательности перехода соответствовать визуальному порядку. Можно также переопределить последовательность перехода по умолчанию, установив свойство TabIndex, как показано в следующем примере макета Grid, где используется навигация сначала по столбцам.


<!--Custom tab order.--> 
<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. Они могут иметь фокус и быть доступными для выделения текста через буфер обмена, однако не включаются в последовательность табуляции, так как не являются статическими текстовыми элементами. Они не являются интерактивными в традиционном смысле (их нельзя вызвать, они не требуют ввода текста, но поддерживают шаблон элемента управления Text, который обеспечивает поиск и настройку точек выделения в тексте). Не должно подразумеваться, что установка фокуса на тексте сделает возможным какое-то действие. Текстовые элементы будут обнаруживаться специальными возможностями и читаться вслух программами чтения с экрана, но для этого, помимо поиска элементов в фактической последовательности перехода, используются другие методы.

В процессе изменения значений TabIndex или использования последовательности перехода по умолчанию применяются следующие правила.

  • Элементы пользовательского интерфейса со значением свойства TabIndex, равным нулю, добавляются в последовательность перехода в порядке, указанном в объявлении на XAML или в коллекциях дочерних объектов.
  • Элементы пользовательского интерфейса со значением свойства TabIndex больше нуля добавляются в последовательность перехода в зависимости от значения TabIndex.
  • Элементы пользовательского интерфейса со значением свойства TabIndex меньше нуля добавляются в последовательность перехода и появляются перед любым элементом с нулевым значением. Это может отличаться от обработки атрибута tabindex в HTML (кроме того, отрицательный tabindex не поддерживался в прежних спецификациях HTML).

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

Важно убедиться в том, что в составных элементах внутренняя навигация по элементам-контейнерам осуществляется правильно. Составной элемент может управлять текущим дочерним объектом, чтобы уменьшить объем служебных данных, направленных на поддержку фокусировки всех дочерних элементов. Подобный составной элемент включается в последовательность перехода и сам обрабатывает команды навигации с клавиатуры. Многие составные элементы управления, используемые в приложении среды выполнения Windows на C++, C# или Visual Basic, уже имеют некоторую внутреннюю логику навигации, встроенную в обработчик событий элемента управления. Например, обход с помощью клавиш со стрелками включается по умолчанию для элементов управления ItemsControl.

Альтернативные сочетания клавиш для выполнения действий и вызова событий указателя на специальных элементах управления

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

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

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

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


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

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

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

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

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

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

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

Вы можете задокументировать клавиши доступа с помощью устройств чтения с экрана, задав в присоединенном свойстве 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>


Важно  Задание свойства AutomationProperties.AcceleratorKey или AutomationProperties.AccessKey не включает функцию клавиатуры. При этом платформе модели автоматизации пользовательского интерфейса сообщается только то, какие клавиши должны быть использованы, чтобы эта информация могла быть передана пользователям с помощью специальных возможностей. Реализация обработки клавиш все еще должна производиться в коде, а не в XAML. Но вам все равно нужно подключить обработчики для событий KeyDown или KeyUp на соответствующем элементе управления, чтобы фактически реализовать применение сочетания клавиш в вашем приложении. Подчеркивание клавиши доступа не предоставляется автоматически. Вы должны явным образом подчеркнуть текст, относящийся к определенной назначенной клавише, в качестве встроенного форматирования Underline, если вы хотите, чтобы подчеркнутый текст отображался в пользовательском интерфейсе.

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

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

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

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

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

Дополнительные сведения о концепции перенаправляемых событий см. в разделе Общие сведения о событиях и перенаправленных событиях.

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

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

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

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

Ранее мы уже говорили о том, что любой пользовательский элемент управления, позволяющий пользователю фокусировать его, должен иметь визуальный индикатор фокуса. Как правило, создать такой индикатор фокуса так же просто, как начертить прямоугольник, который бы вместил в себя обычный ограничивающий прямоугольник этого элемента управления. Элемент Rectangle для визуального фокуса является одноранговым элементом для других элементов композиции шаблона элемента управления, но первоначально он задается значением Visibility для Collapsed, так как элемент управления еще не сфокусирован. Затем, когда у элемента управления появляется фокус, вызывается визуальное состояние, которое специально задает Visibility фокуса видимым для Visible. Как только фокус смещается, вызывается другое визуальное состояние, и Visibility становится Collapsed.

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

Вот пример XAML-кода, составленного по шаблону среды выполнения Windows по умолчанию для Button.


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


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

Обратите внимание на то, что только одно из названных состояний напрямую настраивает Visibility, в то время как другие состояния кажутся пустыми. Визуальные состояния работают следующим образом: как только элемент управления использует другое состояние из того же VisualStateGroup, любые анимации, применявшиеся предыдущим состоянием, сразу же отменяются. Так как значение по умолчанию Visibility композиции равно Collapsed, это означает, что прямоугольник не будет отображен. Для этого управляющая логика прослушивает события фокуса, такие как GotFocus, и изменяет состояния с помощью GoToState. Часто эта логика уже реализована, если вы используете элемент управления по умолчанию или ведете настройку на основе элемента, уже обладающего такими возможностями. Подробнее о том, как использовать визуальные состояния, см. в разделе Раскадрованные анимации для визуальных состояний.

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

Обычно устройство Windows Phone не имеет специальной аппаратной клавиатуры. Однако программная панель ввода (SIP) может поддерживать некоторые сценарии специальных возможностей клавиатуры. Средства чтения с экрана могут читать вслух текст, вводимый с использованием панели ввода Текст, а также объявлять о его удалении. Пользователи могут определить положение своих пальцев, поскольку средство чтения с экрана может обнаружить, как пользователь движется по клавишам, и вслух произносить название текущей клавиши. Кроме того, некоторые понятия специальных возможностей для клавиатуры можно сопоставить с отдельными аспектами специальных возможностей, в которых клавиатура не используется. Например, на панели SIP нет клавиши TAB, но экранный диктор поддерживает сенсорный жест, эквивалентный нажатию клавиши TAB, и поэтому для реализации специальных возможностей по-прежнему важно наличие удобной последовательности перехода по элементам управления. Клавиши со стрелками, служащие для переходов в пределах составных элементов управления, также поддерживаются сенсорными жестами экранного диктора. Если фокус переходит в элемент управления, который не поддерживает текстовый ввод, экранный диктор поддерживает жест, вызывающий действие этого элемента управления.

В приложениях для Windows Phone обычно не используются сочетания клавиш, так как панель SIP не имеет клавиш CTRL или ALT.

Связанные разделы

Реакция на ввод с клавиатуры
Ввод: образец сенсорной клавиатуры
Реакция на появление образца экранной клавиатуры.
Пример реализации специальных возможностей на XAML
Раскадрованные анимации для визуальных состояний

 

 

Показ:
© 2015 Microsoft