Guia rápido para começar: definição, diretrizes e dicas

Neste vídeo, Jaci, da equipe MidiaPro Interactive, explica como você pode começar a criar um web design acessível.

Transcrição:

Como você se sentiria se estivesse realmente animado para conferir um site, mas quando acessasse esse site, não conseguisse acessar nenhum de seu conteúdo? Eu pessoalmente me sentiria frustrado e imagino que você também se sentiria.

Se você não usa web design acessível, este é o cenário que você cria para um em cada quatro adultos vivendo com deficiência nos EUA São cerca de 61 milhões de pessoas que não têm acesso igual para o seu site.

Seguir as diretrizes de acessibilidade de web design não é fácil se você nunca fez isso antes, mas vou descrever algumas coisas que você pode fazer para começar.

Use os carimbos de data e hora na descrição do vídeo se quiser pular para seções diferentes deste vídeo. Agora, vou mergulhar em uma visão geral da acessibilidade de sites.

O que é acessibilidade de site?

Acessibilidade do site significa que seu site foi projetado para que pessoas com deficiência possam usá-lo. O objetivo do design acessível é remover barreiras tecnológicas para que qualquer pessoa possa interagir com o seu conteúdo.

Como é determinada a acessibilidade do site?

De acordo com o O Consórcio World Wide Web, também conhecido como W3C, um site acessível funciona para pessoas com deficiência auditiva, cognitiva, neurológica, física, de fala e visual.

Não se preocupe se não souber por onde começar. O W3C possui documentação que informa o que seu site deve incluir para atender aos seus padrões.

Esta documentação inclui:

A ATAG concentra-se nas ferramentas que as pessoas usam para criar conteúdo da Internet e a UAAG analisa a acessibilidade das ferramentas que renderizam conteúdo da web.

vou me concentrar em WCAG neste vídeo, quais são as diretrizes para tornar o conteúdo do site acessível a todos.

O que é acessibilidade WCAG?

Com as WCAG, você tem três níveis diferentes de conformidade: A, AA e AAA. À medida que você vai de A para AA e para AAA, você segue mais padrões estabelecidos pela WCAG e tornar seu site acessível a um número maior de pessoas.

Então, como saber se você tem um site acessível? Faça uma auditoria!

Como auditar a acessibilidade do seu site

Você não precisa fazer uma auditoria sozinho. Se preferir terceirizar sua auditoria, entre em contato com uma equipe de consultores que pode analisar seu site e fazer os ajustes necessários para você.

Agora, se preferir cuidar das coisas internamente, você tem muitas opções. Você pode vasculhar as páginas do seu site em busca de problemas manualmente, mas isso provavelmente ocupará muito tempo.

Você pode querer usar algumas ferramentas para ajudá-lo. Insira seu URL em um verificador de acessibilidade como WAVE para ver o que você precisa atualizar em uma página. Você também pode usar um verificador de acessibilidade em massa para analisar várias páginas de uma vez.

O site do W3C tem uma grande lista de ferramentas de acessibilidadeentão você não precisa fazer tudo sozinho.

Também temos uma lista de cinco elementos importantes para sua acessibilidade e alguns exemplos de design acessível — sobre os quais falarei a seguir — então fique comigo.

5 diretrizes de acessibilidade para web design

Lembre-se apenas de que estes são breves resumos das diretrizes das WCAG. Eu encorajo você a usar o W3C guia de referência rápida para aprender técnicas mais aprofundadas para design acessível.

1. Certifique-se de que o texto esteja legível

Qualquer texto de tamanho normal que comunique informações importantes precisa ser fácil de ler.

O contraste desempenha um papel importante nisso. Da forma como está agora, textos grandes (como títulos principais) precisam de uma proporção de contraste de texto em relação ao fundo de 3:1. Texto normal (ou menor), como o texto que compõe o corpo do seu conteúdo, precisa de uma taxa de contraste de 4,5:1.

Um exemplo de pouco contraste é algo como texto verde claro em um fundo verde ligeiramente mais escuro. Mude o texto para preto ou branco e você terá muito mais contraste em seu site.

