O curso Criando uma galeria de fotos acessível é um projeto prático para quem conhece os fundamentos de HTML, CSS e JavaScript e quer transformá-los em uma experiência de navegação completa. Você criará uma exposição local em que miniaturas, imagens em tamanho completo, títulos e descrições permanecem corretamente associados durante a navegação.
Os laboratórios guiados desenvolvem o layout da galeria e o visualizador detalhado passo a passo. Um desafio independente pede que você aplique as mesmas técnicas a outra exposição, com fotografias de títulos iguais, títulos longos e proporções diferentes. Cada laboratório começa com seus próprios arquivos preparados.
O que você aprenderá
Ao concluir o curso, você poderá:
- associar cada ID estável de fotografia à miniatura, à imagem em tamanho completo, ao texto alternativo e à legenda corretos;
- criar uma galeria responsiva com HTML semântico e foco de teclado visível;
- usar o elemento nativo
dialogpara exibir uma fotografia e manter a imagem, o título e a descrição sincronizados durante a navegação; - indicar claramente os limites na primeira e na última fotografia, fechar o visualizador com
Esce devolver o foco ao cartão que o abriu; - exibir uma mensagem compreensível quando uma imagem não carregar, sem substituí-la silenciosamente por outra fotografia, e corrigir um caminho de arquivo incorreto.
Para quem é este curso
Este curso é indicado para quem está pronto para combinar exercícios web individuais em uma exposição fotográfica utilizável.
Pré-requisitos: Familiaridade com elementos HTML, layout básico com CSS e objetos, funções, manipulação do DOM e eventos de JavaScript. Você deve saber abrir e salvar arquivos do projeto. Os laboratórios guiados apresentam a semântica específica da galeria, o comportamento do diálogo nativo e o gerenciamento do foco. Não é necessário conhecer React.
Ambiente de aprendizagem: A LabEx fornece as entradas preparadas WebIDE, Terminal e Gallery, além de imagens locais. No WebIDE, você lê o HTML, CSS e JavaScript existentes, prevê seu comportamento e salva alterações pontuais. No Gallery, observa o site real e testa a interação pelo teclado. Os rótulos da galeria permanecem em inglês.
Perguntas frequentes
Vou escrever o código da galeria?
Sim. Você completa o layout e o comportamento no navegador dentro do projeto preparado e depois usa a galeria criada com o mouse e o teclado.
Preciso enviar fotografias ou instalar um framework?
Não. Os recursos de imagem locais e o ambiente de aprendizagem estão preparados. O projeto usa HTML, CSS e JavaScript do navegador, sem React nem serviço de envio de imagens.
Concluir o curso certifica a acessibilidade?
Não. Você pratica comportamentos específicos de imagens, teclado e foco. Uma avaliação completa de acessibilidade abrange mais do que estes exercícios.
