Cumplimiento de accesibilidad React Grid

    La Ignite UI for React Data Table/Data Grid admite accesibilidad y lectores de pantalla que interpretan las interacciones de navegación del teclado a través de las celdas y columnas de la cuadrícula.

    Esto se activa estableciendo la propiedad useAccessibility de la cuadrícula en verdadero.

    React Grid Accessible Example

    ##Cumplimiento de la Sección 508 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 Sección 508 se dirige específicamente a la información y los sistemas de Internet e intranet basados en la Web, y contiene un conjunto de 16 reglas a seguir. Para permitirle mantener sus aplicaciones web y sitios web compatibles con estas reglas con un mínimo esfuerzo de su parte, Infragistics ha tomado medidas para garantizar que la Ignite UI for Angular cumpla con las reglas de accesibilidad relevantes.

    ##Soporte WAI-ARIA 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

    Después de establecer la propiedad useAccessibility en true, esto habilitará una variedad de opciones de navegación con el teclado en la cuadrícula de datos que los lectores de pantalla pueden reconocer. A continuación se muestra una descripción de cada una de las pulsaciones/combinaciones de teclas y el efecto que tendrán en relación con la celda actualmente activada:

    Navegando dentro de la cuadrícula

    • Ctrl + Alt + →: Navega una celda hacia arriba.
    • Ctrl + Alt + ←: Navigate one cell left.
    • Ctrl + Alt + ↓: Navigate one cell below.
    • Ctrl + Alt + ↑: Navegar una celda arriba.
    • Ctrl + Alt + Home: Navigate to first column header.
    • Ctrl + Alt + Fin: navega a la última celda visible.
    • Ctrl + Alt + Shift + ↑ Navigate to current column header.
    • Ctrl + Alt + Shift + ↓ Navegar a la última celda de la columna actual.
    • Ctrl + Alt + Shift + ← Navegar a la primera celda de la fila actual.
    • Ctrl + Alt + Shift + → Navegar a la última celda de la fila actual.

    Comandos del lector de pantalla

    • Ctrl O Alt + Teclado numérico 5: Leer la celda actual.
    • Insertar + Mayús + ↑: leer la fila actual.
    • Insertar + Mayús + Inicio: leer desde el inicio de la fila.
    • Insertar + Mayús + Re Pág: Leer hasta el final de la fila desde la celda actual.
    • Insert + Shift + Num Pad 5: Read current column.
    • Insertar + Mayús + Fin: leer desde la parte superior de la columna.
    • Insertar + Mayús + Av Pág: Leer hasta el final de la columna.

    Code Snippet

    A continuación se demuestra cómo implementar la accesibilidad de las celdas en la cuadrícula de datos React:

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    useAccessibility="true" />

    API References