Os usuários também devem ser capazes de ampliar o texto de uma forma que não afete a funcionalidade do seu site nem faça com que eles percam conteúdo.

2. Otimize imagens para serem vistas e lidas

Adicionando texto alternativo para imagens não é apenas uma prática comum de SEO. Ajuda as pessoas que não conseguem ver as imagens a entender o que há nelas.

O texto alternativo é um trecho de texto que explica claramente o que está acontecendo em uma imagem. O texto alternativo cabe perfeitamente nos códigos incorporados de suas imagens. Como você pode ver neste exemplo do Mashable, a página tem imagens e quando você passa para o lado do código, você vê o texto alternativo.

3. Ofereça ao seu público maneiras adicionais de entender os vídeos

Se você nunca adicionou legendas aos seus vídeos antes, agora é a hora de começar. E não confie apenas naqueles que o YouTube ou outro provedor de hospedagem gera automaticamente.

Se você tiver tempo e paciência, dê uma olhada nas legendas geradas automaticamente e faça edições. Eles não serão perfeitos vindos de uma IA.

Você também pode solicitar legendas usando uma ferramenta como Rev e adicioná-las ao seu vídeo.

Incluir transcrições em seus vídeos os torna mais acessíveis. Se você escreveu um roteiro, já tem uma transcrição preparada!

Descrições de áudio adicione outra camada de acessibilidade. Estas são faixas de áudio separadas que descrevem o que está acontecendo no seu vídeo entre as lacunas do diálogo.

Portanto, se você tiver duas pessoas conversando sobre sua recente viagem de compras e o vídeo cortar para uma filmagem de uma pessoa experimentando roupas, a audiodescrição explicaria o que está acontecendo no vídeo. Pode ser algo assim: uma mulher fica em frente a um espelho e coloca dois lenços nos ombros.

Uma plataforma de hospedagem como Wistia permite que você carregar descrições de áudio (e ainda possui uma lista de verificação de acessibilidade de vídeo quando você envia seus vídeos).

4. Projete seu site para ser compatível com mouse e teclado

Nem todo mundo usa mouse para navegar na Internet. Seu site deve refletir isso.

Isso não significa apenas que você precisa garantir que alguém possa interagir com seu site por meio de um teclado, mas também exige que você tenha maneiras visíveis de destacar qual parte do seu site está em foco.

Olhando para outro exemplo de design acessível, você vê que quando clico na barra de pesquisa no site da Keds, a clássica linha piscante aparece para me informar que posso digitar. A barra de pesquisa também fica mais proeminente quando clicada.

Para atender às diretrizes WCAG, esta funcionalidade deve acontecer quando um teclado é usado.

5. Torne a navegação do seu site fácil de entender

Essa dica vai além da acessibilidade. Geralmente é bom tornar a navegação no seu site simples e clara.

Escreva títulos de páginas e cabeçalhos que tenham um propósito claro. Use o texto âncora do link que facilita a compreensão do conteúdo ao qual você está vinculando.

Novamente, use indicadores de foco para que as pessoas saibam onde estão na página. Ofereça mais de uma maneira de acessar uma página da web, como por meio de um mapa do site, navegação principal ou índice.

E como posso pular este? Tenha uma navegação consistente. Isso significa que se você tiver um cabeçalho de navegação principal, ele realmente não deverá mudar quando um usuário pular de uma página para outra.

Neste exemplo do site da At Home, embora eu clique de uma página para outra, a navegação no topo da página não muda.

E como eu disse antes, esta definitivamente não é uma lista abrangente do que você precisa fazer para seguir as diretrizes de acessibilidade de web design. Essas diretrizes também podem mudar, então faça sua pesquisa quando estiver pronto para avalie sua acessibilidade.

Para continuar aprendendo sobre diferentes tópicos de web design e marketing digital, assine nosso Canal do YouTube e nosso boletim informativo por e-mail, Receita semanal. Você não ficará desapontado.

Obrigado por se juntar a mim!

Postamos vídeos toda semana.

Sim. Toda semana.

Junte-se ao 20.000 profissionais de marketing que obtêm conhecimento de marketing por meio de vídeos MidiaPro.