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.

    Isso é ativado ao definir auseAccessibility propriedade da grade como verdadeira.

    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

    Após definir auseAccessibility propriedade como true, isso permitirá uma variedade de opções de navegação por teclado na grade de dados que os leitores de tela podem reconhecer. Abaixo está uma descrição de cada uma das teclas / combinações e o efeito que elas terão em relação à célula atualmente ativada:

    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