Por Elza Maria Albuquerque e Reinaldo Ferraz*
Pensou em fazer um site acessível e não sabe por onde começar a parte de programação? Calma! Nós vamos te mostrar que é possível fazer isso sem a dificuldade que muitos pensam. É importante acabar com essa visão de grande desafio quando falamos de acessibilidade digital. Vamos aos poucos.
Para você que quer começar a desenvolver um site ou vai liderar uma equipe para realizar essa ação, nós preparamos uma série de conteúdos detalhados.
Em abril, iniciamos a série de textos “Aprenda a fazer um site acessível desde o começo”, com a parte 1 com os passos sobre Planejamento e Conteúdo (passos 1 e 2, respectivamente). Em maio, compartilhamos a parte 2, com as informações sobre design acessível.
Chegou a hora de aprender a Programação, que é a Parte 3 da série. Reinaldo Ferraz, especialista em desenvolvimento web do W3C Brasil, preparou o conteúdo pra que pudéssemos compartilhá-lo com você.
Passos 1 e 2: Planejamento e Conteúdo (relembrando)
Passo 3: Design
Passo 4: Desenvolvimento
Depois de todo o planejamento e concepção de design, vem a parte de programar. Essa talvez seja a parte mais abstrata desse passo a passo, pois alguns recursos são específicos para alguns elementos, mas outros são mais amplos e abrangem uma boa parte dos padrões.
Antes de abordar detalhes sobre especificidades de elementos do site, vale a pena nos atentarmos para a acessibilidade de frameworks, bibliotecas e CMSs utilizados para a construção de sites e aplicações web. Não vou entrar em detalhes nesse tópico (até porque pela quantidade de conteúdo daria um novo artigo), mas vale a pena citar alguns deles e deixar o link para cada documentação de acessibilidade.
Nesses links, é possível verificar como cada um deles lida com a acessibilidade e os recursos já disponíveis. Isso ajuda a escolher qual deles devemos usar.
A partir da decisão de fazer um site/aplicação usando ou não uma biblioteca/framework/cms, aqui vão algumas dicas para garantir a acessibilidade da sua aplicação:
Declare o idioma da página
Quando uma tecnologia assistiva acessa o site, ela tem a possibilidade de mudar o sintetizador de voz caso a página tenha o idioma declarado.
Quando o idioma da página não está declarado, o leitor de tela tem dificuldades para identificar o idioma, e vai ler o texto no idioma atual do software. Além de declarar o idioma no início da página, é importante fazê-lo quando existe mudança de idioma durante o texto.
No site do W3C, você consegue aprender detalhadamente como declarar o idioma de uma página ou elemento.
Utilize uma estrutura semântica
Os novos elementos do HTML5 são semânticos. Eles trazem significado às partes de um site/aplicação. Antigamente, era necessário utilizar elementos genéricos para uma sessão. Hoje temos elementos específicos para o topo do site, rodapé, conteúdo complementar, etc.
Essa marcação semântica permite que a tecnologia assistiva consiga perceber as áreas do site e possibilita que o usuário encontre a parte que procura. Se você tem alguma dúvida sobre o uso dos elementos semânticos, o texto “HTML Semântico: Conheça os elementos semânticos da HTML5”, da DevMedia, pode te ajudar a compreender cada um deles.
Proporcione formas de saltar conteúdo
Proporcionar uma estrutura semântica, incluindo o uso de cabeçalhos, já é uma forma de possibilitar o salto para conteúdo específico.
Por exemplo, quando uma página tem seus cabeçalhos de nível 1 a 6 definidos, um usuário de leitores de tela pode saltar para o nível de cabeçalho que deseja simplesmente pressionando as teclas de 1 a 6 do teclado.
Ainda é possível colocar um link no topo do site para saltar para o conteúdo principal da página. Isso ajuda pessoas que utilizam leitores de tela e têm mobilidade reduzida. Dessa forma, uma pessoa que não utiliza o mouse para navegar não precisa passar por dezenas de links para chegar ao conteúdo principal. Basta que esse link fique no início da codificação. O site WebAIM mostra o passo a passo para fazer um salto para conteúdo na sua página.
Relacione campos de formulário
Quando fazemos um formulário online, precisamos garantir que o texto que vem ao lado do campo, conhecido como rótulo, esteja relacionado com seu respectivo campo. Assim, um usuário de tecnologia assistiva não corre o risco de acessar um campo de formulário e não saber o que deve ser preenchido nele. O site MDN web docs mostra detalhadamente como fazer a relação entre os campos de formulário e os rótulos.
Lembre-se de relacionar os rótulos com os campos também em “radiobox” e “checkbox”. Esses são aqueles elementos pequenos para acionar opções em lista. Quando são programados de forma adequada e relacionados aos seus rótulos, não é necessário clicar somente na “bolinha” ou no “quadradinho” para selecionar o campo. Tocar no texto também seleciona o item do formulário.
Se os formulários forem grandes, utilize elementos para agrupá-los. Isso ajuda bastante o preenchimento do formulário, pois é possível descrever o que representa aquele conjunto de campos, por exemplo, se são dados pessoais, dados comerciais, etc. O site MDN web docs mostra como fazer um agrupamento de campos de formulário da forma correta.
Disponibilize legendas para vídeo
Publicar vídeos com legendas é uma boa prática para garantir a acessibilidade para quem não pode ouvir o conteúdo, seja devido a alguma deficiência ou porque não pode habilitar o som em determinado momento.
Existem diversas técnicas para publicar legendas em vídeo. Uma delas é utilizando WebVTT, um formato que veio das antigas legendas .SRT. Esse formato nada mais é do que um arquivo texto codificado em UTF-8 com a minutagem e o texto referentes ao vídeo.
A implementação dele é muito simples e é suportado pelos principais players de vídeo do mercado, como YouTube e Vimeo. O site BrazilJS mostra o passo a passo para fazer uma legenda em formato WebVTT.
Verifique o markup e a acessibilidade com ferramentas automáticas
O uso de ferramentas automáticas de acessibilidade pode ajudar a encontrar os principais problemas de acessibilidade. A primeira a ser utilizada é o validador de markup do W3C. Ele identifica erros de codificação que podem causar problemas, inclusive de acessibilidade. Os avisos costumam alertar sobre barreiras técnicas que podem trazer problemas para pessoas com deficiência.
Mas somente validar o markup não é o suficiente para eliminar as principais barreiras de acesso. Existem validadores que checam a página com base nas recomendações de acessibilidade do W3C, as WCAG.
Não existe um validador do W3C, mas a iniciativa de acessibilidade na web do consórcio disponibiliza uma lista com diversos validadores. Recomendo que faça uso dos que suportam WCAG 2.1 ou WCAG 2.0. E teste sua aplicação em pelo menos dois deles. Assim, você tem uma chance maior de evitar barreiras que algum validador deixou passar.
Faça a verificação manual da acessibilidade
Apesar das ferramentas ajudarem muito a encontrar problemas de acessibilidade, elas não são perfeitas e podem não garantir a acessibilidade completa. Na própria página do W3C com a lista de validadores existe o seguinte disclaimer (tradução livre do site do W3C):
“O W3C não endossa produtos de fornecedores específicos. A inclusão de produtos nesta lista não indica o endosso pelo W3C. Produtos e critérios de pesquisa são listados sem classificação de qualidade.
Descrições de ferramentas, critérios de pesquisa e outras informações neste banco de dados são fornecidas por desenvolvedores de ferramentas, fornecedores ou outros. O W3C não verifica a precisão das informações.
A lista não é uma revisão de ferramentas de avaliação, nem uma lista completa ou definitiva de todas as ferramentas. A informação pode mudar a qualquer momento.”
Sendo assim, faça a verificação manual dos avisos das ferramentas. Utilize tecnologia assistiva, como leitores de tela, para testar se não existem barreiras na página, mesmo que ela não tenha nenhum erro em validadores.
E, se possível, chame pessoas com deficiência para testarem se sua aplicação é realmente acessível. Somente elas podem dizer se conseguem navegar e consumir conteúdo na sua página.
Escrevi um artigo sobre essa etapa. Ela é importante e não pode ser ignorada na acessibilidade de um site. Tem um outro artigo também que aborda algumas técnicas que vão além dos validadores automáticos para identificar barreiras de acesso.
Coloque a acessibilidade na rotina do desenvolvimento
Todas essas dicas que demos nas últimas semanas envolvem o processo de garantir a acessibilidade desde o início do projeto. É fundamental que essas técnicas sejam colocadas na rotina do desenvolvimento para que a acessibilidade não seja uma etapa ou um fator opcional em um produto.
Ele deve vir como um requisito básico de cada aplicação. E se desde o início do projeto o time de designers, produtores de conteúdo e desenvolvedores estiver envolvido com a acessibilidade, tudo vai ficar muito mais simples e orgânico. E, quando perceber, já estará fazendo sites acessíveis.
*Elza Maria Albuquerque é repórter, produtora de conteúdos do Movimento Web para Todos.
*Reinaldo Ferraz é especialista em desenvolvimento web do W3C Brasil.