Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Acessibilidade... e eu com isso?
Semelhante a Acessibilidade... e eu com isso? (20)
Último
Último (9)
Acessibilidade... e eu com isso?
- 1. Acessibilidade... E eu com isso?
- 2. Quem sou eu? • Vinicius Cavalcante (@vinicaval) • Dev@Lambda3 • Ama Js <3 • Jogador de Fifa e Rocket League • Pai de 3 gatos
- 3. Agenda • O que é acessibilidade? • Legislação • Tipos • WCAG e WAI-ARIA • E a semântica? • Ferramentas • #PartiuExercicio • Dúvidas?
- 4. O que é acessibilidade? Decreto Federal n° 5.296/2004 [1], em seu artigo 8°, I, estabelece: “I – acessibilidade: condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa portadora de deficiência ou com mobilidade reduzida;”
- 5. Legislação LEI Nº 13.146, DE 6 DE JULHO DE 2015. Institui a Lei Brasileira de Inclusão da Pessoa com Deficiência (Estatuto da Pessoa com Deficiência). CAPÍTULO II DO ACESSO À INFORMAÇÃO E À COMUNICAÇÃO Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
- 7. Tipos • Motora • Visual(Daltonismo, baixa visão) • Auditiva • Cognitiva
- 8. Diretrizes de acessibilidade para conteúdo web
- 9. Princípios do WCAG • Perceptível • Operável • Compreensível • Robusto
- 10. WAI-ARIA
- 11. WAI-ARIA Técnicas para elementos interativos e seus comportamentos e estados. Função: Estender a semântica de elementos HTML para fornecer informações adicionais sobre o estado e as propriedades destes elementos
- 13. WAI-ARIA – states/properties Aria-autocomplete Aria-checked Aria-multiline Aria-hidden Aria-controls
- 14. WCAG/WAI-ARIA WCAG – Semântica do HTML para deixar o conteúdo acessível ARIA – Atributos que melhoram a semâtica para deixar o conteúdo acessível
- 15. E a semântica?
- 16. E a semântica? • Links autoexplicativos • Evitar links “clique aqui”
- 17. E a semântica?
- 18. E a semântica? Definir a linguagem do conteúdo da página na tag html <html lang=”pt-br”>
- 19. E a semântica? Ter um h1 na página declarando o título da página <h1>Sobre nós</h1> <h1>Contato</h1> <h1>Notícias</h1>
- 20. E a semântica? Não usar h3 se não tiver um h2
- 21. E a semântica? Não use tags de cabeçalho em conteúdo que não seja título errado: <div class=”aviso”> <h6>Em breve anunciaremos a nova versão do produto</h6> </div> certo: <div class=”aviso”> <p>Em breve anunciaremos a nova versão do produto</p> </div>
- 22. E a semântica? Todo form deve ter um label correspondente <label for=”usuario”>Usuário</label> <input type=”text” name=”usuario” required />
- 23. E a semântica? Alt de imagens deve ser descritivo:
- 26. #PartiuExercicio Lembram do site que começaram a fazer baseado no SpaceJam? Implementem lá os conceitos apresentados aqui
- 27. Perguntas?