Pular para o conteúdo principal

Introdução

Objetivo da documentação​

Esta documentação tem como objetivo orientar os usuários de Data sobre como aplicar práticas de acessibilidade digital na construção de suas aplicações. Através dos recursos nativos da ferramenta, é possível criar interfaces que sejam inclusivas e estejam em conformidade com os principais padrões internacionais de acessibilidade, como as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) e as práticas recomendadas de uso de atributos ARIA (Accessible Rich Internet Applications).

Conceitos básicos de acessibilidade web

O que é acessibilidade digital?​

Acessibilidade digital é a prática de tornar sites, sistemas, aplicativos e conteúdos online utilizáveis por todas as pessoas, incluindo aquelas com algum tipo de deficiência — seja ela visual, auditiva, motora, cognitiva ou de outra natureza.

Quando uma aplicação é acessível, ela permite que usuários com diferentes necessidades consigam navegar, compreender, interagir e se comunicar com eficiência e autonomia, seja utilizando leitores de tela, teclados adaptados, comandos de voz ou outras tecnologias assistivas.

Padrões e Boas Práticas de Acessibilidade

Introdução às WCAG (Web Content Accessibility Guidelines)​

As WCAG (Web Content Accessibility Guidelines) são um conjunto de diretrizes internacionais criadas pelo W3C (World Wide Web Consortium), com o objetivo de orientar o desenvolvimento de conteúdos web acessíveis para todas as pessoas, incluindo aquelas com deficiência.

Essas diretrizes definem padrões técnicos e boas práticas que ajudam a garantir que sites, sistemas e aplicações digitais sejam acessíveis, usáveis e compreensíveis para o maior número possível de usuários.

Breve explicação dos níveis (A, AA, AAA)​

As WCAG estão organizadas em três níveis de conformidade:

  • Nível A (mínimo) – Atende aos requisitos básicos de acessibilidade.
  • Nível AA (recomendado) – Atende às principais necessidades de acessibilidade, equilibrando viabilidade técnica e inclusão. É o mais adotado mundialmente.
  • Nível AAA (máximo) – Oferece o mais alto nível de acessibilidade, aplicável em casos muito específicos.

Recursos Técnicos de Acessibilidade

Para que uma aplicação web seja realmente acessível, é fundamental utilizar corretamente alguns recursos técnicos que tornam a navegação, interação e compreensão mais fáceis para usuários que dependem de tecnologias assistivas, como leitores de tela, navegadores por voz ou navegação via teclado.

Esses recursos podem ser divididos em dois pilares principais: atributos HTML semânticos e atributos ARIA (Accessible Rich Internet Applications).

Atributos HTML semânticos​

O HTML semântico é a base da acessibilidade na web. Ele consiste em utilizar as tags corretas que possuem significado próprio, ajudando a estruturar a informação e orientar tanto navegadores quanto usuários sobre a função de cada elemento em uma página.

Quando utilizamos tags como <button>, <nav>, <header>, <footer>, <main>, <section>, <article> ou <label>, estamos informando às tecnologias assistivas qual é o papel daquele conteúdo na interface. Isso permite que pessoas que navegam por meio de leitores de tela, por exemplo, possam compreender a hierarquia da página, identificar menus, seções, formulários e interagir com os elementos de maneira eficiente.

Atributos ARIA (Accessible Rich Internet Applications)​

Os atributos ARIA foram desenvolvidos justamente para preencher as lacunas que surgem quando usamos elementos personalizados que não têm uma representação semântica nativa no HTML. Eles permitem descrever o papel, o estado e as propriedades de componentes complexos, tornando-os compreensíveis para tecnologias assistivas.

Por exemplo, se sua interface utiliza uma <div> estilizada como botão, um leitor de tela não a reconhecerá automaticamente como um botão. Para isso, você pode utilizar role="button" junto com atributos como aria-label para fornecer um nome acessível, ou aria-pressed para indicar se aquele botão está ativado ou não.

Data² - Configurações de Acessibilidade

