Técnicas para as WCAG 2.0

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

-

SCR36: Fornecer um mecanismo para permitir aos utilizadores apresentar texto em movimento, em deslocamento ou em actualização automática numa janela ou área estáticas

Aplicabilidade

Qualquer tecnologia que mova, coloque em modo intermitente ou actualize texto e possa criar um bloco de texto estático.

Esta técnica está relacionada com:

Descrição

Algumas páginas Web apresentam texto em deslocamento porque o espaço disponível é limitado. Deslocar o texto numa pequena janela de texto disponibiliza o conteúdo para os utilizadores que conseguem ler rapidamente, mas origina problemas para os utilizadores que lêem mais lentamente ou utilizam tecnologias de apoio. Esta técnica fornece um mecanismo para parar o movimento e tornar todo o bloco de texto disponível de forma estática. O texto pode ser disponibilizado numa janela separada ou numa secção (maior) da página. Assim os utilizadores podem ler o texto à velocidade desejada.

Esta técnica não se aplica quando o texto que está em movimento não pode ser apresentado todo de uma vez no ecrã (por ex., uma longa conversa num chat).

Nota: Esta técnica pode ser utilizada em conjunto com uma técnica de mudança de estilo para apresentar uma página que seja uma versão alternativa em conformidade para conteúdo que não esteja em conformidade. Para mais informações, consulte C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade (CSS) e Noções sobre Versões Alternativas em Conformidade .

Exemplos

Exemplo 1: Expandir Texto em Deslocamento no Local

Um grande bloco de texto é deslocado através de uma pequena área da página. Um botão permite ao utilizador parar o deslocamento e visualizar todo o bloco de texto.

Nota: Este código exemplo requer que CSS e JavaScript estejam activados e disponíveis.

O componente CSS:

Código Exemplo:

#scrollContainer {
        visibility: visible;
        overflow: hidden;
        top: 50px; left: 10px;
        background-color: darkblue;
      }
      .scrolling {
        position: absolute;
        width: 200px;
        height: 50px;
      }
      .notscrolling {
        width: 500px;
        margin:10px;
      }
      #scrollingText {
        top: 0px;
        color: white;
      }
      .scrolling #scrollingText {
        position: absolute;
      }
      </a> 

O script e o conteúdo HTML:

Código Exemplo:

<script type="text/javascript">

      var tid;
      function init() {
        var st = document.getElementById('scrollingText');
        st.style.top = '0px';
        initScrolling();
      }
      function initScrolling () {
        tid = setInterval('scrollText()', 300);
      }
      function scrollText () {
        var st = document.getElementById('scrollingText');
        if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
          st.style.top = (parseInt(st.style.top) - 5) + 'px';
        } else {
          var sc = document.getElementById('scrollContainer');
          st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
        }
      }
      function toggle() {
        var scr = document.getElementById('scrollContainer');
        if (scr.className == 'scrolling') {
          scr.className = 'notscrolling';
          clearInterval(tid);
           document.getElementById('scrollButton').value="Shrink";
        } else {
          scr.className = 'scrolling';
          initScrolling();
          document.getElementById('scrollButton').value="Expand";
        }
      }
  <input type="button" id="scrollButton" value="Expand" onclick="toggle()" />
  <div id="scrollContainer" class="scrolling">
    <div id="scrollingText" class="on">
    .... Text to be scrolled ...
    </div>
  </div>
 ...

Este é um exemplo prático deste código: Expandir Texto em Deslocamento no Local.

Testes

Não existem testes disponíveis para esta técnica.