Praticando Angular 19: acessibilidade em formulários

Praticando acessibilidade em formulários Angular - Apresentação

Apresentação e Audiodescrição

Olá! Meu nome é Nayane Batista. Sou uma mulher de pele morena, com olhos e cabelos castanhos escuros, e estou usando uma camisa cor de laranja. Estou aqui para dar as boas-vindas a este curso, que possui um formato diferente.

Audiodescrição: Nayane é uma mulher de pele morena, com olhos e cabelos castanhos escuros. Ela veste uma camisa cor de laranja.

Introdução ao Curso e Projeto Base

Este é um curso superprático e "mão na massa", no qual a pessoa protagonista será você. Utilizaremos como projeto base o Indexa, que é nossa lista de contatos. O desafio será implementar práticas de acessibilidade no formulário do Indexa, que atualmente apresenta vários problemas relacionados a esse tema.

Pré-requisitos e Objetivos

É fundamental lembrar que, para resolver esses desafios, precisamos ter o conhecimento necessário sobre o tema. Como pré-requisitos, é necessário já ter concluído os cursos sobre acessibilidade em HTML e CSS, além do curso sobre acessibilidade no Angular. Utilizaremos toda essa teoria para resolver os desafios e tornar o formulário do Indexa acessível.

Próximos Passos

Esse era o recado que gostaríamos de transmitir. No próximo vídeo, apresentaremos o contexto, como serão os desafios e as ferramentas que utilizaremos. Portanto, acessem o próximo vídeo, preparem o café e, se aceitarem esse desafio, venham conosco mergulhar no Angular!

Nota sobre Snippets de Código

Infelizmente, não há snippets de código fornecidos para serem integrados a esta transcrição. Se houver código relevante em vídeos futuros, ele será incorporado conforme as instruções.

Praticando acessibilidade em formulários Angular - Identificando problemas de acessibilidade em formulários

Estrutura Didática da Transcrição

Introdução ao Projeto

O projeto Indexa é uma lista de contatos com funcionalidades de busca, edição e exclusão de contatos. O foco principal será melhorar a acessibilidade do formulário de adição de contatos.

Identificação de Problemas de Acessibilidade

Navegação com Leitor de Tela:
- O leitor de tela NVDA foi utilizado para identificar problemas de acessibilidade.
- Problemas identificados incluem falta de descrições para botões e campos de formulário, e a ausência de associações entre labels e inputs.
Uso do Lighthouse:
- A extensão Lighthouse foi utilizada para escanear a página e fornecer uma pontuação de acessibilidade.
- A pontuação inicial foi 75, indicando áreas de melhoria.

Problemas Específicos Identificados

Botões sem Descrição: Botões com ícones, como o de cancelar, não possuem descrições acessíveis.
Campos de Formulário: Falta de placeholders e labels associadas, dificultando a navegação por leitores de tela.
Mensagens de Validação: Mensagens de erro e validação não são lidas adequadamente por leitores de tela.

Ferramentas e Diretrizes para Melhorias

WCAG: Diretrizes de acessibilidade para conteúdo web.
NVDA: Ferramenta para testar a navegação com leitores de tela.
Lighthouse: Para auditoria e pontuação de acessibilidade.

Implementação de Melhorias

Adicionar Descrições Acessíveis: Usar atributos aria-label ou aria-labelledby para botões e elementos interativos.
Associar Labels aos Inputs: Garantir que todos os campos de formulário tenham labels associadas.
Melhorar Mensagens de Validação: Assegurar que mensagens de erro sejam lidas por leitores de tela.

Objetivo Final

O objetivo é alcançar uma pontuação de 100 no Lighthouse, garantindo que o formulário seja totalmente acessível e funcional para todos os usuários, incluindo aqueles que dependem de tecnologias assistivas.

Conclusão

A implementação de práticas de acessibilidade não apenas melhora a experiência do usuário, mas também garante que o site seja utilizável por todos. Agora, é sua vez de aplicar essas práticas e transformar o formulário do projeto Indexa em um exemplo de acessibilidade.

Sobre o curso Praticando Angular 19: acessibilidade em formulários

O curso Praticando Angular 19: acessibilidade em formulários possui 17 minutos de vídeos, em um total de 15 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Praticando acessibilidade em formulários Angular

Escolha a duração
do seu plano

Conheça os Planos para Empresas