Dicas Práticas de Acessibilidade com React JS

Primeiro, oque é acessibilidade web? 
A acessibilidade na web se refere à prática de garantir que os sites e aplicativos da web sejam acessíveis e utilizáveis por todas as pessoas, independentemente de suas capacidades físicas ou cognitivas. Isso inclui tornar o conteúdo acessível para pessoas com deficiências visuais, auditivas, motoras, cognitivas ou outras. 

Estrutura seântica:
Consiste na organização semântica. Com o advento do HTML 5, a web deixou de ser um amontoado de containers <div> genéricos e passou a atribuir sentido com o auxílio de tags como <header>, <footer>, <nav>, entre outras. Esses elementos não apenas contribuem para a acessibilidade, mas também facilitam a indexação pelos mecanismos de busca.

Aqui estão alguns desses elementos e seus propósitos:

• <header>: agrupa elementos no topo da página;
• <nav>: define a área de navegação;
• <section>: delimita uma seção genérica da página;
• <aside>: apresenta conteúdo complementar;
• <footer>: fornece informações de rodapé.

Além disso, <strong> e <em> são usados para dar ênfase ao conteúdo, ao contrário dos elementos <b> e <i>, que não possuem peso semântico.

Botões semânticos: 

É comum encontrarmos aplicações que utilizam elementos genéricos para se comportarem como botões, como no exemplo a seguir:

<span onClick={handleSubmit} className='btn'>Enviar respostas</span>

Existem alguns motivos para essa prática, como a facilidade na estilização, evitando a necessidade de zerar bordas e paddings que já são aplicados automaticamente à tag button. No entanto, essa abordagem cria uma barreira de acessibilidade significativa, já que os usuários não conseguem acessar o elemento pelo teclado, e ele só se comporta como um botão quando clicado.

Aqui estão algumas dicas para contornar essa situação:
1- Para zerar todas as estilizações do <button> e manter a acessibilidade via teclado, podemos usar a propriedade all: unset;

.btn {
  all: unset;
  cursor: pointer;
  padding: 8px 16px;
  background-color: #6ede45;
}

2- Se, por algum motivo, ainda quisermos utilizar um <span> ou <div> como um botão, podemos usar o atributo role para mudar sua semântica e fazê-lo se comportar como um botão

<span role='button' className='btn'>Enviar respostas</span>

Essas práticas ajudam a garantir que os botões sejam acessíveis e utilizáveis por todos os usuários, incluindo aqueles que dependem da navegação pelo teclado.

Outra barreira de acesso é limitar que o botão seja ativo apenas ao clicar. Isso pode ser problemático para pessoas com limitações motoras que têm dificuldades no manuseio do mouse ou que navegam apenas pelo teclado. Esses usuários podem enfrentar dificuldades para interagir com o botão e realizar ações importantes em seu aplicativo ou site.

<button
      onClick={handleClick}
      onKeyPress={handleKeyPress}
    >
      Avançar
    </button>

Cores: 

As cores desempenham um papel fundamental na construção de uma página web, mas devem ser usadas com cuidado. Pessoas com baixa visão ou daltonismo podem ter dificuldades em distinguir certas cores ou identificar um contraste inadequado.

É importante garantir um bom contraste entre o texto e o fundo, e para isso podemos usar ferramentas como contrast checker. Um site muito útil que frequentemente é utilizado para avaliar o contraste é o Coolors Contrast Checker (https://coolors.co/contrast-checker). Com essa ferramenta, é possível parametrizar o quão bom está o contraste em sua página da web.

Outro ponto importante sobre o uso de cores é nunca usar somente cores para transmitir uma informação. Por exemplo, se um usuário deixar campos obrigatórios sem responder, é comum que o input automaticamente fique vermelho para indicar um erro. No entanto, para uma pessoa com limitações visuais, isso pode não ser útil.

Portanto, é fundamental incluir informações adicionais, como textos descritivos ou mensagens de erro, para indicar claramente ao usuário o motivo pelo qual algo está errado. Em vez de depender apenas da cor vermelha para indicar um erro, é importante fornecer uma mensagem explicativa que indique o problema e forneça orientações sobre como corrigi-lo.

<form onSubmit={handleSubmit}>
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={email}
        onChange={handleInputChange}
        required
      />
      {emailError && 
        <span style={{ color: 'red' }}>
          Por favor, preencha um email válido.
        </span>
      }
      <button type="submit">Enviar</button>
    </form>

Redimensionar Textos: 

O design responsivo tem uma relação forte com a acessibilidade. Usuários com baixa visão frequentemente precisam navegar com configurações de fontes maiores que o padrão do dispositivo. Portanto, devemos fazer uso de unidades de medidas relativas, em vez de unidades fixas como 'px'.

Ao utilizar unidades relativas, como 'em', 'rem' ou porcentagens, permitimos que os usuários redimensionem o texto conforme necessário, garantindo uma experiência de leitura confortável para todos os usuários, independentemente de suas configurações de acessibilidade.

Para converter um valor em pixels (px) para rem, você divide o valor em pixels pelo tamanho da fonte do elemento pai, que é definido em rem. Isso permite que o valor seja escalonado de acordo com a configuração de tamanho de fonte do usuário.

Se o tamanho da fonte do elemento pai estiver definido em rem, você pode fazer a conversão diretamente, por exemplo, se o tamanho da fonte do elemento pai for 16px, você dividirá o valor em pixels pelo tamanho da fonte base:

.example {
  font-size: 0.5625rem; /* 9px dividido por 16px (tamanho da fonte base) = 0.5625rem */
}

Mas para você não precisar fazer esse tipo de conta a todo momento, vou indicar uma extensão do vs code que uso, px to rem & rpx & vw (cssrem)

Quando digitamos, a extensão já oferece a substituição de px por rem, ou basta usar 'Ctrl + Espaço' para que a sugestão apareça automaticamente.

Conclusão:

Neste artigo, destacamos dicas simples para melhorar a acessibilidade de projetos web com React JS. Abordamos a importância da estrutura semântica em HTML, botões acessíveis, bom contraste de cores e mensagens de erro claras.

Ao implementar essas práticas, podemos criar uma web mais inclusiva para todos os usuários.

Bibliografia: 

Ferraz, Reinaldo. Acessibilidade na Web. Editora Casa do Código, 16 de julho de 2020.
World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG). Disponível em: https://www.w3.org/WAI/WCAG21/quickref/. Acesso em: 10/03/2024.