Tens a certeza que o teu website chega a todos?
React Aria, a melhor forma do teu website alcançar todo o tipo de pessoas.
Bem vindo, neste artigo vou abordar 2 temas bastante importantes no desenvolvimento web:
- Acessibilidade e como é trabalhada, atualmente, na construção de websites;
- React Aria, uma tecnologia desenvolvida pela Adobe que é um forte aliado ao método Aria já existente.
Boa leitura 💻
Com certeza que nalgum dia da tua vida já te deparaste com esta situação: abriste um website e não conseguiste perceber logo à primeira como é que a informação está distribuída, se é suposto clicares num botão ou noutro. Bem, se isto pode ser uma dificuldade para utilizadores comuns que não apresentam nenhuma dificuldade visual, auditiva, motora, ou outra qualquer, imagina para aqueles que, efetivamente, apresentam. É aqui que entra a acessibilidade (para a web), este termo representa o conjunto de normas que são utilizadas na construção de um website, para que este possa ser acedido por qualquer pessoa, independentemente da sua condição.
Para teres uma melhor noção de como tudo funciona, tudo o que vemos numa página web é construída através de tags. E, perguntas tu, o que são tags? São elementos que mostram ao navegador (Chrome, Edge, etc) como é constituída a estrutura da página em que estás. Um exemplo de tag muito simples é o <p>, que representa um parágrafo.
<p> Isto é um parágrafo! </p> //tag de um parágrafoEm baixo, deixo um link para descobrires outras tags que existem.
A utilização das tags mais adequadas para cada situação é muito importante, quando se constrói um website que tenha por base uma boa acessibilidade, isto, porque, os variados suportes a que os utilizadores com limitações recorrem, reconhecem estas tags e, dessa forma, conseguem dar a informação correta sobre o conteúdo da página ao utilizador.
Seguidamente, como curiosidade, tens um link que te apresenta algumas regras para melhorar a acessibilidade um website.
A técnica Aria (Accessible Rich Internet Applications) surge como um ótimo aliado ao desenvolvimento de uma boa acessibilidade na web, visto que disponibiliza atributos para as tags, atribuindo-lhes uma semântica (descrição apropriada ao propósito de um certo elemento) para que as tecnologias de suporte a possam utilizar ao analisar o DOM.
O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.
Este tipo de atributos, tal como disse em cima, podem fornecer informação a variados tipos de suportes: mouse, toque, teclado, leitor de ecrã. Apesar desta grande vantagem, a ferramenta Aria apenas especifica a semântica e depende do desenvolvedor para implementar o comportamento e a interação para cada elemento. Houve, por isso, uma necessidade de desenvolver algo que englobasse tudo, tornando todo o processo mais fácil.
React Aria, o que é?
Ora, havia uma carência, é aqui que surge, então, o React Aria, uma tecnologia desenvolvida pela Adobe que permite que os desenvolvedores construam componentes acessíveis a todos, com estas duas vertentes. No vídeo abaixo consegues perceber, a pormenor, como funciona esta ferramenta.
As suas principais características são:
- Ser acessível — Esta tecnologia implementa regras de acessibilidade de acordo com as práticas de WAI-Aria (define uma forma de tornar o conteúdo e as aplicações Web mais acessíveis às pessoas com deficiências), fornecendo suporte de tecnologias como leitor de ecrã inteiro e navegação por teclado. É possível também a utilização deste mecanismo em todos os tipos de ecrã.
- Ser customizável— Este recurso não impõe uma estrutura fixa, ou qualquer tipo de metodologia de estilos. Disponibiliza, assim, um comportamento dinâmico para os elementos que, consequentemente, melhoram a usabilidade do website.
Qual é a principal diferença, então, entre este método e o método tradicional de Aria?
A diferença que a tecnologia React Aria introduz é a disponibilização de hooks que definem um comportamento para os elementos.
De forma bem resumida, um Hook nada mais é que uma função que te dá acesso a determinados recursos de um componente funcional do React (sim, componente funcional, pois os Hooks não funcionam dentro de Classes), e dessa forma, você pode ter acesso ao seu estado e ciclo de vida.
Tendo em conta isto, é difícil criar algo que se adapte a todos os ecrãs que possam existir, como, computador, carro, televisão, telemóvel, smartwatches, ecrãs de frigorífico, entre outros.
Não existem métodos que funcionem em todos os tipos de estrutura, os próprios eventos de clicar com o rato, através de touch ou com o teclado, não são completamente coerentes em todos os suportes (o caso de um equipamento híbrido) e, não são acessíveis a todos. A tecnologia React Aria permite que todos os eventos funcionem de forma coerente em todos os tipos de suporte e tecnologia.
Antes de tudo, se és desenvolvedor e queres inserir este pacote de hooks no teu website, tens de começar por instalar esta biblioteca fornecida pela Adobe.
npm add react-ariaPassando às funcionalidades em si, com o intuito de explicar como é que realmente os hooks funcionam, vou abordar dois tipos. Apesar de mencionar apenas estes dois, existem muito mais hooks, desde modais a barras de progresso e, funcionalidades que devem ser analisadas.
Então, os hooks que vão ser mencionados neste artigo são:
- usePress;
- useSwitch.
usePress
Em relação ao primeiro hook, usePress, este remete para uma simples ação que começa quando o utilizador clica num certo sítio e, acaba, quando o utilizador deixa de pressionar, o que soa bastante básico. No entanto, esta simples ação pode não ser acessível a vários tipos de utilizadores e, como alteramos isso? Fácil! Ao utilizarmos o hook, usePress, possibilitamos que qualquer botão seja clicável com as teclas, Enter ou o Espaço, também com cliques virtuais de leitores de ecrã e, claro, os mais comuns, com o mouse e touch. Com esta solução, um website consegue atingir mais utilizadores e torná-lo o mais inclusivo possível.
Ao utilizar este hook em contexto de mobile, esta tecnologia permite, também, que a seleção de texto seja desativada enquanto o utilizador prime o botão. Possibilita, da mesma forma, o cancelamento de qualquer clique quando o utilizador faz scroll na plataforma, o que é super vantajoso em contexto de utilização em telemóvel.
Então e como se inclui isto no código? Começa-se por criar a variável , onde se explica que tipo de ação e resposta queremos que aconteça. Depois, é bastante fácil, apenas questionar se o botão está a ser premido, se sim, a interface explicita que sim, se não, diz o contrário. Aliado a isto, também nos disponibiliza informação de qual suporte estamos a recorrer para efetuar a ação.
Aqui ficam dois vídeos ilustrativos do tipo de ação que acontece, um com recurso ao mouse e, outro, com recurso ao toque através de um telemóvel.
useSwitch
Em segundo lugar, o hook useSwitch implementa acessibilidade num simples botão de switch. Até agora, não existe nenhum elemento nativo de HTML que represente este específico botão. Esta tecnologia apresenta uma boa solução para este problema e, enumeras vantagens como:
- suporte de preenchimento automático quando este está inserido em formulários;
- possibilidade de utilização com o teclado;
- possibilidade de atribuição de uma label (legenda);
- informa, também, as tecnologias de suporte que se trata de um elemento de ‘ligar’ e ‘desligar (switch).
Este hook representa uma enorme vantagem quando se quer construir um website que apresente este tipo de elementos.
O código é bastante fácil, aqui fica a demonstração:
Deixo, também, um vídeo ilustrativo da ação recorrendo ao clique do mouse e, também, através do teclado.
Reflexão Final
Ainda há muito para implementar em termos de acessibilidade, ainda existem muitos websites que carecem neste tema. É essencial termos em conta que quando se está a criar algo, independentemente do que seja, há pessoas do outro lado que podem ter limitações ou dificuldades que nós não conhecemos, mas têm o mesmo direito que todos os outros a desfrutar deste produto de uma forma confortável e intuitiva.
Desvantagens
React Aria é uma tecnologia recente e existem alguns problemas, tal como, na minha própria experiência, alguns hooks não funcionaram perfeitamente. Por exemplo, com o hook, useKeyboard, ao testar não consegui obter feedback do que estava a digitar, talvez por incompatibilidade de versões.
Outra desvantagem é não haver muita informação sobre esta tecnologia no mundo de desenvolvimento, o que é uma pena, tendo em conta o quão revolucionário este método aparenta ser. Foram poucos os websites e vídeos que mencionavam esta tecnologia ou utilizavam-na.
Conclusão
Em tom de conclusão, espero que tenhas desfrutado deste artigo e que te tenha sido útil para a tua vida profissional. React Aria será, certamente uma mais valia para construir futuros websites com uma boa estrutura de acessibilidade. É um passo gigantesco para um futuro mais acessível e inclusivo para todos.✨
Sugestões
- O governo português tem um website que permite avaliar o cumprimento das regras de acessibilidade. Se quiseres avaliar o teu, deixo-te em baixo o link.
- Existe um website com todas as práticas de WAI-ARIA. Será, certamente, uma boa leitura!
Referências
Aqui ficam os sites a que recorri para me auxiliar na construção deste artigo.
