Acessibilidade

Last updated:

À medida que os sites continuam a se tornar cada vez mais essenciais para as empresas, garantir que seu conteúdo seja acessível a todos os visitantes se tornou ainda mais importante. Nos Estados Unidos, isso é frequentemente chamado de conformidade com a Seção 508, que se refere à seção da Reauthorized Rehabilitation Act de 1998, que exige que as agências federais tornem a tecnologia eletrônica e de informação acessível às pessoas portadoras de deficiência. Embora a conformidade com a Seção 508 seja um bom ponto de partida, cada vez mais as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) são usadas como padrão para criar conteúdo acessível na web.

Acessibilidade não é um recurso

Você não deve se basear apenas no aspecto legal para fornecer uma boa experiência para os usuários. Um em cada quatro americanos é portador de alguma deficiência de acordo com o CDC. Optar por não fornecer uma boa experiência para 25% dos visitantes é como ter uma loja física que nega a entrada de um a cada quatro visitantes. Não só esses clientes ficarão insatisfeitos, como provavelmente não retornarão nem recomendarão os seus serviços.

Uma afirmação comum entre os desenvolvedores é que "a acessibilidade não é um recurso". A ideia é não tratar a acessibilidade como um extra, ou algo para lidar no final de um projeto.

A acessibilidade requer reflexão, empatia e compreensão. Quando abordada no início de um projeto, é possível projetar e desenvolver soluções em vez de precisar reformular algo mais tarde.

Muitas vezes, resolver a acessibilidade resolve outras prioridades como desenvolvedor: experiência do usuário, desempenho e SEO são algumas das principais preocupações que estão diretamente relacionadas com a acessibilidade. Ao melhorar uma, muitas vezes, você também melhora outra.

A empatia é uma parte importante da acessibilidade e é muito fácil ignorá-la. Como desenvolvedores, queremos automatizar tudo: se algo é difícil ou demorado de fazer, queremos ferramentas que façam a tarefa por nós ou que nos digam como fazê-la. Infelizmente, essas ferramentas são superficiais, não substituem o trabalho humano, não podem realmente experimentar a página da mesma forma que um ser humano. É tecnicamente possível criar uma página web que seja aprovada com sucesso na maioria dos testes de acessibilidade automatizados, mas que seja completamente inútil para todos os seres humanos, sejam eles portadores ou não de deficiência visual, daltonismo ou função motora limitada. Tecnicamente, é possível atender aos requisitos, mas fornecer uma experiência frustrante e inútil, que afaste completamente as pessoas. A conclusão é esta: não confie nas ferramentas, teste o seu trabalho, tenha empatia com os usuários, obtenha feedback.

Embora não seja um guia definitivo, veja algumas etapas que você pode seguir para tornar seu conteúdo acessível, bem como recursos para se aprofundar ainda mais.

Forneça alternativas de texto para qualquer conteúdo que não seja de texto

Todas as imagens, ícones, vídeos e botões que transmitem significado ou são interativos devem ter uma alternativa de texto. Não só é positivo para os visitantes que estão consumindo seu conteúdo através de um leitor de tela, como também é ótimo para os mecanismos de busca. O texto alternativo deve descrever o conteúdo da imagem. A maioria das imagens em seu site provavelmente pode ser editada no editor de páginas e é fácil configurar o texto alternativo no editor de páginas. No entanto, dentro de módulos e modelos personalizados, você precisa garantir que o texto alternativo especificado nos editores de página seja honrado.

Isso significa garantir que você tenha um elemento <img> em que o texto alternativo fornecido pelo usuário é realmente usado.

Good: <img src="{{ module.image.src }}" alt="{{ module.image.alt }}"> Bad: <img src="{{ module.image.src }}">

Se por algum motivo você não tornou uma imagem editável no editor de página, deverá codificar o texto alternativo.

Há uma exceção a essa regra de texto alternativo. Se sua imagem não fornece contexto adicional e é puramente representativa, é melhor ter um valor de texto alternativo "nulo" do que não ter o atributo alternativo.

Good if only presentational: <img src="{{ module.image.src }}" alt="">

Para vídeos, use um serviço que ofereça suporte a legendas e considere incluir uma transcrição. Alguns serviços que permite o upload de transcrições incluem Vidyard, YouTube, Vimeo e Wistia.

Use soluções a11y amigáveis de carregamento lento

O carregamento lento de imagens é uma técnica comum de aprimoramento de desempenho para a construção de sites. O método costuma carregar as coisas lentamente para fins de acessibilidade.

