Code Monkey home page Code Monkey logo

projeto-alura-acessibilidade-web's Introduction

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

Captura de Tela (207)

Links

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

Considerações Finais

Autor

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.

projeto-alura-acessibilidade-web's People

Contributors

beatrizslan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.