Alura - Solução do Projeto de Acessibilidade Web da Apeperia

Codificação da parte de acessibilidade de um projeto disponibilizado durante o curso de Front-end da Alura.

Indíce

Visão Geral

Desafio | Screenshot | Links

Meu Processo

Construído com | O que eu aprendi | Recursos úteis

Considerações Finais

Autor | Agradecimentos

Visão Geral

Desafio

O desafio foi construir a parte de acessibilidade web deste projeto. Todo os usuários devem ser capazes de:

• Ter uma ótima experiência de navegação pelo site;
• Navegar por um site totalmente acessível para todas as pessoas.

Screenshot

Links

• URL da solução: Index
• URL do site: Site

Meu processo

Construído com

• HTML5 com tags semânticas;
• CSS pensado na acessibilidade;
• Proprieadades de acessibilidade web.

O que eu aprendi

• Instalar e utilizar o leitor de tela NVDA;
• Utilizar os atributos lang, alt, role e aria;
• Fazer um formulário acessível usando label e placeholder;
• Colocar uma legenda em vídeo com a tag track;
• Fazer campos desabilitados com readonly.

<a href="http://blog.apeperia.com.br/design/conheca-primeiras-etapas-criacao-logotipo-teste-teste" class="secaoDestaques-link" aria-labelledby="tituloDestaque1">
  <figure class="secaoDestaques-destaque">
    <img src="img/comecando-criar-logotipo.png" class="secaoDestaques-destaque-img" alt="Ferramentas de designer. Ilustração">
    <figcaption class="secaoDestaques-destaque-titulo"  id="tituloDestaque1">
      Conheça as primeiras etapas na criação de um logotipo
    </figcaption>
  </figure>
</a>
        
<label for="endereco">Endereço: </label>
<input type="text" id="endereco" class="contatoCampo-campoDesabilitado" readonly>

<video src="img/formacao-java.mp4" class="secaoInstitucional-video" controls>
  <track src="img/legenda-portugues-brasil.vtt" kind="subtitles" srclang="pt-br" label="Português (Brasil)">
</video>

Recursos úteis

• WCAG - Diretrizes de Acessibilidade para Conteúdo Web - Este é um guia incrível que me ajudou a entender melhor sobre quais são as diretrizes de acessibilidade para web.
• Atalhos do leitor de tela NVDA - Este é um outro guia muito importante para eu conhecer melhor sobre a ferramenta e os atalhos do NVDA.

Considerações Finais

Autor

• Website - Beatriz Slan | Alura
• Linkedin - in/beatriz-slan

Agradecimentos

Gostaria de agradecer a toda equipe envolvida da Instituição Alura, pela excelente didática, plataforma de ensino e por disponibilizar projetos reais e profissionais que me ajudam muito a praticar e aprimorar todo meu conhecimento deste mundo incrível do Front-end.