ARIA5Usar atributos de estado y propiedad de WAI-ARIA para exponer el estado de un componente de la interfaz de usuario

Aplicabilidad

Tecnologías compatibles con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El objetivo de esta técnica es usar los atributos de estado y propiedad de WAI-ARIA para exponer el estado, las propiedades y los valores de un componente de la interfaz de usuario, de modo que las tecnologías de asistencia puedan leerlos y establecerlos, y reciban notificación de los cambios en dichos valores. La especificación WAI-ARIA proporciona una descripción normativa de cada atributo y del rol de los elementos de la interfaz de usuario a los que da soporte. Cuando las aplicaciones de internet enriquecidas definen nuevos componentes (widgets) de interfaz de usuario, exponer los atributos de estado y propiedad permite a los usuarios entender el componente y cómo interactuar con él.

Ejemplos

<a tabindex="0"
  role="button"
  id="toggle"
  aria-pressed="false">
  Mute
  ...
</a>

/**
* Toggles the toggle button's state between *pressed* and *not pressed*.
*
* @param {HTMLElement} button
*/
function toggleButtonState(button) {
  var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
  button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
  ...
}

<div id="id-red" class="color-slider-label">Red</div>
<div class="color-slider red"
  role="slider"
  tabindex="0"
  aria-valuemin="0"
  aria-valuenow="128"
  aria-valuemax="255"
  aria-labelledby="id-red">
   ...
</div>

moveSliderTo(slider, value) {
  ...
  slider.sliderNode.setAttribute('aria-valuenow', value);
  ...
}

Pruebas

Técnicas relacionadas

• ARIA4: Usar un atributo role de WAI-ARIA para exponer la función de un componente de la interfaz de usuario
• H91: Usar controles de formulario y enlaces de HTML

Recursos

• Accessible Rich Internet Applications (WAI-ARIA), Roles (sección sobre roles)
• Accessible Rich Internet Applications (WAI-ARIA), The Roles Model (el modelo de roles)
• Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties (estados y propiedades admitidos)
• WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
• Using WAI-ARIA in HTML (uso de WAI-ARIA en HTML)