Neste vídeo, Jaci, da equipe WebFX Interactive, explica como você pode começar com web design acessível.

Transcrição:

Como você se sentiria se estivesse realmente animado para conferir um site, mas quando você acessa esse site, não consegue 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, esse é o cenário que você cria para um em cada quatro adultos que vivem com deficiência nos EUA. São cerca de 61 milhões de pessoas que não têm acesso igual ao 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/hora na descrição do vídeo se quiser pular para diferentes seções deste vídeo. Agora, vou mergulhar em uma visão geral da acessibilidade do site.

O que é acessibilidade do 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 as barreiras tecnológicas para que qualquer pessoa possa interagir com seu conteúdo.

De acordo com o World Wide Web Consortium, 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 você não sabe 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:

• Diretrizes de acessibilidade para ferramentas de autoria (ATAG)
• Diretrizes de acessibilidade de conteúdo da Web (WCAG)
• Diretrizes de acessibilidade do agente do usuário (UAAG)

O ATAG se concentra nas ferramentas que as pessoas usam para criar conteúdo da Internet e o UAAG analisa a acessibilidade das ferramentas que processam o conteúdo da Web.

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

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

Então, como você sabe 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 por conta própria. Se preferir terceirizar sua auditoria, entre em contato com uma equipe de consultores que podem analisar seu site e fazer os ajustes necessários para você.

Agora, se você preferir lidar com as coisas internamente, você tem muitas opções. Você pode vasculhar as páginas do seu site procurando problemas manualmente, mas isso provavelmente consumirá muito do seu tempo.

Você pode querer usar algumas ferramentas para ajudá-lo. Conecte seu URL a um verificador de acessibilidade como o 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 só vez.

O site do W3C tem uma grande lista de ferramentas de acessibilidade , entã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íveis – sobre os quais falarei a seguir – então fique comigo.

5 diretrizes de acessibilidade para web design

Apenas lembre-se que estes são breves resumos das diretrizes WCAG. Recomendo que você use o guia de referência rápida do W3C para aprender técnicas mais aprofundadas de design acessível.

1. Certifique-se de que o texto seja 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. Como está agora, o texto grande (como os títulos principais) precisa de uma proporção de contraste de texto para fundo de 3:1. O 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 contraste muito pequeno se parece com um texto verde claro em um fundo verde um pouco mais escuro. Altere o texto para talvez preto ou branco e você terá muito mais contraste em seu site.

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

2. Otimize as imagens para serem vistas e lidas

Adicionar texto alternativo a imagens não é apenas uma prática comum de SEO. Ajuda as pessoas que não podem ver imagens a entender o que está nelas.

O texto alternativo é um texto que explica claramente o que está acontecendo em uma imagem. O texto alternativo se encaixa perfeitamente nos códigos de incorporação de suas imagens. Como você vê neste exemplo do Mashable, a página tem imagens e quando você passa para o lado do código das coisas, você vê o texto alternativo.

3. Dê 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 nos 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 com seus vídeos os torna mais acessíveis. Se você escreveu um roteiro, já tem uma transcrição preparada!

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

Então, se você tem duas pessoas falando sobre sua recente viagem de compras, e então o vídeo corta para algumas imagens de uma pessoa experimentando roupas, a descrição de áudio explicaria o que está acontecendo no vídeo. Pode ser algo assim: uma mulher fica na frente de um espelho e coloca dois lenços sobre o ombro.

Uma plataforma de hospedagem como a Wistia permite fazer upload de descrições de áudio (e até tem uma lista de verificação de acessibilidade de vídeo quando você faz upload de seus vídeos).

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

Nem todo mundo usa um 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 dos exemplos de design acessíveis, você vê que quando clico na barra de pesquisa no site da Keds, a clássica linha piscando aparece para me informar que posso digitar. A barra de pesquisa também se torna mais proeminente quando clicada.

Para atender às diretrizes do WCAG, essa funcionalidade deve ocorrer 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 em seu site simples e clara.

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

Novamente, use indicadores de foco para que as pessoas saibam onde estão em uma 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 essa? Tenha uma navegação consistente. Isso significa que, se você tiver um cabeçalho de navegação principal, ele realmente não deve mudar quando um usuário pular de uma página para outra.

Neste exemplo do site da At Home, embora eu esteja clicando de uma página para outra, a navegação na parte superior da página não muda.

E como eu disse anteriormente, 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, portanto, faça sua pesquisa quando estiver pronto para avaliar 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, Revenue Weekly . Você não ficará desapontado.

Obrigado por se juntar a mim!

Junte-se aos 5.000 profissionais de marketing que obtêm seu conhecimento de marketing dos vídeos da WebFX.

Inscreva-se agora