As soluções JavaScript para isso normalmente exigem que o atributo src das imagens seja algo falso (como um pequeno arquivo .gif) em vez da verdadeira origem da imagem, que é mantida em um atributo data-src até que o usuário role a imagem para perto da visualização. Isso significa que, inicialmente, a imagem fica inacessível para um usuário de leitor de tela que está navegando na página, especialmente um que usa um rotor para ver todo o conteúdo da página sem sequer rolar. Além disso, se o JavaScript não for carregado em uma página, essas soluções de carregamento lento falharão e, portanto, deixarão os usuários de tecnologia assistiva sem as imagens adequadas na página.

Usar o carregamento lento de imagem nativo evita esse problema, mantendo a mesma marcação da imagem, independentemente de o JavaScript ser carregado ou não.

Good: <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" loading="lazy" height="200px" width="400px"> Bad: <img src="1px.gif" data-src="{{ module.image.src }}" alt="{{ module.image.alt }}">

O HubSpot oferece suporte ao carregamento lento baseado em navegador nos módulos personalizados. É recomendado usá-lo.

Links, botões e elementos de formulário precisam ter texto real que indique o que fazem ou para onde vão. Caso contrário, os leitores de tela dirão que há um link ou botão selecionado, mas não informarão o que ele faz.

Ao usar um ícone, forneça o texto do leitor de tela. Por exemplo, alguns modelos padrão da HubSpot usam um código curto de ícone:

<a href="https://www.facebook.com"><i class="fab fa-facebook-f"></i><span class="screen-reader-text">Facebook</span></a>

Não use 'display: none' para ocultar rótulos de formulários e outros textos descritivos. Isso impede que o texto seja lido em voz alta para pessoas portadoras de deficiência visual, além de prejudicar os usuários que podem ver, mas têm dificuldade em identificar o texto devido à falta de contraste no texto do espaço reservado. Além disso, todo mundo já preencheu ou teve um formulário preenchido automaticamente sem fazer ideia se as informações foram inseridas corretamente porque os rótulos de campo do formulário estavam invisíveis.

Se você precisa ocultar o texto, ou se o texto oculto puder fornecer contexto adicional, que de outra forma não seria necessário para um usuário não portador de deficiência visual, use CSS para tornar o texto invisível sem ocultá-lo dos leitores de tela ou adicione a classe '.screen-reader-text'.

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; }

Quando um visitante navega usando um leitor de tela ou simplesmente seu teclado, é super útil ter uma maneira de pular as partes da página que se repetem, como um cabeçalho. Podemos fazer isso adicionando um link que aponta para o conteúdo principal da página.

No cabeçalho, adicione o HTML com o seguinte conteúdo:

<a href="#content" class="screen-reader-text">Five ways to make your site more accessible</a>

Em cada modelo, certifique-se de que haja um elemento com um atributo de ID de conteúdo. No exemplo, usamos o título do artigo como texto ao qual pular. Assim, os mecanismos de busca sabem para onde o link leva. É uma maneira mais semântica de pular para o conteúdo.

<main id="content"> <!-- your page or post's actual content --> </main>

Usar marcação semântica

Marcação semântica é um HTML que transmite significado. Alguns exemplos de elementos que são semânticos incluem <header>, <main>, <footer>, <nav>, <time>, <code>, <aside> e <article>.

Alguns exemplos de elementos que não são semânticos incluem <div> e <span>. Os elementos não semânticos ainda têm função, mas devem ser usados principalmente para apresentação e não para transmitir significado.

Os elementos semânticos podem ser entendidos pelos mecanismos de busca e tecnologias assistivas, afetando positivamente o SEO e melhorando a experiência do usuário.

Não use elementos <div> como elementos interativos, como botões, guias ou links, a menos que tenha certeza de que forneceu uma boa experiência por meio de atributos aria.

Use links (<a />) e <button /> corretamente.

Use links para vincular a seções de uma página e navegar para outras páginas.

Use os botões para interações que não fazem o visitante sair da página ou navegar para um ID.

Ao trabalhar com tabelas, se uma tabela tiver um título descritivo, inclua-o em um elemento <caption> logo após o elemento <table>.

Use elementos <th> com o atributo de escopo apropriado em tabelas para cabeçalhos de colunas e linhas e <thead>, <tbody> e <tfoot> para denotar seções.

Use o atributo de escopo em atributos <th> para indicar se o cabeçalho é de linha ou coluna.

