Compartir a través de

Tutorial: Creación de una aplicación accesible basada en Windows

La creación de una aplicación accesible tiene importantes implicaciones empresariales. Muchos gobiernos tienen regulaciones de accesibilidad para la compra de software. El logotipo certificado para Windows incluye requisitos de accesibilidad. Un estimado de 30 millones de residentes de Estados Unidos solo, muchos de ellos clientes potenciales, se ven afectados por la accesibilidad del software.

Este tutorial abordará los cinco requisitos de accesibilidad del logotipo certificado para Windows. Según estos requisitos, una aplicación accesible hará lo siguiente:

  • Admite la configuración de tamaño, color, fuente y entrada del Panel de control. La barra de menús, la barra de título, los bordes y la barra de estado se cambiarán de tamaño cuando el usuario cambie la configuración del panel de control. En esta aplicación no se requieren cambios adicionales en los controles o el código.

  • Admite el modo de contraste alto.

  • Proporcione acceso de teclado documentado a todas las características.

  • Exponga la ubicación del foco del teclado visualmente y mediante programación.

  • Evite transmitir información importante solo por sonido.

Para obtener más información, consulte Recursos para diseñar aplicaciones accesibles.

Para obtener información sobre cómo admitir diseños de teclado variables, vea Procedimientos recomendados para desarrollar aplicaciones listas para el mundo.

Creación del proyecto

En este tutorial se crea la interfaz de usuario de una aplicación que toma pedidos de pizza. Consta de un TextBox elemento para el nombre del cliente, un RadioButton grupo para seleccionar el tamaño de la pizza, un CheckedListBox para seleccionar los ingredientes, dos controles de Botón con la etiqueta Pedir y Cancelar, y un Menú con un comando Salir.

El usuario escribe el nombre del cliente, el tamaño de la pizza y los ingredientes deseados. Cuando el usuario hace clic en el botón Pedido, se muestra un resumen del pedido y su costo en un cuadro de mensaje y los controles están desactivados y listos para el siguiente pedido. Cuando el usuario hace clic en el botón Cancelar, los controles se borran y están listos para el siguiente pedido. Cuando el usuario hace clic en el elemento de menú Salir, el programa se cierra.

El énfasis de este tutorial no es el código de un sistema de pedidos minoristas, sino la accesibilidad de la interfaz de usuario. En el tutorial se muestran las características de accesibilidad de varios controles usados con frecuencia, incluidos botones, botones de radio, cuadros de texto y etiquetas.

Para empezar a desarrollar la aplicación

Agregar los controles al formulario

Al agregar los controles a un formulario, tenga en cuenta las instrucciones siguientes para que una aplicación sea accesible:

  • Establezca las propiedades AccessibleDescription y AccessibleName. En este ejemplo, la configuración Predeterminada para el AccessibleRole es suficiente. Para obtener más información sobre las propiedades de accesibilidad, vea Proporcionar información de accesibilidad para controles en un formulario Windows Forms.

  • Establezca el tamaño de fuente en 10 puntos o más.

    Nota:

    Si establece el tamaño de fuente del formulario en 10 al iniciarse, todos los controles agregados posteriormente al formulario tendrán un tamaño de fuente de 10.

  • Asegúrese de que cualquier control Label que describa un control TextBox precede inmediatamente al control TextBox en el orden de tabulación.

  • Agregue una tecla de acceso usando el carácter "&" a la propiedad Text de cualquier control al que el usuario desee navegar.

  • Agregue una tecla de acceso utilizando el carácter "&" en la propiedad de la etiqueta que precede a un control al que el usuario desee navegar. Establezca la propiedad UseMnemonic de las etiquetas a true, de modo que el enfoque se dirija al siguiente control del orden de tabulación cuando el usuario pulse la tecla de acceso.

  • Agregue claves de acceso a todos los elementos de menú.

