Implementación de accesibilidad de teclado (XAML)

Applies to Windows and Windows Phone

¿Buscas la versión para HTML/JavaScript de este tema? Consulta Implementación de accesibilidad de teclado (HTML).

Muchos usuarios ciegos o que tienen problemas de movilidad dependen del teclado como el único medio para navegar por la interfaz de usuario de tu aplicación y acceder a su funcionalidad. Si tu aplicación no proporciona buen acceso de teclado, estos usuarios pueden llegar a tener dificultades o, probablemente, no podrán usarla.

Consulta esta característica en acción como parte de nuestra serie Características de aplicaciones, de principio a fin:  Interacción del usuario: entrada táctil... y mucho más

Navegación de teclado entre elementos de la interfaz de usuario

Para usar el teclado con un control, el control debe tener el foco y, para recibirlo (sin usar un puntero), debe ser accesible en un diseño de interfaz de usuario a través de navegación mediante tabulación. De manera predeterminada, el orden de tabulación de los controles es el mismo que el orden en el que se agregaron a una superficie de diseño, enumerada en XAML, o que se agregó mediante programación a un contenedor.

En la mayoría de los casos, el orden predeterminado basado en cómo definiste los controles en XAML es el mejor orden, especialmente porque es el orden en el que los lectores de pantalla leen los controles. No obstante, el orden predeterminado no necesariamente corresponde al orden visual. La posición de visualización real probablemente dependa del contenedor de diseño primario y ciertas propiedades que puedes establecer en los elementos secundarios para influir en el diseño. Para asegurarte de que la aplicación tiene un buen orden de tabulación, prueba este comportamiento tú mismo. Especialmente si tienes una metáfora de cuadrícula o de tabla para el diseño, el orden de la tabla podría ser distinto al orden en que leerían los usuarios. Esto no siempre es un problema. Pero asegúrate de probar la funcionalidad de tu aplicación como una interfaz de usuario táctil y como una interfaz de usuario con teclado, y comprueba que la interfaz de usuario tiene sentido con ambos métodos.

Puedes hacer que el orden de tabulación coincida con el orden visual ajustando el código XAML. O puedes invalidar el orden de tabulación predeterminado configurando la propiedad TabIndex, como se muestra en el siguiente ejemplo de un diseño Grid que usa la navegación mediante tabulación por columnas primero.


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

Puedes querer excluir un control del orden de tabulación. Por lo general, esto se logra convirtiendo el control en no interactivo, por ejemplo, configurando la propiedad IsEnabled en false. Un control deshabilitado se excluye automáticamente del orden de tabulación. Pero, en ocasiones, puedes querer excluir un control del orden de tabulación incluso si no está deshabilitado. En este caso, puedes establecer la propiedad IsTabStop en false.

Todos los elementos que pueden tener foco suelen estar en el orden de tabulación de manera predeterminada. La excepción es que ciertos tipos de presentación de texto como RichTextBlock pueden tener foco a fin de que el portapapeles pueda acceder a ellos para seleccionar texto; sin embargo, no se encuentran en el orden de tabulación porque no se espera que los elementos de texto estático estén en el orden de tabulación. No suelen ser interactivos (pueden invocarse y no requieren entrada de texto, pero no admiten el patrón de control de texto que admite la búsqueda y el ajuste de puntos de selección en el texto). El texto no debe dar a entender que, si se coloca el foco en él, pueda existir la posibilidad de realizar alguna actividad. Las tecnologías de ayuda seguirán detectando los elementos de texto y los lectores de pantalla lo leerán en voz alta, pero esto dependerá de otro tipo de técnicas que no tienen que ver con encontrar estos elementos en el orden de tabulación práctico.

Tanto si ajustas los valores TabIndex como si usas el orden predeterminado, se aplican las siguientes reglas:

  • Los elementos de la interfaz de usuario con TabIndex igual a 0 se añaden al orden de tabulación según el orden de declaración en XAML o colecciones secundarias.
  • Los elementos de la interfaz de usuario con TabIndex mayor que 0 se añaden al orden de tabulación según el valor TabIndex.
  • Los elementos de la interfaz de usuario con TabIndex menor que 0 se añaden al orden de tabulación y aparecen antes de cualquier valor cero. Esto puede ser distinto de la administración del atributo tabindex de HTML (y tabindex negativo no se admitía en especificaciones HTML más antiguas).

