Accesibilidad en ejemplo angular

La web es utilizada por una amplia variedad de personas, incluidas aquellas que tienen discapacidades visuales o motoras. Hay una variedad de tecnologías de asistencia disponibles que facilitan la interacción de estos grupos con aplicaciones de software basadas en la web. Además, diseñar una aplicación para que sea más accesible generalmente mejora la experiencia del usuario para todos los usuarios.

Para obtener una introducción detallada a los problemas y técnicas para diseñar aplicaciones accesibles, consulte la Accesibilidad sección de Google Fundamentos de la Web.

Esta página analiza las mejores prácticas para diseñar aplicaciones Angular que funcionen bien para todos los usuarios, incluidos aquellos que dependen de las tecnologías de asistencia.

Para la aplicación de muestra que describe esta página, vea el ejemplo en vivo.

Accesibilidad attributes

Crear una experiencia web accesible a menudo implica establecer ARIA attributes para proporcionar un significado semántico donde de otro modo podría faltar. Usar attribute sintaxis de la plantilla de enlace para controlar los valores de accesibilidad relacionados attributes.

Al vincularse a ARIA attributes en Angular, debes usar el attr. prefix, ya que la especificación ARIA depende específicamente de HTML attributes en lugar de propiedades de elementos DOM.

<button[attr.aria-label]="myActionLabel">...button>

Tenga en cuenta que esta sintaxis solo es necesaria para attribute fijaciones. ARIA estático attributes no requieren sintaxis adicional.

<buttonaria-label="Save document">...button>

Por convención, HTML attributes usar nombres en minúsculas (tabindex), mientras que las propiedades usan nombres camelCase (tabIndex).

Consulte la guía de sintaxis de enlace para obtener más información sobre la diferencia entre attributes y propiedades.

Componentes de la interfaz de usuario angular

los Material angular Library, que es mantenida por el equipo de Angular, es un conjunto de componentes de IU reutilizables que apunta a ser completamente accesible. los Kit de desarrollo de componentes (CDK) incluye el a11y paquete que proporciona herramientas para respaldar diversas áreas de accesibilidad. Por ejemplo:

• LiveAnnouncer se utiliza para anunciar mensajes para usuarios de lectores de pantalla que utilizan un aria-live región. Consulte la documentación del W3C para obtener más información sobre regiones aria-live.

• los cdkTrapFocus Pestaña trampas de directivakey enfoque dentro de un elemento. Úselo para crear una experiencia accesible para componentes como los diálogos modales, donde el enfoque debe estar restringido.

Para obtener detalles completos de estas y otras herramientas, consulte la Descripción general de la accesibilidad de Angular CDK.

Aumento de elementos nativos

Los elementos HTML nativos capturan una serie de patrones de interacción estándar que son importantes para la accesibilidad. Al crear componentes de Angular, debe reutilizar estos elementos nativos directamente cuando sea posible, en lugar de volver a implementar comportamientos bien soportados.

Por ejemplo, en lugar de crear un elemento personalizado para una nueva variedad de botones, puede crear un componente que utilice un attribute selector con un nativo elemento. Esto se aplica más comúnmente a y , pero se puede utilizar con muchos otros tipos de elementos.

Puede ver ejemplos de este patrón en Material angular: MatButton, MatTabNav, MatTable.

Usar contenedores para elementos nativos

A veces, el uso del elemento nativo apropiado requiere un elemento contenedor. Por ejemplo, el nativo elemento no puede tener hijos, por lo que cualquier componente de entrada de texto personalizado debe ajustar un con elementos adicionales. Si bien puede incluir el en la plantilla de su componente personalizado, esto hace que sea imposible para los usuarios del componente establecer propiedades arbitrarias y attributes al elemento de entrada. En su lugar, puede crear un componente contenedor que utilice la proyección de contenido para incluir el control nativo en la API del componente.

Puedes ver MatFormField como ejemplo de este patrón.

Estudio de caso: creación de una barra de progreso personalizada

El siguiente ejemplo muestra cómo hacer que una barra de progreso sea accesible mediante el uso de enlaces de host para controlar la accesibilidad. attributes.

• El componente define un elemento habilitado para accesibilidad con HTML estándar attribute roley ARIA attributes. El ARIA attribute aria-valuenow está vinculado a la entrada del usuario.

  import Component, Input from'@angular/core';/**
   * Example progressbar component.
   */@Component(
    selector:'app-example-progressbar',
    template:``,
    styleUrls:['./progress-bar.component.css'],
    host:// Sets the role for this component to "progressbar"
      role:'progressbar',// Sets the minimum and maximum values for the progressbar role.'aria-valuemin':'0','aria-valuemax':'100',// Binding that updates the current value of the progressbar.'[attr.aria-valuenow]':'value',)exportclassExampleProgressbarComponent/** Current value of the progressbar. */@Input() value =0;

• En la plantilla, el aria-label attribute asegura que el control sea accesible para los lectores de pantalla.

  <label>
    Enter an example progress value
    <inputtype="number"min="0"max="100"[value]="progress"(input)="setProgress($event)">label><app-example-progressbar[value]="progress"aria-label="Example of a progress bar">app-example-progressbar>

Gestión de enrutamiento y enfoque

Seguimiento y control atención en una interfaz de usuario es una consideración importante en el diseño de accesibilidad. Al usar el enrutamiento angular, debe decidir dónde se centra el enfoque de la página en la navegación.

Para evitar depender únicamente de las señales visuales, debe asegurarse de que las actualizaciones de su código de enrutamiento se enfoquen después de la navegación de la página. Utilizar el NavigationEnd evento del Router servicio para saber cuándo actualizar el enfoque.

El siguiente ejemplo muestra cómo buscar y enfocar el encabezado del contenido principal en el DOM después de la navegación.

router.events.pipe(filter(e => e instanceofNavigationEnd)).subscribe(()=>const mainHeader = document.querySelector('#main-content-header')if(mainHeader)
    mainHeader.focus(););

En una aplicación real, el elemento que recibe el enfoque dependerá de la estructura y el diseño de su aplicación específica. El elemento enfocado debe poner a los usuarios en condiciones de moverse inmediatamente al contenido principal que acaba de ser mostrado. Debe evitar situaciones en las que el enfoque vuelva a la body elemento después de un cambio de ruta.

Recursos adicionales

• Accesibilidad: conceptos básicos de la Web de Google

• Prácticas de creación y especificación de ARIA

• Diseño de materiales: accesibilidad

• Revista Smashing

• Componentes inclusivos

• Recursos de accesibilidad y ejemplos de código

• W3C – Iniciativa de accesibilidad web

• Rob Dodson A11ycasts

• ESLint angular proporciona reglas de bloqueo que pueden ayudarlo a asegurarse de que su código cumpla con los estándares de accesibilidad.

Libros

• “Una web para todos: diseño de experiencias de usuario accesibles”, Sarah Horton y Whitney Quesenbery

• “Patrones de diseño inclusivo”, Heydon Pickering