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 definindo a useAccessibility propriedade da grade como true.

    React Grid Accessible Example

    ##Conformidade com a Seção 508 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ência. 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.

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

    Depois de definir a useAccessibility propriedade como true, isso habilitará uma variedade de opções de navegação de teclado na grade de dados que os leitores de tela podem reconhecer. Abaixo está uma descrição de cada um dos pressionamentos / combinações de teclas e o efeito que eles terão em relação à célula ativada no momento:

    Navegando na grade

    • CTRL + ALT + →: Navigate one cell up.
    • CTRL + ALT + ←: Navigate one cell left.
    • CTRL + ALT + ↓: Navigate one cell below.
    • CTRL + ALT + ↑: Navigate one cell above.
    • CTRL + ALT + HOME: Navigate to first column header.
    • CTRL + ALT + END: Navigate to last visible cell.
    • CTRL + ALT + SHIFT + ↑ Navigate to current column header.
    • CTRL + ALT + SHIFT + ↓ Navigate to last cell in current column.
    • CTRL + ALT + SHIFT + ← Navigate to first cell in current row.
    • CTRL + ALT + SHIFT + → Navigate to last cell in current row.

    Comandos do leitor de tela

    • CTRL OR ALT + Num Pad 5: Read current cell.
    • INSERT + SHIFT + ↑: Read current row.
    • INSERT + SHIFT + HOME: Read from start of row.
    • INSERT + SHIFT + PAGE UP: Read to end of row from current cell.
    • INSERT + SHIFT + Num Pad 5: Read current column.
    • INSERT + SHIFT + END: Read from top of column.
    • INSERT + SHIFT + PAGE DOWN: Read to bottom of column.

    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