Precisa de um acordeão? Não se esqueça dos elementos <summary> e <details>, que fornecerão a maior parte desta funcionalidade gratuitamente e ainda são acessíveis. Certifique-se de adicionar um polyfill ou fallback se precisar oferecer suporte a navegadores antigos.

Alguns usuários usam o teclado para navegar pelas páginas web e formulários, mas não por preferência. Alguns visitantes precisam usar o teclado ou algum tipo de dispositivo auxiliar que emule um teclado para navegar pelos sites.

  • Certifique-se de definir':focus' de modo que, quando um usuário navegar usando o teclado, ele possa ver o que está em foco na tela. Somente desative a propriedade CSS de contorno se fornecer um indicador visual alternativo aceitável. Use :focus-within se ajudar a direcionar a atenção dos usuários de forma útil.
  • Ao ocultar/mostrar partes da página com ':hover' ou via Javascript, certifique-se de que os usuários também sejam capazes de navegar por esses controles via Javascript ou que exista um caminho alternativo até a informação.
  • Verifique se a navegação principal do seu site oferece suporte à navegação por teclado: um problema comum é deixar menus suspensos inacessíveis. Assim, os usuários não poderão acessar partes críticas do seu site.
  • Forneça e atualize os atributos hidden, aria-expanded, aria-current, aria-selected, entre outros atributos de estado, conforme necessário, para garantir que os leitores de tela comuniquem adequadamente o estado dos elementos.

Faça fallback para funções, se necessário

Ao criar modelos ou arquivos codificados, você deve usar os elementos semânticos corretos (<header>, <main>, <footer>, <nav>, <dialog> etc.) para comunicar aos navegadores web e leitores de tela o tipo de conteúdo que incluem.

Se elementos semânticos improváveis não são apropriados para o seu cenário, você deve adicionar atributos de função

A adição de pontos de referência facilita para os usuários que utilizam leitores de tela pularem entre as seções principais de uma página web. O HubSpot inclui atributos 'role' para menu, menu simples e módulos de pesquisa do Google.

Mais dicas de design

  1. Verifique se o conteúdo permanece visível e legível quando um usuário amplia o navegador para 200%.
  2. Não é aconselhável usar fontes muito menores do que 16 px, pois pode dificultar a leitura pelos visitantes.
  3. Evite usar cor como a única maneira de comunicar informações. Um percentual significativo da população mundial é daltônico.
  4. Verifique se há contraste suficiente entre a cor do texto e o plano de fundo para que usuários com visão limitada possam ler o conteúdo.
  5. Evite animações que pisquem rapidamente (mais de três vezes por segundo), pois podem desencadear convulsões em alguns visitantes.
  6. Considere oferecer suporte a prefers-reduced-motion se você tiver animações em seu site.
  7. Hoje, construir um site responsivo é considerado uma obrigação. Confira se todos os elementos interativos funcionam como esperado em dispositivos móveis. Os elementos interativos devem ser fáceis de tocar e deve haver espaço suficiente entre as regiões de toque.

Gravação de conteúdo

É fácil de esquecer que a acessibilidade também deve ser considerada em seu conteúdo de texto.

  1. Evite a linguagem direcional, como "veja a barra lateral à esquerda". Se o usuário estiver no celular, é provável que isso não faça sentido para ele, pois o conteúdo geralmente é exibido empilhado.
  2. Use cabeçalhos como <h1> <h2> etc. e aninhe-os consecutivamente. Não pule um cabeçalho para obter efeitos visuais.
  3. Ao adicionar um link, nunca use texto como "Clique aqui", pois não transmite significado para os leitores de tela, além de não fazer nenhum sentido em telas sensíveis ao toque ou em outros tipos de dispositivos. Em vez disso, o texto deve indicar o que consta no link. Isso também é positivo para o SEO, pois os mecanismos de busca sabem para onde o link leva.
  4. Se você usar um estilo especial no texto para transmitir significado, certifique-se de usar a tag semântica apropriada <mark> <strong> <em> <sup> etc., caso contrário, o significado poderá ser perdido para alguns visitantes.
  5. Se seu público é composto por visitantes de todo o mundo, evite fazer piadas regionais. Ao traduzir seu site, evite trocadilhos. Por mais que gostemos de uma piada de tiozão, por vezes elas não se traduzem bem.
  6. Use ferramentas para ajudar a melhorar sua gramática e ortografia. Isso ajuda na compreensão e resulta em traduções melhores.
  7. Escreva o conteúdo de uma forma que se adapte ao público do seu site. Você não explicaria astrofísica para um aluno do quinto ano da mesma forma que faria a um físico talentoso. Dito isto, evite preciosismos, quanto mais claro melhor.

