Curso Formulários Acessíveis - Aula 06: Exibir e Ocultar Senha

Para fechar o nosso projeto com chave de ouro, vamos implementar uma das funcionalidades de usabilidade (UX) mais requisitadas na web: o botão de exibir e ocultar senha (o famoso "olhinho"). Nesta última aula, você vai aprender a criar esse recurso do zero, manipulando ícones, alternando estados no JavaScript e, o mais importante, garantindo que toda essa interatividade seja 100% compreensível para usuários que dependem de leitores de tela. 🚀 O que você vai dominar nesta aula: Estrutura e Ícones: Como ajustar o HTML e usar tanto emojis quanto imagens SVG para criar o conteúdo visual do botão. Acessibilidade Aplicada: O uso fundamental de atributos como aria-label, a alternância de estado com aria-pressed no botão e a aplicação de aria-hidden para ocultar os ícones dos leitores de tela. Lógica de Alternância com JS: Como programar os recursos para mudar o tipo do campo e alternar os estados e ícones dinamicamente com JavaScript. 📌 Capítulos da Aula: 00:00:00 Sobre o recurso de exibir e ocultar senha 00:01:46 Ajustando o HTML para o botão de exibir-ocultar senha 00:04:15 Usando emojis como conteúdo do botão 00:11:14 Usando imagens SVG como conteúdo do botão 00:23:19 Estilizando o botão, seus ícones e o campo senha 00:35:51 Usando aria-label e aria-pressed para acessibilidade do botão ocultar-exibir senha 00:39:23 Definindo regras CSS para os estados do botão 00:44:33 Adicionando aria-hidden aos ícones do botão 00:46:17 Programando os recursos para exibir ou ocultar a senha 00:59:17 Programando a alternância de estados e ícones do botão 01:06:25 Resumo e encerramento 📂 Veja a versão finalizada acessando o repositório: https://github.com/otiagohub/form-val... 🎓 Quer aprender mais comigo? Conheça meus outros cursos completos na Udemy acessando: https://tiagohub.com 🥜 Pague uma paçoca para o professor! Se o conteúdo ajudou no seu aprendizado, considere apoiar o canal com qualquer valor via Pix: [email protected] Qualquer quantia é super bem-vinda e me motiva a continuar ensinando! #InterfaceDoUsuario #AcessibilidadeWeb #JavaScript #UX #TiagoHub