Para que la aplicación windows sea accesible

  • Agregue los controles al formulario y establezca las propiedades como se describe a continuación. Vea la imagen al final de la tabla para obtener un modelo de cómo organizar los controles en el formulario.

    Objeto Propiedad Importancia
    Form1 DescripciónAccesible Formulario de pedido
    Nombre Accesible Formulario de pedido
    Tamaño de fuente 10
    Mensaje de texto Formulario de pedido de pizza
    PictureBox Nombre logotipo
    DescripciónAccesible Un segmento de pizza
    Nombre Accesible Logotipo de la empresa
    Imagen Cualquier icono o mapa de bits
    Etiqueta Nombre etiquetaDeEmpresa
    Mensaje de texto Buena pizza
    TabIndex 1
    DescripciónAccesible Nombre de la compañía
    Nombre Accesible Nombre de la compañía
    Color de fondo Azul
    Color de fuente Amarillo
    Tamaño de fuente 18
    Etiqueta Nombre customerLabel
    Mensaje de texto &Nombre
    TabIndex 2
    DescripciónAccesible Etiqueta de nombre de cliente
    Nombre Accesible Etiqueta de nombre de cliente
    UseMnemonic Cierto
    Caja de texto Nombre nombreDelCliente
    Mensaje de texto (ninguno)
    TabIndex 3
    DescripciónAccesible Nombre del cliente
    Nombre Accesible Nombre del cliente
    GroupBox Nombre sizeOptions
    DescripciónAccesible Opciones de tamaño de pizza
    Nombre Accesible Opciones de tamaño de pizza
    Mensaje de texto Tamaño de pizza
    TabIndex 4
    RadioButton Nombre smallPizza
    Mensaje de texto &Pequeño $6.00
    Comprobado Cierto
    TabIndex 0
    DescripciónAccesible Pizza pequeña
    Nombre Accesible Pizza pequeña
    RadioButton Nombre largePizza
    Mensaje de texto $10,00 Grandes
    TabIndex 1
    DescripciónAccesible Pizza grande
    Nombre Accesible Pizza grande
    Etiqueta Nombre etiqueta de ingredientes
    Mensaje de texto &Toppings ($0,75 cada uno)
    TabIndex 5
    DescripciónAccesible Etiqueta de ingredientes
    Nombre Accesible Etiqueta de ingredientes
    UseMnemonic Cierto
    CheckedListBox Nombre Aderezos
    TabIndex 6
    DescripciónAccesible Ingredientes disponibles
    Nombre Accesible Ingredientes disponibles
    Productos Pepperoni, Salchichas, Champiñones
    Botón Nombre orden/pedido
    Mensaje de texto &Ordenar
    TabIndex 7
    DescripciónAccesible Total del pedido
    Nombre Accesible Total del pedido
    Botón Nombre Cancelar
    Mensaje de texto &Cancelar
    TabIndex 8
    DescripciónAccesible Cancelar el pedido
    Nombre Accesible Cancelar un pedido
    Menú Principal Nombre el menú principal
    Elemento del Menú Nombre fileCommands
    Mensaje de texto &File
    Elemento del Menú Nombre cerrar aplicación
    Mensaje de texto Salir

    El formulario tendrá un aspecto similar a la siguiente imagen:

    El formulario de pedido de pizza con un cuadro de texto para el nombre y la selección de tamaño e ingredientes.

Compatibilidad con el modo de contraste alto

El modo de contraste alto es una configuración del sistema Windows que mejora la legibilidad mediante el uso de colores contrastados y tamaños de fuente que son beneficiosos para los usuarios con discapacidades visuales. La HighContrast propiedad se proporciona para determinar si se establece el modo de contraste alto.

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

  • Mostrar todos los elementos de la interfaz de usuario mediante la combinación de colores del sistema

  • Transmite mediante indicaciones visuales o por sonido cualquier información que se transmita a través del color. Por ejemplo, si determinados elementos de lista están resaltados mediante una fuente roja, también puede agregar negrita a la fuente, de modo que el usuario tenga una indicación que no sea de color que los elementos estén resaltados.

  • Omitir cualquier imagen o patrón detrás del texto

La aplicación debe comprobar la configuración de HighContrast cuándo se inicia la aplicación y responder al evento UserPreferenceChangeddel sistema . El UserPreferenceChanged evento se genera cada vez que cambia el valor de HighContrast .

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

