Seu site está acessível?

Mais e mais empresas estão migrando para o online, o que é ótimo, mas não se uma seção inteira da população não puder usar o site. Os problemas de acessibilidade são comuns em muitos sites, causando muitos problemas que podem ser resolvidos com relativa facilidade - isso não significa que você precisa de um site totalmente novo!

Com base no relatório da OMS de 2011 sobre deficiência, mais de 1 bilhão de pessoas no mundo têm alguma forma de deficiência. Isso corresponde a cerca de 15% da população mundial. Esse número só vai crescer à medida que as populações envelhecem, e os idosos correm um risco / proporção maior de deficiências.

Em 2018, o governo do Reino Unido tornou lei para o governo central, organizações governamentais locais, algumas instituições de caridade e outros sites de organizações não governamentais cumprirem as diretrizes WCAG2.1.

Então, em 2019, o ato europeu de acessibilidade foi formado. Já em 1990, a American Disabilities Act cobriu questões que agora estão sendo abordadas em sites. Em algumas situações, as empresas agora estão sendo levadas aos tribunais e perdidas, veja o caso da Domino's Pizza, por exemplo.

As pessoas não hesitariam em garantir que um local fosse fisicamente acessível, então por que é diferente tornar seu site acessível? Nunca foi tão importante quanto agora, pois mais empresas estão se transformando predominantemente online.

Objetivo

Nosso objetivo é criar sites inclusivos porque a acessibilidade é um direito humano.

Não só o site será mais fácil de usar para todos, mas também estaremos potencialmente trazendo mais leads para o cliente. Clique em uma libra que declarou: “Deixar de fornecer sites acessíveis ao consumidor custou aos varejistas do Reino Unido £ 11,75 bilhões em 2016”.

questões

A questão principal é como pensamos sobre a inclusão ou mesmo sobre as próprias deficiências. Eu sou um grande fã de Adrian Roselli e sua maneira de abordar isso através do método de acessibilidade egoísta. Aqui está um vídeo de Adrian de uma conferência recente. Recomendo vivamente que o veja para ter uma perspectiva diferente sobre as deficiências e os problemas comuns que as pessoas podem enfrentar.

Essencialmente, ele relaciona problemas comuns de acessibilidade de sites a situações cotidianas que todos vivenciam, não apenas pessoas com deficiência. Por exemplo, os problemas de contraste, ele simplesmente explica que isso também é um problema se a pessoa estiver usando um laptop no sol ou em uma área bem iluminada. Portanto, podemos ver que é de nosso interesse garantir que nosso site seja acessível também para a população em geral.

Como você pode ver pelo vídeo e pelas estatísticas, pessoas com problemas de acessibilidade são muito mais comuns do que você imagina.

Problemas comuns de acessibilidade

Portanto, decidimos que tornar nossos sites inclusivos é um benefício para todos (espero!). A primeira coisa que vem à mente das pessoas ao abordar a acessibilidade é que precisamos criar recursos ou funcionalidades adicionais que serão caras e oportunas para implementar ou que irão restringir os designs.

Na realidade, este não é o caso e muitos deles podem ser resolvidos de forma muito simples com um pouco de reflexão, planejando e usando o método de acessibilidade egoísta de Adrian Roselli.

Cores e contraste

Aproximadamente 8% (1 em 10) de TODOS os homens no mundo são daltônicos, então vamos selecionar uma paleta de cores que atenda a esses requisitos.
Se o site do cliente usa cores que não são acessíveis, pergunte se ele está feliz em perder 8% de seus leads. Tenho certeza de que eles podem repensar as cores se você lhes contar isso.

Ao selecionar essas cores, certifique-se também de usar uma boa relação de contraste entre elas, você não quer que seus links fiquem ocultos se estiverem em um fundo de baixo contraste (laptop no sol ...). Este é um trabalho de 5 minutos usando algo como a ferramenta de verificação de contraste online ou se você quiser ser específico para seus links, use a ferramenta de verificação de link.

Tamanho da fonte e escolha

