Tutorial: Crear una aplicación accesible basada en Windows

Artículo
10/07/2008

Actualización: noviembre 2007

Crear una aplicación accesible tiene importantes implicaciones para los negocios. Muchos gobiernos tienen normas de accesibilidad para la adquisición de software. El logotipo de certificación para Windows incluye requisitos de accesibilidad. Se calcula que sólo en Estados Unidos ya hay 30 millones de residentes, muchos de ellos clientes potenciales, se ven afectados por la accesibilidad del software.

Este tutorial trata acerca de los cinco requisitos de accesibilidad del logotipo de certificación para Windows. Según estos requisitos, una aplicación accesible:

Admite las configuraciones de tamaño, color, fuente y entrada del Panel de control. La barra de menú, la barra de título, los bordes y la barra de estado cambian todos automáticamente de tamaño cuando el usuario cambia la configuración del Panel de control. En esta aplicación no es necesario hacer más cambios en los controles ni en el código.
Admite el modo de Contraste alto.
Proporcionar acceso mediante teclado documentado a todas las funciones.
Expone la ubicación del foco del teclado de forma visual y mediante programación.
Evita ofrecer información importante únicamente por medio de sonido.

Para obtener más información, vea Recursos para diseñar aplicaciones accesibles, la página Web del programa MSDN Online Certified for Windows (https://www.microsoft.com/spanish/formacion) y la página Web de Designed for Windows XP Application Specification (https://go.microsoft.com/fwlink/?linkid=9775).

Para obtener información sobre cómo admitir diversas distribuciones de teclado, vea Prácticas recomendadas para desarrollar aplicaciones de uso internacional.

Crear el proyecto

Este tutorial crea la interfaz de usuario para una aplicación que admite pedidos de pizzas. Se compone de un TextBox para el nombre del cliente, un grupo de RadioButton para seleccionar el tamaño de la pizza, un CheckedListBox para seleccionar los ingredientes, dos controles Button con las etiquetas Order (Pedir) y Cancel (Cancelar), y un control Menu con el comando Exit (Salir).

El usuario escribe el nombre del cliente, el tamaño de la pizza y los ingredientes que desea. Cuando el usuario hace clic en el botón Order, un cuadro de mensaje muestra un resumen del pedido y su precio; los controles se borran y se preparan para el siguiente pedido. Cuando el usuario hace clic en el botón Cancel, los controles se borran y se preparan para el siguiente pedido. Cuando el usuario hace clic en el elemento de menú Exit, el programa se cierra.

El énfasis de este tutorial no se encuentra en el código del sistema de pedidos al detalle, sino en la accesibilidad de la interfaz de usuario. El tutorial muestra las funciones de accesibilidad de varios controles de uso frecuente, entre ellos botones, botones de opción, cuadros de texto y etiquetas.

Para comenzar a crear la aplicación

Cree una nueva aplicación para Windows en Visual Basic, Visual C# o Visual J#. Asigne al proyecto el nombre PedidoPizza. (Para obtener información detallada, vea Crear nuevas soluciones y proyectos.)

Agregar los controles al formulario

Cuando agregue los controles a un formulario, tenga en cuenta las siguientes directrices para crear una aplicación accesible:

Establezca las propiedades AccessibleDescription y AccessibleName. En este ejemplo, es suficiente la configuración Default para AccessibleRole. Para obtener más información acerca de las propiedades de accesibilidad, vea Proporcionar información sobre la accesibilidad de los controles en un formulario Windows Forms.
Establezca el tamaño de fuente en 10 puntos o un tamaño mayor.

Nota:

Si al principio establece el tamaño de fuente del formulario en 10, todos los controles que agregue después al formulario tendrán un tamaño de fuente de 10.
Compruebe que los controles Label que describen controles TextBox precedan inmediatamente al control TextBox correspondiente en el orden de tabulación.
Agregue una tecla de acceso, mediante el carácter "&", a la propiedad Text de los controles a los que el usuario pueda desear navegar.
Agregue una tecla de acceso, mediante el carácter "&", a la propiedad Text de las etiquetas que precedan a un control al que el usuario pueda desear navegar. Establezca la propiedad UseMnemonic de las etiquetas como true, de modo que el foco se establezca en el siguiente control del orden de tabulación cuando el usuario presione la tecla de acceso.
Agregue teclas de acceso a todos los elementos de menú.

Nota:
Si al principio establece el tamaño de fuente del formulario en 10, todos los controles que agregue después al formulario tendrán un tamaño de fuente de 10.

Para hacer accesible la aplicación para Windows

Agregue los controles al formulario y establezca las propiedades tal como se describe a continuación. Vea la imagen que aparece al final de la tabla para ver un modelo de la disposición de los controles en el formulario.

Objeto	Propiedad	Valor
Form1	AccessibleDescription	Order form
	AccessibleName	Order form
	FontSize	10
	Text	Pizza Order Form
PictureBox	Name	logo
	AccessibleDescription	A slice of pizza
	AccessibleName	Company logo
	Image	Cualquier icono o mapa de bits
Label	Name	companyLabel
	Text	Good Pizza
	TabIndex	1
	AccessibleDescription	Company name
	AccessibleName	Company name
	Backcolor	Blue
	Forecolor	Yellow
	Font size	18
Label	Name	customerLabel
	Text	&Name
	TabIndex	2
	AccessibleDescription	Customer name label
	AccessibleName	Customer name label
	UseMnemonic	True
TextBox	Name	customerName
	Text	(ninguno)
	TabIndex	3
	AccessibleDescription	Customer name
	AccessibleName	Customer name
GroupBox	Name	sizeOptions
	AccessibleDescription	Pizza size options
	AccessibleName	Pizza size options
	Text	Pizza size
	TabIndex	4
RadioButton	Name	smallPizza
	Text	&Small $6.00
	Checked	True
	TabIndex	0
	AccessibleDescription	Small pizza
	AccessibleName	Small pizza
RadioButton	Name	largePizza
	Text	&Large $10.00
	TabIndex	1
	AccessibleDescription	Large pizza
	AccessibleName	Large pizza
Label	Name	toppingsLabel
	Text	&Toppings ($0.75 each)
	TabIndex	5
	AccessibleDescription	Toppings label
	AccessibleName	Toppings label
	UseMnemonic	True
CheckedListBox	Name	toppings
	TabIndex	6
	AccessibleDescription	Available toppings
	AccessibleName	Available toppings
	Items	Pepperoni, Sausage, Mushrooms
Button	Name	order
	Text	&Order
	TabIndex	7
	AccessibleDescription	Total the order
	AccessibleName	Total order
Button	Name	cancel
	Text	&Cancel
	TabIndex	8
	AccessibleDescription	Cancel the order
	AccessibleName	Cancel order
MainMenu	Name	theMainMenu
MenuItem	Name	fileCommands
	Text	&File
MenuItem	Name	exitApp
	Text	E&xit

El formulario tendrá una apariencia parecida a la siguiente:

Compatibilidad con el modo de contraste alto

El modo de Contraste alto es una configuración del sistema de Windows que mejora la legibilidad; para ello, utiliza colores contrastados y tamaños de fuente de fácil lectura para los usuarios con discapacidad visual. La propiedad SystemInformation.HighContrast se proporciona para determinar si está establecido el modo de contraste alto.

Si SystemInformation.HighContrast es true, la aplicación debe:

Mostrar todos los elementos de la interfaz de usuario con la combinación de colores del sistema
Ofrecer mediante indicaciones visuales o sonido cualquier información que se ofrezca mediante el color. Por ejemplo, si determinados elementos de una lista se resaltan mediante una fuente de color rojo, podría agregar a la fuente el formato de negrita, de modo que el usuario disponga de una indicación, distinta del color, de que los elementos están resaltados.
Omitir las imágenes o tramas que se encuentren detrás del texto

La aplicación debe comprobar la configuración de HighContrast cuando se inicie, así como responder al evento de sistema UserPreferenceChanged. El evento UserPreferenceChanged se produce siempre que cambia el valor de HighContrast.

En nuestra aplicación, el único elemento que no utiliza la configuración de color del sistema es lblCompanyName. La clase SystemColors se utiliza para cambiar las configuraciones de color de la etiqueta a los colores del sistema seleccionados por el usuario.

Para habilitar el modo de Contraste alto de forma eficaz

Cree un método para establecer los colores de la etiqueta en los colores del sistema.

' Visual Basic
Private Sub SetColorScheme()
   If SystemInformation.HighContrast Then
      companyLabel.BackColor = SystemColors.Window
      companyLabel.ForeColor = SystemColors.WindowText
   Else
      companyLabel.BackColor = Color.Blue
      companyLabel.ForeColor = Color.Yellow
   End If
End Sub

// C#
private void SetColorScheme()
{
   if (SystemInformation.HighContrast)
   {
      companyLabel.BackColor = SystemColors.Window;
      companyLabel.ForeColor = SystemColors.WindowText;
   }
   else
   {
      companyLabel.BackColor = Color.Blue;
      companyLabel.ForeColor = Color.Yellow;
   }
}

// Visual J#
private void SetColorScheme()
{
   if (SystemInformation.get_HighContrast())
   {
      companyLabel.set_BackColor(SystemColors.get_Window());
      companyLabel.set_ForeColor(SystemColors.get_WindowText());
   }
   else
   {
      companyLabel.set_BackColor(Color.get_Blue());
      companyLabel.set_ForeColor(Color.get_Yellow());
   }
}

Llame al procedimiento SetColorScheme en el constructor del formulario (Public Sub New() en Visual Basic, public class Form1 en Visual C# y Public Form1 en Visual J#). Para tener acceso al constructor en Visual Basic, deberá expandir la región denominada Código generado por el Diseñador de Windows Forms.
```
' Visual Basic 
Public Sub New()
   MyBase.New()
   InitializeComponent()
   SetColorScheme()
End Sub

// C#
public Form1()
{
   InitializeComponent();
   SetColorScheme();
}

// Visual J#
public Form1()
{
   InitializeComponent();
   SetColorScheme();
}
```

Cree un procedimiento de evento, con la firma adecuada, que responda al evento UserPreferenceChanged.

' Visual Basic
Protected Sub UserPreferenceChanged(ByVal sender As Object, _
ByVal e As Microsoft.Win32.UserPreferenceChangedEventArgs)
   SetColorScheme()
End Sub

// C#
public void UserPreferenceChanged(object sender, 
Microsoft.Win32.UserPreferenceChangedEventArgs e)
{
   SetColorScheme();
}
// Visual J#
public void UserPreferenceChanged(Object sender, Microsoft.Win32.UserPreferenceChangedEventArgs e)
{
   SetColorScheme();
}

Agregue código al constructor del formulario, después de la llamada a InitializeComponents, para enlazar el procedimiento de evento al evento del sistema. Este método llama al procedimiento SetColorScheme .

' Visual Basic
Public Sub New()
   MyBase.New()
   InitializeComponent()
   SetColorScheme()
   AddHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
      AddressOf Me.UserPreferenceChanged
End Sub

// C#
public Form1()
{
   InitializeComponent();
   SetColorScheme();
   Microsoft.Win32.SystemEvents.UserPreferenceChanged 
      += new Microsoft.Win32.UserPreferenceChangedEventHandler(
      this.UserPreferenceChanged);
}

// Visual J#
public Form1()
{
   //
   // Required for Windows Form Designer support
   //
   InitializeComponent();
   SetColorScheme();
   Microsoft.Win32.SystemEvents.add_UserPreferenceChanged(
       new Microsoft.Win32.UserPreferenceChangedEventHandler(this.UserPreferenceChanged));
   //
   // Add any constructor code after InitializeComponent call
   //
}

Para liberar el evento cuando se cierre la aplicación, agregue código al método Dispose del formulario antes de llamar al método Dispose de la clase base. Para tener acceso al método Dispose en Visual Basic, deberá expandir la región denominada Código generado por el Diseñador de Windows Forms.

Nota:
El código del evento del sistema ejecuta un subproceso independiente de la aplicación principal. Si no libera el evento, el código enlazado continuará ejecutándose incluso después de que se cierre el programa.

' Visual Basic
Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
   If disposing Then
      If Not (components Is Nothing) Then
         components.Dispose()
      End If
   End If
   RemoveHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
      AddressOf Me.UserPreferenceChanged
   MyBase.Dispose(disposing)
End Sub


// C#
protected override void Dispose( bool disposing )
{
   if( disposing )
   {
      if (components != null) 
      {
         components.Dispose();
      }
   }
   Microsoft.Win32.SystemEvents.UserPreferenceChanged 
      -= new Microsoft.Win32.UserPreferenceChangedEventHandler(
      this.UserPreferenceChanged);
   base.Dispose( disposing );
}

// Visual J#
protected void Dispose(boolean disposing)
{
   if (disposing)
   {
      if (components != null)
         {
            components.Dispose();
         }
      }
      Microsoft.Win32.SystemEvents.remove_UserPreferenceChanged(
         new Microsoft.Win32.UserPreferenceChangedEventHandler( this.UserPreferenceChanged));
      super.Dispose(disposing);
   }

Presione F5 para ejecutar la aplicación.

Ofrecer información importante por medios diferentes del sonido

En esta aplicación no se ofrece ninguna información exclusivamente mediante sonido. Si utiliza sonido en la aplicación, es recomendable que suministre la información también por otros medios.

Para proporcionar información por algunos otros medios distintos del sonido

Haga parpadear la barra de título mediante la función FlashWindow de la API de Windows. Para obtener un ejemplo de cómo llamar a las funciones de la API de Windows, vea Tutorial: Llamar a las API de Windows.

Nota:
Es posible que el usuario haya habilitado el servicio SoundSentry de Windows, que también hace que la ventana parpadee cuando se reproducen sonidos del sistema a través del altavoz integrado en el equipo.

Muestre la información importante en una ventana no modal, para que el usuario pueda responder a ella. Para obtener información detallada, vea Mostrar formularios Windows Forms modales y no modales.
Muestre un cuadro de mensaje que adquiera el foco del teclado. Evite utilizar este método cuando exista la posibilidad de que el usuario esté escribiendo.
Muestre un indicador de estado en el área de notificación de estado de la barra de tareas. Para obtener información detallada, vea Agregar iconos de aplicación a la barra de tareas con el control NotifyIcon de formularios Windows Forms.

Probar la aplicación

Antes de implementar la aplicación, es recomendable probar las funciones de accesibilidad implementadas.

Para probar las funciones de accesibilidad

Para probar el acceso mediante teclado, desconecte el mouse (ratón) y navegue por las características de la interfaz de usuario sólo con el teclado. Asegúrese de que sea posible ejecutar todas las tareas mediante el uso exclusivo del teclado.

Para probar la compatibilidad con el modo de Contraste alto, elija Opciones de accesibilidad en el Panel de control. Haga clic en la ficha Pantalla y active la casilla Utilizar contraste alto. Navegue por todos los elementos de la interfaz de usuario para asegurarse de que se reflejan los cambios de color y fuente. Asegúrese también de que se omiten las imágenes y tramas que se representan como fondo del texto.

Nota:
Windows NT 4 no dispone del icono Opciones de accesibilidad en el Panel de control. Por ello, este procedimiento para cambiar el valor SystemInformation.HighContrast no funciona en Windows NT 4.

Hay otras herramientas disponibles para probar la accesibilidad de una aplicación.
Para comprobar la exposición del foco de teclado, ejecute el Ampliador. (Para abrirlo, Haga clic en el menú Inicio, seleccione Programas, Accesorios, Accesibilidad y haga clic en Ampliador). Navegue por la interfaz de usuario utilizando tanto la tabulación de teclado como el mouse. Asegúrese de que el Ampliador hace un seguimiento correcto de la navegación.
Para probar la exposición de los elementos de la pantalla, ejecute Inspect y utilice tanto el mouse como la tecla TAB para navegar hasta cada elemento. Asegúrese de que la información que se presenta en los campos Nombre, Estado, Función, Ubicación y Valor de la ventana Inspect tiene sentido para el usuario, para cada uno de los objetos de la interfaz de usuario. Inspect se instala como parte de Microsoft® Active Accessibility® SDK, que está disponible en https://msdn.microsoft.com/library/default.asp?url=/downloads/list/accessibility.asp.

Compartir a través de