Para habilitar el modo de contraste alto de una manera eficaz

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

    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

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

  2. Llame al SetColorScheme procedimiento en el constructor de formulario (Public Sub New() en Visual Basic y public Form1() en Visual C#). Para acceder al constructor en Visual Basic, deberá expandir la región etiquetada como código generado por el Diseñador de Windows Forms.

    Public Sub New()
    MyBase.New()
    InitializeComponent()
    SetColorScheme()
End Sub

    public Form1()
{
    InitializeComponent();
    SetColorScheme();
}

  3. Cree un procedimiento de evento, con la firma adecuada, para responder al evento UserPreferenceChanged.

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

    public void UserPreferenceChanged(object sender,
Microsoft.Win32.UserPreferenceChangedEventArgs e)
{
    SetColorScheme();
}

  4. Agregue código al constructor de 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.

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

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

  5. Agregue código al método de formulario Dispose , antes de la llamada al Dispose método de la clase base, para liberar el evento cuando se cierre la aplicación. Para acceder en Visual Basic al Dispose método, deberá expandir la región etiquetada como Código generado por el Diseñador de Windows Forms.

    Nota:

    El código de evento del sistema ejecuta un subproceso independiente de la aplicación principal. Si no libera el evento, el código que se enlaza al evento se ejecutará incluso después de cerrar el programa.

    Protected Overloads Overrides Sub Dispose(ByVal disposing As Boolean)
    If disposing AndAlso components IsNot Nothing Then
        components.Dispose()
    End If
    RemoveHandler Microsoft.Win32.SystemEvents.UserPreferenceChanged, _
       AddressOf Me.UserPreferenceChanged
    MyBase.Dispose(disposing)
End Sub

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

  6. Presione F5 para ejecutar la aplicación.

Transmitir información importante por medios distintos del sonido

En esta aplicación, no se transmite información solo por sonido. Si usa sonido en la aplicación, debe proporcionar también la información por otros medios.

Para proporcionar información por algún otro medio que no sea sonido

  1. Haga que la barra de título parpadee mediante la función de API de Windows FlashWindow. 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:

    El usuario puede tener habilitado el servicio SoundSentry de Windows, que también hará que la ventana parpadee cuando los sonidos del sistema se reproducen a través del altavoz integrado del equipo.

  2. Mostrar la información importante en una ventana no modal para que el usuario pueda responder a ella.

  3. Muestra un cuadro de mensaje que adquiere el foco del teclado. Evite este método cuando el usuario esté escribiendo.

  4. Muestra un indicador de estado en el área de notificación de estado de la barra de tareas. Para obtener más información, consulte Cómo agregar iconos de aplicaciones a la barra de tareas con el componente NotifyIcon de Windows Forms.

Probar la aplicación

Antes de implementar la aplicación, debe probar las características de accesibilidad que ha implementado.

Para probar las características de accesibilidad

  1. Para probar el acceso al teclado, desconecte el mouse y navegue por la interfaz de usuario para cada característica con solo el teclado. Asegúrese de que todas las tareas se pueden realizar solo con el teclado.

  2. Para probar la compatibilidad con contraste alto, elija el icono Opciones de accesibilidad en el Panel de control. Haga clic en la pestaña Mostrar y active la casilla Usar contraste alto. Navegue por todos los elementos de la interfaz de usuario para asegurarse de que se reflejan los cambios de color y fuente. Además, asegúrese de que se omiten imágenes o patrones dibujados detrás del texto.

    Nota:

    Windows NT 4 no tiene un icono de opciones de accesibilidad en el Panel de control. Por lo tanto, este procedimiento para cambiar la configuración SystemInformation.HighContrast no funciona en Windows NT 4.

  3. Otras herramientas están disponibles para probar la accesibilidad de una aplicación.

  4. Para probar la exposición del foco del teclado, ejecute Lupa. (Para abrirlo, haga clic en el menú Inicio, apunte a Programas, apunte a Accesorios, apunte a Accesibilidad, y luego haga clic en Lupa). Navegue por la interfaz de usuario con pestañas de teclado y el mouse. Asegúrese de que toda la navegación se rastrea correctamente en Lupa.

  5. Para probar la exposición de elementos de pantalla, ejecute Inspeccionar y use tanto el mouse como la tecla TAB para llegar a cada elemento. Asegúrese de que la información presentada en los campos Nombre, Estado, Rol, Ubicación y Valor de la ventana Inspeccionar es significativo para el usuario para cada objeto de la interfaz de usuario.

  • Last updated on