Navegación por teclado dentro de un elemento de interfaz de usuario

Para los elementos compuestos, es importante asegurar una correcta navegación interna entre los elementos contenidos. Un elemento compuesto puede administrar su elemento secundario activo actual para reducir la sobrecarga que implica hacer que todos los elementos secundarios tengan foco. Un elemento compuesto de este tipo se incluye en el orden de tabulación y controla los eventos de navegación por teclado. Muchos de los controles compuestos que usas para una aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic ya tienen una lógica de navegación interna integrada para controlar la administración de eventos. Por ejemplo, el recorrido mediante teclas de dirección de los elementos está habilitado de manera predeterminada para los elementos de un control ItemsControl.

Alternativas de teclado para eventos y acciones de puntero para elementos de control específicos

Asegúrate de que los elementos de la interfaz de usuario en los que pueda hacerse clic también puedan invocarse con el teclado. Para usar el teclado con un elemento de la interfaz de usuario, el elemento debe tener foco. Solamente las clases que derivan de Control admiten navegación mediante tabulación y foco.

Para aquellos elementos de la interfaz de usuario que puedan invocarse, implementa controladores de eventos de teclado para las tecla ENTRAR y la barra espaciadora. Esto hace que la compatibilidad de accesibilidad de teclado básica sea completa y permite a los usuarios lograr escenarios de aplicación básicos mediante el uso del teclado solamente, es decir, los usuarios pueden alcanzar todos los elementos de la interfaz de usuario interactivos y activar la funcionalidad predeterminada.

En los casos en los que un elemento que quieres usar en la interfaz de usuario no puede tener foco, podrías crear tu propio control personalizado. Debes establecer la propiedad IsTabStop en true para habilitar el foco y debes proporcionar una indicación visual del estado enfocado creando un estado visual que decore la interfaz de usuario con un indicador de foco. Sin embargo, suele ser más fácil usar la composición de controles para que el soporte de los modelos de automatización de la interfaz de usuario de Microsoft y automatización del mismo nivel, foco y detenciones de tabulación sea administrado por el control dentro del cual elijas que se componga tu contenido.

Por ejemplo, en lugar de administrar un evento de presión de puntero en una Image, podrías encapsularlo en un Button para obtener compatibilidad para foco, teclado y puntero.


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

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

Métodos abreviados de teclado

Además de implementar la navegación por teclado y la activación para tu aplicación, una práctica recomendada es implementar métodos abreviados para la funcionalidad de la aplicación. La navegación mediante tabulación proporciona un buen nivel básico de compatibilidad con teclado, pero con formas complejas, probablemente también quieras agregar compatibilidad para teclas de método abreviado. Esto puede hacer que el uso de tu aplicación sea más eficiente, incluso para aquellos que usan tanto dispositivos de puntero como un teclado.

Un método abreviado es una combinación de teclas que mejora la productividad al proporcionar al usuario una forma eficaz de acceder a las funciones de la aplicación. Existen dos tipos de métodos abreviados:

  • Una tecla de acceso es un método abreviado a un elemento de la interfaz de usuario de la aplicación. Las teclas de acceso consisten en la tecla Alt y una tecla de letra.
  • Una tecla de aceleración es un método abreviado a un comando de aplicación. Tu aplicación podría tener una interfaz de usuario que corresponda exactamente al comando. Las teclas de aceleración consisten en la tecla Ctrl y una tecla de letra.

Es fundamental que proporciones a los usuarios que dependen de los lectores de pantalla y otra tecnología de asistencia un método sencillo para descubrir las teclas de los métodos abreviados de la aplicación. Comunica las teclas de método abreviado mediante información sobre herramientas, nombres accesibles, descripciones accesibles o alguna otra forma de comunicación en pantalla. Como mínimo, las teclas de método abreviado deben estar correctamente documentadas en el contenido de la ayuda de la aplicación.

