[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Cumplimiento de la accesibilidad de la red Web Components

    La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite lectores de pantalla y accesibilidad que interpretan las interacciones de navegación del teclado a través de las celdas y columnas de la cuadrícula.

    This is activated by setting the useAccessibility property of the grid to true.

    Web Components Grid Accessible Example

    Section 508 Compliance

    La Sección 508 de la Ley de Rehabilitación fue modificada en 1998 por el Congreso para exigir que todas las agencias federales hagan que su tecnología electrónica y de la información sea accesible para las personas con discapacidades. Desde entonces, el cumplimiento de la Sección 508 no sólo ha sido un requisito en las agencias gubernamentales, sino que también es importante al proporcionar soluciones de software y diseñar páginas web.

    La sección 1194.22 de la ley 508 se dirige específicamente a la intranet basada en la Web y a la información y los sistemas de Internet, y contiene un conjunto de 16 reglas a seguir. Con el fin de permitirle mantener sus aplicaciones web y sitios web compatibles con estas reglas con un esfuerzo mínimo por su parte, Infragistics ha tomado medidas para garantizar que los controles y componentes Ignite UI for Angular cumplan con las reglas de accesibilidad pertinentes.

    WAI-ARIA Support

    En 2014, el W3C finalizó su especificación WAI-ARIA que definía cómo diseñar contenido web y aplicaciones web para que sean más accesibles para los usuarios con discapacidades.

    Esta sección muestra el soporte de accesibilidad (ARIA) del marco, así como cuán fácilmente manejable es la direccionalidad de los componentes.

    Atributos ARIA Para brindar a los lectores de pantalla la información contextual que necesitan para interpretar e interactuar con la cuadrícula, se agregan atributos ARIA a los elementos DOM de la cuadrícula. Estos atributos son especialmente útiles cuando se utilizan elementos HTML simples como div y span para crear estructuras DOM complejas, como es el caso de ag-Grid.

    Al inspeccionar los elementos DOM de la grilla, el lector de pantalla admite y anuncia las siguientes funciones y propiedades:

    • Celda de cuadrícula: elemento que contiene una celda de cuadrícula.
    • Recuento de filas: anuncia el número de filas.
    • Recuento de columnas: anuncia el número de filas.
    • Fila: una fila de encabezados de columna o celdas de cuadrícula.
    • Índice de fila: anuncia el índice visible de la fila.
    • Fila seleccionada: solo está presente si la fila se puede seleccionar; anuncia el estado de selección.
    • Grupo expandido: solo presente en grupos de filas, anuncia el estado de expansión.
    • Encabezado de columna: elemento que contiene un encabezado de columna.
    • Índice de celda: anuncia el índice visible de la columna.
    • Colspan: solo está presente si la columna abarca varias columnas y ayuda a guiar a los lectores de pantalla.
    • Ordenar: solo presente en columnas ordenables, anuncia el estado de clasificación.
    • Índice de columna: anuncia el índice visible de la celda.
    • Seleccionado: solo presente si la celda es seleccionable, anuncia el estado de selección.
    • Expandido: solo presente en una celda de grupo, anuncia el estado de expansión.

    Keyboard Navigation

    After setting the useAccessibility property to true, this will enable a range of keyboard navigation options in the data grid that screen readers can recognize. Below is a description of each of the key presses / combinations and the effect they will have relative to the currently activated cell:

    Navegando dentro de la cuadrícula

    • CTRL + ALT + →: Navega una celda hacia arriba.
    • CTRL + ALT + ←: Navega una celda a la izquierda.
    • CTRL + ALT + ↓: Navegue una celda a continuación.
    • CTRL + ALT + ↑: Navegue una celda arriba.
    • CTRL + ALT + HOME: Navega hasta el encabezado de la primera columna.
    • CTRL + ALT + END: Navegue hasta la última celda visible.
    • CTRL + ALT + SHIFT + ↑ Navegar hasta el encabezado de columna actual.
    • CTRL + ALT + SHIFT + ↓ Navegar hasta la última celda de la columna actual.
    • CTRL + ALT + SHIFT + ← Navega a la primera celda de la fila actual.
    • CTRL + ALT + SHIFT + → Navegar hasta la última celda de la fila actual.

    Comandos del lector de pantalla

    • CTRL OR ALT + Num Pad 5: Leer la celda actual.
    • INSERT + SHIFT + ↑: Leer la fila actual.
    • INSERT + SHIFT + HOME: Leer desde el inicio de la fila.
    • INSERT + SHIFT + PAGE UP: Leer hasta el final de la fila desde la celda actual.
    • INSERT + SHIFT + Num Pad 5: Leer la columna actual.
    • INSERT + SHIFT + END: Leer desde la parte superior de la columna.
    • INSERT + SHIFT + PAGE DOWN: Leer al final de la columna.

    Code Snippet

    A continuación se muestra cómo implementar la accesibilidad de celdas en la cuadrícula de datos Web Components:

    <igc-data-grid id="grid"
     height="100%"
     width="100%"
     use-accessibility="true">
</igc-data-grid>

    API References