Compartir a través de


Tutorial: Crear una aplicación accesible basada en Windows

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

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

  1. 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());
       }
    }
    
  2. 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();
    }
    
  3. 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();
    }
    
  4. 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
       //
    }
    
  5. 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);
       }
    
  6. 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

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

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

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

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

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

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

  3. Hay otras herramientas disponibles para probar la accesibilidad de una aplicación.

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

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