Para que possamos entender o cenário atual sobre a acessibilidade na web, três fatores são fundamentais: a importância da Internet, a quantidade de pessoas com deficiência no mundo e o nível de acessibilidade dos websites hoje em dia.
Os benefícios proporcionados pela Internet são inegáveis. Usamos a Internet para praticamente tudo, desde se comunicar com nossos amigos e familiares, até fazer as compras para nossa casa. Em 2016, a quantidade de usuários da Internet no mundo era estimada em 3,4 bilhões de pessoas, passando para 4,6 bilhões em 2021 (cerca de 60% da população).
Em 2011, a Organização Mundial da Saúde (OMS) estimava 1 bilhão de pessoas com deficiência no mundo. Um dado mais atual, de 2020, aponta 1,85 bilhão. Esse número é tão expressivo que ultrapassa a população da China, estimada em 1,4 bilhão de pessoas. Esse número vem crescendo, entre outros fatores, por causa dos avanços na área da saúde, que nos permitem atingir idades cada vez maiores, aumentando também o número de deficiências ocasionadas pela velhice.
Portanto, não podemos simplesmente ignorar essa parcela da população. É necessário prover os recursos necessários para o suporte à acessibilidade, tanto nos meios físicos quanto nos digitais, inclusive na Internet. Apesar disso, a maioria dos websites não são acessíveis para esses usuários, dificultando (ou até mesmo impossibilitando) a navegação.
Levar em consideração a acessibilidade na web quando construindo websites, em uma empresa que faz isso, está ligado à cultura da empresa, e fomento desse assunto entre seus colaboradores. Isso mostra que a empresa se importa com os usuários finais das aplicações que desenvolve, não somente nas necessidades dos clientes. Todavia, o suporte a acessibilidade também traz benefícios para os clientes. Visto que mais usuários poderão usar os sites criados por essa empresa, no caso de sites de e-commerce, a possibilidade de lucro é maior, porque mais usuários poderão comprar.
A mesma fonte que atualizou o número de pessoas com deficiência no mundo em 2021 também diz que se considerarmos os amigos e familiares dessas pessoas, o número vai para mais de três bilhões. Esse grupo tende a consumir produtos e serviços de marcas que se sensibilizam com essa questão. Outro fator de competitividade é para os colaboradores e futuros colaboradores, que podem ter seu desejo de trabalhar nessa empresa potencializado por iniciativas como essa, que visam a inclusão de minorias na prática.
Visto o cenário atual, esse artigo tem o objetivo de introduzir acessibilidade na web, apresentando os principais conceitos e recursos envolvidos, contribuindo para o conhecimento dos profissionais do mercado de e-commerce. Esse artigo também é o primeiro passo de uma série de iniciativas para que o suporte à acessibilidade nas aplicações passe a ser levado em consideração dentro e fora da empresa.
A Corebiz quer ser o catalisador dessa mudança no mercado como um todo, não somente para a Corebiz. Mas entendemos que essa é uma mudança que começa de dentro para fora. Por isso, seguiremos sempre compartilhando o nosso conhecimento e experiências sobre o assunto. Confira esse breve guia sobre como desenvolver sites mais acessíveis.
O que é acessibilidade na web?
A acessibilidade na web consiste em possibilitar que todos os usuários possam utilizar os websites para navegarem pela Internet, independentemente de suas habilidades, o que inclui os usuários com alguma deficiência. O suporte à acessibilidade nos websites se dá a partir de pequenos cuidados que os desenvolvedores devem ter para que os usuários com deficiência possam usar as aplicações criadas de maneira equivalente aos demais usuários. O nível de acessibilidade dos websites pode ser medido. Há documentações que auxiliam os desenvolvedores a como implementar o suporte à acessibilidade em seus websites.
Em inglês, a palavra acessibilidade, accessibility, possui 13 letras. Para encurtar a palavra é comum manter a primeira e a última letra e substituir o restante pela quantidade de letras, formando o termo a11y. Em alguns lugares pode-se usar informalmente também o termo ally, no qual 11 é substituído por dois Ls, facilitando a pronúncia. Fonte da imagem: dev.to
Assim como o direito de ir e vir, o direito à educação e saúde de qualidade, a acessibilidade também é um direito fundamental humano. Portanto, o acesso igualitário aos meios físicos e digitais deve ser garantido para as pessoas com deficiência, incluindo na Internet. Justamente por isso, diversos países possuem leis relacionadas ao tema estabelecendo os níveis mínimos de acessibilidade para os websites. No Brasil, temos as leis 10.098 e 13.146.
Como já mencionado no início deste artigo, os usuários com deficiência, seus amigos e familiares também representam um nicho de mercado. É sabido que esse grupo é composto por cerca de 3,3 bilhões de pessoas, e que movimentam anualmente cerca de 13 trilhões de dólares. Por fim, grandes empresas da área de tecnologia já dão valor à acessibilidade na web, e valorizam profissionais que possuem as habilidades técnicas para implementação de aplicações acessíveis. Sendo assim, essas habilidades podem ser um diferencial para profissionais que pretendem trabalhar em empresas como Adobe e Microsoft.
Usuários com deficiência utilizam recursos auxiliares para navegar na Internet. Esses recursos são chamados de Tecnologia Assistiva (TA). Eles podem ser hardwares ou softwares. No entanto, o bom funcionamento dessas tecnologias pode ser afetado pela maneira como as páginas de um website foram codificadas. O código HTML, CSS e JavaScript de uma página afetam o nível de acessibilidade dela.
Principais benefícios
Todos os números aqui apresentados reforçam a importância de ter entre as prioridades das empresas que possuem uma estratégia digital, desenvolver seus sites e apps pensando em como oferecer uma experiência de qualidade para TODOS os perfis de público.
E existem muitos benefícios que podem ser encontrados ao adotar a acessibilidade no seu website ou app. São eles:
- melhor ranqueamento nos sites de busca;
- maior alcance de público e clientes;
- melhor usabilidade para pessoas com necessidades especiais;
- aumento na compatibilidade com diferentes dispositivos e
- fortalecimento de marca.
Como implementar acessibilidade na web?
A World Wide Web Consortium (W3C), organização responsável pela criação dos padrões da web, criou uma série de documentos que padronizam a acessibilidade na web, e como a implementar. São as chamadas diretrizes de acessibilidade. São três principais diretrizes: Authoring Tool Accessibility Guidelines (ATAG), para criação de ferramentas de criação acessíveis (editores de texto, por exemplo); User Agent Accessibility Guidelines (UAAG), para criação de agentes de usuário acessíveis (navegadores web, por exemplo); e a Web Content Accessibility Guidelines (WCAG), para criação de conteúdos web acessíveis, (imagens, por exemplo).
Desenvolvedores web utilizam principalmente a WCAG. Além dela, outra especificação técnica importante para os desenvolvedores é o WAI-ARIA. WAI é o grupo da W3C que cria os padrões da web voltados para acessibilidade (Web Accessibility Initiative). ARIA é a sigla para Accessible Rich Internet Applications. Essa especificação disponibiliza marcações a serem utilizadas junto com as tags do HTML para enriquecer seu significado na página e aumentar o nível de acessibilidade.
Quando acessado por um navegador, todas as informações de uma página de um website são transformadas no que é chamado de DOM (Document Object Model). O DOM é uma estrutura de dados em árvore. Sua estrutura se dá principalmente a partir do HTML da página, mas o CSS e o JavaScript podem afetá-la. A partir do DOM é construída a árvore de acessibilidade, uma estrutura semelhante à original, mas mais simples. As tecnologias assistivas, como os leitores de tela, comumente utilizados por usuários com deficiência visual, transmitem as informações das páginas para os usuários através dessa árvore de acessibilidade.
Há muito material disponível sobre como codificar páginas web acessíveis. A tecnologia que se utiliza também pode influenciar nas técnicas a serem empregadas. Por exemplo, a utilização de um framework como React faz com que seja necessário garantir que os componentes criados sejam acessíveis independente do contexto no qual eles se encontram. Nesses casos, é importante consultar as documentações e comunidades oficiais da tecnologia escolhida para orientações mais específicas.
Todavia, há práticas que independem da utilização de algum framework ou não. A primeira coisa a se ter em mente é a responsabilidade de cada uma das linguagens básicas usadas na codificação das páginas. As tags do HTML devem ser usadas para estruturar os conteúdos e dar semântica para eles. Nesse sentido, o uso das tags semânticas é fundamental para as árvores de acessibilidade. O CSS deve ser usado para estilizar a página.
Outras orientações podem ser encontradas nos seguintes artigos:
- HTML: Boas práticas em acessibilidade (MDN)
- HTML Accessibility (W3Schools)
- CSS e JavaScript – melhores práticas de acessibilidade (MDN)
- Accessible CSS (WebAIM)
- Web Accessibility by Google – free course (Udacity)
Quando usando JavaScript é necessário garantir que alterações nas páginas também sejam acessíveis para os usuários de tecnologias assistivas. Por exemplo, a alteração de alguma parte de uma página deve ser notificada de alguma forma para esses usuários. Nesse sentido, o uso do WAI-ARIA junto com o JavaScript pode ajudar. A seguir, alguns artigos que podem ajudar:
- Overview of Accessible JavaScript (WebAIM)
- ARIA – Começando em ARIA (MDN)
- Index of ARIA Design Pattern Examples (W3C)
WCAG e WAI-ARIA
A WCAG está dividida em quatro princípios: perceptível, operável, entendível e robusto. Cada princípio possui um conjunto de diretrizes. Cada diretriz possui seus critérios de sucesso. Os critérios de sucesso devem ser atendidos para que a página esteja de acordo com a diretriz. Os critérios de sucesso possuem nível de prioridade A (acessibilidade básica), AA (acessibilidade intermediária) e AAA (acessibilidade avançada). O nível de acessibilidade de uma página pode ser avaliado como A, AA ou AAA se a página está de acordo com todos os critérios de sucesso do mesmo nível e com os critérios de sucesso dos níveis anteriores. Existem ferramentas que ajudam no processo de classificação.
O WAI-ARIA disponibiliza marcações para serem colocadas nas tags do HTML. Essas marcações servem para alterar a semântica dos elementos. Elas permitem indicar o tipo de elemento que a tag representa, por exemplo, um menu, as propriedades e o estado.
Recursos auxiliares
A seguir, uma lista de ferramentas e documentações que podem ser utilizadas para auxiliar na implementação do suporte à acessibilidade das páginas:
- WCAG-Easy Tool
- WebAIR: Web Accessibility Information Resource
- Avaliadores automáticos de acessibilidade
- Documentos complementares das diretrizes de acessibilidade
- Validadores de código
- Validadores de contraste
- Checklists de acessibilidade
- Frameworks e bibliotecas de componentes de interface
Neste conteúdo apresentamos algumas dicas sobre como desenvolver sites e e-commerce acessíveis e mais inclusivos. Mostramos também quais são os principais benefícios para as empresas que priorizam a acessibilidade no desenvolvimento de seus sites e Apps.
Se você deseja receber outros materiais como este, e ficar por dentro das principais novidades relacionadas ao ecossistema de e-commerce, não deixe de assinar a nossa newsletter!
Escrito por:
Renan Soares Germano, Desenvolvedor iOS e Tech Lead Mobile
at Corebiz/ Mobfiq
