Guia de estilo/ acessibilidade
Contraste de cores
O contraste deve atender aos padrões em todos os estados.
Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendia vários enim em eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Anean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendia vários enim em eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Anean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Navegação por teclado
Todos os elementos interativos devem ser acessíveis e utilizáveis via teclado.
- Ir para o link principal
- Navegação principal
- Todos os elementos do link
- Vídeos
- Rodapé
Redução de movimento
Respeite as preferências de movimento reduzido.
Considerações sobre o leitor de tela
A estrutura semântica é importante. Desenvolva tecnologia assistiva desde o início.
Abaixo está um exemplo do uso de tags semânticas em todo o site.
1<div class="page-wrapper">
2 <div class="..." role="banner"></div>
3 <div class="...">...</div>
4 <main id="main" class="main">
5 <section id="start" class="...">
6 <div class="...">
7 <div class="container">
8 <h1 class="...">AI & DESIGN VISIONARY</h1>
9 <div class="..."></div>
10 </div>
11 </div>
12 </section>
13 </main>
14</div>