Técnicas para as WCAG 2.0

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

-

SCR27: Reordenar as secções da página utilizando o Modelo de Objecto de Documento

Aplicabilidade

HTML e XHTML, script.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para reordenar o componente que é altamente utilizável e acessível. Os dois mecanismos mais comuns para reordenar servem para remeter os utilizadores para uma página de configuração, onde podem numerar os componentes, ou permitir aos utilizadores arrastar e largar os componentes no local pretendido. O método arrastar e largar é muito mais utilizável, visto que o utilizador pode organizar os itens no seu lugar, um de cada vez, e ter uma noção do resultado. Infelizmente, a funcionalidade arrastar e largar depende da utilização de um rato. Esta técnica permite aos utilizadores interagir com um menu nos componentes, para ordenar a sua localização de uma forma independente do dispositivo. Pode ser utilizada em vez de, ou em conjunto com, a funcionalidade arrastar e alargar, utilizada para reordenar o conteúdo.

O menu é uma lista de links que utiliza o evento onclick independente do dispositivo para accionar os scripts que reordenam o conteúdo. O conteúdo é reordenado no Modelo de Objecto de Documento (DOM), não apenas visualmente, para que fique na ordem correcta para todos os dispositivos.

Exemplos

Exemplo 1

Este exemplo apresenta a reordenação para cima e para baixo. Esta abordagem pode também ser utilizada para reordenar em duas dimensões, adicionando opções para a esquerda e para a direita.

Os componentes neste exemplo são itens de lista não ordenados. As listas não ordenadas são um modelo semântico muito bom para conjuntos de itens semelhantes, tal como estes componentes. A abordagem do menu pode também ser utilizada para outros tipos de agrupamentos.

Os módulos são itens de lista e cada módulo, para além do conteúdo em elementos div, dispõe de um menu representado como lista encaixada.

Código Exemplo:

<ul id="swapper">
    <li id="black">
        <div class="module">
            <div class="module_header">
                <!-- menu link -->
                <a href="#" onclick="ToggleMenu(event);">menu</a>
                <!-- menu -->
                <ul class="menu">
                    <li><a href="#" onclick="OnMenuClick(event)" 
                        onkeypress="OnMenuKeypress(event);">up</a></li>
                    <li><a href="#" onclick="OnMenuClick(event)" 
                        onkeypress="OnMenuKeypress(event);">down</a></li>
                </ul>
            </div>
            <div class="module_body">
                Text in the black module
            </div>
        </div>
    </li>
    ...
</ul>

Visto termos abordado a apresentação e ocultação de menus nas amostras em árvore simples, focamos aqui apenas o código que troca os módulos. Depois de harmonizar os eventos e cancelar a acção do link predefinida, iniciamos o trabalho. Em primeiro lugar, definimos um conjunto de variáveis locais para os elementos com os quais vamos trabalhar: o menu, o módulo a ser reordenado e o menuLink. Em seguida, depois de verificar a direcção da reordenação, tentamos encontrar o nó para efectuar a troca. Se encontrarmos um, invocamos swapNode() para trocar os nossos dois módulos e PositionElement() para mover o menu absolutamente posicionado juntamente com o módulo e, em seguida, colocamos o foco de novo no item de menu que deu início a toda a acção.

Código Exemplo:

function MoveNode(evt,dir)
{
    HarmonizeEvent(evt);
    evt.preventDefault();

    var src = evt.target;
    var menu = src.parentNode.parentNode;
    var module = menu.parentNode.parentNode.parentNode;
    var menuLink = module.getElementsByTagName("a")[0];
    var swap = null;
    
    switch(dir)
    {
        case 'up':
        {
            swap = module.previousSibling;
            while (swap && swap.nodeType != 1)
            {
                swap = swap.previousSibling;
            }
            break;
        }
        case 'down':
        {
            swap = module.nextSibling;
            while (swap && swap.nodeType != 1)
            {
                swap = swap.nextSibling;
            }
            break;
        }
    }
    if (swap && swap.tagName == node.tagName)
    {
        module.swapNode(swap);
        PositionElement(menu,menuLink,false,true);
    }
    src.focus();
}

O CSS utilizado para a troca de nó não é muito diferente do utilizado para as amostras em árvore anteriores, apresentando alguns ajustes em termos de tamanho e de cor nos módulos e no menu pequeno.

Código Exemplo:

ul#swapper { margin:0px; padding:0px; list-item-style:none; }
ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em; 
    border:1px solid black; }
ul#swapper li a { color:white; text-decoration:none; font-size:90%; }

ul#swapper li div.module_header { text-align:right; padding:0 0.2em; }
ul#swapper li div.module_body { padding:0.2em; }

ul#swapper ul.menu { padding:0; margin:0; list-style:none; background-color:#eeeeee; 
    height:auto; position:absolute; text-align:left; border:1px solid gray; display:none; }
ul#swapper ul.menu li { height:auto; border:none; margin:0; text-align:left; 
    font-weight:normal; width:5em; }
ul#swapper ul.menu li a { text-decoration:none; color:black; padding:0 0.1em; 
    display:block; width:100%; }

Testes

Procedimento

  1. Localize todos os componentes na Unidade da Web que possam ser reordenados através da funcionalidade arrastar e largar.

  2. Verifique se existe também um mecanismo para os reordenar, utilizando conjuntos de menus de listas de links.

  3. Verifique se os menus estão incluídos nos itens reordenáveis no DOM.

  4. Verifique se os scripts utilizados para reordenar são accionados apenas a partir do evento onclick de links.

  5. Verifique se os itens são reordenados no DOM, não apenas visualmente.

Resultados Esperados