Conformidade de acessibilidade do React Grid

    A Ignite UI for React Data Table/Data Grid oferece suporte a acessibilidade e leitores de tela que interpretam as interações de navegação do teclado pelas células e colunas da grade.

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

    React Grid Accessible Example

    Section 508 Compliance

    A Seção 508 do Rehabilitation Act foi alterada em 1998 pelo Congresso para exigir que todas as agências federais tornem sua tecnologia eletrônica e de informação acessível a pessoas com deficiências. Desde então, a conformidade com a Seção 508 não tem sido apenas um requisito em agências governamentais, mas também é importante ao fornecer soluções de software e projetar páginas da Web.

    A Seção 1194.22 da lei da Seção 508 tem como alvo específico sistemas e informações de intranet e internet baseados na Web, e contém um conjunto de 16 regras a serem seguidas. Para permitir que você mantenha seus aplicativos e sites da Web compatíveis com essas regras com o mínimo de esforço de sua parte, Infragistics tomou medidas para garantir que os controles e componentes do Ignite UI for Angular sejam compatíveis com as regras de acessibilidade relevantes.

    WAI-ARIA Support

    Em 2014, o W3C finalizou sua especificação WAI-ARIA, que definiu como projetar conteúdo e aplicativos da Web para serem mais acessíveis a usuários com deficiências.

    Esta seção mostra o suporte de acessibilidade (ARIA) da estrutura, bem como a facilidade de gerenciamento da direcionalidade dos componentes.

    Atributos ARIA Para dar aos leitores de tela as informações contextuais que eles precisam para interpretar e interagir com a grade, atributos ARIA são adicionados aos elementos DOM da grade. Esses atributos são particularmente úteis quando elementos HTML simples como div e span são usados para criar estruturas DOM complexas, o que é o caso do ag-Grid.

    Ao inspecionar os elementos DOM da grade, as seguintes funções e propriedades são suportadas e anunciadas pelo leitor de tela:

    • Célula de grade - elemento que contém uma célula de grade.
    • Contagem de linhas - anuncia o número de linhas.
    • Contagem de colunas - anuncia o número de linhas.
    • Linha - uma linha de cabeçalhos de coluna ou células de grade.
    • Índice de linha - anuncia o índice visível da linha.
    • Linha selecionada - presente somente se a linha for selecionável; anuncia o estado da seleção.
    • Grupo Expandido - presente somente em grupos de linhas, anuncia o estado de expansão.
    • Cabeçalho de coluna - elemento que contém um cabeçalho de coluna.
    • Índice de célula - anuncia o índice visível da coluna.
    • Colspan - presente somente se a coluna abranger várias colunas, ajuda a orientar os leitores de tela.
    • Classificar - presente somente em colunas classificáveis, anuncia o estado da classificação.
    • Índice da coluna - anuncia o índice visível da célula.
    • Selecionado - presente somente se a célula for selecionável; anuncia o estado de seleção.
    • Expandido - presente somente em uma célula de grupo, anuncia o estado de expansão.

    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 na grade

    • CTRL + ALT + →: Navegue uma célula para cima.
    • CTRL + ALT + ←: Navegue uma célula para a esquerda.
    • CTRL + ALT + ↓: Navegue em uma célula abaixo.
    • CTRL + ALT + ↑: Navegue uma célula acima.
    • CTRL + ALT + HOME: Navegue até o cabeçalho da primeira coluna.
    • CTRL + ALT + END: Navegue até a última célula visível.
    • CTRL + ALT + SHIFT + ↑ Navegue até o cabeçalho da coluna atual.
    • CTRL + ALT + SHIFT + ↓ Navegue até a última célula na coluna atual.
    • CTRL + ALT + SHIFT + ← Navegue até a primeira célula na linha atual.
    • CTRL + ALT + SHIFT + → Navegue até a última célula na linha atual.

    Comandos do leitor de tela

    • CTRL OR ALT + Num Pad 5: Ler a célula atual.
    • INSERT + SHIFT + ↑: Ler a linha atual.
    • INSERT + SHIFT + HOME: Leitura do início da linha.
    • INSERT + SHIFT + PAGE UP: Leitura até o final da linha da célula atual.
    • INSERT + SHIFT + Num Pad 5: Ler a coluna atual.
    • INSERT + SHIFT + END: Leitura do topo da coluna.
    • INSERT + SHIFT + PAGE DOWN: Leia até o final da coluna.

    Code Snippet

    A seguir, demonstramos como implementar a acessibilidade de células na grade de dados React:

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

    API References