Puedes documentar las teclas de acceso mediante lectores de pantalla configurando la propiedad adjunta AutomationProperties.AccessKey como una cadena que describe la tecla de método abreviado. También existe una propiedad adjunta AutomationProperties.AcceleratorKey para documentar las teclas de método abreviado no mnemotécnicas, aunque los lectores de pantalla generalmente tratan ambas propiedades de la misma manera. Intenta documentar las teclas de método abreviado de diferentes maneras, mediante documentación de ayuda escrita, propiedades de automatización e información sobre herramientas.

En el siguiente ejemplo se muestra cómo documentar las teclas de método abreviado para botones de detención, pausa y reproducción de medios.


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


Importante  Establecer AutomationProperties.AcceleratorKey o AutomationProperties.AccessKey no habilita la funcionalidad de teclado. Únicamente notifica al marco de automatización de la interfaz de usuario qué teclas se deben usar para poder pasar esta información a los usuarios mediante las tecnologías de asistencia. La implementación para la administración de teclas debe hacerse en el código, no en XAML. Deberás adjuntar controladores para los eventos KeyDown o KeyUp en el control correspondiente para implementar realmente el comportamiento de método abreviado de teclado en tu aplicación. Además, el detalle de texto subrayado en una tecla de acceso no se proporciona de manera automática. Si quieres mostrar texto subrayado en la interfaz de usuario, debes subrayar de forma explícita el texto de la tecla específica en tus apuntes como formato Underline en línea.

Por cuestiones de simplicidad, el ejemplo anterior omite el uso de recursos para cadenas como "Ctrl+A". No obstante, también debes tener en cuenta las teclas de método abreviado durante la localización. La localización de las teclas de método abreviado es relevante porque la elección de la tecla que se usa como método abreviado suele depender de la etiqueta de texto visible del elemento. Para obtener más información, consulta Globalizar la aplicación.

Para obtener más información sobre la implementación de las teclas de método abreviado, consulta Teclas de método abreviado en las Directrices para la interacción de la experiencia de usuarios de Windows.

Implementar un controlador de eventos de tecla

Los eventos de entrada como los eventos de tecla usan un concepto de evento denominado eventos enrutados. Un evento enrutado se puede propagar por los elementos secundarios de un control compuesto, lo que permite a un control primario controlar los eventos de varios elementos secundarios. Este modelo de evento es conveniente para definir acciones de teclas de método abreviado en un control que contenga varias partes compuestas que no estén diseñadas para admitir foco ni para formar parte del orden de tabulación.

Para obtener código de ejemplo que muestra cómo escribir un controlador de eventos de tecla que incluya la comprobación de modificadores como la tecla Ctrl, consulta Responder a la entrada de teclado.

Para obtener información general sobre el concepto de evento enrutado, consulta Introducción a los eventos y eventos enrutados.

Navegación mediante teclado para controles personalizados

Se recomienda el uso de teclas de dirección como métodos abreviados de teclado para navegar entre elementos secundarios, en los casos en que dichos elementos mantengan una relación espacial entre sí. Si los nodos de la vista de árbol tienen subelementos diferentes para controlar la activación de nodos y las acciones de expandir–contraer, debes usar las teclas de dirección izquierda y derecha para proporcionar la funcionalidad de expandir–contraer del teclado. Si tienes un control orientado que admite el recorrido direccional dentro del contenido del control, usa las teclas de dirección adecuadas.

Por lo general, para implementar un control de teclas personalizado para controles personalizados se incluye una invalidación de los métodos OnKeyDown y OnKeyUp como parte de la lógica de la clase.

Un ejemplo de un estado visual para un indicador de foco