Para entender as configurações de acessibilidade no DATA², é importante saber que cada bloco é renderizado como uma <div> em HTML. As configurações adicionais de acessibilidade devem ser feitas por meio dos parâmetros específicos disponíveis de acessibilidade.

Além disso, os artboards no DATA² são automaticamente indexados para navegação via tecla Tab, seguindo a ordem em que os componentes aparecem na árvore de componentes do artboard.

Com esses dois conceitos em mente, vamos começar a entender como aplicar as configurações de acessibilidade:

Tab Index (Índice de Navegação por Tab)​

O Tab Index é um dos aspectos mais importantes para a acessibilidade de pessoas com deficiência visual, pois determina a ordem em que os leitores de tela percorrem os componentes de um artboard.

Como mencionado anteriormente, por padrão os componentes são lidos na ordem em que aparecem na árvore de componentes. No entanto, essa ordem pode ser alterada manualmente através da configuração do Tab Index.

Por exemplo, se três componentes forem criados sem nenhuma configuração de Tab Index, eles serão lidos na ordem de criação. Mas, se o último componente receber Tab Index 1, ele será lido primeiro, sobrepondo a ordem original.

Esse controle é especialmente relevante ao utilizar componentes referenciados. Se um componente referenciado tiver um Tab Index 1, ele será priorizado na leitura — mesmo se estiver visualmente posicionado depois de outros elementos no artboard.

Para evitar comportamentos inesperados, é essencial que todos os componentes no artboard tenham seus Tab Index configurados corretamente.

No caso de componentes referenciados, recomenda-se criar um parâmetro de Tab Index que possa ser configurado diretamente no artboard onde o componente está sendo usado.

Como estabelecer esse parâmetro?

Considerando que a leitura padrão segue a ordem da árvore de componentes, criamos um parâmetro de Tab Index para o componente referenciado e aplicamos esse valor a todos os seus elementos navegáveis. Dessa forma, ao configurar o Tab Index no artboard, garantimos que todos os elementos internos do componente sejam lidos na ordem esperada, antes que o leitor de tela avance para os próximos itens.

Accessibility Role​

Este parâmetro define o ARIA role do componente, indicando para os leitores de tela qual é a sua função — como, por exemplo, <button>, <alert> ou <heading> (título).
Obs.: Para maior conhecimento de todas Roles, consultar WAI-ARIA Roles | MDN Web Docs

A configuração correta desse parâmetro determina como o componente será interpretado por tecnologias assistivas. Por padrão, seu valor é none, o que significa que o componente não terá um papel específico atribuído.

No entanto, como boa prática de acessibilidade e para evitar interpretações indesejadas, recomenda-se forçar explicitamente essa definição. Para isso, transforme o valor do parâmetro em string e defina-o como "none", assegurando que os leitores de tela não atribuam automaticamente um papel inadequado ao componente.

Accessibility Level​

Este parâmetro deve ser utilizado apenas quando a Role do componente estiver definida como <heading>. Ele determina o nível hierárquico do título, sendo equivalente a tags HTML como <h1>, <h2>, <h3>, etc.
Definir corretamente esse nível é essencial para manter a estrutura lógica de títulos e subtítulos na leitura por tecnologias assistivas.

Accessibility Label​

Esse parâmetro define o texto que será lido pelos leitores de tela quando o componente não possui texto visível.
É especialmente útil para imagens, ícones, botões ou blocos puramente visuais, garantindo que usuários com deficiência visual saibam a função ou o conteúdo do elemento.

Accessibility Hide​

Esse parâmetro permite ocultar o componente dos leitores de tela, impedindo que ele seja lido por tecnologias assistivas.
No entanto, é importante observar que, se o componente tiver um Tab Index configurado, ele continuará sendo lido, mesmo com o Accessibility Hide ativado. O Tab Index sobrepõe essa configuração, e por isso, deve ser usado com cuidado.

Ferramentas de Validação​

  • NVDA
  • VoiceOver

Documentação Extra​