Projeto a11y
IMPORTANTE - Quaisquer estilos usados nos exemplos abaixo são puramente estéticos e não afetam a acessibilidade dos componentes abaixo.Este pequeno projeto visa gerar código totalmente semântico e acessível para todas as suas necessidades de HTML. Verifique o índice à direita pelo elemento específico que você gostaria de gerar, selecione as opções apropriadas, copie o código gerado e cole em seu projeto. Lembre-se de que essas alterações não garantem que seu projeto seja totalmente acessível porem são de grande ajuda em melhorar a acessibilidade do seu site.
Não exijo nenhuma atribuição pelo uso de qualquer código gerado aqui, porém, se você quiser ajudar este programador a obter mais visibilidade, criar um link em seu site direcionando à esta página é mais que suficiente! Divirta-se!
Controles
Selecione as opções abaixo que melhor descrevem as suas necessidades
Resumo:
O controle foi marcado como sendo usado para redirecionamento ou como âncora. Sendo assim, o controle mais adequado para este caso é um link, declarado através de uma tag a
Seja um botão ou um link, atualize seu CSS para garantir que seu elemento tenha um estado de foco visível (ou seja, um contorno em foco ou um sublinhado em foco/ao passar o mouse sobre o elemento). Isso é particularmente útil para identificar nossa localização na página durante a navegação com a tecla 'Tab'
Formulários
Selecione as opções abaixo que melhor descrevem as suas necessidades
Resumo:
Existem algumas etapas que devemos seguir para garantir que nossos formulários sejam totalmente acessíveis:
1) Sempre rotular as entradas do formulário usando label
2) Especifique o tipo de entrada para todas as entradas usando o atributo type
3) Use o atributo autocomplete quando apropriado
4) Destaque os elementos de entrada em foco
Imagens
Selecione as opções abaixo que melhor descrevem as suas necessidades
Resumo:
A imagem não foi marcada como sendo meramente decorativa ou necessitando de legenda visível. Como tal, você deve fornecer uma alternativa em texto para estar em conformidade com as práticas de acessibilidade.
Listas
Selecione a opção abaixo que melhor descreve as suas necessidades
Resumo:
As listas são bastante diretas quando se trata de acessibilidade. Apenas certifique-se de usar HTML semântico selecionando as tags HTML apropriadas.
No caso de listas ordenadas ou não ordenadas, certifique-se também de que qualquer conteúdo dentro do wrapper da lista esteja encapsulado em uma tag li.
Tabelas
Selecione as opções abaixo que melhor descrevem as suas necessidades
Resumo:
As tabelas são alguns dos componentes mais fáceis de tornar acessíveis, se você seguir o HTML semântico apropriado. Sempre use table, thead, tbody e tfoot para criar suas tabelas.
Como você marcou sua tabela como tendo um cabeçalho, adicionamos um thead à nossa tabela e declaramos cada cabeçalho de coluna dentro dela usando tags th. Também especificamos o atributo scope="col" para remover qualquer ambiguidade quanto à finalidade de cada tag.
Sempre verifique sua tabela para ter certeza de que th e td estão na ordem correta nas linhas da tabela. Especialmente ao lidar com linhas com cabeçalhos deslocados, é importante alinhar essas tags para evitar qualquer ambiguidade não intencional.
Outros
Esta seção é para outros pequenos detalhes que você deve considerar ao desenvolver seus aplicativos da web.
Animação
- Use animações sutis. Certas animações com muitos efeitos intermitentes ou estroboscópicos podem desencadear convulsões ou simplemente pertubar indivíduos com deficiências cognitivas, como TDAH.
- Respeite o media query para prefers-reduced-motion. Remova animações do seu site quando a configuração "reduce motion" estiver ativada. Para animações que ajudam a fornecer significado a um assunto e, portanto, são necessárias, diminua sua duração.
Layout
- Use o atributo lang no elemento
html para que a tecnologia assistiva esteja ciente e possa usar a pronúncia correta. - Dê a todas as suas páginas um title exclusivo para que a tecnologia assistiva possa informar adequadamente o usuário sobre a página que ele irá navegar.
- Não desative o zoom da janela de visualização, pois os usuários podem precisar aumentar o tamanho do texto para maior legibilidade.
- Use elementos semânticos para seções importantes da sua página. Isso inclui aside, footer, header, main, nav, e section.
- Os 'headings' transmitem estrutura e não são meramente visuais. Use apenas um h1 por página, mantenha a ordem lógica e nunca pule os níveis, por exemplo usar um h3 antes da presença de um h2 (qualquer finalidade visual para pular um nível deve ser abordada por meio de CSS).
Mídia
- Certifique-se de que nenhuma mídia seja reproduzida automaticamente. Se você precisar que a mídia seja reproduzida automaticamente, ela deverá estar silenciada por padrão.
- Forneça controles. Os usuários precisam poder pausar a mídia em seu site a qualquer momento, especialmente videos de fundo, que podem distrair o usuário de qualquer conteúdo que posssa estar sobre eles.
- Forneça legendas para seus vídeos e transcrições de áudio para que os usuários que não conseguem ouvir o áudio ainda possam acessar o material.
- Remova os gatilhos de convulsão. Você pode ler mais sobre os requisitos específicos aqui
Dispositivos móveis e de toque.
- Certifique-se de que seu site funcione nas orientações de paisagem e retrato.
- Certifique-se de que as páginas do seu site não tenham rolagem horizontal.
- Garanta o tamanho adequado para os elementos interativos e espaço suficiente entre os itens interativos para que os usuários tenham uma área de rolagem. Usuários com problemas de controle motor podem ter dificuldade em rolar pelos itens interativos sem espaçamento.