WDD 231: Desenvolvimento Frontend para Web I

S03 - Atividades de Aprendizagem: Acessibilidade na Web

Visão Geral

Acessibilidade Web significa criar páginas que possam ser usadas por todos, incluindo pessoas que têm dificuldade em visualizar uma tela tradicional ou usar um mouse. Esta atividade de aprendizagem se concentra nos princípios básicos de acessibilidade web e nas ferramentas disponíveis para ajudar a criar sites acessíveis.

Preparação

É importante garantir que a experiência do usuário do seu site funcione bem para todos os seus usuários. Isso inclui garantir que cada imagem contenha texto alternativo apropriado e que haja contraste suficiente entre as cores usadas para que o texto possa ser lido facilmente. Você precisa ter certeza de que os tamanhos das fontes podem ser ajustados, que os controles interativos podem ser navegados usando o teclado e que sua página segue o uso correto de tags HTML, como title, elementos h1-h6, header, nav, main e assim por diante.

O relatório do Lighthouse no DevTools contém uma série de verificações na categoria Acessibilidade para ajudar você a verificar se sua página é acessível. Os seguintes itens são verificados pela categoria Acessibilidade do Lighthouse no DevTools:

• As cores de fundo e de primeiro plano têm uma taxa de contraste suficiente. A taxa de contraste pode ser verificada em detalhes usando o CSS Overview no DevTools ou por meio de uma ferramenta online, como Contrast Ratio (conteúdo em inglês). A taxa de contraste é importante porque ajuda a garantir que o texto e outros conteúdos sejam legíveis.
• Todas as imagens <img> têm conteúdo de atributo alt que descreve com precisão o propósito da imagem. O atributo alt é importante, pois fornece uma alternativa de texto para imagens, o que é essencial quando leitores de tela estão sendo usados ou quando o carregamento de imagens está desativado ou lento.
• Os elementos de título (h1, h2, h3 etc.) estão em ordem hierárquica sequencial. Os títulos dão estrutura semântica ao documento para facilitar a navegação e a compreensão ao usar tecnologias assistivas. Essa estrutura semântica é importante para leitores de tela e outras tecnologias assistivas, pois ajudam os usuários a navegar na página.
• Todos os controles interativos são acessíveis via teclado. Ao usar um teclado, o usuário deve ser capaz de navegar por todos os elementos interativos da página, como links, botões e campos de formulário. Isso é importante para usuários que não usam mouse ou outro dispositivo apontador.
• O documento tem uma ordem de tabulação lógica. A ordem de tabulação é a sequência em que o foco se move quando o usuário pressiona a tecla Tab. Essa ordem deve seguir uma sequência lógica que corresponda ao layout visual da página. Isso é importante para usuários que dependem da navegação pelo teclado para acessar o conteúdo.
• Elementos de marcação simples, como header, aside, footer, nav, main etc., são usados em vez de divs. Mantenha o uso dessa marcação simples e consistente.
• O conteúdo fora da tela é ocultado com display: none ou aria-hidden=true. Conteúdo fora da tela é uma maneira de fornecer informações adicionais sobre o conteúdo sem que ele esteja visível na tela. É importante incluir essas informações para leitores de tela e outras tecnologias assistivas para ajudar os usuários a entender o conteúdo.
• O texto é redimensionável. Todos os usuários devem ser capazes de redimensionar o texto em até 200% sem perda de conteúdo ou funcionalidade.
• O documento tem um elemento title significativo e relevante. O título do documento deve ser descritivo e relevante ao conteúdo da página, para fornecer informações precisas aos usuários e mecanismos de busca.
• A página tem um atributo de idioma lang definido na tag html de abertura. A atribuição do atributo lang é importante para que navegadores e tecnologias assistivas entendam o idioma do conteúdo na página.
• A página tem um favicon. O favicon é uma representação visual da página e ajuda os usuários a identificar rapidamente a página nas abas ou favoritos do navegador.
• Todos os elementos de formulários têm rótulos vinculados a eles. Os rótulos de formulário são essenciais para fornecer contexto explícito para os controles de formulário e para criar uma área clicável para os usuários selecionarem o controle.
• As tabelas têm cabeçalhos. A maioria das tabelas que apresentam dados deve usar elementos <th> para identificar as células de cabeçalho para que usuários de tecnologias assistivas entendam o conteúdo da tabela.
• O vídeo e o áudio têm legendas para dar suporte à alternativa de texto para conteúdo de áudio e vídeo para os usuários que precisam.

Instruções da Atividade

Use o Lighthouse no DevTools para executar uma auditoria de acessibilidade de todas as suas páginas. Ele apresentará uma lista de problemas de acessibilidade e indicará sugestões de melhorias. Você já deve saber como usar esta ferramenta como parte do seu fluxo de trabalho normal de testes e implantação, portanto, não há nenhuma atividade adicional a ser concluída.