Seu site contém informações que você deseja que as pessoas entendam? Eu suspeitaria que sim. Portanto, vamos garantir que um dos ingredientes mais importantes do seu site seja digerível para os olhos antes que eles pressionem o botão Voltar.

Quase 1 em cada 10 pessoas que irão visualizar o seu site terá algum tipo de problema com os olhos (não incluindo daltonismo). Aos 40 anos de idade, apenas metade da luz chega à retina como fazia aos 20 anos. Para pessoas com mais de 60 anos, isso cai para 20%.

O tamanho da fonte do corpo do navegador padrão é geralmente 16px ou 1rem, este também é o tamanho de fonte recomendado 'mínimo', mas vamos enfrentá-lo, é muito pequeno! O argumento mais comum aqui é que “as pessoas podem simplesmente aumentar o zoom se quiserem que o texto seja maior”. O problema com isso é que a maioria das pessoas afetadas por esse problema provavelmente não sabe como fazer zoom, portanto, não devemos presumir que essa seja uma opção para elas.

Não há um tamanho ou fonte 'melhor', mas eu recomendaria um tamanho de fonte de corpo mais próximo de 18px ou 1,125rem, com uma altura de linha decentemente espaçada, uma fonte elegível e o mínimo de bibliotecas de fontes incluídas. Webaim tem um bom artigo sobre fontes e afirma: “Cada vez que você encontrar um novo tipo, fonte ou variação de fonte, sua mente deve construir um mapa ou modelo dos caracteres e padrões para, então, analisar mais rapidamente as palavras e processar o significado. Isso requer esforço cognitivo e tempo. Se o tipo de letra já for familiar, esse overhead é reduzido. ”

Gill Andrews tem uma postagem mais abrangente sobre erros tipográficos que vale a pena ler se você lida com muita tipografia.

Imagens

Não há muito o que mencionar aqui, mas para garantir que você tenha uma alt tag em sua imagem. A maioria dos CMS agora tem a opção de adicionar uma tag alt de imagem ao carregá-la. Certifique-se de realmente descrever a imagem se for importante. Este artigo do hubspot tem uma boa redação sobre o uso bom e ruim de alt tag.

Se uma imagem não for importante e for puramente decorativa, como um padrão de fundo, deixe as tags vazias. Apenas certifique-se de que está realmente vazio na marcação, como: alt = ”” ou será sinalizado como sem uma tag alt.

Uma coisa importante a lembrar é que você não deve usar imagens para textos importantes (como cabeçalhos), pois elas serão ilegíveis para leitores de tela e para o Google. Tenha cuidado ao colocar o texto sobre as imagens, pois ele pode se tornar ilegível devido ao fundo.

Estrutura

Uma coisa que normalmente passa despercebida, mesmo que você tenha seguido os princípios básicos acima, é a estrutura semântica real da página. Muitas pessoas se prendem ao tamanho de uma fonte ou título e os usam para fins de estilo, em vez de definir a hierarquia de informações das páginas.

Isso não afetará apenas a forma como o seu conteúdo é interpretado pelo Google, mas as pessoas que usam leitores de tela usarão sua marcação estrutural como navegação. Yoast tem um ótimo artigo sobre títulos que você deve ler um pouco. Um conselho simples seria ter um elemento <h1> em sua página e depois <h2> para as próximas seções importantes. Se você tiver um filho de uma subseção, use um <h3> e assim por diante:

<h1> Normalmente, o título da sua página </h1>

<p> Algum texto de parágrafo aqui </p>

<h2> A próxima seção importante da sua página </h2>

<p> Algum texto de parágrafo aqui </p>

<h3> Algo não tão importante, mas relacionado ao h2 acima </h3>

<p> Algum texto de parágrafo aqui </p>

<h2> A próxima seção importante da sua página </h2>

Arredondar para cima

Espero que você possa ver que ao seguir essas regras simples acima, você estará tornando seu site acessível e uma experiência mais agradável para todos os que o visitam. Além disso, você também está melhorando sua posição no Google, portanto, todos ganham.

Se você não tem certeza se o seu site se encaixa nesses padrões ou apenas deseja ajudar a melhorar a acessibilidade do seu site, entre em contato conosco.