Uma parte significativa da comunidade de todo clube convive com alguma deficiência, e muito mais gente usa o site do clube em momentos de "limitação temporária": sol forte na tela do celular à beira do campo, um braço quebrado, olhos cansados apertando a vista para ler horários de jogo em cinza sobre branco. Um site de clube acessível não é um detalhe jurídico nem preocupação de grande empresa: é a diferença entre um sócio encontrar o horário do jogo deste sábado e desistir.
A boa notícia é que acessibilidade no site do clube depende principalmente de alguns hábitos do dia a dia, não de mágica técnica. O padrão internacional, as Diretrizes de Acessibilidade para Conteúdo Web (WCAG, na sigla em inglês), se resume, para um clube, a uma lista curta que você pode aplicar toda vez que publica algo. Este guia explica essa lista em linguagem simples.
O que o WCAG pede, em um parágrafo
O WCAG (publicado pelo W3C, o órgão de padrões da web; veja w3.org/WAI) organiza a acessibilidade em torno de quatro ideias: o conteúdo precisa ser perceptível (as pessoas conseguem ver ou ouvir, daí o texto alternativo, o contraste e as legendas), operável (dá para usar com teclado, não só com mouse), compreensível (linguagem clara, navegação previsível, formulários com rótulos) e robusto (funciona com tecnologias assistivas, como leitores de tela).
Em muitos países, os sites de governo são obrigados a cumprir o WCAG no nível AA. Clubes comunitários normalmente não passam por auditoria, mas o mesmo padrão é a meta certa, porque é simplesmente o que "todo mundo consegue usar" significa na prática.
Veja como cada ideia se aplica ao site de um clube.
Texto alternativo: descreva suas imagens
Leitores de tela não enxergam suas fotos: eles leem o texto alternativo da imagem (o "texto alt"). Todo editor de imagens e construtor de sites tem um campo para isso. A maioria dos clubes deixa o campo vazio, e o leitor de tela anuncia um inútil "imagem" ou, pior, o nome do arquivo.
O hábito: sempre que adicionar uma imagem, escreva uma frase dizendo o que ela mostra e por que está ali.
- Bom: "Time sub-12 comemorando a vitória na final, segurando o troféu."
- Inútil: "IMG_4032.jpg", "foto" ou um amontoado de palavras-chave ("clube futebol time vitória campeão").
- Imagens decorativas (texturas de fundo, enfeites puramente ornamentais) devem ter texto alternativo vazio, para que o leitor de tela as ignore, e não uma descrição do floreio.
- Imagens que contêm informação são a grande armadilha. Um cartaz com a grade de treinos enviado como JPEG é invisível para um leitor de tela (e para o Google). Publique a grade como texto de verdade na página, com o cartaz como bônus. O mesmo vale para textos embutidos em imagens de destaque.
Se você está procurando fotos, nosso guia de imagens gratuitas para sites de clubes mostra onde encontrá-las, e cada uma que você usar precisa de texto alternativo.
Contraste de cores: cinza sobre branco não ajuda ninguém
Texto com pouco contraste é a falha de acessibilidade mais comum nos sites de clubes, e geralmente chega pelas cores do clube: texto dourado sobre branco, azul-claro sobre cinza, branco sobre uma foto cheia de detalhes. O nível AA do WCAG pede uma razão de contraste de pelo menos 4,5:1 para texto normal (3:1 para títulos grandes). Uma regra prática: se você aperta os olhos e o texto some, ele reprova.
Correções práticas:
- Confira sua paleta uma vez. Verificadores de contraste gratuitos (como o do WebAIM, em webaim.org) recebem duas cores e dão aprovado ou reprovado. Teste o texto do corpo, os botões e as cores dos links contra os respectivos fundos.
- As cores do clube ficam nos detalhes, não no texto corrido. Mantenha os parágrafos escuros sobre fundo claro (ou claros sobre fundo escuro, com contraste de verdade) e deixe o dourado do clube em faixas, bordas e botões que passem no teste de contraste.
- Texto sobre foto precisa de ajuda: uma sobreposição escura ou um painel sólido atrás dele, e não texto branco flutuando sobre uma foto da torcida.
- Nunca use só a cor para transmitir significado. "Jogos em vermelho foram cancelados" não funciona para visitantes daltônicos (cerca de 8% dos homens); escreva também a palavra "Cancelado".
Um sistema de temas faz o trabalho pesado aqui: defina uma paleta acessível uma vez nas configurações de tema e identidade visual e todas as páginas a herdam, em vez de você decidir as cores de novo em cada faixa.
No ClubHelix, o tema também se recusa a salvar texto do corpo com contraste abaixo de 4,5:1 em relação ao fundo da página, então a falha mais comum não chega ao seu site por acidente. Títulos e texto do corpo podem ter um tamanho mínimo e um máximo, para se ajustarem entre o celular e o computador. Seja qual for a unidade que você digitar, os tamanhos são servidos em rem, então o texto continua seguindo o tamanho de fonte que o próprio visitante definiu no navegador.
Títulos e estrutura: o esqueleto que os leitores de tela percorrem
Quem enxerga passa os olhos pela página guiado pelo layout visual; quem usa leitor de tela passa pela estrutura de títulos, pulando de um título para o outro. Isso só funciona quando os títulos são títulos de verdade, usados em ordem:
- Use os estilos de título do editor (Título 2, Título 3), não texto comum em negrito e maior. Títulos de verdade são anunciados e navegáveis; texto em negrito é só negrito.
- Mantenha uma ordem lógica. Um título de página, depois H2 para as seções principais e H3 abaixo deles. Não escolha um nível de título porque gostou do tamanho: é para isso que servem os temas.
- Escreva títulos e textos de link descritivos. "Horários de treino" é melhor que "Mais informações", e um link que diz como criar o site do seu clube é melhor que um que diz "clique aqui". Leitores de tela costumam listar os links de uma página fora de contexto, e seis "clique aqui" não significam nada.
- Prefira texto e listas de verdade a blocos de texto centralizado em itálico ou conteúdo trancado em PDFs. Se precisar ser um PDF (um estatuto, por exemplo), resuma os pontos principais também na página.
Formulários: rótulos, erros e acesso pelo teclado
Os formulários de inscrição e de contato são onde as falhas de acessibilidade realmente custam sócios ao seu clube. O essencial:
- Todo campo precisa de um rótulo visível, e não apenas de um texto de exemplo que some quando você clica. O texto de exemplo também atrapalha pessoas com dificuldades de memória ou de atenção, que perdem a noção do que o campo preenchido pela metade estava pedindo.
- Indique os campos obrigatórios com palavras, não só com cor ou com um asterisco sem explicação.
- As mensagens de erro precisam dizer o que está errado e onde. "Algo deu errado" deixa a pessoa perdida; "Informe um número de telefone no campo Contato de emergência" resolve.
- O formulário inteiro precisa funcionar pelo teclado: navegar entre os campos com Tab e enviar com Enter. Isso vem de graça com ferramentas de formulário bem construídas e quebra com widgets incorporados copiados e colados, então teste: guarde o mouse e tente preencher o seu próprio formulário de inscrição.
Se os seus formulários forem criados no próprio criador de formulários da plataforma do seu site, e não em um widget de terceiros incorporado, rótulos, ordem de navegação pelo teclado e tratamento de erros são resolvidos de forma consistente. É uma coisa a menos para um voluntário acertar na mão.
Legendas, vídeo e todo o resto
- Coloque legendas nos seus vídeos. Melhores momentos dos jogos, discursos na festa de premiação, vídeos de treino: as legendas atendem sócios surdos e com deficiência auditiva, além de todo mundo que assiste sem som no ônibus. As legendas automáticas das grandes plataformas de vídeo são um bom começo; revise e corrija os nomes antes de compartilhar.
- Transcrições para áudio. Se o seu clube grava um podcast ou avisos em áudio, publique também a versão em texto.
- Movimento e piscadas. Evite vídeos que tocam sozinhos com som e nunca publique conteúdo que pisca rapidamente: é um risco de convulsão, e o WCAG proíbe mais de três piscadas por segundo.
- Linguagem simples em tudo. Frases curtas, sem jargão e com as siglas por extenso na primeira vez ("Assembleia Geral Ordinária (AGO)"). Acessibilidade e boa escrita são o mesmo trabalho. Nosso guia de ideias de conteúdo para o site do clube também serve como checklist de linguagem simples.
Uma auditoria de acessibilidade de 15 minutos no site do clube
Faça esta verificação na sua página inicial, na página de jogos ou eventos e no seu formulário de inscrição:
| Verificação | Como testar | Como é a aprovação |
|---|---|---|
| Texto alternativo | Revise o campo alt de cada imagem | Toda imagem com significado está descrita |
| Contraste | Passe as cores do cabeçalho, do corpo e dos botões no verificador | 4,5:1 ou mais para o texto do corpo |
| Títulos | Veja a estrutura de títulos da página | Um título, ordem lógica de H2/H3 |
| Teclado | Desconecte o mouse; navegue pela página e pelo formulário com Tab | Tudo alcançável, com o foco visível |
| Links | Leia só o texto dos links | Cada link faz sentido fora do contexto |
| Zoom | Aumente o zoom do navegador para 200% | Nenhum conteúdo perdido ou texto sobreposto |
| Significado das cores | Procure sinais transmitidos só pela cor | Palavras reforçam cada indicação de cor |
| Vídeo | Abra o seu vídeo mais recente | Legendas presentes e razoavelmente corretas |
Marque a auditoria no calendário do clube uma vez por temporada: a acessibilidade se perde à medida que voluntários adicionam páginas, e uma revisão regular pega os problemas cedo.
Se você prefere começar de uma base que já é acessível, os modelos do ClubHelix já vêm com paletas de contraste verificado, estrutura de títulos correta, formulários com rótulos e navegação pelo teclado. Além disso, rodamos verificações automáticas de acessibilidade nos nossos modelos como parte do nosso processo de engenharia (veja como tratamos qualidade e segurança na nossa página de segurança). O seu trabalho se resume aos hábitos de conteúdo acima: texto alternativo, linguagem simples e títulos bem pensados. Você pode começar grátis e herdar o resto.
Perguntas frequentes
Meu clube é obrigado por lei a cumprir o WCAG?
Em muitos países, as leis contra a discriminação de pessoas com deficiência se aplicam de forma ampla a serviços oferecidos ao público, mas clubes comunitários normalmente não passam por auditorias como os sites de governo. Trate o nível AA do WCAG como o padrão certo porque ele atende os seus sócios, com a tranquilidade jurídica como benefício adicional, e confira a orientação do órgão responsável pelos direitos das pessoas com deficiência no seu país para os detalhes.
Qual é a maior melhoria de acessibilidade para o site de um clube?
Arrume o seu texto: títulos de verdade e em ordem, cores escuras o bastante, links descritivos e informações publicadas como texto, e não dentro de cartazes em imagem. Essa revisão única ajuda ao mesmo tempo quem usa leitor de tela, os sócios mais velhos, quem usa o celular no sol e o seu posicionamento nas buscas.
Preciso contratar um especialista ou comprar ferramentas?
Não para o site de um clube. Verificadores de contraste gratuitos, o zoom do navegador e o teste só com teclado cobrem a maior parte do terreno prático do WCAG, e um modelo acessível cuida da camada técnica por baixo.
O que é texto alternativo e quando devo deixá-lo vazio?
Texto alternativo é a descrição curta que o leitor de tela fala no lugar de uma imagem. Escreva-o para toda imagem que carrega significado (fotos, cartazes, logos de patrocinadores) e deixe-o vazio de propósito nas imagens puramente decorativas, para que os leitores de tela passem direto por elas.
