Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

SCR28: Utilizar um menu expansível para ignorar blocos de conteúdo

Aplicabilidade

Tecnologias que forneçam scripting do lado do cliente.

Esta técnica está relacionada com:

Descrição

Esta técnica permite aos utilizadores ignorar material repetido, colocando esse material num menu que pode ser expandido ou fechado mediante o controlo do utilizador. O utilizador pode ignorar o material repetido fechando o menu. O utilizador invoca um controlo da interface de utilizador para ocultar ou remover os elementos do menu. A secção Recursos apresenta várias técnicas para menus, barras de ferramentas e árvores, que podem ser utilizadas para fornecer um mecanismo para ignorar a navegação.

Nota: Abordagens semelhantes podem ser implementadas utilizando scripting do lado do servidor e carregando de novo uma versão modificada da página Web.

Exemplos

Exemplo 1

Os links de navegação no topo da página Web são entradas num menu, implementadas utilizando HTML, CSS e Javascript. Quando a barra de navegação é expandida, os links de navegação ficam disponíveis ao utilizador. Quando a barra de navegação é fechada, os links não ficam disponíveis.

Código Exemplo:

...

  <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

 ...

  <a href="#" onclick="toggle("navbar")">Toggle Navigation Bar</a>

  <ul> id="navbar">
  <li><a href="http://target1.html">Link 1</a></li>
  <li><a href="http://target2.html">Link 2</a></li>
  <li><a href="http://target3.html">Link 3</a></li>
  <li><a href="http://target4.html">Link 4</a></li>
  </ul>

 ...

Este é um exemplo prático deste código: Alternar a barra de navegação utilizando um link .

Exemplo 2

O índice para um conjunto de páginas Web é repetido no início de cada página Web. Um botão no início do índice permite ao utilizador remover ou restaurar o índice na página.

Código Exemplo:

...

   <script type="text/javascript">
  function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
  }
  </script>

  ...

  <button onclick="return toggle('toc');">Toggle Table of Contents</button>
  <div id="toc">
    ...
  </div>

 ...

Este é um exemplo prático deste código: Alternar o índice utilizando um botão.

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se alguns controlos da interface de utilizador permitem que o conteúdo repetido seja expandido ou fechado.

  2. Verifique se quando o conteúdo é expandido, faz parte do conteúdo determinado de forma programática num local lógico na ordem de leitura.

  3. Verifique se quando o conteúdo é fechado, não faz parte do conteúdo determinado de forma programática.

Resultados Esperados