Exponer información básica acerca de los elementos de la interfaz de usuario (HTML)

Applies to Windows and Windows Phone

¿Buscas la versión para C#/VB/C++/XAML de este tema? Consulta Exponer información básica acerca de los elementos de la interfaz de usuario (XAML).

Las tecnologías de asistencia, como los lectores de pantalla, necesitan información acerca de los elementos de la interfaz de usuario en una aplicación. El sistema proporciona la información sobre la base de un marcado HTML de la aplicación. Describiremos el HTML que debes implementar para garantizar que tu aplicación exponga la información básica que necesitan las tecnologías de asistencia.

Nombre accesible

Un nombre accesible es una cadena de texto descriptiva y corta que un lector de pantalla usa para anunciar un elemento de la interfaz de usuario. Debes establecer el nombre accesible para los elementos de la interfaz de usuario que tienen un significado que es importante para comprender el contenido o interactuar con la interfaz de usuario. Generalmente, esos elementos incluyen imágenes, campos de entrada, botones, controles, regiones, etc.

En la siguiente tabla se describe cómo definir un nombre accesible para diversos tipos de elementos HTML.

Tipo de elementoDescripción
Texto estáticoPara el texto y otras etiquetas HTML, el nombre accesible se basa en el texto (interno) visible. Algunos ejemplos son las etiquetas p y h1.
ImágenesPara las imágenes, el atributo alt se usa como el nombre accesible. Se aplica a imágenes que especificas con la etiqueta img, botones de imagen que especificas con <input type="image"> y etiquetas area que usas con los mapas de imagen. Para obtener más información acerca de los mapas de imagen, consulta el tema sobre los mapas de imagen en la especificación sobre HTML5 del World Wide Web Consortium (W3C).
Campos de formulario El nombre accesible para un campo de formulario como <input type="text| password| checkbox| radio|...">, o para una etiquetaselect o textarea, debe ser el mismo que la etiqueta que se muestra para el campo. La manera preferida de asociar una etiqueta con un campo de entrada es usar la etiqueta label y establecer el atributo for. Cuando el usuario hace clic en la etiqueta label, el foco se mueve al control asociado. Para obtener más información acerca del etiquetado de los elementos de la interfaz de usuario, consulta el tema sobre etiquetado y descripción en las procedimientos de creación de aplicaciones de Internet enriquecidas accesibles de la Web Accessibility Initiative 1.0 (WAI-ARIA).
Botones y vínculos De manera predeterminada, el nombre accesible de un botón o vínculo se basa en el texto visible. Para las etiquetas a y button, el nombre accesible se basa en el texto interno de la etiqueta. Para una etiqueta input de type="button", el nombre accesible se basa en el atributo value.
TablasEl nombre accesible de una tabla generalmente se define con una etiqueta caption en la tabla.
Elementos de punto de referencia y estructuraDarle etiquetas a los elementos de punto de referencia y estructura es importante porque los lectores de pantalla usan las etiquetas para navegar por un documento. Los elementos que necesitan etiquetas son, entre otros, formularios, marcos, regiones y otros elementos con roles de punto de referencia como "main", "navigation" y "search".
Elementos en un div

Para todos los elementos que normalmente se definen utilizando una etiqueta div, incluidos los elementos personalizados, puedes establecer un nombre accesible utilizando uno de los siguientes atributos:

  • aria-labelledby—para referirse al elemento que contiene el texto que se utiliza como nombre accesible.
  • aria-label—para establecer el nombre accesible directamente.
  • title—para crear la información sobre herramientas que también se utiliza como el nombre accesible.

Debes usar los atributos anteriores con elementos de la interfaz de usuario personalizados (por ejemplo, con etiquetas div) y cuando quieras reemplazar los atributos HTML predeterminados.

 

Este ejemplo muestra cómo definir un nombre accesible para diversos tipos de elementos HTML.


<!--Label landmark regions by using aria-labelledby or aria-label. -->      
<h1 id="formLabel">Personal Information</h1>
<form aria-labelledby="formLabel" ... > 

    <!-- The label tag with "for" attribute sets the name of the input field. -->
    <label for="fullname">Full Name</label>
    <input id="fullname" type="text" accesskey="N"/>

    <!-- Alt text is used as the image accessible name. -->      
    <img src="..." alt="Personal Photo" />

    <!-- An image button's accessible name is set with the alt attribute. -->
    <input type="image" src="images/back.png" alt="Back" onclick="..." />

    <!-- Inner text is used as the accessible name for A, BUTTON, P, and so on. -->
    <a href="...">More Photos</a> 

    <!-- The submit button uses default caption text as the accessible name. -->
    <input type="submit" /> 

</form>

Para los controles de las aplicaciones de Windows en tiempo de ejecución, puedes usar el enlace de datos para establecer el nombre accesible.


<!-- Data binding maps the image alt attribute to the data source title field -->
<div class="..." data-win-control="Win.Binding.Template">
    <div class="image" data-win-bind="...; alt: title"></div>
    <div class="text">
        <h1 class="title" data-win-bind="textContent: title"></h1>
        <p class="description" data-win-bind="textContent: description"></p>
    </div>
</div>

<!-- List view can set the accessible name with aria-labelledby or aria-label. -->
<h1 id="pageTitle">Items collection page</ h1>
<div data-win-control="Win.UI.ListView" data-win-options="{...}" 
    aria-labelledby="pageTitle">
</div>

