Nesta apresentação para Pubcon, falamos sobre acessibilidade na web uma vez que componente e impulsionador do SEO em 2021 e além. Longe de ser um grande projeto espinhoso que requer uma reconstrução completa do sítio, a acessibilidade pode ser facilmente trabalhada em locais e construções existentes. Abordaremos três exemplos concretos de vitórias rápidas e de cumeeira impacto que você pode verificar e implementar, mesmo sem recursos técnicos profundos.
A acessibilidade na Web é um fator crítico para SEO em 2022 e além. Além da maior valia algorítmica de coisas uma vez que janela de visualização, dimensionamento de texto e muito mais, contribuir para uma Web alcançável também é importante para seus usuários. Você está investindo muito tempo e esforço para levar as pessoas ao seu site. Só faz sentido prometer que todas essas pessoas possam usá-lo.
Aquém, vou expandir um pouco os três tópicos de acessibilidade da apresentação. São ganhos rápidos que não exigem um grande investimento de tempo ou numerário para serem implementados. Eles também são um ótimo ponto de partida se você acabou de principiar a trabalhar na acessibilidade do seu site, embora valha a pena verificar em todos os sites.
MetaZoom da Janela de Visualização
O primeiro item é a janela de visualização, que é a “janela” visível dentro do navegador na qual o teor da página é exibido. Muitas vezes, mesmo que seu texto tenha um tamanho oportuno em dispositivos móveis, os usuários ainda tentarão aumentar o zoom para uma melhor leitura. Isso pode ser por vários motivos – visão, telas de dispositivos móveis de baixa qualidade ou simplesmente para ter uma passagem relevante focada na tela. Os navegadores da Web para dispositivos móveis são todos criados para permitir pinçar para ampliar por padrão
Infelizmente, muitos sites desativam o gesto de pinçar para ampliar sem querer. Os desenvolvedores geralmente colocam meta diretivas que desativam o zoom enquanto ainda estão ajustando o layout de uma página: “user-scalable=no” e/ou “maximum-scale=1”. Na verdade, muitos modelos para download contêm esse código.
Inadvertidamente, esse código geralmente é deixado no site quando é enviado ao vivo. Os desenvolvedores podem não perceber sua valia ou podem não revisar todo o código de protótipo padrão e perdê-lo. Portanto, os usuários não conseguem ampliar as páginas, a taxa de repudiação é inflada e o proprietário da empresa geralmente não tem conhecimento.
Felizmente, a correção é simples: procure a seção “viewport” da natividade da sua página. Se contiver user-scalable=no” e/ou “maximum-scale=1” – exclua-os.
Rótulos Ária
Em segundo lugar, entramos em rótulos de árias. Embora você possa se aprofundar muito na rotulagem ARIA, muitos sites nem mesmo adotam a abordagem mais básica. Os rótulos ARIA são basicamente códigos de trapaça para introduzir termos acessíveis para leitores de tela em seu site, sem exigir nenhuma diferença visual em uma página.
Com componentes estáticos, uma vez que botões, os leitores de tela contam com dados de texto incluídos para anunciar o componente e transmitir sua função ao usuário do leitor de tela. Por exemplo, um botão marcado uma vez que “Enviar” pode ser lido uma vez que “botão, enviar” para o usuário.
No entanto, muitas vezes sacrificamos texto por imagens ou ícones para animar um design. O problema é que os leitores de tela não são inteligentes o suficiente para ler uma imagem. Múltiplos elementos sem nenhum texto podem deixar um usuário confuso, somente ouvindo listas faladas de elementos uma vez que “campo de formulário, campo de formulário, campo de formulário, botão” sem nenhuma pista sobre o que acontece nos campos do formulário ou o que o botão faz.
A rotulagem Aria permite que uma página incorpore texto que não é visto por usuários visuais da página, mas somente lido por leitores de tela. Esses rótulos não afetam a aspecto da página – eles simplesmente adicionam texto para ser lido pelos leitores de tela. Os rótulos Aria apresentam um proveito de usabilidade sem desvantagens ou compensações e sempre valem a pena serem implementados.
Taxa de contraste do texto
Por último, falamos sobre taxa de contraste alcançável para legibilidade do texto. As cores do seu texto e fundo podem parecer uma decisão pequena, mas têm um grande impacto na legibilidade – principalmente para pessoas com vários tipos de visão ou telas de baixa qualidade.
Por exemplo, muitos sites optam por manter o projecto de fundo em um cinza suave e neutro e o primeiro projecto em um tom de cinza escuro, mas não preto. Isso pode levar a uma aspecto elegante em computadores de mesa, mas em dispositivos móveis de plebeu dispêndio com ângulos de visão ruins, isso pode tornar o texto quase ilegível.
Em outro exemplo, uma marca pode usar tons de azul, amarelo e verdejante para dar uma sensação saudável ou “fresca” ao seu design. No entanto, pessoas com tritanomaly ou tritanopia podem ver algumas dessas cores uma vez que uma única cor, o que, por sua vez, pode tornar os elementos quase invisíveis para eles.
Desenlace
Ao todo, esperamos mostrar que principiar com a acessibilidade em seu site não requer um grande investimento de tempo e vontade, mas é um tanto que você pode incorporar em suas páginas e modelos existentes – para o muito de seus usuários, e seu SEO!
