Topo da página.
  • Ir para o conteúdo 1
  • Ir para o índice 2
  • Alto Contraste
Logotipo Lupadigital - Uma lupa sobre a palavra Lupa, com as letras up ampliadas.

Lupa digital

Cartilha de Acessibilidade

Menu Serviço

  • Início
  • Agradecimentos
  • Contato

Índice

  • 00. Nota do Autor
  • 01. Introdução
  • 02. Sobre a cartilha
  • 03. Diretriz WCAG
  • 04. Declaração de documento
  • 05. Estrutra de páginas
  • 06. Frames
  • 07. Imagens
  • 08. Textos e Links
  • 09. Tabelas
  • 10. Teclas de atalho
  • 11. Formulários
  • 12. Scripts e eventos
  • 13. Utilizando Cores
  • 14. Tecnologia Flash
  • 15. Avaliadores
  • 16. Leitor de tela / Tradutor de Libras
  • 17. Regras básicas
  • 18. Leis e decretos
  • 19. Testes
  • 20. Linguagem simples

Anexos

  • 21. NVDA
  • 22. Teclas do Windows
  • 23. Outras páginas
  • 24. Todos@Web
  • 25. VLIBRAS

12. Scripts e eventos

12.1 Scripts

A utilização de Javascript não é proibida desde que o mesmo não seja obstrutivo e permita completar a ação mesmo sem o Javascript.

O que seria um javascript obstrutivo?

Um exemplo é um menu de opções em que o item do menu abre um submenu popup mas o mesmo só é acionado ao passar o mouse sobre item. Sem o mouse e o "mouse over" a funcionalidade de abrir o submenu não estará presente.

12.2 Eventos do Mouse

Utilize tratamentos redundantes nos eventos do mouse.

Certifique-se de que todo evento ativado através do mouse possua um tratamento redundante, permitindo também sua ativação através do teclado.

Use "onmousedown" com "onkeydown".

Use "onmouseup" com "onkeyup"

Use "onclick" com "onkeypress"

Use "onmouseover" com "onfocus"

Use "onmouseout" com "onblur"

12.3 ARIA (Accessible Rich Internet Applications)

ARIA é um conjunto de elementos e atributos especiais para a acessibilidade que pode ser adicionado ao HTML alterando e aumentando a árvore de acessibilidade do DOM.

Os 3 principais Componentes ARIA são roles (funções/papéis), properties (propriedades) e states (estados).

"Roles" definem o que um elemento é ou faz;

"Properties" definem semânticas adicionais não suportadas no HTML padrão.

"States" são atributos que definem a condição atual de um elemento.

É importante entender que ARIA não deve ser usado para mudar a semântica do HTML, um elemento HTML padrão <input type="checkbox"> não precisa de um atributo ARIA adicional role="checkbox" para ser anunciado corretamente.

Um exemplo consistente de aplicação de ARIA é em um menu popup que inicialmente se apresenta fechado aria-expanded=false e ao ser selecionado item o menu será expandido aria-expadend=true

Pra saber mais sobre ARIA, acesse:

  • https://www.w3.org/TR/wai-aria/(Link externo)
  • https://desenvolvimentoparaweb.com/miscelanea/aria-acessibilidade-web-a11y/#content(Link externo)

Mudança de páginas

  • 11. Formulários
  • 13. Utilizando Cores

Compartilhe!

Todos@Web

Prêmio Nacional de Acessibilidade na Web - A Lupa Digital - Cartilha de Acessibilidade, recebeu o 3°  lugar no prêmio Todos@Web 2012(Link externo) na categoria Projetos Web - Entretenimento / Cultura / Educação / Blogs.

© 2002 Lupa Digital

A primeira cartilha nacional sobre Acessibilidade - Publicada em 07/08/2002 - Fundação Biblioteca Nacional / Ministério Da Cultura / Escritório de Direitos Autorais, No. Registro: 265.225 Livro: 475 Folha: 385. Todos os direitos reservados ao autor (Fabio A. B. Gameleira)

TOPO