Nota  La plataforma de automatización de la interfaz de usuario de Microsoft genera la representación en árbol de la interfaz de usuario de aplicaciones para los usos del cliente de automatización de la interfaz de usuario. Representa la estructura de los elementos de la interfaz de usuario que están disponibles para que las tecnologías de asistencia los inspeccionen e interactúen con ellos. Especificas tú mismo información de automatización de la interfaz de usuario. Pero te basas en la compatibilidad integrada del host de Windows en tiempo de ejecución que convierte toda la atribución que es pertinente para el contenido HTML en información de automatización de la interfaz de usuario que crea una representación común de accesibilidad o de automatización para cada aplicación que se consulta.

Valor

Si un elemento de la interfaz de usuario tiene un valor asociado que es importante para comprender su condición, debes exponer esta información a los marcos de accesibilidad.

Por ejemplo, un control de HTML que está hospedado en una etiqueta div cuyo atributo role está configurado como "slider", "progressbar" o "spinbutton" debe exponer los atributos aria-valuemax, aria-valuemin y aria-valuenow. Además, tu aplicación debe mantener de manera dinámica el atributo aria-valuenow para reflejar los cambios en el elemento. Una buena práctica es establecer el atributo aria-valuetext para proporcionar la cadena de texto que corresponde al valor actual del atributo aria-valuenow.


<div id="sl" role="slider" ... 
    aria-valuemin="1" aria-valuemax="5" aria-valuenow="3" aria-valuetext="good"...>
</div>

<script>
    function manageValue()
    {
        ...
        // Dynamically maintain aria properties for the current value and text.
        sl.setAttribute("aria-valuenow", currentValue);
        sl.setAttribute("aria-valuetext", currentValueText);
        ...
    }
}
</script>


Estado

Algunas veces es importante establecer y mantener el estado accesible de un elemento de la interfaz de usuario (por ejemplo, mediante el uso del atributo aria-disabled). La configuración y el mantenimiento del estado de accesibilidad es particularmente importante para los elementos de la interfaz de usuario personalizados. El sistema tiene compatibilidad integrada para mantener el estado accesible para todos los controles de Windows y los elementos de la interfaz de usuario estándares.


<!-- Declaring accessibility attributes for a custom image button. -->
<div id="folders" role="tree" aria-label="Folders">
...
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if ( e.keyCode === Win.Utilities.Key.leftArrow) {
            // The node is collapsed if it has children
            e.srcElement.setAttribute('aria-expanded', false );
        } else if ( e.keyCode === Win.Utilities.Key.rightArrow) {
            // The node is expanded if it has children
            e.srcElement.setAttribute('aria-expanded', true );
        }
    });
</script>

Nota  Para quitar un elemento y todo su contenido del árbol de automatización de la interfaz de usuario, usa el atributo aria-hidden con el valor establecido como true.

Rol

Debes asignar un rol (no abstracto) de WAI-ARIA válido a los elementos de la interfaz de usuario personalizados. Esto le da a los lectores de pantalla más información acerca de qué comportamiento y propiedades deben esperarse de los elementos de la interfaz de usuario.

También es importante establecer el rol para los elementos a los que el atributo aria-labelledby hace referencia y para los elementos que exponen elementos de la interfaz de usuario que son importantes para la interacción de usuario.

En el siguiente ejemplo, los elementos de una vista de árbol se marcan con los correspondientes roles de WAI-ARIA para permitir que los lectores de pantalla comprendan la estructura de la vista de árbol y para exponer su comportamiento de expandir–contraer.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0" 
        aria-activedescendant="n-0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

Para ilustrar mejor los conceptos de accesibilidad, la vista de árbol en el ejemplo anterior se simplificó para incluir solamente un único elemento para cada nodo de ella. En una implementación real, los nodos expandibles incluyen dos subelementos, uno para representar la funcionalidad de expandir–contraer y otro para exponer la funcionalidad de activación del nodo (por ejemplo, cargando una lista de las carpetas y los archivos contenidos).


<!-- An example of the expandable and actionable node. -->
...
    <div role="presentation">
    <img src="images/expand.png" role="presentation" onclick="expColl(event)"/>
    <span id="n-0" role="treeitem" onclick="activateItem(event)"
        aria-expanded="true" >Libraries</span>
    </div>
...

En el ejemplo anterior, role="presentation" quita los elementos que no tienen valor semántico del árbol de la interfaz de usuario (o árbol de accesibilidad). Ten en cuenta que aunque role="presentation" quita el elemento actual del árbol de la interfaz de usuario, los subelementos contenidos no se ven afectados. Para quitar el elemento de la interfaz de usuario y todos sus elementos secundarios de un árbol de interfaz de usuario, usa aria-hidden="true".

Algunas etiquetas HTML5, como a o img, tienen roles implícitos fuertes que no pueden sobrescribirse excepto con el rol "presentation".

Descripción accesible (opcional)

Una descripción accesible proporciona información de accesibilidad adicional acerca de un elemento de la interfaz de usuario particular. Generalmente proporcionas una descripción accesible cuando un nombre accesible solo no transmite adecuadamente el propósito de un elemento.

El lector de pantalla Narrador lee la descripción accesible de un elemento solamente cuando el usuario solicita más información acerca del elemento presionando Bloq Mayús+F.

La mejor manera de proporcionar una descripción accesible es usar el atributo aria-describedby. Este atributo hace referencia a otro u otros elementos más de la interfaz de usuario cuyo contenido de texto usará el sistema como la descripción accesible. Tienes la opción de proporcionar la descripción accesible implementando una información sobre herramientas que incluya el atributo title. Para obtener más información, consulta Hacer que la información sobre herramientas sea accesible.


<!-- Declaring visible text as the accessible description of a table. -->
<p id="tableDesc">This table describes travel expenses organized by destination and dates.</p>
<table aria-describedby="tableDesc">...<table>

Temas relacionados

Cumplir requisitos de accesibilidad básicos

 

 

Mostrar:
© 2014 Microsoft