Recomendações específicas da HubSpot

A maior parte do trabalho para melhorar a acessibilidade não é específica da HubSpot. Dito isso, queremos prepará-lo para o sucesso no HubSpot e há algumas coisas que você pode fazer como desenvolvedor ou criador de conteúdo para fornecer uma experiência melhor para os usuários.

Use módulos e modelos personalizados que sigam as melhores práticas de a11y

Se você está instalando um módulo ou modelo obtido no marketplace, desenvolvendo-os ou construindo-os para você, é melhor garantir que eles sigam as práticas recomendadas. Os módulos personalizados podem ter o maior impacto na acessibilidade do seu site, pois são frequentemente usados várias vezes, até em uma mesma página. Da mesma forma, um único modelo pode ser usado centenas ou milhares de vezes em um mesmo site. Se seu site não é acessível, provavelmente você está perdendo dinheiro. Da mesma forma que acontece com a publicidade, faz sentido pagar um pouco mais para garantir que seu site atinja um público mais amplo. Um dos benefícios dos módulos é que muitas vezes você pode melhorar o código posteriormente, à medida que as diretrizes e as práticas recomendadas evoluem, melhorando a acessibilidade em todas as páginas em que o módulo é usado de uma só vez.

No marketplace da HubSpot, procure módulos e modelos que falem sobre acessibilidade e atendam aos requisitos da WCAG em suas descrições. Se você estiver trabalhando com um desenvolvedor, deixe claro desde o início que a acessibilidade é importante para você. Nem todos os desenvolvedores criam com a11y em mente desde o início. Abordar a acessibilidade no final de um projeto provavelmente vai custar mais do que incluí-la no início do processo, pois em vez de priorizá-la desde o início, os desenvolvedores precisarão corrigir retroativamente os problemas de acessibilidade.

Se você for um desenvolvedor, crie módulos e modelos que facilitem o cumprimento de todas as diretrizes para os criadores de conteúdo. Use cabeçalhos apropriados, HTML semântico e faça com que os elementos interativos forneçam funções e contexto adequados. Os criadores de conteúdo que estão cientes dos problemas de acessibilidade geralmente ficam felizes em pagar um pouco mais por módulos e modelos que sejam inclusivos, ou seja, você precisa mostrar que seus módulos levam em consideração a acessibilidade. Inclua links para pular em modelos e adicione acessibilidade aos grupos globais e parciais globais usados em seus modelos — eles são usados no site todo e podem ter o maior impacto na usabilidade de um site.

Se você cria para o marketplace da HubSpot, saiba que seu conteúdo pode ser usado em milhares, até milhões, de páginas na web. A sua escolha afeta as pessoas ao publicar seu conteúdo e compartilhar seu trabalho, independentemente de ser inclusivo ou não.

Cuidado com soluções que se dizem completas

Existem dezenas de ferramentas que afirmam coisas como "Basta adicionar nosso script ao seu site para torná-lo acessível"

Algumas dessas ferramentas tentarão dar sentido a partes da página e alterar o html e os atributos para tentar corrigir alguns problemas. Elas fazem um trabalho de adivinhação e podem errar, acabar com a funcionalidade do seu site ou piorar as coisas para os usuários.

Essas ferramentas nem sempre funcionam como esperado e às vezes fornecem seu próprio sistema de leitura de tela. Com uma interface do usuário complicada, seu site poderá se tornar mais difícil de operar por meio da ferramenta injetada. 

Devido a esses problemas, ferramentas como essas não substituem a construção do seu site com acessibilidade em mente. Invista tempo e dinheiro para fornecer a melhor experiência para todos os usuários. Confiar em soluções completas pode custar o mesmo ou mais do que simplesmente construir as coisas de maneira correta. Ao testar e construir considerando a acessibilidade, você também terá o benefício da empatia e compreensão dos seus clientes.

Para deixar claro, isso não se refere a ferramentas de teste, especificamente aquelas que afirmam resolver problemas de acessibilidade para você. As ferramentas de teste são ótimas e você deve usá-las, além de realizar testes manuais. 

Saiba mais sobre scripts/sobreposições de acessibilidade.

Podcast para desenvolvedores da HubSpot

Em janeiro de 2021, os HubSpotters, juntamente com Jon Sasala, da Morey Creative, tiveram uma conversa sobre acessibilidade.

Mais informações sobre acessibilidade

Há excelentes recursos disponíveis para a construção de sites acessíveis. Não deixe de conferir!


Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..