Ya hemos mencionado que los controles personalizados que el usuario habilite para que tengan el foco deben tener un indicador de foco visual. Normalmente, ese indicador de foco es tan simple como dibujar un rectángulo justo alrededor del rectángulo de límite normal del control. El Rectangle del foco visual es un elemento del mismo nivel que el resto de la composición del control en una plantilla de control, pero se establece inicialmente con un valor de Visibility de Collapsed porque el control aún no tiene el foco. Después, cuando el control obtiene el foco, se invoca un estado visual que establece específicamente la Visibility del foco en Visible. Cuando el foco se mueve a otro lugar, se llama a otro estado visual y Visibility pasa a ser Collapsed.

Todos los controles XAML predeterminados para Windows en tiempo de ejecución mostrarán un indicador de foco visual adecuado cuando reciban el foco (si es que pueden recibir el foco). También hay distintos aspectos potenciales según el tema seleccionado por el usuario (concretamente si el usuario usa un modo de alto contraste). Si usas los controles XAML en la interfaz de usuario y no reemplazas las plantillas de control, no necesitas hacer nada más para obtener indicadores de foco visual en los controles que se comportan y se muestran correctamente. Si lo que intentas es volver a crear la plantilla de un control, o si tienes curiosidad acerca de cómo proporcionan los controles XAML sus indicadores de foco visual, en el resto de esta sección se explica cómo se logra en XAML y la lógica de control.

Aquí incluimos código XAML de ejemplo que procede de la plantilla XAML predeterminada de Windows en tiempo de ejecución para un 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>


De momento, esto es solo la composición. Para controlar la visibilidad del indicador de foco, tienes que definir los estados visuales que alternan la propiedad Visibility. Para hacerlo, usa la propiedad VisualStateManager.VisualStateGroups adjunta, tal y como se aplica al elemento raíz que define la composición


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

Ten en cuenta que solo uno de los estados con nombre ajusta Visibility directamente mientras que los demás están aparentemente vacíos. El funcionamiento de los estados visuales es que en cuanto el control usa otro estado del mismo VisualStateGroup, se cancelan inmediatamente las animaciones aplicadas por el estado anterior. Debido a que el valor predeterminado de Visibility de la composición es Collapsed, el rectángulo no aparecerá. Esto se controla con la lógica de control, mediante la escucha de eventos de foco como GotFocus y la modificación de los estados a GoToState. A menudo esto se realiza automáticamente si usas un control predeterminado o personalizado, basado en un control que ya tenga ese comportamiento. Para obtener más información sobre cómo usar los estados visuales, consulta Animaciones con guión gráfico para estados visuales.

Accesibilidad del teclado y Windows Phone

Por lo general, un dispositivo Windows Phone carece de un teclado de hardware dedicado. Sin embargo, un panel de entrada de software (SIP) puede dar cabida a diversos escenarios de accesibilidad de teclado. Los lectores de pantalla pueden leer entradas de texto desde el SIP Texto e, incluso, advertir de posibles eliminaciones. Los usuarios podrán saber dónde están sus dedos porque el lector de pantalla es capaz de detectar que el usuario está examinando las teclas, de modo que lee en voz alta el nombre de la tecla examinada. De igual modo, algunos de los conceptos de accesibilidad relativos al teclado se pueden asignar a determinados comportamientos de tecnología de ayuda en los que no se usa el teclado en absoluto. Por ejemplo, incluso si un SIP no incluye una tecla Tab, Narrador admite un gesto táctil que equivale a presionar dicha tecla, de modo que disponer de un orden de tabulación útil de los controles de una interfaz de usuario sigue siendo un principio de accesibilidad de gran importancia. Las teclas de dirección para navegar por los elementos de controles complejos también se pueden usar como gestos táctiles en Narrador. Cuando el foco llega a un control que no está destinado a la entrada de texto, Narrador admite un gesto con el que se invoca la acción de dicho control.

Los métodos abreviados de teclado no suelen ser relevantes en las aplicaciones de Windows Phone, puesto que un SIP carece de teclas Control o Alt.

Temas relacionados

Respuesta a la entrada de teclado
Entrada: muestra de teclado táctil
Muestra de respuesta a la apariencia del teclado en pantalla
Muestra de accesibilidad XAML
Animaciones con guion gráfico para estados visuales

 

 

Mostrar:
© 2014 Microsoft