Técnicas para as WCAG 2.0

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

Técnicas HTML e XHTML para as WCAG 2.0

Esta página Web lista as Técnicas HTML e XHTML de Técnicas para as WCAG 2.0: Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0. Para informação sobre as técnicas, consulte Introdução às Técnicas para as WCAG 2.0. Para uma lista das técnicas utilizadas em outras tecnologias, consulte o Índice.


Índice



H2: Combinar a imagem adjacente e os links de texto para o mesmo recurso

Aplicabilidade

Documentos HTML e XHTML que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar a duplicação desnecessária que ocorre quando um documento inclui texto adjacente e versões com ícone de um link.

Muitos tipos de links têm um texto e um link com ícone juntos um do outro. É frequente o texto e o link com ícone serem apresentados em links separados, em parte para criar uma ligeira separação visual entre si. Visualmente, aparentam ser o mesmo link, mas são encarados por muitas pessoas como sendo dois links idênticos e isso pode ser confuso. Para evitar esta situação, alguns autores omitem o texto alternativo da imagem, falhando assim o cumprimento do Critério de Sucesso 1.1.1, uma vez que a alternativa em texto não irá servir a mesma funcionalidade do link gráfico. O método preferencial para abordar esta situação é juntar o texto e a imagem num link, e fornecer texto alternativo nulo na imagem para eliminar a duplicação do texto.

Por vezes, o texto e o link de ícone são apresentados em células de tabelas adjacentes e separadas para facilitar o esquema da página. Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos table HTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Se for utilizado CSS, esta técnica pode ser aplicada para combinar os links.

Exemplos

Exemplo 1

O ícone e o texto estão incluídos no mesmo elemento a .

Código Exemplo:

                                                   <a href="products.html">
   <img src="icon.gif" alt="" />
   Products page
 </a> 

Exemplo 2

Um link inclui um ícone e texto, e a ajuda do sítio da Web faz referência ao ícone. O elemento img tem uma alternativa em texto que corresponde ao nome utilizado para o ícone na ajuda do sítio da Web, que descreve como clicar no ícone da página inicial.

Código Exemplo:

<a href="foo.htm">
  <img src="house.gif" alt="home page icon"/>
  Go to the home page
</a> 

Exemplo de Falha 3

Este exemplo demonstra uma falha na aplicação desta técnica. Um ícone e um link de texto estão lado a lado. A alternativa em texto para a imagem é igual ao link de texto adjacente, originando um efeito "stutter" (de gaguez), uma vez que o link é lido duas vezes.

Código Exemplo:

<a href="products.html">
   <img src="icon.gif" alt="Products page" />
 </a>
 <a href="products.html">
   Products page
 </a> 

Exemplo de Falha 4

Este exemplo demonstra uma falha na aplicação desta técnica. Um ícone e um link de texto estão lado a lado. Numa tentativa de remover o efeito "stutter", a alternativa em texto para a imagem fica nula. Contudo, agora um dos links tem um destino desconhecido, resultando no seu próprio problema de texto do link.

Código Exemplo:

<a href="products.html">
   <img src="icon.gif" alt="" />
 </a>
 <a href="products.html">
   Products page
 </a> 

Exemplo de Falha 5

Este exemplo demonstra uma implementação incorrecta desta técnica. O ícone e o texto estão incluídos no mesmo elemento a. Contudo, a alternativa em texto para o ícone é um duplicado do texto do link, originando um efeito "stutter", uma vez que a descrição é lida duas vezes.

Código Exemplo:

<a href="products.html">
  <img src="products.gif" alt="Products page"/>
  Products page
</a> 

Recursos

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

Testes

Procedimento

Para cada a no conteúdo que inclua um elemento img :

  1. Verifique se não existe nenhum elemento a adjacente que tenha o mesmo atributo href e a mesma descrição.

Para cada a no conteúdo incluído numa tabela:

  1. Verifique se não existe nenhum elemento a numa célula de tabela adjacente que tenha o mesmo atributo href e a mesma descrição.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H4: Criar uma ordem de tabulação lógica através de links, controlos de formulário e objectos

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma ordem de tabulação lógica quando a ordem de tabulação predefinida não é suficiente. Muitas vezes, é suficiente G59: Colocar os elementos interactivos numa ordem que siga as sequências e relações existentes no conteúdo e esta técnica não é necessária. Pode ser muito fácil introduzir bugs de utilização ao definir a ordem de tabulação explicitamente.

Em alguns casos, o autor pode pretender especificar uma ordem de tabulação que siga as relações existentes no conteúdo sem seguir a ordem dos elementos interactivos no código. Nestes casos, é possível especificar uma ordem alternativa utilizando o atributo tabindex do elemento interactivo. É atribuído um valor ao tabindex entre 0 e 32767.

Quando o utilizador navega nos elementos interactivos utilizando a tecla de tabulação, os elementos recebem foco por ordem crescente do valor do seu atributo tabindex . Os elementos que têm um valor tabindex superior a zero receberão o foco antes dos elementos sem um tabindex ou um tabindex de 0. Depois de todos os elementos com um tabindex superior a 0 terem recebido foco, os restantes elementos interactivos recebem foco pela ordem em que são apresentados na página Web.

Exemplos

Exemplo 1

Um formulário de procura genealógica procura registos de casamento. O formulário de procura inclui vários campos de entrada para a noiva e para o noivo. O formulário é marcado utilizando uma tabela de dados que inclui campos para o noivo na primeira coluna e campos para a noiva na segunda coluna. A ordem no conteúdo é fila a fila, mas o autor considera ser mais lógico navegar no formulário coluna a coluna. Desta forma, todos os critérios do noivo podem ser preenchidos antes de avançar para os critérios da noiva. Os atributos tabindex dos campos de entrada são utilizados para especificar uma ordem de tabulação que navegue coluna a coluna.

Código Exemplo:

<form action="#" method="post">
 <table summary="the first column contains the search criteria 
  of the groom, the second column the search criteria of 
  of the bride">
 <caption>Search for marriage records</caption>
 <tr>
   <th>Search criteria</th>
   <th>Groom</th>
   <th>Bride</th>
 </tr>
 <tr>
  <th>First name</th>
  <td><input type="text" size="30" value="" name="groomfirst" 
      title="First name of the groom" tabindex="1"></td>
  <td><input type="text" size="30" value="" name="bridefirst" 
       title="First name of the bride" tabindex="4"></td>
 </tr>
 <tr>
  <th>Last name</th>
  <td><input type="text" size="30" value="" name="groomlast" 
      title="Last name of the groom" tabindex="2"></td>
  <td><input type="text" size="30" value="" name="bridelast" 
      title="Last name of the bride" tabindex="5"></td>
 </tr>
 <tr>
  <th>Place of birth</th>
  <td><input type="text" size="30" value="" name="groombirth" 
      title="Place of birth of the groom" tabindex="3"></td>
  <td><input type="text" size="30" value="" name="bridebirth" 
      title="Place of birth of the bride" tabindex="6"></td>
 </tr>
</table>
</form> 

Exemplo 2

Uma página Web inclui um campo de procura no canto superior direito. É atribuído o tabindex="1" ao campo, de modo a ser o primeiro na ordem de tabulação, apesar de não ser o primeiro na ordem do conteúdo.

Exemplo 3

Os valores tabindex não necessitam de ser sequenciais, nem têm de começar por nenhum valor em particular. Os valores não têm de ser exclusivos. A navegação nos elementos que têm valores tabindex idênticos é efectuada pela ordem em que são apresentados na sequência de caracteres. Assim, no exemplo seguinte, a ordem de tabulação é um, dois, três, quatro.

Código Exemplo:

<a href="" tabindex="1">one</a>
 <a href="" tabindex="2">two</a>
 <a href="" tabindex="1">three</a>
 <a href="" tabindex="2">four</a> 

Nas secções do conteúdo em que a ordem de tabulação segue a ordem do conteúdo, pode ser menos propenso a erros atribuir o mesmo valor tabindex a todos os elementos, em vez de especificar um número diferente para cada elemento. Desta forma, é mais fácil reordenar esses elementos ou adicionar novos elementos, mantendo uma ordem de tabulação lógica.

Código Exemplo:

                                                   <a href="xxx" tabindex = "1">First link in list</a>
<a href="xxx" tabindex = "1">Second link in list</a>
<a href="xxx" tabindex = "1">Link that was added long 
  after the original list was created</a>
<a href="xxx" tabindex = "1">Third link in list</a>
  ...
<a href="xxx" tabindex = "1">Twentieth link in list</a> 

Recursos

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

Testes

Procedimento

  1. Verifique se tabindex é utilizado.

  2. Se tabindex for utilizado, verifique se a ordem de tabulação especificada pelos atributos tabindex segue as relações existentes no conteúdo.

Resultados Esperados

  • O passo 2 é verdadeiro.


H24: Fornecer alternativas em texto para os elementos area de mapas de imagens

Aplicabilidade

Documentos HTML e XHTML que incluam elementos area .

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

A especificação HTML 4.01 explica que o texto do atributo alt deve ser apresentado quando o elemento não puder ser apresentado normalmente. Os Agentes de Utilizador irão apresentar o texto do atributo alt quando não são apresentadas imagens. Contudo, actualmente, os Agentes de Utilizador visuais não apresentam o texto do atributo alt para elementos area de mapas de imagens, quando acedidos por teclado ou quando não são apresentadas imagens, e podem cortar os elementos area se o tamanho intrínseco da imagem não for utilizado. Além disso, o texto do atributo alt quando está sob o ponteiro do rato não é apresentado no tamanho de letra ou na combinação de cores definidos no Agente de Utilizador.

O atributo title destina-se a fornecer informações adicionais. Contudo, a implementação actual nos Agentes de Utilizador permite aceder ao atributo title ou alt, mas não a ambos. Normalmente, os Agentes de Utilizador apresentam o texto do atributo title quando o ponteiro do rato é colocado sobre o elemento que contém o atributo title . Por exemplo, o Internet Explorer irá apresentar o texto alt quando este estiver sob o ponteiro do rato se não existir nenhum texto title, o Firefox e o Opera só irão apresentar o texto title quando este estiver sob o ponteiro do rato e não irão utilizar o texto do atributo alt para esta finalidade. Assim, para garantir que o texto do atributo alt está visível quando estiver sob o ponteiro do rato, deve ser utilizado o mesmo texto no atributo title.

Por conseguinte, ao utilizar mapas de imagens, será necessário o seguinte para uma implementação com êxito desta técnica:

  • Garantir que o valor do atributo alt do elemento area é apresentado em resposta ao foco (incluindo o foco do teclado), e que se aplica em situações em que as imagens são e não são carregadas, OU

  • Existir um mecanismo redundante a servir a mesma finalidade dos elementos area na página Web.

Descrição

O objectivo desta técnica é fornecer alternativas em texto que sirvam a mesma finalidade das áreas seleccionáveis de um mapa de imagens. Um mapa de imagens é uma imagem dividida em áreas seleccionáveis definidas por elementos area . Cada área é um link para outra página Web ou outra secção da página Web actual. O atributo alt de cada elemento area serve a mesma finalidade da área seleccionável da imagem.

Exemplos

Exemplo 1

Este exemplo utiliza o atributo alt do elemento area para fornecer texto que descreva a finalidade das áreas do mapa de imagens.

Código Exemplo:

<img src="welcome.gif" usemap="#map1" 
    alt="Areas in the library. Select an area for
more information on that area." /> 
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30"
    href="reference.html" alt="Reference" />
  <area shape="rect" coords="34,34,100,100"
    href="media.html" alt="Audio visual lab" />
</map> 

Recursos

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

Testes

Procedimento

Para cada elemento area existente num mapa de imagens:

  1. Verifique se o elemento area tem um atributo alt .

  2. Verifique se a alternativa em texto especificada pelo atributo alt serve a mesma finalidade que a parte da imagem do mapa de imagens referenciada pelo elemento area do mapa de imagens.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H25: Fornecer um título utilizando o elemento title

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

Todos os documentos HTML e XHTML, incluindo os existentes em frames individuais num conjunto de frames, têm um elemento title na secção head que define, numa frase simples, a finalidade do documento. Isto ajuda os utilizadores a orientarem-se rapidamente no sítio da Web sem terem de procurar informações de orientação no corpo da página.

Tenha em atenção que elemento title (obrigatório), que só aparece uma vez num documento, é diferente do atributo title, que pode ser aplicado a quase todos os elementos HTML e XHTML.

Exemplos

Exemplo 1

Este exemplo define o título de um documento.

Código Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">   
   <head>     
      <title>The World Wide Web Consortium</title>     
   </head>   
   <body>     
      ...   
   </body> 
</html> 

Recursos

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

Testes

Procedimento

  1. Examine o código fonte do documento HTML ou XHTML e verifique se um elemento title não vazio aparece na secção head .

  2. Verifique se o elemento title descreve o documento.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H27: Fornecer alternativas em texto e em formato não textual para object

Aplicabilidade

Documentos que carregam multimédia com o elemento object, quando o formato multimédia não é uma tecnologia de conteúdo suportada por acessibilidade.

Esta técnica está relacionada com:

Descrição

Se object for utilizado, forneça uma alternativa em texto no conteúdo do elemento.

Exemplos

Exemplo 1

Este exemplo mostra uma alternativa em texto para uma applet Java utilizando o elemento object .

Código Exemplo:

<object classid="java:Press.class" width="500" height="500">
  As temperature increases, the molecules in the balloon...
</object> 

Exemplo 2

Este exemplo tira partido do facto de os elementos object poderem ser encaixados para fornecer representações alternativas de informação

Código Exemplo:

<object classid="java:Press.class" width="500" height="500">
  <object data="Pressure.mpeg" type="video/mpeg">
    <object data="Pressure.gif" type="image/gif">
      As temperature increases, the molecules in the balloon...
    </object>
  </object>
</object> 

Recursos

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

HTML 4.01 - elemento OBJECT

Testes

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


H28: Fornecer definições de abreviaturas utilizando os elementos abbr e acronym

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • As tecnologias de apoio fornecem diferentes níveis de suporte para indicar atributos title. Algumas não incluem funcionalidades que permitam aos utilizadores aceder a informações fornecidas através do atributo title.

  • A implementação desta técnica com o atributo title só é suficiente se o atributo title for suportado por acessibilidade. O conteúdo do atributo title necessita de estar disponível a todos os utilizadores de teclado (não só os que utilizam software de texto para fala) para que este atributo seja suportado por acessibilidade.

  • O JAWS 6.2 e superior e o WindowEyes 5.0 e superior suportam os elementos abbr e acronym. Podem ser definidos para indicar o atributo title quando estes elementos são encontrados, mas esta não é a predefinição e, normalmente, não é activada pelos utilizadores.

  • Muitos agentes de utilizador gráficos apresentam texto em anexo num elemento abbr ou acronym com uma linha tracejada por baixo ou à volta. Além disso, quando o ponteiro do rato está sobre o elemento, a definição por extenso é apresentada como uma descrição.

  • No Internet Explorer 7 e inferior, os itens assinalados utilizando o elemento abbr não são apresentados com nenhuma formatação adicional. Para o IE 6 e inferior, a versão expandida não é apresentada como uma descrição quando o ponteiro do rato está sobre o item.

  • Num determinado agente de utilizador ou tecnologia de apoio, os elementos abbr e acronym são apresentados aos utilizadores da mesma forma.

Descrição

O objectivo desta técnica é fornecer definições por extenso ou explicações de abreviaturas utilizando os elementos abbr e acronym .

É sempre apropriado utilizar o elemento abbr para qualquer abreviatura, incluindo acrónimos e iniciais. Ao utilizar HTML e XHTML, as iniciais e os acrónimos podem ser marcados utilizando o elemento acronym . O XHTML 2.0 propõe a eliminação do elemento acronym a favor do elemento abbr mais geral.

Exemplos

Exemplo 1: Utilizar o elemento abbr para definir as abreviaturas por extenso

Código Exemplo:

<p>Sugar is commonly sold in 5 <abbr title="pound">lb.<abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p> 

Exemplo 2: Utilizar o elemento abbr para explicar as abreviaturas

Código Exemplo:

<p>Tasini <abbr title="and others">et al.</abbr> <abbr title="versus">v.</abbr>
The New York Times <abbr title="and others">et al.</abbr> is the landmark lawsuit 
brought by members of the National Writers Union against ......</p> 

Exemplo 3: Utilizar o elemento acronym para definir um acrónimo por extenso

Código Exemplo:

                                                   <p>The use of <acronym title="Keep It Simple Stupid">KISS</acronym> became popular in ...</p> 

Exemplo 4: Utilizar o elemento acronym para definir umas iniciais por extenso

Código Exemplo:

                                                   <p><acronym title="World Wide Web">WWW</acronym></p>

Recursos

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

Testes

Procedimento

  1. Verifique se é fornecida uma definição por extenso ou uma explicação para cada abreviatura através de abbr ou acronym.

Resultados Esperados

  • O passo 1 é verdadeiro.


H30: Fornecer texto de link que descreva a finalidade de um link para os elementos anchor

Aplicabilidade

Documentos HTML e XHTML que incluam links, (elementos <a href>).

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é descrever a finalidade de um link, fornecendo texto descritivo como o conteúdo do elemento a . A descrição permite que um utilizador distinga este link de outros links da página Web e ajuda o utilizador a determinar se deve seguir o link. O URI do destino não costuma ser suficientemente descritivo.

Quando uma imagem é o único conteúdo de um link, a alternativa em texto para a imagem descreve a única função do link.

Quando o conteúdo de um link inclui texto e uma ou mais imagens, se o texto for suficiente para descrever a finalidade do link, as imagens podem ter uma alternativa em texto vazia. (Consulte H67: Utilizar texto alt nulo e nenhum atributo title em elementos img para imagens que a TA deve ignorar (HTML).) Quando as imagens transmitem informações para além da finalidade do link, têm igualmente de ter texto alt apropriado.

Exemplos

Exemplo 1

Descrever a finalidade de um link em HMTL no conteúdo de texto do elemento a .

Código Exemplo:

<a href="routes.html">
  Current routes at Boulders Climbing Gym
</a>

Exemplo 2

Utilizar o atributo alt para o elemento img para descrever a finalidade de um link gráfico.

Código Exemplo:

<a href="routes.html">
   <img src="topo.gif" alt="Current routes at Boulders Climbing Gym" /> 
</a> 

Exemplo 3

Utilizar um atributo alt vazio quando o elemento anchor (a) incluir texto que descreva a finalidade do link para além do elemento img . Tenha em atenção que o texto do link irá aparecer na página junto à imagem.

Código Exemplo:

<a href="routes.html">
  <img src="topo.gif" alt="" />
  Current routes at Boulders Climbing Gym
</a>

Exemplo 4

Um link inclui um ícone e texto, e a ajuda do sítio da Web faz referência ao ícone. O img tem uma alternativa em texto que corresponde ao nome utilizado para o ícone na ajuda do sítio da Web, que descreve como clicar no ícone da página inicial.

Código Exemplo:

<a href="foo.htm">
<img src="house.gif" alt="icon"/>
Home page
</a>

Exemplo 5

Um link inclui texto e um ícone, e o ícone fornece informações adicionais sobre o objectivo.

Código Exemplo:

<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format"/>
</a>

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Verifique se está incluído um texto ou uma alternativa em texto para o conteúdo não textual no elemento a .

  2. Se um elemento img for o único conteúdo do elemento a, verifique se a respectiva alternativa em texto descreve a finalidade do link.

  3. Se o elemento a incluir um ou mais elementos img e a alternativa em texto dos elementos img estiver vazia, verifique se o texto do link descreve a finalidade do link.

  4. Se o elemento a apenas incluir texto, verifique se o texto descreve a finalidade do link.

Resultados Esperados

  • Os passos acima são verdadeiros.


H32: Fornecer botões Submeter

Aplicabilidade

Conteúdo que inclua controlos de formulário.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo que permita aos utilizadores solicitar explicitamente alterações de contexto. A intenção da utilização de um botão Submeter é gerar um pedido HTTP que submeta dados introduzidos num formulário, e por isso é um controlo apropriado a utilizar para originar uma alteração de contexto.

Exemplos

Exemplo 1:

Este é um exemplo básico de um formulário com um botão Submeter.

Código Exemplo:

<form action="http://www.example.com/cgi/subscribe/" method="post"><br /> 
 <p>Enter your e-mail address to subscribe to our mailing list.</p><br /> 
 <label for="address">Enter email address:</label><input type="text" 
 id="address" name="address" /> 
 <input type="submit" value="Subscribe" /><br /> 
</form>

Exemplo 2:

O exemplo seguinte utiliza um script do lado do servidor (especificado no atributo action ) que redirecciona o utilizador para a página pretendida.

Código Exemplo:

                                                   <form action="http://www.example.com/cgi/redirect/" method="get"><br /> 
    <p>Navigate the site.</p><br /> 
    <select name="dest"><br /> 
      <option value="/index.html">Home</option/><br /> 
      <option value="/blog/index.html">My blog</option/><br /> 
      <option value="/tutorials/index.html">Tutorials</option/><br /> 
      <option value="/search.html">Search</option/><br /> 
    </select><br /> 
  <input type="submit" value="Go to Page" /><br /> 
  </form> 

Recursos

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

Testes

Procedimento

  1. Encontre todos os formulários existentes no conteúdo.

  2. Para cada formulário, verifique se tem um botão Submeter (tipo de entrada="submeter", tipo de entrada="imagem" ou tipo de botão="submeter").

Resultados Esperados

  • O passo 2 é verdadeiro.


H33: Fornecer suplementos ao texto do link com o atributo title

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Os agentes de utilizador e as tecnologias de apoio actuais não dão qualquer feedback ao utilizador quando os links têm conteúdo do atributo title disponível.

  • Alguns agentes de utilizador gráficos irão apresentar uma descrição quando o ponteiro do rato está sobre um elemento anchor que inclui um atributo title . Contudo, os agentes de utilizador actuais não fornecem acesso ao conteúdo do atributo title através do teclado.

  • Em alguns agentes de utilizador comuns, a descrição desaparece após um curto período de tempo (aproximadamente, 5 segundos). Isto pode dificultar o acesso ao conteúdo do atributo title por parte dos utilizadores que conseguem utilizar um rato, mas têm uma ligeira incapacidade motora, e pode resultar em dificuldades para os utilizadores que necessitam de mais tempo para ler a descrição.

  • Os agentes de utilizador gráficos actuais não fornecem mecanismos para controlar a apresentação de conteúdo do atributo title . O utilizador não consegue redimensionar o texto da descrição nem controlar as cores de primeiro plano e de fundo. A colocação e localização da descrição não podem ser controladas pelos utilizadores, impedindo o acesso de alguns utilizadores de ampliadores de ecrã a partes importantes do conteúdo do atributo title, uma vez que a descrição não pode ser totalmente apresentada na janela.

  • Alguns agentes de utilizador permitem o acesso a informações suplementares através do menu de contexto. Por exemplo, a combinação de teclas Shift+F10 seguida de P irá apresentar o conteúdo do atributo title, juntamente com outras informações suplementares no Mozilla/Firefox.

  • A especificação HTML 4.01 explica que o texto do atributo alt deve ser apresentado quando o elemento não puder ser apresentado normalmente. Assim, os Agentes de Utilizador visuais irão apresentar o texto do atributo alt quando não são apresentadas imagens. O atributo title destina-se a fornecer informações adicionais. Normalmente, os Agentes de Utilizador apresentam o texto do atributo title quando o ponteiro do rato é colocado sobre o elemento que inclui o atributo title . O Internet Explorer irá apresentar o texto alt quando este estiver sob o ponteiro do rato se não existir nenhum texto title . Os browsers Firefox e Opera só irão apresentar o texto title quando este estiver sob o ponteiro do rato e não irão utilizar o texto do atributo alt para esta finalidade. Assim, se pretender que o texto do atributo alt fique visível quando estiver sob o ponteiro do rato, inclua igualmente o texto utilizando o atributo title .

  • As tecnologias de apoio fornecem diferentes níveis de suporte para indicar atributos title. Algumas não incluem funcionalidades que permitam os utilizadores aceder a informações fornecidas através do atributo title.

  • O JAWS 7.0 e superior irão indicar o valor dos atributos title dependendo de uma definição do JAWS. Esta definição pode ser alterada temporária ou definitivamente no JAWS.

  • O WindowEyes 5.5 e superior dispõem de uma tecla de atalho, ins-E, que irá indicar as informações adicionais, incluindo o atributo title, para o item que recebe o foco.

  • A implementação desta técnica com o atributo title só é suficiente se o atributo title for suportado por acessibilidade. O conteúdo do atributo title necessita de estar disponível a todos os utilizadores de teclado (não só os que utilizam software de texto para fala) para que este atributo seja suportado por acessibilidade.

Descrição

O objectivo desta técnica é demonstrar como utilizar um atributo title num elemento anchor para fornecer texto adicional com a descrição de um link. O atributo title é utilizado para fornecer informações adicionais para ajudar a clarificar ou a descrever mais detalhadamente a finalidade de um link. Se as informações suplementares fornecidas através do atributo title forem algo que o utilizador deva saber antes de seguir o link, tal como um aviso, então deverão ser fornecidas no texto do link em vez de no atributo title .

Devido às extensas limitações dos agentes de utilizador no suporte ao acesso ao atributo title, os autores devem ter cuidado ao aplicar esta técnica. Por este motivo, é preferível que o autor utilize a técnica C7: Utilizar CSS para ocultar uma parte do texto do link (CSS) ou H30: Fornecer texto de link que descreva a finalidade de um link para os elementos anchor (HTML) .

Exemplos

Exemplo 1: Clarificar a finalidade de um link

Código Exemplo:

<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" 
   title="Read more about failed elephant evacuation">
   Evacuation Crumbles Under Jumbo load
</a>

Exemplo 2: Um link que é apresentado numa nova janela

Em HTML 4.01, o atributo target="_blank" pode ser utilizado num elemento anchor para indicar que o URI especificado pelo atributo href será apresentado numa nova janela. Este exemplo mostra como utilizar o atributo title do elemento anchor para fornecer a informação de que o link será apresentado numa nova janela.

Código Exemplo:

<a href="http://example.com/subscribe.html" 
     target="_blank" 
     title="link opens in new window">
     Subscribe to email notifications about breaking news
</a>

Recursos

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

Testes

Procedimento

Verifique o código fonte para os elementos anchor.

  1. Para cada elemento anchor que tenha um atributo title, verifique se o atributo title, juntamente com o texto do link, descreve a finalidade do link.

Resultados Esperados

  • O passo 1 é verdadeiro.


H34: Utilizar uma marca Unicode de direita para a esquerda (RLM) ou de esquerda para a direita (LRM) para misturar a orientação do texto em linha

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar as marcas Unicode de direita para a esquerda e de esquerda para a direita para substituir o algoritmo bidireccional HTML quando produz resultados não desejados. Isto pode ser necessário, por exemplo, ao colocar caracteres neutros, tais como espaços ou pontuação, entre diferentes direcções de texto. Os conceitos utilizados nesta técnica são descritos em O que precisa de saber sobre o algoritmo bidi e a marcação em linha (página em inglês).

As marcas Unicode de direita para a esquerda e de esquerda para a direita podem ser introduzidas directamente ou através de entidades de caracteres ou referências de caracteres numéricos, conforme aqui ilustrado.

  • marca de esquerda para a direita: &lrm; ou &#x200e; (U+200E)

  • marca de direita para a esquerda: &rlm; or &#x200f; (U+200F)

Devido ao algoritmo bidi, um editor de códigos fonte pode não apresentar entidades de caracteres ou referências de caracteres numéricos conforme esperado.

Exemplos

Exemplo 1

Este exemplo mostra uma frase em árabe no meio de uma oração em inglês. O ponto de exclamação faz parte da frase em árabe e deve aparecer à sua esquerda. Uma vez que se encontra entre um carácter árabe e um latino e toda a direcção do parágrafo é LTR(da esquerda para a direita), o algoritmo bidireccional coloca o ponto de exclamação à direita da frase em árabe.

O título é "مفتاح معايير الويب!" em árabe.

Versão ASCII visualmente ordenada (texto RTL (da direita para a esquerda) em letras maiúsculas, LTR em letras minúsculas):

o título é "HCTIWS SDRADNATS BEW!" em árabe.

A introdução de uma marca Unicode de direita para a esquerda no código imediatamente a seguir ao ponto de exclamação posiciona-a correctamente quando visualiza o texto apresentado (ver abaixo). Pode utilizar um carácter de escape ou o carácter de controlo (invisível) para inserir a marca de direita para a esquerda.

O título é "مفتاح معايير الويب!‏" em árabe.

Versão ASCII visualmente ordenada:

o título é "!HCTIWS SDRADNATS BEW" em árabe.

Recursos

Testes

Procedimento

  1. Verifique a origem para locais onde o texto muda a direcção.

  2. Se texto mudar a direcção, verifique se existem caracteres neutros, tais como espaços ou pontuação, junto ao texto que é apresentado na direcção não predefinida.

  3. Se o passo 2 for verdadeiro e o algoritmo bidireccional HTML produzir a colocação errada de caracteres neutros, verifique se os caracteres neutros são seguidos por marcas Unicode de direita para a esquerda ou de esquerda para a direita que fazem com que os caracteres neutros sejam colocados como parte dos caracteres precedentes.

Resultados Esperados

  • O passo 3 é verdadeiro.


H35: Fornecer alternativas em texto em elementos applet

Aplicabilidade

Documentos HTML e XHTML que carregam mini-aplicações Java, em que a applet não é preterida.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Esta técnica não é perfeitamente suportada pelas tecnologias de apoio. A especificação HTML explica que as alternativas em texto para as mini-aplicações devem ser apresentadas quando o elemento não puder ser apresentado. Por conseguinte, as alternativas em texto que são incluídas no corpo dos elementos applet podem não estar disponíveis para os utilizadores, a menos que o agente de utilizador não suporte a apresentação de applet, ou tenha sido configurado para tal.

  • O IE 6 para o Windows e o Firefox 1.5 e o Opera 9 no Windows tratam o texto alternativo para o elemento applet de forma diferente. O IE apresenta o corpo de texto do elemento applet e não o atributo alt. O Firefox e o Opera apresentam o atributo alt, mas não o corpo de texto.

Descrição

O objectivo desta técnica é fornecer uma alternativa em texto para uma applet utilizando o atributo alt para identificar uma applet e fornecendo a alternativa em texto no corpo do elemento applet. Nesta técnica, ambos os mecanismos são necessários devido ao suporte variável do atributo alt e do corpo de texto da applet por parte dos agentes de utilizador.

Exemplos

Exemplo 1: Uma applet do jogo do galo

Código Exemplo:

<applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
   tic-tac-toe game
</applet> 

Testes

Procedimento

  1. Observe o código fonte do elemento applet.

  2. Verifique se o elemento applet inclui um atributo alt com uma alternativa em texto para a applet.

  3. Verifique se o elemento applet inclui uma alternativa em texto para a applet existente no corpo do elemento applet.

Resultados Esperados

  • Os passos 2 e 3 são verdadeiros.


H36: Utilizar atributos alt em imagens utilizadas como botões Submeter

Aplicabilidade

Aplica-se a conteúdo que utiliza botões Submeter baseados em imagens.

Esta técnica está relacionada com:

Descrição

Para elementos input de tipo "imagem", é utilizado o atributo alt do elemento input para fornecer uma etiqueta funcional. Esta etiqueta indica a função do botão, mas não tenta descrever a imagem. A etiqueta é especialmente importante se existirem vários botões Submeter na página, cada um deles conduzindo a resultados diferentes.

O elemento input é utilizado para criar vários tipos de controlos de formulário. Embora os DTDs HTML e XHTML permitam o atributo alt em todos eles, só deve ser utilizado em botões Submeter de imagem. O suporte do agente de utilizador para este atributo noutros tipos de controlos de formulário não está bem definido, e são utilizados outros mecanismos para identificar estes controlos.

Exemplos

Exemplo 1

Um elemento input com um atributo alt .

Código Exemplo:

<form action="http://example.com/prog/text-read" method="post">
  <input type="image" name="submit" src="button.gif" alt="Submit" />
</form> 

Recursos

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

Testes

Procedimento

  1. Para todos os elementos input que tenham um valor de atributo type de "imagem", verifique se existe um atributo alt.

  2. Verifique se o atributo alt indica a função do botão.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H37: Utilizar atributos alt em elementos img

Aplicabilidade

Imagens utilizadas em documentos HTML.

Esta técnica está relacionada com:

Descrição

Ao utilizar o elemento img, especifique uma alternativa em texto abreviado com o atributo alt . Nota: O valor deste atributo é referido como "texto alt".

Quando uma imagem inclui palavras importantes para compreender o conteúdo, o texto alt deve incluir essas palavras. Isto irá permitir que o texto alt tenha a mesma função na página que a imagem. Tenha em atenção que não descreve necessariamente as características visuais da própria imagem, mas tem de transmitir o mesmo significado da imagem.

Exemplos

Exemplo 1

Uma imagem num sítio da Web fornece um link para uma newsletter gratuita. A imagem inclui o texto "Newsletter gratuita. Obtenha receitas gratuitas, novidades e mais. Saiba mais." O texto alt corresponde ao texto existente na imagem.

Código Exemplo:

<img src="newsletter.gif" alt="Free newsletter. 
   Get free recipes, news, and more. Learn more." />

Exemplo 2

Uma imagem num sítio da Web retrata a planta dos pisos de um edifício. A imagem é um mapa de imagens, no qual cada divisão é uma área do mapa interactivo. O texto alt é "A planta dos pisos do edifício. Para mais informações sobre a finalidade ou conteúdo da divisão, seleccione uma divisão." A instrução para "seleccionar uma divisão" indica que a imagem é interactiva.

Recursos

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

HTML 4.01 - elemento IMG

HTML 4.01 - atributo alt

Testes

Procedimento

  1. Examine cada elemento img existente no conteúdo.

  2. Verifique se cada elemento img que transmite um significado inclui um atributo alt .

  3. Se a imagem incluir palavras importantes para compreender o conteúdo, as palavras são incluídas na alternativa em texto.

Resultados Esperados

Os passos 2 e 3 são verdadeiros.


H39: Utilizar elementos caption para associar legendas da tabela de dados a tabelas de dados

Aplicabilidade

Tabelas de dados HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é associar legendas de forma programática a tabelas de dados em que as legendas são fornecidas na apresentação. A legenda de uma tabela corresponde a um identificador da tabela e funciona como um título ou cabeçalho para a tabela.

O elemento caption é a marcação apropriada para este tipo de texto e garante que o identificador da tabela permanece associado à tabela, incluindo visualmente (por predefinição). Além disso, a utilização do elemento caption permite que o software de leitura de ecrãs navegue directamente até à legenda de uma tabela, caso exista uma.

O elemento caption pode ser utilizado independentemente de a tabela incluir ou não um atributo summary . O elemento caption identifica a tabela em que o atributo summary fornece uma descrição geral da finalidade ou uma explicação sobre como navegar na tabela. Se ambas forem utilizadas, o elemento caption não deverá duplicar as informações no summary.

Embora as WCAG 2.0 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos tableHTML e XHTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Se for utilizada uma tabela para o esquema, o elemento caption não é utilizado. A finalidade de uma tabela de esquema é, simplesmente, controlar a colocação do conteúdo; a própria tabela é “transparente" para o utilizador. Um elemento caption poderia "acabar" com essa transparência chamando a atenção para a tabela.

Exemplos

Exemplo 1: Uma agenda com uma legenda

Código Exemplo:

<table>
<caption>Schedule for the week of March 6</caption>
 ...</table> 

Recursos

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

Testes

Procedimento

  1. Procure tabelas de esquema. Verifique se o conteúdo tem uma relação com outro conteúdo, tanto na coluna como na fila.

    1. Se “não", a tabela é uma tabela de esquema.

    2. Se “sim", a tabela é uma tabela de dados.

  2. Se a tabela for uma tabela de esquema, verifique se a tabela não inclui um elemento caption .

  3. Se a tabela for uma tabela de dados e incluir um elemento caption, verifique se o elemento caption identifica a tabela.

  4. Se existirem um atributo summary e um elemento caption nesta tabela de dados, verifique se o atributo summary não duplica o elemento caption.

Resultados Esperados

  • Para as tabelas de esquema, o passo 2 é verdadeiro.

  • Para as tabelas de dados, os passos 3 e 4 são verdadeiros.


H40: Utilizar listas de definições

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer as definições das palavras ou frases, apresentando-as numa lista de definições. A lista é marcada utilizando o elemento dl . Na lista, cada termo é colocado num elemento dt separado, e a respectiva definição colocada no elemento dd imediatamente a seguir. O atributo title pode ser utilizado para fornecer informações adicionais sobre a lista de definições.

A utilização de dl, dte dd garante que as relações entre os termos e as respectivas definições são mantidas se o formato de apresentação for alterado e que a lista de termos e definições é tratada como uma unidade.

As listas de definições são mais fáceis de utilizar quando as definições são colocadas por ordem alfabética. As listas de definições são, normalmente, utilizadas num glossário.

Exemplos

Exemplo 1

Uma lista de definições de termos náuticos utilizada num sítio da Web sobre navegação.

Código Exemplo:

<dl title="Nautical terms">
  <dt>Knot</dt>
  <dd>
    <p>A <em>knot</em> is a unit of speed equaling 1 
      nautical mile per hour (1.15 miles per hour or 1.852 
      kilometers per hour).</p>
  </dd>
  <dt>Port</dt>
  <dd>
    <p><em>Port</em> is the nautical term (used on 
      boats and ships) that refers to the left side
      of a ship, as perceived by a person facing towards 
      the bow (the front of the vessel).</p>
  </dd>
  <dt>Starboard</dt>
  <dd>
    <p><em>Starboard</em> is the nautical term (used 
      on boats and ships) that refers to the right 
      side of a vessel, as perceived by a person 
      facing towards the bow (the front of the vessel).</p>
  </dd>
</dl> 

Recursos

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

Testes

Procedimento

Para qualquer conjunto de palavras e respectivas definições que tenham o aspecto de uma lista:

  1. Verifique se a lista está incluída num elemento dl .

  2. Verifique se cada palavra definida na lista está incluída num elemento dt .

  3. Verifique se a definição de cada palavra é apresentada no elemento dd imediatamente a seguir ao elemento dt da palavra.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H42: Utilizar h1-h6 para identificar cabeçalhos

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar a marcação de cabeçalhos HTML e XHTML para transmitir a estrutura do conteúdo.

A utilização de cabeçalhos simplesmente para alterar o aspecto do texto não transmite a organização do conteúdo e pode confundir os utilizadores que utilizam cabeçalhos para compreender a estrutura ou que se baseiam nos mesmos para a navegação. Contrariamente, enquanto aplicar o formato negrito, ou mesmo "categoria=cabeçalho", pode resultar na apresentação visual de um cabeçalho, as tecnologias de apoio não irão reconhecer esses textos como cabeçalhos.

Exemplos

Exemplo 1: Cabeçalhos numa disposição de 3 colunas

Neste exemplo, o conteúdo principal da página encontra-se na coluna do meio de uma página com 3 colunas. O título do conteúdo principal corresponde ao título da página, e está assinalado como h1, apesar de não ser a primeira coisa apresentada na página. O conteúdo da primeira e terceira colunas é menos importante, e está assinalado como h2.

Código Exemplo:

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

Recursos

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

Testes

Procedimento

  1. Verifique se é utilizada a marcação de cabeçalhos quando o conteúdo é um cabeçalho.

  2. Verifique se não é utilizada a marcação de cabeçalhos quando o conteúdo não é um cabeçalho.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é associar cada célula de dados (numa tabela de dados) aos cabeçalhos apropriados. Esta técnica adiciona um atributo headers a cada célula de dados (elementotd ) e também adiciona um atributo id a qualquer célula utilizada como um cabeçalho noutras células. O atributo headers de uma célula contém uma lista dos atributos id das células de cabeçalho associadas. Se existir mais de um id, estão separados por espaços.

Esta técnica é utilizada quando as células de dados estão associadas a mais de uma linha e/ou um cabeçalho de coluna. Isto permite aos leitores de ecrã lerem os cabeçalhos associados a cada célula de dados quando as relações forem demasiado complexas para serem identificadas utilizando apenas o elemento th ou o elemento th com o atributo scope . A utilização desta técnica também permite tornar estas relações complexas perceptíveis quando o formato de apresentação é alterado.

Esta técnica não é recomendada para tabelas de esquema, uma vez que a sua utilização implica uma relação entre células que não seja significativa quando as tabelas são utilizadas para o esquema.

Exemplos

Exemplo 1: Uma tabela com várias linhas de cabeçalhos

Código Exemplo:

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
  </table>

Recursos

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

Testes

Procedimento

  1. Procure tabelas de esquema: verifique se o conteúdo tem uma relação com outro conteúdo, tanto na coluna como na fila. Se “não", a tabela é uma tabela de esquema. Se "sim", a tabela é uma tabela de dados.

  2. Para tabelas de dados, verifique se alguma célula que esteja associada a mais de uma linha e/ou um cabeçalho de coluna contém um atributo headers que indique o id para todos os cabeçalhos associados a essa célula.

  3. Para tabelas de dados em que exista uma célula que contenha um atributo id ou headers,

    1. Verifique se cada id indicado no atributo headers da célula de dados corresponde ao atributo id de uma célula que seja utilizada como um elemento header.

    2. Verifique se o atributo headers de uma célula de dados contém o atributo id de todos os cabeçalhos associados à célula de dados.

    3. Verifique se todos os ids são exclusivos (ou seja, não existam dois elementos na página com o mesmo id).

Resultados Esperados

  • Se a tabela for uma tabela de esquema, não existem células com atributos headers ou id .

  • Se a tabela for uma tabela de dados e nenhuma célula incluir um atributo id, os passos 3.1, 3.2 e 3.3. são verdadeiros.

  • Se a tabela for uma tabela de dados e nenhuma célula estiver associada a mais de uma linha e/ou um cabeçalho de coluna, o passo 2 é verdadeiro.


H44: Utilizar elementos label para associar etiquetas de texto a controlos de formulário

Aplicabilidade

Controlos HTML e XHTML que utilizem etiquetas externas.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As especificações HTML e XHTML permitem etiquetas implícitas e explícitas. Contudo, algumas tecnologias de apoio não processam correctamente as etiquetas implícitas (por exemplo, <label>First name <input type="text" name="firstname"></label>).

  • O JAWS 7.10 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Lê as etiquetas explícitas e as etiquetas implícitas dos campos de texto no modo de cursor virtual do PC e no modo de leitura do formulário. No modo de formulário não lê as etiquetas implícitas das caixas de verificação e dos campos dos botões de opção.

  • O Window-Eyes 5.5 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Irá sempre ler a etiqueta explícita de um campo de formulário. Não lê a etiqueta implícita do controlo de formulário no modo de procura ligado, mas irá ler a etiqueta implícita ao navegar de controlo para controlo no modo de procura desligado.

Os agentes de utilizador irão apresentar uma descrição quando o ponteiro do rato estiver sobre um elemento input que contenha um atributo title . Os atributos title são expostos à tecnologia de apoio e são apresentados como descrições em vários browsers gráficos. As descrições não podem ser abertas através do teclado, como tal estas informações podem não estar disponíveis a utilizadores de teclado sem problemas de visão.

Se não existir nenhum label disponível, o JAWS e o Window-Eyes lêem o atributo title quando o controlo de formulário recebe o foco.

  • O JAWS 6.0 e posterior podem ser definidos para ler o label e o title quando os dois itens forem diferentes; contudo, muito poucos utilizadores têm conhecimento desta definição.

  • O WindowEyes 5.5 tem uma tecla de atalho, ins-E, que irá apresentar informações adicionais, incluindo o atributo title, para o item com o foco.

Descrição

O objectivo desta técnica é utilizar o elemento label para associar explicitamente um controlo de formulário a uma etiqueta. Um elemento label é ligado a um controlo de formulário específico através da utilização do atributo for . O valor do atributo for tem de ser igual ao valor do atributo id do controlo de formulário.

O atributo id pode ter o mesmo valor do atributo name, mas ambos têm de ser fornecidos, e o id tem de ser exclusivo na página Web.

Esta técnica é de tipo suficiente para os Critérios de Sucesso 1.1.1, 1.3.1 e 4.1.2, independentemente de o elemento label estar ou não visível. Ou seja, pode ser ocultado utilizando o CSS. Contudo, para o Critério de Sucesso 3.3.2, o elemento label tem de estar visível, uma vez que fornece assistência a todos os utilizadores que necessitam de ajuda para compreender a finalidade do campo.

Tenha em atenção que o label está posicionado a seguir aos elementos input de type="checkbox" e type="radio".

Nota 1: Os elementos que utilizam etiquetas explicitamente associadas são:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

Nota 2: O elemento label não é utilizado para o seguinte, uma vez que as etiquetas para estes elementos são fornecidas através do atributo value (para botões Submeter e Repor), do atributo alt (para botões de imagem) ou do próprio conteúdo do elemento (botão).

  • Botões Submeter e Repor (input type="submit" ou input type="reset")

  • Botões de imagem (input type="image")

  • Campos de entrada ocultos (input type="hidden")

  • Botões de script (elementosbutton ou <input type="button">)

Exemplos

Exemplo 1: Um campo de entrada de texto

O campo de texto no exemplo abaixo tem a etiqueta explícita de "Nome próprio:". O atributo for do elemento label corresponde ao atributo id do elemento input .

Código Exemplo:

<label for="firstname">First name:</label> 
<input type="text" name="firstname" id="firstname" />

Exemplo 2: Uma caixa de verificação

Código Exemplo:

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label>

Exemplo 3: Um grupo de botões de opção

Um grupo relacionado e pequeno de botões de opção com uma descrição clara e etiquetas para cada um dos elementos.

Nota: Para fornecer instruções e associações claras para um conjunto grande de botões de opção relacionados, deve ser considerada a técnica H71: Fornecer uma descrição para grupos de controlos de formulário utilizando elementos fieldset e legend .

Código Exemplo:

                                 <h1>Donut Selection</h1>

<p>Choose the type of donut(s) you would like then select 
   the "purchase donuts" button.</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>
</form>

Recursos

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

Testes

Procedimento

Para todos os elementos input de tipo text, file ou password, para todos os textareas e para todos os elementos select existentes na página Web:

  1. Verifique se existe um elemento label que identifique a finalidade do controlo antes do elemento input .

  2. Verifique se o atributo for do elemento label corresponde ao id do elemento input .

  3. Verifique se o elemento label está visível.

Para todos os elementos input de tipo caixa de verificação ou botão de opção existentes na página Web:

  1. Verifique se existe um elemento label que identifique a finalidade do controlo depois do elemento input .

  2. Verifique se o atributo for do elemento label corresponde ao id do elemento input .

  3. Verifique se o elemento label está visível.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros. Para o Critério de Sucesso 3.3.2, o passo 3 é igualmente verdadeiro.


H45: Utilizar longdesc

Aplicabilidade

Documentos HTML e XHTML que incluam imagens que não possam ser descritas numa alternativa em texto abreviado.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Algumas tecnologias de apoio mais antigas não suportam o atributo longdesc .

Descrição

O objectivo desta técnica é fornecer informações num ficheiro designado pelo atributo longdesc quando uma alternativa em texto abreviado não transmite de forma adequada a função ou as informações fornecidas na imagem. O atributo longdesc é um URI, cujo destino contém uma descrição extensa do conteúdo não textual.

Exemplos

Exemplo 1

Código Exemplo:

<p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>

Recursos

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

Testes

Procedimento

  1. Verifique se o elemento img tem um atributo longdesc.

  2. Verifique se o valor do atributo longdesc é um URI válido de um recurso existente.

  3. Verifique se o conteúdo no destino desse URI contém uma descrição extensa do conteúdo original não textual associado.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H46: Utilizar o noembed com o embed

Aplicabilidade

Documentos que carreguem plug-ins com o elemento embed .

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Nota: Embora o embed seja largamente suportado nos agentes de utilizador, não é uma parte válida de HTML ou XHTML.

Descrição

O objectivo desta técnica é fornecer conteúdo alternativo para o elemento embed num elemento noembed . O noembed só é apresentado se o embed não for suportado. Embora possa ser posicionado em qualquer local da página, é uma boa ideia inclui-lo como um elemento subordinado do embed, de modo a ficar claro para as tecnologias de apoio que existe uma alternativa em texto associada ao elemento embed que descreve.

Exemplos

Exemplo 1: O noembed é fornecido dentro de um embed

Código Exemplo:

<embed src="../movies/history_of_rome.mov"
  height="60" width="144" autostart="false">
  <noembed>
    <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
  </noembed>
</embed>

Exemplo 2: O noembed é fornecido junto de um embed

Código Exemplo:

<embed src="moviename.swf" width="100" height="80"
  pluginspage="http://example.com/shockwave/download/" />
<noembed>
  <img alt="Still from Movie" src="moviename.gif" 
    width="100" height="80" />
</noembed>;

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se o elemento embed dispõe de um elemento noembed subordinado.

  2. Verifique se o elemento embed dispõe de um elemento noembed imediatamente a seguir.

Resultados Esperados

  • O passo 1 é verdadeiro ou o passo 2 é verdadeiro.


H48: Utilizar ol, ul e dl para listas

Aplicabilidade

HTML, XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As tecnologias de apoio incluem um suporte inconsistente para várias utilizações do atributo type utilizado para indicar estilos de marcas de item e numeração.

Descrição

O objectivo desta técnica é criar listas de itens relacionados utilizando elementos list apropriados para as suas finalidades. O elemento ol é utilizado quando a lista está ordenada e o elemento ul é utilizado quando a lista está desordenada. As listas de definições (dl) são utilizadas para agrupar termos e as respectivas definições. Embora a utilização desta marcação possa tornar as listas mais legíveis, nem todas as listas necessitam de marcação. Por exemplo, as orações que incluem listas separadas por vírgulas podem não necessitar de marcação da lista.

Quando a marcação é utilizada de modo a formatar visualmente os itens como uma lista, mas não indica a relação da lista, os utilizadores podem ter dificuldade em navegar nas informações. Um exemplo dessa formatação visual é incluir asteriscos no conteúdo no início de cada item de lista e utilizar elementos <br> para separar os itens de lista.

Algumas tecnologias de apoio permitem aos utilizadores navegar de lista para lista ou de item para item. As folhas de estilo podem ser utilizadas para alterar a apresentação das listas, ao mesmo tempo que preservam a sua integridade.

Exemplos

Exemplo 1: Uma lista que mostra passos numa sequência

Este exemplo utiliza uma lista ordenada para mostrar a sequência de passos num processo.

Código Exemplo:

                                 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>

Exemplo 2: Uma lista de artigos de mercearia

Este exemplo mostra uma lista desordenada de artigos para comprar na mercearia.

Código Exemplo:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Exemplo 3: Uma palavra e respectiva definição

Este exemplo utiliza uma lista de definições para juntar uma definição ao termo que está a ser definido.

Código Exemplo:

<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl> 

Recursos

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

Testes

Procedimento

  1. Verifique se o conteúdo que tem o aspecto visual de uma lista (com ou sem marcas de item) está assinalado como uma lista desordenada.

  2. Verifique se o conteúdo que tem o aspecto visual de uma lista numerada está assinalado como uma lista ordenada.

  3. Verifique se o conteúdo está assinalado como uma lista de definições quando os termos e respectivas definições são apresentados na forma de uma lista.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H49: Utilizar a marcação semântica para assinalar texto especial ou realçado

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Alguns elementos semantic não são perfeitamente suportados pelas tecnologias de apoio. Os elementos e os atributos que são conhecidos por terem suporte limitado incluem code, del, dfn, ins, kbd, s, sub, sup, tte q. Para estes elementos, é recomendado aos autores que considerem se estão a utilizá-los de uma forma que exija que os utilizadores consigam aceder ao significado semântico da marcação para compreender o conteúdo e, se for necessário compreender a semântica, que forneçam estas informações no texto.

  • A maioria dos leitores de ecrã não fornece notificação automática sobre em, strong, bou i.

  • O JAWS inclui suporte para blockquote e cite. O WindowEyes inclui suporte para blockquote, q e cite.

  • O Firefox 1.0 (Windows) e superior, o Opera 7.54 (Windows) e superior, o Mozilla 1.7.3 (Windows) e superior geram automaticamente aspas em torno dos elementos q, mas o Internet Explorer 6 para o Windows não.

O Firefox 1.0 (Windows) e superior, o Opera 7.54 (Windows) e superior, o Mozilla 1.7.3 (Windows) e superior geram automaticamente aspas em torno dos elementos q, mas o Internet Explorer 6 para o Windows não.

Descrição

O objectivo desta técnica é demonstrar como a marcação semântica pode ser utilizada para marcar texto especial ou realçado, de modo a poder ser determinado de forma programática. A utilização da marcação semântica para marcar texto especial ou realçado também fornece estrutura ao documento. Os agentes de utilizador podem assim tornar a estrutura perceptível ao utilizador, por exemplo, utilizando uma apresentação visual diferente para diferentes tipos de estruturas ou utilizando uma voz ou inclinação diferentes numa apresentação em auditório.

A maioria dos agentes de utilizador irá distinguir visualmente o texto que tenha sido identificado utilizando a marcação semântica. Algumas tecnologias de apoio fornecem um mecanismo para determinar as características do conteúdo que tiver sido criado utilizando a marcação semântica adequada.

Exemplos

Consulte os exemplos apresentados de texto semântico.

Exemplo 1

Este exemplo mostra como utilizar os elementos em e strong para realçar o texto. Os elementos em e strong foram concebidos para indicar realce estrutural que possa ser apresentado de várias formas (alterações no estilo do tipo de letra, alterações na entoação da fala, etc.).

Código Exemplo:

                                 ...What she <em>really</em> meant to say was, &quot;This is not ok, 
 it is <strong>excellent</strong>&quot;!... 

Exemplo 2

Este exemplo mostra como utilizar o elemento blockquote para marcar citações extensas que possam necessitar de quebras de parágrafo. Também demonstra como utilizar o elemento cite para especificar uma referência.

Código Exemplo:

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
   hedges, and, guided by the sense of smell, would find the first violets and lilies.  
   There, too, after a fit of temper, I went to find comfort and to hide my hot face 
   in the cool leaves and grass.</p>
 </blockquote>

Exemplo 3

Esta é a utilização do elemento q para marcar uma citação mais abreviada. As aspas são fornecidas em torno do elemento q, uma vez que muitos agentes de utilizador ainda não suportam este elemento e, por conseguinte, não o apresentam correctamente (consulte as notas do agente de utilizador). As regras CSS para suprimir a geração automática de aspas são fornecidas para os agentes de utilizador que suportam o elemento q, para os impedir de gerar aspas automaticamente para além das aspas fornecidas pelo autor, resultando em conteúdo de aspas duplas. No futuro, quando o elemento q for mais suportado, a necessidade de fornecer aspas e de suprimir as aspas geradas pelo browser irá desaparecer.

Código Exemplo:

q:before { content: ""; } 
q:after { content: ""; } 

Código Exemplo:

                                 <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q>"</p>

Exemplo 4

Os efeitos superior à linha e inferior à linha são criados utilizando os elementos sup e sub .

Código Exemplo:

                                 <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>

Recursos

Testes

Procedimento

  1. Verifique se o conteúdo inclui informações transmitidas através de variações na apresentação do texto.

  2. Verifique se foi utilizada a marcação semântica apropriada (tal como em, strong, cite, blockquote, quote, sube sup) para assinalar o texto que transmite informações através de variações no texto.

Resultados Esperados

  • O passo 2 é verdadeiro.


H50: Utilizar elementos estruturais para agrupar os links

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como agrupar links em conjuntos lógicos. Quando os links são agrupados em conjuntos lógicos (por exemplo, numa barra de navegação ou num menu principal que aparecem em todas as páginas de um sítio da Web) devem ser marcados como uma unidade. Normalmente, as barras de navegação são a primeira coisa que os utilizadores encontram numa página. As pessoas sem problemas de visão podem, muitas vezes, ignorar as partes de navegação e começar a ler o conteúdo da página. As pessoas que utilizam leitores de ecrã têm primeiro de ouvir o texto de cada link existente na barra de navegação antes de lerem o conteúdo que lhes interessa. Existem várias formas de marcar conteúdo, de modo a que um utilizador com um leitor de ecrã possa ignorar a barra de navegação e não tenha de ler todos os links.

Agrupe os links através de um dos seguintes mecanismos (por ordem descendente de preferência):

  • ul ou ol

  • map

Exemplos

Exemplo 1: Utilizar listas para agrupar links

Neste exemplo, os links são agrupados utilizando os elementos ul e li .

Código Exemplo:

<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
    <li><p><a href="kitchen.html">Kitchen</a></p></li>
    <li><p><a href="bedbath.html">Bed & Bath</a></p></li>
    <li><p><a href="dining.html">Fine Dining</a></p></li>
    <li><p><a href="lighting.html">Lighting</a></p></li>
    <li><p><a href="storage.html">Storage</a><li><p>
</ul> 

O CSS pode ser utilizado para moldar os elementos list e, como tal, esta técnica pode ser utilizada com uma série de aspectos visuais.

Em seguida, é apresentado um estilo que remove as marcas de item de lista e o preenchimento à esquerda que criam o avanço, e coloca cada um dos elementos list na horizontal.

Código Exemplo:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

Este estilo remove as marcas de item de lista e o preenchimento à esquerda e apresenta os itens num bloco flutuante.

Código Exemplo:

                                 ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
}

Exemplo 2: Utilizar um mapa para agrupar links

Neste exemplo, o elemento map agrupa um conjunto de links e o atributo title identifica-o como uma barra de navegação.

Código Exemplo:

                                 <map title="Navigation Bar">
  <p>
    [<a href="home.html">Home</a>] 
    [<a href="search.html">Search</a>] 
    [<a href="new.html">New and highlighted</a>] 
    [<a href="sitemap.html">Site map</a>]
  </p>
 </map> 

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Verifique se o conteúdo inclui elementos anchor que devem ser agrupados juntos.

  1. Verifique se os elementos anchor são agrupados utilizando elementos list ou map .

Resultados Esperados

  • O passo 1 é verdadeiro.


H51: Utilizar a marcação da tabela para apresentar informações dispostas em tabelas

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é apresentar informações dispostas em tabelas de forma a preservar as relações nas informações, mesmo quando os utilizadores não conseguem ver a tabela ou o formato de apresentação tiver sido alterado. As informações são consideradas como dispostas em tabelas quando existem relações lógicas a duas dimensões (vertical e horizontal) entre texto, números, imagens ou outros dados. Estas relações são representadas em colunas e linhas, e as colunas e as linhas têm de ser reconhecíveis por ordem para as relações lógicas serem percebidas.

A utilização do elemento table com os elementos subordinados tr, the td torna estas relações perceptíveis. As técnicas, tais como inserir separadores para criar colunas ou utilizar o elemento pre, são meramente visuais, e as relações lógicas visualmente implícitas são perdidas se o utilizador não puder ver a tabela ou a apresentação visual tiver sido alterada.

Exemplos

Exemplo 1: Um calendário marcado como uma tabela de dados simples com cabeçalhos de coluna e de linha

Este exemplo utiliza a marcação para uma tabela de dados simples. A primeira linha mostra os dias da semana. Os intervalos de tempo são apresentados na primeira coluna. Estas células são assinaladas com o elemento th . Isto identifica os dias da semana como cabeçalhos de coluna e os intervalos de tempo como cabeçalhos de linha.

Os leitores de ecrã lêem informações de cabeçalho que são alteradas à medida que o utilizador navega na tabela. Assim, quando os utilizadores de leitores de ecrã se deslocam para a esquerda ou para a direita ao longo de uma linha, irão ouvir o dia da semana (o cabeçalho da coluna) seguido da hora marcada (se existir alguma) e irão ouvir o intervalo de tempo à medida que se deslocam para cima ou para baixo na mesma coluna.

Código Exemplo:

                                 <table>
  <tr>
    <td> </td>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
  <tr>
    <th>8:00-9:00</th>
    <td>Meet with Sam</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td> </td>
    <td> </td>
    <td>Doctor Williams</td>
    <td>Sam again</td>
    <td>Leave for San Antonio</td>
  </tr>
</table> 

Recursos

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

Testes

Procedimento

  1. Verifique se existem informações dispostas em tabelas.

  2. Para cada ocorrência de informações dispostas em tabelas:

    1. Verifique se é utilizada a marcação da tabela com, no mínimo, os elementos table, tr, the td .

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H53: Utilizar o corpo do elemento object

Aplicabilidade

Documentos que carreguem multimédia com o elemento object .

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Esta técnica não é perfeitamente suportada pelas tecnologias de apoio e o suporte dos browsers é irregular.

Descrição

O objectivo desta técnica é fornecer uma alternativa em texto para conteúdo apresentado através da utilização do elemento object. O corpo do elemento object pode ser utilizado para fornecer uma alternativa em texto completa do objecto ou incluir conteúdo não textual adicional com alternativas em texto.

Exemplos

Exemplo 1: Um objecto inclui uma descrição extensa que o descreve

Código Exemplo:

                                 <object classid="http://www.example.com/analogclock.py">
  <p>Here is some text that describes the object and its operation.</p>
</object>

Exemplo 2: Um objecto inclui conteúdo não textual com uma alternativa em texto

Código Exemplo:

<object classid="http://www.example.com/animatedlogo.py">
  <img src="staticlogo.gif" alt="Company Name" />
</object> 

Exemplo 3: O objecto da imagem inclui conteúdo que fornece uma breve descrição da função da imagem

Código Exemplo:

<object data="companylogo.gif" type="image/gif">
  <p>Company Name</p>
</object>

Recursos

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

Testes

Procedimento

  1. Verifique se o corpo de cada elemento object contém uma alternativa em texto para o objecto.

Resultados Esperados

  • O passo 1 é verdadeiro.


H54: Utilizar o elemento dfn para identificar a ocorrência com a definição de uma palavra

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar o dfn para assinalar a utilização de uma palavra ou frase onde estiver definida. O elemento dfn é utilizado para indicar a ocorrência com a definição do termo em anexo. Por outras palavras, assinala a ocorrência do termo onde o termo estiver definido. Tenha em atenção que anexa o termo, não a definição. Esta técnica deve ser utilizada em conjunto com a técnica G112: Utilizar definições em linha para fornecer a definição.

Exemplos

Exemplo 1

O seguinte fragmento de código demonstra a utilização do elemento dfn .

Código Exemplo:

<p>The Web Content Accessibility Guidelines require that non-text content
has a text alternative. <dfn>Non-text content</dfn> is content that is not a sequence
of characters that can be programmatically determined or where the sequence is
not expressing something in human language; this includes ASCII Art (which is a
pattern of characters), emoticons, leetspeak (which is character substitution), and
images representing text .</p> 

Recursos

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

Testes

Procedimento

  1. Identifique todas as palavras que são definidas em linha no texto, ou seja, em que a definição ocorre numa oração junto a uma ocorrência da palavra.

  2. Verifique se cada palavra que é definida em linha está contida num elemento dfn .

Resultados Esperados

  • O passo 2 é verdadeiro.


H56: Utilizar o atributo dir num elemento inline para solucionar problemas com as orientações encaixadas

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é identificar alterações na direcção do texto que inclui orientações encaixadas, fornecendo o atributo dir em elementos em linha. Uma orientação encaixada é uma ocorrência de texto que inclui texto direccional misturado, por exemplo, um parágrafo em inglês com uma citação em hebraico, que, por sua vez, inclui uma frase em inglês. A utilização do atributo dir num span anexado ou outro elemento em linha pode ser necessária, uma vez que o algoritmo bidireccional Unicode (página em inglês) pode produzir resultados indesejados quando o texto direccional misturado incluir espaços ou pontuação. Os conceitos utilizados nesta técnica são descritos em O que precisa de saber sobre o algoritmo bidi e a marcação em linha (página em inglês).

Exemplos

Exemplo 1

Este exemplo define a direcção do texto de uma frase encaixada e de direcção misturada, em hebraico e em inglês, para ser da direita para a esquerda. Uma vez que toda a citação está em hebraico e, por conseguinte, da direita para a esquerda, o texto "W3C" e a vírgula devem aparecer à esquerda (i.e., a seguir) do texto em hebraico, da seguinte forma:

O título é "פעילות הבינאום, W3C" em hebraico.

Versão ASCII visualmente ordenada (texto RTL (da direita para a esquerda) em letras maiúsculas, texto LTR (da esquerda para a direita) em letras minúsculas):

o título é "w3c,YTIVITCA NOITAZILANOITANRETNI" em hebraico.

O algoritmo bidireccional Unicode por si só é insuficiente para alcançar o resultado correcto, e deixa o texto 'W3C' no lado direito da citação:

O título é "פעילות הבינאום, W3C" em hebraico.

Versão ASCII visualmente ordenada:

o título é "YTIVITCA NOITAZILANOITANRETNI, w3c" em hebraico.

A marcação seguinte irá produzir o resultado esperado:

Código Exemplo:

<p>The title says "<span lang="he" 
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p> 

Recursos

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

Testes

Procedimento

  1. Verifique qual a direcção do texto no documento.

  2. Se a direcção do texto for da direita para a esquerda, verifique se o atributo dir para o elemento ancestor tem o valor "rtl".

  3. Se a direcção do texto for da esquerda para a direita, verifique se não existe nenhum elemento ancestor com um atributo dir, ou se o atributo dir para o elemento ancestor tem o valor "ltr".

Resultados Esperados

  • Os passos 2 e 3 são verdadeiros para todo o texto.


H57: Utilizar atributos language no elemento html

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As submarcas adicionais para região, script, variante ou outros aspectos podem conduzir a erros na alteração de idioma em versões mais antigas de alguns leitores de ecrã.

O JAWS 8.0 pode ser configurado para alterar o idioma automaticamente com base no atributo lang. Contudo, só altera entre os idiomas principais, conforme indicado pelo código principal. Se a variante de um idioma regional for indicada com um subcódigo de idioma, o JAWS irá utilizar a variante predefinida para a qual está configurado.

Descrição

O objectivo desta técnica é identificar o idioma predefinido de um documento, fornecendo o atributo lang e/ou xml:lang no elemento html .

A identificação do idioma do documento é importante por uma série de razões:

  • Permite que o software de tradução em braille substitua códigos de controlo por caracteres acentuados, e introduz códigos de controlo necessários para evitar a criação errada de contracções em braille de Categoria 2.

  • Os sintetizadores de fala que suportam vários idiomas poderão perceber e adaptar-se à pronúncia e sintaxe específicas do idioma da página, lendo o texto com o sotaque e pronúncia correctos.

  • Assinalar o idioma pode beneficiar futuros desenvolvimentos na tecnologia, por exemplo, os utilizadores que não conseguem traduzir de um idioma para outro poderão utilizar máquinas para traduzir idiomas que lhes são pouco familiares.

  • Assinalar o idioma também pode ajudar os agentes de utilizador a fornecer definições utilizando um dicionário.

O HTML 4.01 utiliza o atributo lang do elemento html . O XHTML apresentado como texto/html utiliza o atributo lang e o atributo xml:lang do elemento html, de modo a cumprir os requisitos do XHTML e fornece compatibilidade com versões anteriores de HTML. O XHTML apresentado como aplicação/xhtml+xml utiliza o atributo xml:lang do elemento html . Ambos os atributos lang e xml:lang só podem ter um valor.

Nota 1: O HTML só oferece a utilização do atributo lang, enquanto o XHTML 1.0 (como uma medida de transição) permite ambos os atributos, e o XHTML 1.1 só permite o xml:lang.

Nota 2: Os valores permitidos para os atributos lang e xml:lang são indicados nos recursos referidos abaixo. As marcas de idioma utilizam um código principal para indicar o idioma, e subcódigos opcionais (separados por hífenes) para indicar variantes do idioma. Por exemplo, o inglês é indicado com o código principal "en"; o inglês britânico e o inglês americano podem ser distinguidos utilizando "en-GB" e "en-US", respectivamente. A utilização do código principal é importante para esta técnica. A utilização de subcódigos é opcional, mas pode ser útil em determinadas circunstâncias.

Exemplos

Exemplo 1

Este exemplo define o conteúdo de um documento HTML para francês.

Código Exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr"> 
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>  
<body>     
	...document écrit en français...   
</body>
</html>

Exemplo 2

Este exemplo define o conteúdo de um documento XHTML 1.0 com o tipo de conteúdo de texto/html para francês. Ambos os atributos lang e xml:lang são especificados para cumprir os requisitos de XHTML e fornecem compatibilidade com versões anteriores de HTML.

Código Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body> 
 ...document écrit en français...      
</body>
</html> 

Exemplo 3

Este exemplo define o conteúdo de um documento XHTML 1.1 com o tipo de conteúdo de aplicação/xhtml+xml para francês. Apenas é especificado o atributo xml:lang .

Código Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>document écrit en français</title>
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body> 
	...document écrit en français... 
</body>
</html>

Recursos

Testes

Procedimento

  1. Verifique o elemento html do documento.

  2. Verifique se o elemento html tem um atributo lang e/ou xml:lang .

  3. Verifique se o valor do atributo lang está em conformidade com BCP 47: Marcas para a Identificação de Idiomas (página em inglês) ou o seu sucessor, e se reflecte o idioma principal utilizado pela página Web.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H58: Utilizar atributos language para identificar alterações no idioma humano

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As submarcas adicionais para região, script, variante ou outros aspectos podem conduzir a erros na alteração de idioma em versões mais antigas de alguns leitores de ecrã.

O JAWS 8.0 pode ser configurado para alterar o idioma automaticamente com base no atributo lang. Contudo, só altera entre os idiomas principais, conforme indicado pelo código principal. Se a variante de um idioma regional for indicada com um subcódigo de idioma, o JAWS irá utilizar a variante predefinida para a qual está configurado.

Descrição

O objectivo desta técnica é identificar claramente quaisquer alterações de idioma numa página utilizando o atributo lang ou xml:lang, conforme for apropriado para versão HTML ou XHTML que utilizar.

O HTML 4.01 utiliza o atributo lang nos elementos. O XHTML apresentado como texto/html utiliza o atributo lang e o atributo xml:lang nos elementos, de modo a cumprir os requisitos de XHTML e fornece compatibilidade com versões anteriores de HTML. O XHTML apresentado como aplicação/xhtml+xml utiliza o atributo xml:lang nos elementos.

Nota: O HTML só oferece a utilização do atributo lang, enquanto o XHTML 1.0 (como uma medida de transição) permite ambos os atributos, e o XHTML 1.1 só permite o xml:lang.

Os valores permitidos para os atributos lang e xml:lang são indicados nos recursos referidos abaixo. As marcas de idioma utilizam um código principal para indicar o idioma, e subcódigos opcionais (separados por hífenes) para indicar variantes do idioma. Por exemplo, o inglês é indicado com o código principal "en"; o inglês britânico e o inglês americano podem ser distinguidos utilizando "en-GB" e "en-US", respectivamente. A utilização do código principal é importante para esta técnica. A utilização de subcódigos é opcional, mas pode ser útil em determinadas circunstâncias.

Exemplos

Exemplo 1

Este exemplo demonstra a utilização do atributo xml:lang a definir uma citação escrita em alemão. O fragmento pode ser incluído através de um documento XHTML 1.1, em que lang não é permitido.

Código Exemplo:

<blockquote xml:lang="de">
  <p>
    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
    aber der Esel merkte, daß kein guter Wind wehte, lief fort
    und machte sich auf den Weg nach Bremen: dort, meinte er,
    könnte er ja Stadtmusikant werden.
  </p>
</blockquote> 

Recursos

Testes

Procedimento

Para cada elemento existente no documento:

  1. Verifique se o idioma humano do conteúdo do elemento é o mesmo do idioma herdado para o elemento, conforme especificado em HTML 4.01, Herança de códigos de idioma.

Para cada atributo lang existente no documento:

  1. Verifique se o valor do atributo lang está em conformidade com BCP 47: Marcas para a Identificação de Idiomas (página em inglês) ou o seu sucessor.

Para cada atributo xml:lang existente no documento:

  1. Verifique se o valor do atributo xml:lang está em conformidade com BCP 47: Marcas para a Identificação de Idiomas (página em inglês) ou o seu sucessor.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H59: Utilizar o elemento link e as ferramentas de navegação

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • O elemento link tem um suporte de tecnologia de apoio e de agente de utilizador inconsistente.

  • Alguns agentes de utilizador fornecem uma barra de navegação opcional que irá apresentar as informações especificadas no elemento link. As versões actuais dos browsers Mozilla e Opera fornecem esta funcionalidade. O IE 6.0 e o Firefox 1.5 não oferecem esta funcionalidade, mas esta pode estar disponível através de extensões ou de suplementos.

    Consulte O elemento "link" em (X)HTML (página em alemão) para obter mais informações sobre o suporte do browser para o link.

Descrição

O objectivo desta técnica é descrever como o elemento link pode fornecer metadados sobre a posição de uma página HTML num conjunto de páginas Web ou ajudar a localizar conteúdo num conjunto de páginas Web. O valor dos atributos rel indica o tipo de relação que está a ser descrito, e o atributo href fornece um link para o documento que tem essa relação. Vários elementos link podem fornecer várias relações. São úteis vários valores de rel :

  • Início: Refere-se ao primeiro documento num conjunto de documentos.

  • Seguinte: Refere-se ao documento seguinte numa sequência linear de documentos.

  • Anterior: Refere-se ao documento anterior numa série ordenada de documentos.

  • Conteúdos: Refere-se a um documento que funciona como um índice.

  • Índice: Refere-se a um documento que fornece um índice para o documento actual.

Exemplos

Exemplo 1

Uma página Web para o Capítulo 2 de um livro online pode conter os seguintes links na secção head .

Código Exemplo:

<link rel="Contents" href="Contents.html" title="Table of Contents"  />
<link rel="Index" href="Index.html" title="Index" />
<link rel="Prev" href="Chapter01.html" title="01. Why Volunteer?" />
<link rel="Next" href="Chapter03.html" title="03. Who Volunteers?" />

Recursos

Testes

Procedimento

Para uma página Web que esteja numa sequência ou conjunto de páginas Web:

  1. Verifique se todos os elementos link pertencentes à navegação ocorrem na secção head do documento.

  2. Para cada elemento link existente na secção head do documento pertencente à navegação, verifique se contém no mínimo:

    1. um atributo rel a identificar o tipo de link

    2. um atributo href válido para localizar o recurso apropriado

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H60: Utilizar o elemento link para aceder a um glossário através de um link

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Alguns agentes de utilizador fornecem uma barra de navegação opcional que irá apresentar as informações especificadas no elemento link . As versões actuais dos browsers Mozilla e Opera fornecem esta funcionalidade. O IE 6.0 e o Firefox 1.5 não oferecem esta funcionalidade, mas esta pode estar disponível através de extensões ou de suplementos. Consulte O elemento "link" em (X)HTML (página em alemão) para obter mais informações sobre o suporte do browser para o elemento link .

Descrição

O objectivo desta técnica é fornecer um mecanismo para localizar um glossário. Quando os termos no conteúdo são definidos numa página de glossário separada, o glossário é referenciado utilizando um elemento link no elemento head do documento que utiliza o glossário. O atributo rel do elemento link está definido para "glossário" e o atributo href contém o URI da página de glossário. Os agentes de utilizador podem assim ajudar os utilizadores a aceder ao glossário rápida e facilmente.

Exemplos

Exemplo 1: O Glossário das WCAG 2.0

Código Exemplo:

                                       <link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Para qualquer conjunto de palavras e respectivas definições que pretendam funcionar como um glossário:

  1. Verifique se a secção head da página Web que contém as palavras, frases ou abreviaturas definidas num glossário inclui um elemento link .

  2. Verifique se o elemento link tem o atributo rel="glossary"

  3. Verifique se o atributo href do elemento link faz referência à página do glossário.

Resultados Esperados

  • Todos os passos acima são verdadeiros.

Nota: A definição de abreviatura utilizada nas WCAG é: "forma abreviada de uma palavra, frase ou nome, em que a definição por extenso original não tenha sido rejeitada pela organização à qual se refere, e em que a abreviatura não se torna parte da língua."


H62: Utilizar o elemento ruby

Aplicabilidade

XHTML 1.1.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

A marcação Ruby inclui o rp elemento como um mecanismo alternativo para os agentes de utilizador que não suportam o XHTML 1.1. Embora a marcação Ruby só seja definida no XHTML 1.1, o IE 5.0 e posterior suportam os elementos ruby, rt e rp mesmo se forem utilizados em HTML 4.01 ou XHTML 1.0.

Descrição

O objectivo desta técnica é utilizar a anotação Ruby para fornecer informações sobre a pronúncia e o significado de uma ocorrência de texto, em que o significado é determinado pela pronúncia.

Existem vários idiomas nos quais uma ocorrência de texto pode ter significados diferentes consoante a forma como o texto é pronunciado. Isto é comum em idiomas do leste asiático, bem como no hebraico, no árabe e noutros idiomas; também ocorre em inglês e noutros idiomas da Europa Ocidental.

A Anotação Ruby permite ao autor anotar um "texto base", fornecendo uma indicação da pronúncia e, em alguns casos, também uma definição. Normalmente, Ruby é utilizada para texto em japonês e noutros idiomas do leste asiático. A Anotação Ruby é definida como um módulo para o XHTML 1.1.

Existem dois tipos de marcação Ruby: simples e complexa. A marcação Ruby simples aplica-se a uma ocorrência de texto, tal como uma palavra ou frase completa. Isto é conhecido como o texto "base" (elementorb ). A anotação Ruby que indica como pronunciar o termo (o elemento rt ou texto Ruby) é apresentada num tamanho de letra mais pequeno. (O termo "Ruby" deriva de um tamanho de letra pequeno utilizado para esta finalidade em textos escritos.) Normalmente, o texto Ruby é apresentado acima ou imediatamente antes do texto base, ou seja, imediatamente acima do texto horizontal ou imediatamente à direita do texto vertical. Por vezes, o japonês utiliza Ruby para fornecer o significado do texto no outro lado do texto base (visualmente) a partir da anotação fonética. A marcação Ruby simples também fornece uma opção "alternativa" para os agentes de utilizador que não suportam a marcação Ruby (ou seja, agentes de utilizador que não suportam o XHTML 1.1).

A marcação Ruby complexa permite dividir o texto base em unidades mais pequenas, que podem ser associadas a uma anotação Ruby separada. A marcação Ruby complexa não suporta a opção alternativa.

A anotação Ruby não é comum em idiomas como o hebraico, em que os tipos de letra Unicode podem incluir sinais diacríticos que transmitem a pronúncia. Também não é comum em inglês e nos idiomas europeus.

Nota: A razão principal para indicar a pronúncia através de Ruby, ou quaisquer outros meios, é tornar o conteúdo acessível a pessoas com incapacidades que conseguem ler e compreender o idioma do conteúdo se as informações sobre a pronúncia forem fornecidas. Não é necessário fornecer informações sobre a pronúncia para serem utilizadas por pessoas que não estão familiarizadas com o idioma do conteúdo.

Exemplos

Exemplo 1: Marcação Ruby que fornece informações sobre a pronúncia de uma inicial

Este exemplo utiliza a anotação Ruby para fornecer a pronúncia da inicial (acrónimo) formada pelas primeiras letras das palavras Web Content Accessibility Guidelines (Directrizes de Acessibilidade para o Conteúdo da Web). As letras WCAG são a base (o elemento rb), e as informações sobre a pronúncia são apresentadas pelo texto Ruby (o elemento rt). O elemento Ruby entre parênteses rp é utilizado para os agentes de utilizador que não suportam anotações Ruby para indicar que o texto no elemento rt fornece as informações sobre a pronúncia. As informações sobre a pronúncia são apresentadas entre parênteses imediatamente a seguir ao texto base. (Os agentes de utilizador que suportam Ruby não mostram os parênteses.)

Código Exemplo:

<p>When we talk about these guidelines, we often just call them
  <ruby>
    <rb>WCAG</rb>
    <rp>(</rp>
      <rt>Wuh-KAG</rt>
    <rp>)</rp>
  </ruby>.
</p>

Exemplo 2: Anotação Ruby para japonês

O seguinte é um exemplo em japonês. Para o japonês, Ruby é utilizada para fornecer a leitura dos caracteres Han (Kanji). O elemento Ruby entre parênteses rp é utilizado para agentes de utilizador que não suportam anotações Ruby para indicar que o texto no elemento rt fornece as informações sobre a pronúncia. As informações sobre a pronúncia são apresentadas entre parênteses imediatamente a seguir ao texto base. (Os agentes de utilizador que suportam Ruby não mostram os parênteses).

Código Exemplo:

<p>
  <ruby>
    <rb>慶應大学</rb>
    <rp>(</rp>
    <rt>けいおうだいがく</rt>
    <rp>)</rp>
  </ruby>
</p> 

Recursos

Testes

Procedimento

Para cada ocorrência de texto em que a anotação Ruby seja utilizada para fornecer informações sobre a pronúncia:

  1. Verifique se um elemento rt contém informações sobre a pronúncia para cada ocorrência de texto definida pelo elemento rb .

  2. Se for utilizada a marcação Ruby simples, verifique se o elemento rp existe para indicar aos agentes de utilizador que não suportam anotações Ruby que o texto no elemento rt fornece informações sobre a pronúncia.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H63: Utilizar o atributo scope para associar células de cabeçalho a células de dados em tabelas de dados

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Os valores row e col do atributo scope são, actualmente, suportados em grande medida pela maioria das versões actuais do JAWS. Contudo, ainda existem alguns problemas e o suporte do WindowEyes para o scope é inconsistente. O mesmo se passa para as versões japonesas destes leitores de ecrã. As versões do JAWS anteriores à versão 5 e as versões mais antigas do WindowsEyes têm um suporte inconsistente para o scope.

Actualmente, quem pretender garantir um suporte consistente das Tecnologias de Apoio para as tabelas em que os cabeçalhos não estão na primeira linha/coluna pode pretender utilizar a técnica para tabelas complexas H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados. Para as tabelas simples que têm cabeçalhos na primeira coluna ou linha, recomendamos a utilização dos elementos th e td .

Descrição

O objectivo desta técnica é associar células de cabeçalho a células de dados utilizando o atributo scope . O atributo scope pode ser utilizado para clarificar o âmbito de qualquer célula utilizada como um cabeçalho. O âmbito identifica se a célula é um cabeçalho para uma linha, coluna ou grupo de linhas ou colunas. Os valores row, col, rowgroup e colgroup identificam estes possíveis âmbitos respectivamente.

Para as tabelas de dados simples, em que o cabeçalho não esteja na primeira linha ou coluna, tal como o apresentado no Exemplo 1, esta técnica pode ser utilizada. Com base no suporte actual de leitores de ecrã, sugerimos a sua utilização em duas situações, ambas relacionadas com tabelas simples:

  • células de dados marcadas com td que também funcionam como cabeçalho de linha ou cabeçalho de coluna,

  • células de cabeçalho marcadas com td em vez de th. Por vezes, os autores utilizam-no para evitar as características de visualização associadas a th e também não escolhem utilizar o CSS para controlar a apresentação de th.

Nota: Para as tabelas simples que têm os cabeçalhos na primeira linha ou coluna é suficiente utilizar simplesmente os elementos TH sem o âmbito.

Nota: Para as tabelas complexas, utilize ids e headers, conforme indicado em H43: Utilizar os atributos id e headers para associar células de dados a células de cabeçalho em tabelas de dados.

Exemplos

Exemplo 1: Uma agenda simples

No exemplo seguinte, a coluna 1 contém números de série para linhas da tabela e a segunda coluna contém o valor-chave para a linha. As células na segunda coluna podem assim utilizar o scope="row". As células da primeira linha também estão marcadas com o td e utilizam o scope="col".

Código Exemplo:

                                       <table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <td scope="col">Name</td>
    <td scope="col">Phone#</td>
    <td scope="col">Fax#</td>
    <td scope="col">City</td>
  </tr><tr>
    <td>1.</td>
    <td scope="row">Joel Garner</td>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <td scope="row">Clive Lloyd</td>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <td scope="row">Gordon Greenidge</td>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

Recursos

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

Testes

Procedimento

Para cada tabela de dados:

  1. Verifique se todos os elementos th têm um atributo scope .

  2. Verifique se todos os elementos td que funcionam como cabeçalhos para outros elementos têm um atributo scope .

  3. Verifique se todos os atributos scope têm o valor row, col, rowgroup ou colgroup.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H64: Utilizar o atributo title da frame e os elementos iframe

Aplicabilidade

Documentos HTML e XHTML que utilizem frames ou iframes.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

A utilização do atributo longdesc em elementos frame e iframe não é perfeitamente suportada pelas tecnologias de apoio.

Descrição

O objectivo desta técnica é demonstrar a utilização do atributo title do elemento frame ou iframe para descrever os conteúdos de cada frame. Isto fornece uma etiqueta para a frame, de modo a que os utilizadores possam determinar a frame a introduzir e a explorar em pormenor. Não identifica a página individual (frame) ou frame em linha (iframe) no conjunto de frames.

Tenha em atenção que o atributo title identifica frames, e é diferente do elemento title, que identifica documentos. Ambos devem ser fornecidos, uma vez que o primeiro facilita a navegação entre frames e o segundo clarifica a localização actual do utilizador.

O atributo title não é substituível pelo atributo name . O title identifica a frame para os utilizadores, o name identifica-a para scripting e definição de janelas. O name não é apresentado ao utilizador, apenas é apresentado o title .

Exemplos

Exemplo 1

Este exemplo mostra como utilizar o atributo title com frame para descrever as frames que contêm a barra de navegação e o documento.

Código Exemplo:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>A simple frameset document</title>
  </head>
  <frameset cols="10%, 90%">
    <frame src="nav.html" title="Main menu" />
    <frame src="doc.html" title="Documents" />
    <noframes>
      <body>
        <a href="lib.html" title="Library link">Select to
        go to the electronic library</a>
      </body>
    </noframes>
  </frameset>
</html> 

Exemplo 2

Este exemplo mostra como utilizar o atributo title com o iframe para descrever os conteúdos de uma frame em linha. O exemplo também inclui um link alternativo para a página incluída pelo elemento iframe para browsers mais antigos, que possam não compreender o elemento iframe.

Código Exemplo:

                                       <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>A document using iframe</title>
  </head>
 ...
<iframe src="banner-ad.html" id="testiframe" 
  name="testiframe" title="Advertisement">
    <a href="banner-ad.html">Advertisement</a>
</iframe>
 ...
</html> 

Recursos

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

Testes

Procedimento

  1. Verifique se existe um atributo title em cada elemento frame e iframe no código fonte HTML ou XHTML.

  2. Verifique se o atributo title contém texto que identifique a frame.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H65: Utilizar o atributo title para identificar controlos de formulário quando o elemento label não puder ser utilizado

Aplicabilidade

Controlos de formulário HTML e XHTML que não estejam identificados utilizando value, alt ou conteúdo do elemento.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Os agentes de utilizador irão apresentar uma descrição quando o ponteiro do rato estiver sobre um elemento input que contenha um atributo title .

  • Se não existir nenhum label disponível, o JAWS e o Window-Eyes lêem o atributo title quando o controlo de formulário recebe o foco.

    • O JAWS 6.0 e posterior podem ser definidos para ler o label e o title quando os dois itens forem diferentes; contudo, muito poucos utilizadores têm conhecimento desta definição.

    • O WindowEyes 5.5 tem uma tecla de atalho, ins-E, que irá apresentar informações adicionais, incluindo o atributo title, para o item com o foco.

Descrição

O objectivo desta técnica é utilizar o atributo title para identificar controlos de formulário quando o design visual não pode incluir a etiqueta (por exemplo, se não existir nenhum texto no ecrã que possa ser identificado como uma etiqueta), ou quando possa ser confuso apresentar uma etiqueta. Os agentes de utilizador, incluindo as tecnologias de apoio, podem ler o atributo title .

Exemplos

Exemplo 1: Um menu pendente que limita o âmbito da procura

Um formulário de procura utiliza um menu pendente para limitar o âmbito da procura. O menu pendente está imediatamente adjacente ao campo de texto utilizado para introduzir o termo da procura. A relação entre o campo de procura e o menu pendente é clara para os utilizadores que conseguem ver o design visual, que não tem espaço para uma etiqueta visível. O atributo title é utilizado para identificar o menu select . O atributo title pode ser lido por leitores de ecrã ou apresentado como uma descrição às pessoas que utilizam ampliadores de ecrã.

Código Exemplo:

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
…
</select> 

Exemplo 2: Campos de entrada para um número de telefone

Uma página Web inclui controlos para introduzir um número de telefone dos Estados Unidos, com três campos para o indicativo, a central telefónica e os últimos quatro dígitos.

Código Exemplo:

<fieldset><legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" 
type="text" size="4" value="" >
</fieldset> 

Exemplo 3: Uma Função de Procura

Uma página Web inclui um campo de texto, no qual o utilizador pode introduzir termos de procura, e um botão intitulado "Procura" para efectuar a procura. O atributo title é utilizado para identificar o controlo de formulário e o botão encontra-se imediatamente a seguir ao campo de texto, de modo a ser claro para o utilizador que o campo de texto é onde deve introduzir o termo da procura.

Código Exemplo:

<input type="text" title="Type search term here" value="Type search term here"/> <input type="submit" value="Search"/>

Recursos

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

Testes

Procedimento

  1. Identifique cada controlo de formulário que não esteja associado a um elemento label .

  2. Verifique se o controlo tem um atributo title .

  3. Verifique se o atributo title identifica a finalidade do controlo.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H67: Utilizar texto alt nulo e nenhum atributo title em elementos img para imagens que a TA deve ignorar

Aplicabilidade

Documentos HTML e XHTML que carreguem imagens.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é mostrar como as imagens podem ser assinaladas de modo a poderem ser ignoradas pela Tecnologia de Apoio.

Se não for utilizado nenhum atributo title, e o texto alt estiver definido para nulo (i.e., alt=""), indica à tecnologia de apoio que a imagem pode ser ignorada sem qualquer risco.

Nota: Embora alt=" " também seja válido, é recomendada a utilização de alt="" .

Nota: Ter um atributo ALT "nulo" não é o mesmo que não ter nenhum atributo ALT.

Exemplos

Exemplo 1

A imagem seguinte é utilizada para introduzir uma imagem decorativa numa página Web.

Código Exemplo:

<img src="squiggle.gif" width="20" height="20" alt="" />

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Para cada imagem que deve ser ignorada:

  1. Verifique se o atributo title está em falta ou está vazio.

  2. Verifique se o atributo alt existe e está vazio ou se inclui apenas um espaço em branco (mas não &nbsp;).

Resultados Esperados

  • O passo 1 e 2 são verdadeiros.


H69: Fornecer elementos heading no início de cada secção de conteúdo

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O JAWS e o WindowEyes fornecem navegação através de cabeçalhos e fornecem informações sobre o nível do cabeçalho. O browser Opera fornece um mecanismo para navegar através de cabeçalhos. Os plug-ins adicionais suportam a navegação através de cabeçalhos noutros agentes de utilizador.

Descrição

O objectivo desta técnica é utilizar cabeçalhos de secção para transmitir a estrutura do conteúdo. A marcação de cabeçalhos pode ser utilizada para:

  • indicar o início do conteúdo principal,

  • marcar cabeçalhos de secção na área do conteúdo principal,

  • demarcar secções de navegação diferentes, tais como a navegação superior ou principal, a navegação à esquerda ou secundária e a navegação no rodapé,

  • marcar imagens (com texto) que tenham o aspecto visual de cabeçalhos.

Em algumas tecnologias, os cabeçalhos são concebidos para transmitir uma hierarquia lógica. Ignorar níveis na sequência de cabeçalhos pode criar a ideia de que a estrutura do documento não foi correctamente concebida, ou que foram escolhidos cabeçalhos específicos pela sua apresentação visual e não pelo seu significado. É recomendado aos autores que encaixem os cabeçalhos de forma hierárquica.

Uma vez que os cabeçalhos indicam o início de secções importantes do conteúdo, os utilizadores com tecnologias de apoio podem avançar directamente para o cabeçalho apropriado e começar a ler o conteúdo. Isto acelera significativamente a interacção para os utilizadores que, de outra forma, iriam aceder lentamente ao conteúdo.

Nas tecnologias que suportam o CSS (Folhas de Estilo em Cascata), o estilo pode ser utilizado para alterar o aspecto dos cabeçalhos. Até é possível conceber cabeçalhos utilizando o CSS, de modo a ficarem expostos para a tecnologia de apoio, mas ocultos à vista normal. Contudo, mostrar os cabeçalhos visualmente beneficia um conjunto mais vasto de utilizadores, incluindo os que têm algumas incapacidades cognitivas.

Exemplos

Exemplo 1

Este exemplo organiza as secções de uma página de procura, assinalando cada cabeçalho de secção utilizando os elementos h2 .

Código Exemplo:

<h1>Search Technical Periodicals</h1>
 <h2>Search</h2>
 <form action="search.php">
  <p><label for="searchInput">Enter search topic: </label>
  <input type="text" size="30" id="searchInput">
  <input type="submit" value="Go"></p>
 </form>
 <h2>Available Periodicals</h2>
 <div class="jlinks">
  <a href="pcoder.com">Professional Coder</a> |
  <a href="algo.com">Algorithms</a> |
  <a href="jse.com">Journal of Software Engineering</a>
 </div>
 <h2>Search Results</h2>
 ... search results are returned in this section ... 

Exemplo 2: Cabeçalhos que mostram toda a organização do conteúdo

Neste exemplo, a marcação de cabeçalhos é utilizada para tornar as secções de navegação e de conteúdo principal perceptíveis.

Código Exemplo:

<!-- Logo, banner graphic, search form, etc.  -->
  <h2>Navigation</h2>
    <ul>
      <li><a href="about.htm">About us</a></li>
      <li><a href="contact.htm">Contact us</a></li>
       ...
    </ul>
  <h2>All about headings</h2>
   <!-- Text, images, other material making up the main content... --> 

Exemplo 3: Cabeçalhos que mostram a organização do conteúdo no conteúdo principal

Tenha em atenção que em HTML 4.01 e em XHTML 1.x, os elementos heading só assinalam o início das secções; não as incluem como conteúdo do elemento.

Código Exemplo:

                                       <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Cooking techniques</title>  
  </head>   
  <body>     
    <h1>Cooking techniques</h1>     
    <p>       
      ... some text here ...     
    </p>           
    <h2>Cooking with oil</h2> 
    <p> 
        ... text of the section ...     
    </p>           
    <h2>Cooking with butter</h2>       
    <p>
        ... text of the section ...     
    </p>   
  </body> 
</html> 

Recursos

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

Testes

Procedimento

Para todo o conteúdo que esteja dividido em secções separadas:

  1. Verifique se cada secção começa com um cabeçalho.

Resultados Esperados

  • O passo 1 é verdadeiro.


H70: Utilizar elementos frame para agrupar blocos de material repetido

Aplicabilidade

Documentos HTML e XHTML que utilizem frames.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como os conjuntos de frames podem ser utilizados para agrupar blocos de conteúdo repetido. Uma vez que a maioria dos agentes de utilizador e das tecnologias de apoio fornecem uma forma de navegar de frame para frame, a utilização de frames para organizar elementos pode fornecer um mecanismo que permite ignorar facilmente os blocos de conteúdo repetido. Se o sítio da Web utilizar conjuntos de frames, organize os blocos de conteúdo em frames separadas. Certifique-se de que os blocos de conteúdo repetido aparecem na mesma frame no conjunto de frames de cada página Web. Além disso, cada elemento frame tem de ter um atributo title para descrever o conteúdo da frame. Quando as frames estão correctamente identificadas, os utilizadores podem utilizar a navegação nas frames para navegar facilmente entre blocos de conteúdo.

Esta técnica é apropriada quando já tiverem sido utilizados conjuntos de frames para organizar o conteúdo da página; são recomendadas outras técnicas para páginas que ainda não estejam a utilizar conjuntos de frames, uma vez que muitas pessoas que utilizam tecnologias de apoio têm problemas com as frames. Está disponível uma técnica de tipo aconselhada sobre como utilizar noframes no Critério de Sucesso 4.2.1.

Exemplos

Exemplo 1

O exemplo seguinte mostra como utilizar duas frames para organizar o conteúdo. A origem da primeira frame é a página Web, navigation.html, que contém o HTML para a navegação. Esta frame tem um atributo title que a identifica como uma barra de navegação. A segunda frame inclui o conteúdo principal do sítio da Web, conforme indicado pelo parâmetro de origem de main.html e o atributo title "Conteúdo Principal", que identifica a sua função.

Código Exemplo:

<frameset cols="20%, *">
  <frame src="navigation.html" name="navbar" title="Navigation Bar" />
  <frame src="main.html" name="maincontent" title="Main News Content" />
  <noframes>
    <p>View <a href="noframe.html">no frame version</a>.</p>
  </noframes>
</frameset> 

Recursos

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

Testes

Procedimento

Se a página Web utilizar frames para reconhecer conteúdo:

  1. Verifique se os blocos repetidos de conteúdo estão organizados em frames separadas.

  2. Verifique se as frames com conteúdo repetido aparecem na mesma localização em cada conjunto de frames.

Resultados Esperados

  • Os passos 1 e 2 são verdadeiros.


H71: Fornecer uma descrição para grupos de controlos de formulário utilizando elementos fieldset e legend

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um agrupamento semântico para controlos de formulário relacionados. Isto permite aos utilizadores compreender a relação dos controlos e interagir com o formulário de forma mais rápida e eficaz.

Os controlos de formulário podem ser agrupados adicionando-lhes o elemento fieldset . Assim, todos os controlos num determinado fieldset estão relacionados. O primeiro elemento dentro do fieldset deve ser um elemento legend, que fornece uma etiqueta ou instruções para o grupo. Se pretendido, os fieldsets podem ser encaixados, embora isso possa provocar uma confusão se for em excesso.

O agrupamento de controlos é mais importante para caixas de verificação e botões de opção relacionados. Um conjunto de botões de opção ou caixas de verificação é relacionado quando todos submetem valores para um único campo indicado. Funcionam da mesma forma que as listas de selecção, permitindo ao utilizador escolher a partir de um conjunto de opções, com a excepção de que as listas de selecção são controlos únicos, enquanto os botões de opção e as caixas de verificação são controlos múltiplos. Como são controlos múltiplos, é particularmente importante que sejam agrupados de forma semântica, de modo a poderem ser tratados mais facilmente como um único controlo. É frequente os agentes de utilizador apresentarem o valor de legend antes da etiqueta de cada controlo, para lembrar aos utilizadores que fazem parte do mesmo grupo.

Também pode ser útil agrupar outros conjuntos de controlos que não estejam tão intimamente relacionados como os conjuntos de botões de opção e caixas de verificação. Por exemplo, podem ser agrupados vários campos com o endereço de um utilizador com uma legenda de "Endereço".

Por vezes, os autores evitam utilizar o elemento fieldset devido à apresentação predefinida no browser, que desenha um contorno à volta dos controlos agrupados. Este agrupamento visual também é útil e os autores deviam considerar seriamente mantê-lo (ou alguma forma de agrupamento visual). O efeito visual pode ser modificado no CSS, substituindo a propriedade "border" do fieldset e a propriedade "position" de legend.

Quando um pequeno grupo de botões de opção relacionados inclui instruções claras e selecções distintas, poderá não ser necessário utilizar fieldsets e legends; a técnica H44: Utilizar elementos label para associar etiquetas de texto a controlos de formulário também pode ser suficiente.

Exemplos

Exemplo 1: Um teste de escolha múltipla

Este exemplo mostra um item de teste com uma pergunta e cinco respostas possíveis. Cada resposta é representada por um botão de opção (input type="radio"). Os botões de opção estão contidos num fieldset. A pergunta do teste está marcada com o elemento legend .

Código Exemplo:

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">William Shakespeare</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">Rudyard Kipling</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">George Bernard Shaw</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">Ernest Hemingway</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">Charles Dickens</label>
</fieldset> 

Exemplo 2: Um conjunto de caixas de verificação

A página Perfil de Utilizador de um sítio da Web permite aos utilizadores indicar os seus interesses, seleccionando várias caixas de verificação. Cada caixa de verificação (input type="checkbox") tem um label. As caixas de verificação estão contidas num fieldset e o elemento legend inclui a indicação para todo o grupo de caixas de verificação.

Código Exemplo:

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">Photography</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">Watercolor</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">Acrylic</label>
  …
</fieldset> 

Exemplo 3: Botões de opção que submetem para o mesmo campo indicado

Este exemplo pede ao utilizador que escolha um único filósofo. Tenha em atenção que cada campo tem o mesmo atributo "name", a indicar que estes botões de opção estão relacionados (todos submetem o mesmo campo), e devem ser agrupados conforme ilustrado. Tenha igualmente em atenção que, enquanto os atributos "name" são os mesmos, os atributos "id" têm de ser exclusivos.

Código Exemplo:

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>Your preferred philosopher</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">Socrates</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">Plato</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">Aristotle</label>
  </fieldset>
  </form> 

Nota: Os grupos de caixas de verificação relacionadas funcionam da mesma forma, com a excepção de que o utilizador pode indicar mais de uma preferência para o campo.

Exemplo 4: Controlos relacionados de forma lógica

Neste exemplo, os campos de formulário para endereços residenciais e postais são distinguidos pelo valor de legend em cada agrupamento fieldset .

Código Exemplo:

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>Residential Address</legend>
     <label for="raddress">Address: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">Postal/Zip Code: </label>
     <input type="text" id="rzip" name="rzip" />
     ...more residential address information...
   </fieldset>
   <fieldset>
     <legend>Postal Address</legend>
     <label for="paddress">Address: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">Postal/Zip Code: </label>
     <input type="text" id="pzip" name="pzip" />
     ...more postal address information...
   </fieldset>
</form>

Recursos

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

Testes

Procedimento

  1. Verifique se os grupos de elementos input relacionados de forma lógica estão incluídos num elemento fieldset.

  2. Verifique se algum grupo de elementos input de type="radio" ou type="checkbox" com o mesmo atributo name está incluído num elemento fieldset .

  3. Verifique se cada fieldset tem um elemento legend que inclua uma descrição desse grupo.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H73: Utilizar o atributo summary do elemento table para fornecer uma descrição geral das tabelas de dados

Aplicabilidade

HTML 4.01, XHTML 1.x.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma breve descrição geral de como os dados foram organizados numa tabela, ou uma breve explicação de como navegar na tabela. O atributo summary do elemento table disponibiliza estas informações às pessoas que utilizam leitores de ecrã; as informações não são apresentadas visualmente.

O summary é útil quando a tabela tem uma estrutura complexa (por exemplo, quando existem vários conjuntos de cabeçalhos de linha ou coluna, ou quando existem vários grupos de colunas ou linhas.) O summary também pode ser útil para tabelas de dados simples que incluem várias colunas ou linhas de dados.

O atributo summary pode ser utilizado independentemente de a tabela incluir ou não um elemento caption . Se ambos forem utilizados, o summary não deve duplicar o caption.

Embora as WCAG 2 não proíbam a utilização de tabelas de esquema, são recomendados os esquemas baseados em CSS para manter o significado semântico definido dos elementos table HTML e para estar em conformidade com a regra de codificação de separar a apresentação do conteúdo. Contudo, se for utilizada uma tabela de esquema, o atributo summary não é utilizado ou é nulo. A finalidade de uma tabela de esquema é, simplesmente, controlar a colocação do conteúdo; a própria tabela é “transparente" para o utilizador. Um summary poderia "acabar" com essa transparência chamando a atenção para a tabela. É aceitável um summary nulo (summary="") nas tabelas de esquema.

Exemplos

Exemplo 1: Uma tabela de dados com um resumo, mas sem legenda

Este exemplo mostra um horário de autocarro. O número da carreira e o destino estão incluídos no summary juntamente com as informações sobre como utilizar o horário.

Código Exemplo:

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table> 

Exemplo 2: Uma tabela de dados com um resumo e uma legenda

Neste exemplo, são utilizados um atributo summary e um elemento caption . O caption identifica o percurso do autocarro. O summary ajuda os utilizadores que são cegos a compreender como utilizar o horário. Os leitores de ecrã lêem o caption, seguido do summary.

Código Exemplo:

<table summary="Intersections are listed in row 1. 
Find the intersection closest to your starting point 
or destination, then read down that column to find 
out what time the bus leaves that intersection.  
Service begins at 4:00 AM and ends at midnight.">
  <caption>Route 7 Downtown (Weekdays)</caption>
…
</table>

Recursos

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

Testes

Procedimento

  1. Procure tabelas de esquema: verifique se o conteúdo tem uma relação com outro conteúdo, tanto na coluna como na fila.

    1. Se “não", a tabela é uma tabela de esquema.

    2. Se "sim", a tabela é uma tabela de dados.

  2. Se a tabela for uma tabela de esquema, verifique se o atributo summary não está presente ou se o atributo summary é nulo.

  3. Se a tabela for uma tabela de dados e existir um summary, verifique se o atributo summary descreve a organização da tabela ou explica como utilizá-la.

  4. Se existir um atributo summary e um elemento caption nesta tabela de dados, verifique se o summary não duplica o caption.

Resultados Esperados

  • Para as tabelas de esquema, o passo 2 é verdadeiro.

  • Para as tabelas de dados, os passos 3 e 4 são verdadeiros.


H74: Garantir que as marcas de abertura e de fecho sejam utilizadas de acordo com as especificações

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar erros de chave que são conhecidos por provocarem problemas nas tecnologias de apoio quando estão a tentar analisar conteúdo que inclui marcas de abertura e de fecho que não são utilizadas de acordo com a especificação. Estes erros podem ser evitados utilizando o mecanismo HTML ou XHTML para especificar a tecnologia e a respectiva versão, e certificando-se de que a página Web não tem este tipo de erros. Existem várias validações que o programador pode utilizar: normalmente, os relatórios de validação mencionam este tipo de erros. Esta técnica trata apenas dos erros relacionados com marcas de abertura e de fecho incorrectamente formadas. A declaração do tipo de documento não é obrigatoriamente necessária para este tipo de avaliação, mas especificar a declaração do tipo de documento facilita a utilização de uma validação.

Exemplos

Exemplo 1: HTML

As páginas HTML incluem uma declaração do tipo de documento (por vezes, referida como declaração !DOCTYPE ). O programador pode utilizar validações offline ou online (consulte os Recursos abaixo) para verificar se todos os valores do atributo id são exclusivos e se as marcas de abertura e de fecho são utilizadas de acordo com a especificação.

Exemplo 2: XHTML

Tal como outros documentos baseados em XML, os documentos XHTML fazem referência a uma Definição do Tipo de Documento (DTD) ou outro tipo de esquema XML. O programador pode utilizar validações online ou offline (incluindo ferramentas de validação integradas nos editores) para verificar se as marcas de abertura e de fecho são utilizadas de acordo com a especificação.

Exemplo 3: Utilizar estruturas de teste

Quando um sítio da Web gera HTML ou XHTML de forma dinâmica, em vez de apresentar apenas páginas estáticas, um programador pode utilizar XHTMLUnit (página em inglês), XML Test Suite (página em inglês) ou uma estrutura semelhante para testar o código XHTML gerado.

Recursos

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

Para obter outros recursos, consulte G134: Validar páginas Web.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Verifique se existem marcas de fecho para todos os elementos com marcas de fecho obrigatórias.

  2. Verifique se não existem marcas de fecho para todos os elementos em que as marcas de fecho são proibidas.

  3. Verifique se as marcas de abertura e de fecho para todos os elementos estão correctamente encaixadas.

Resultados Esperados

Os passos 1, 2 e 3 são verdadeiros.


H75: Garantir que as páginas Web sejam correctamente formadas

Aplicabilidade

Todas as linguagens de marcação baseadas em XML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar erros de chave que são conhecidos por provocarem problemas nas tecnologias de apoio quando estão a tentar analisar os conteúdos. A formação correcta é verificada, analisando o documento com um analisador XML em conformidade e verificando se o relatório de validação menciona erros de formação correcta. Todos os analisadores XML em conformidade são necessários para verificar a formação correcta e param o processamento normal quando é detectado um erro de formação correcta (um analisador XML em conformidade não necessita de suportar a validação).

Exemplos

Exemplo 1:

Os ficheiros XML incluem uma declaração do tipo de documento, um atributo xsi:schemaLocation ou outro tipo de referência a um esquema. O programador pode utilizar validações offline ou online, um editor XML ou um IDE com suporte XML (consulte os Recursos abaixo) para verificar a formação correcta.

Exemplo 2:

Quando os ficheiros XML não incluem uma declaração do tipo de documento, um atributo xsi:schemaLocation ou uma instrução de processamento indicando um esquema apesar de já existir um, o esquema relevante é especificado por uma instrução de linha de comandos, uma caixa de diálogo de utilizador ou um ficheiro de configuração, e o esquema dos ficheiros XML é verificado.

Exemplo 3:

Quando os ficheiros XML não incluem uma declaração do tipo de documento, um atributo xsi:schemaLocation ou uma instrução de processamento indicando um esquema apesar de já existir um, o espaço de nome é indicado para obter um documento de esquema ou directório de recursos (Resource Directory Description Language - Idioma de Descrição do Directório de Recursos: RDDL (página em inglês)), e o esquema dos ficheiros XML é verificado.

Exemplo 4:

Quando um sítio da Web gera XML de forma dinâmica, em vez de apresentar apenas documentos estáticos, um programador pode utilizar XMLUnit (página em inglês), XML Test Suite (página em inglês) ou uma estrutura semelhante para testar o código XML gerado.

Recursos

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

Para obter outros recursos, consulte G134: Validar páginas Web.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

  1. Carregue cada ficheiro para um analisador XML de validação.

  2. Verifique se não existem erros de formação correcta.

Resultados Esperados

O passo 2 é verdadeiro.


H76: Utilizar meta refresh para criar um redireccionamento imediato do lado do cliente

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir redireccionamentos do lado do cliente sem confundir o utilizador. Preferencialmente, os redireccionamentos são implementados do lado do servidor (consulte SVR1: Implementar redireccionamentos automáticos no lado do servidor em vez de no lado do cliente (SERVIDOR)), mas os autores nem sempre têm controlo sobre tecnologias do lado do servidor.

Em HTML e XHTML, uma pessoa pode utilizar o elemento meta com o valor do atributo http-equiv definido para "Actualizar" e o valor do atributo content definido para "0" (significando zero segundos), seguido pelo URI que o browser deve solicitar. É importante que o tempo limite esteja definido para zero, para evitar que o conteúdo seja apresentado antes de a página nova ser carregada. A página que inclui o código de redireccionamento só deve incluir informações relacionadas com o redireccionamento.

Exemplos

Exemplo 1

Código Exemplo:

                                       <html xmlns="http://www.w3.org/1999/xhtml">    
  <head>      
    <title>The Tudors</title>      
    <meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />    
  </head>    
  <body> 
    <p>This page has moved to a <a href="http://thetudors.example.com/">
      theTudors.example.com</a>.</p> 
  </body>  
</html> 

Recursos

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

Testes

Procedimento

  1. Encontre todos os elementos meta existentes no documento.

  2. Para cada elemento meta, verifique se inclui o atributo http-equiv com o valor "refresh" (sensível a maiúsculas e minúsculas) e o atributo content com um número superior a 0 seguido de ;'URL=anyURL' (em que anyURL corresponde ao URI que deve substituir a página actual).

Resultados Esperados

O passo 2 é verdadeiro.


H77: Identificar a finalidade de um link utilizando o texto do link em conjunto com os respectivos itens da lista

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é identificar a finalidade de um link a partir do link e do contexto do respectivo item de lista. O item de lista relacionado com o link fornece o contexto para um link, que seria, de outra forma, pouco claro, quando o item do link é o elemento ancestor do nível do bloco mais próximo. A descrição permite ao utilizador distinguir este link de outros na página Web que conduzem a outros destinos e ajuda o utilizador a determinar se deve aceder ao link. De salientar que, fornecer simplesmente o URI do destino não é, regra geral, suficientemente descritivo.

Nota: Estas descrições são muito úteis para o utilizador se as informações adicionais necessárias para compreender o link precederem o mesmo. Se as informações adicionais estiverem a seguir ao link, podem originar confusão e dificuldade aos utilizadores de leitores de ecrã que lêem a página por ordem (de cima para baixo).

Exemplos

Exemplo 1

Código Exemplo:

<ul>
  <li>
    Check out the video report for last year's 
    <a href="festival.htm">National Folk Festival</a>.
  </li>
  <li>
    <a href="listen.htm">Listen to the instruments</a>
  </li>
  <li>
    Guitar Man: George Golden talks about 
    <a href="mkguitars.htm">making guitars</a>.
  </li>
</ul>

Exemplo 2: Uma lista de jogos de vídeo para download

Código Exemplo:

<ul>
  <li>
    <a href="tomb_raider.htm">Tomb Raider: Legend</a>
    <a href="tomb_raider_images.htm">See Images</a>
    <a href="tomb_raider.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
    <a href="fear_extraction_images.htm">See Images</a>
    <a href="fear_extraction.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="call_of_duty.htm">Call of Duty 2</a>
    <a href="call_of_duty_images.htm">See Images</a>
    <a href="call_of_duty.mpeg">(Download Demo)</a>
  </li>
  <li>
    <a href="Warhammer 40K.htm">Warhammer 40K</a>
    <a href="warhammer_40k_images.htm">See Images</a>
    <a href="Warhammer_40k.mpeg">(Download Demo)</a>
  </li>
</ul> 

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Verifique se o link é parte de um item de lista.

  2. Verifique se o texto do link em conjunto com o texto do respectivo item de lista descreve a finalidade do link.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H78: Identificar a finalidade de um link utilizando o texto do link em conjunto com o respectivo parágrafo

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O JAWS 5.0 ou posterior incluem as seguintes combinações de tecla:

  • alt+Seta para a Esquerda: ler frase anterior

  • alt+Seta para a Direita: ler frase seguinte

  • alt+NumPad 5: ler frase actual

  • Ctrl+NumPad5: ler parágrafo actual

A combinação de teclas "ler frase actual" suporta os exemplos 1, 2 e 4 abaixo. Se pressionar alt+numPad5 quando um link recebe o foco, a frase é lida sem alterar o foco.

A combinação de teclas "ler parágrafo actual" suporta o exemplo 3 abaixo. Se pressionar Ctrl+NumPad 5 quando o link recebe o foco, todo o parágrafo é lido sem alterar o foco.

O Window-Eyes 5.5 inclui teclas de atalho para ler a frase e o parágrafo actuais; assim, o Window-Eyes 5.5 suporta os exemplos indicados abaixo.

Para navegar na Internet com o WindowEyes, tem de estar em modo de procura. As teclas de atalho para a frase e o parágrafo actuais não funcionam em modo de procura na versão 6.1.

As predefinições de origem para ler o contexto do link adjacente são as seguintes:

Definições para computadores de secretária:

  • Carácter = CTRL-NUMPAD-SETA PARA A ESQUERDA

  • Palavra = CTRL-NUMPAD-SETA PARA A DIREITA

  • Linha = CTRL-NUMPAD-CENTRO

  • Frase = Não disponível em modo de procura

  • (Por predefinição, o comando Frase Seguinte não está definido no modo de Computador de Secretária, mas para a "linha seguinte" é a Seta PARA BAIXO.)

  • Parágrafo Seguinte = P

  • Parágrafo Anterior = Shift P

  • Parágrafo Actual = Não disponível em modo de procura

Computador portátil

  • Carácter = ALT-SHIFT-INFERIOR A

  • Palavra Anterior = ALT-SHIFT-J

  • Palavra = ALT-SHIFT-K

  • Palavra Seguinte = ALT-SHIFT-L

  • Palavra Anterior = ALT-SHIFT-7

  • Frase = Não disponível em modo de procura

  • Frase Seguinte = Não disponível em modo de procura

  • Parágrafo = Por predefinição, não definido para Computador Portátil

  • Linha Anterior = ALT-SHIFT-U

  • Linha = ALT-SHIFT-I

  • Linha Seguinte = ALT-SHIFT-O

O comando "ler elemento principal" no Fire Vox (Ctrl+Shift+u) suporta o exemplo 3. Esta combinação de teclas funciona sem alterar o foco. O Fire Vox (página em inglês) é um leitor de ecrã gratuito concebido especificamente para o Firefox 1.0 e posterior. Suporta Windows, Macintosh e Linux.

Descrição

O objectivo desta técnica é identificar a finalidade de um link a partir do link no respectivo contexto do parágrafo. O parágrafo relacionado com o link fornece o contexto para um link, que seria, de outra forma, pouco claro, quando o parágrafo é o elemento ancestor do nível do bloco mais próximo. A descrição permite ao utilizador distinguir este link de outros na página Web que conduzem a outros destinos e ajuda o utilizador a determinar se deve aceder ao link. De salientar que, fornecer simplesmente o URI do destino não é, regra geral, suficientemente descritivo.

Nota: Estas descrições são muito úteis para o utilizador se a informação adicional necessária para compreender o link preceder o mesmo. Se a informação adicional se encontrar após o link, pode causar confusão e dificuldade aos utilizadores de leitores de ecrã que lêem a página por ordem (de cima para baixo).

Exemplos

Exemplo 1

Coluna de anúncios numa página Web de um Festival de Folk.

Código Exemplo:

<h3>The final 15</h3>
<p>Coming soon to a town near you...the final 15 in the 
National Folk Festival lineup.
<a href="final15.html">[Read more...]</a>
</p>

<h3>Folk artists get awards</h3>
<p>Performers from the upcoming National Folk Festival receive 
 National Heritage Fellowships. 
 <a href="nheritage.html">[Read more...]</a>
</p>
… 

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Verifique se o link é parte de um parágrafo.

  2. Verifique se o texto do link em conjunto com o texto do respectivo parágrafo descreve a finalidade do link.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H79: Identificar a finalidade de um link utilizando o texto do link em conjunto com a respectiva célula de tabela e cabeçalhos de tabela associados

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é identificar a finalidade de um link a partir do link existente no respectivo contexto da tabela de dados. Este contexto é a célula de tabela junto ao link e os cabeçalhos associados da célula. O contexto da tabela de dados fornece a finalidade para um link que seria, de outra forma, pouco claro quando a célula de tabela é o elemento ancestor do nível do bloco mais próximo. Permite ao utilizador distinguir este link de outros na página Web que conduzem a outros destinos e ajuda o utilizador a determinar se deve aceder ao link. De salientar que, fornecer simplesmente o URI do destino não é, regra geral, suficientemente descritivo para pessoas com incapacidades, especialmente as cognitivas.

Exemplos

Exemplo 1: Uma tabela de opções de automóveis de aluguer

Código Exemplo:

                         <table>
<tr>
  <th></th>
  <th id="a1">Alamo</th>
  <th id="a2">Budget</th>
  <th id="a3">National</th>
  <th id="a4">Avis</th>
  <th id="a5">Hertz</th>
</tr>
<tr>
  <th id="b1">Economy cars</th>
  <td headers="a1 b1"><a href="econ_ala.htm">$67/day</a></td>
  <td headers="a2 b1"><a href="econ_bud.htm">$68/day</a></td>
  <td headers="a3 b1"><a href="econ_nat.htm">$72/day</a></td>
  <td headers="a4 b1"><a href="econ_av.htm">$74/day</a></td>
  <td headers="a5 b1"><a href="econ_hz.htm">$74/day</a></td>
</tr>
<tr>
  <th id="b2">Compact cars</th>
  <td headers="a1 b2"><a href="comp_ala.htm">$68/day</a></td>
  <td headers="a2 b2"><a href="comp_bud.htm">$69/day</a></td>
  <td headers="a3 b2"><a href="comp_nat.htm">$74/day</a></td>
  <td headers="a4 b2"><a href="comp_av.htm">$76/day</a></td>
  <td headers="a5 b2"><a href="comp_hz.htm">$76/day</a></td>
</tr>
<tr>
  <th id="b3">Mid-sized cars</th>
  <td headers="a1 b3"><a href="mid_ala.htm">$79/day</a></td>
  <td headers="a2 b3"><a href="mid_bud.htm">$80/day</a></td>
  <td headers="a3 b3"><a href="mid_nat.htm">$83/day</a></td>
  <td headers="a4 b3"><a href="mid_av.htm">$85/day</a></td>
  <td headers="a5 b3"><a href="mid_hz.htm">$85/day</a></td>
</tr>
<tr>
  <th id="b4">Full-sized cars</th>
  <td headers="a1 b4"><a href="full_ala.htm">$82/day</a></td>
  <td headers="a2 b4"><a href="full_bud.htm">$83/day</a></td>
  <td headers="a3 b4"><a href="full_nat.htm">$89/day</a></td>
  <td headers="a4 b4"><a href="full_av.htm">$91/day</a></td>
  <td headers="a5 b4"><a href="full_hz.htm">$91/day</a></td>
</tr>
</table> 

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Verifique se o link se encontra numa célula de tabela.

  2. Verifique se o texto do link, em conjunto com o texto do cabeçalho de tabela associado, descreve a finalidade do link.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H80: Identificar a finalidade de um link utilizando o texto do link em conjunto com o elemento heading precedente

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O comando para beneficiar desta técnica no JAWS é "JAWS KEY + T".

Descrição

O objectivo desta técnica é descrever a finalidade de um link a partir do contexto fornecido pelo respectivo contexto do cabeçalho. O cabeçalho precedente fornece contexto para um link que seria, de outra forma, pouco claro. A descrição permite ao utilizador distinguir este link de outros na página Web que conduzem a outros destinos e ajuda o utilizador a determinar se deve aceder ao link.

Nota: Sempre que possível, forneça texto do link que identifique a finalidade do link sem ser necessário contexto adicional.

Exemplos

Exemplo 1: Blocos de informação sobre hotéis

As informações sobre cada hotel consistem no nome do hotel, numa descrição e numa série de links para um mapa, fotografias, indicações, apreciações de convidados e um formulário de reservas.

Código Exemplo:

<h2><a href="royal_palm_hotel.html">Royal Palm Hotel</a></h2>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">Map</a></li>
    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
  </ul>

<h2><a href="hotel_three_rivers.html">Hotel Three Rivers</a></h2>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">Map</a></li>
    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
  </ul> 

Exemplo 2: Um documento fornecido em três formatos

Código Exemplo:

<h2>Annual Report 2006-2007</h2>
<p> 
  <a href="annrep0607.html">(HTML)</a>&nbsp;
  <a href="annrep0607.pdf">(PDF)</a>&nbsp;
  <a href="annrep0607.rtf">(RTF)</a>
</p> 

Exemplo 3: O sítio da Web de um jornal

Código Exemplo:

<h2><a href="Stockmarket_05052007.htm>Stock market soars as bullishness prevails</a></h2>
<p>this week was a stellar week for the stock market as investing in gold rose 2%. 
<a href="Stockmarket_05052007.htm>More here</a></p> 

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Encontre o elemento heading que precede o link.

  2. Verifique se o texto do link, em conjunto com o texto desse cabeçalho, descreve a finalidade do link.

Resultados Esperados

  • O passo 2 é verdadeiro.


H81: Identificar a finalidade de um link numa lista encaixada utilizando o texto do link em conjunto com o item da lista principal sob o qual a lista está encaixada

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

Embora as informações de contexto estejam associadas de forma programática ao link, a tecnologia de apoio não possui comandos para ler o item de lista principal sem desviar o foco do link.

Descrição

O objectivo desta técnica é descrever a finalidade de um link numa lista encaixada a partir do contexto fornecido pelo item de lista sob o qual a lista está encaixada. Este item de lista fornece o contexto para um link que seria, de outra forma, pouco claro. A descrição permite ao utilizador distinguir este link de outros na página Web que conduzem a outros destinos e ajuda o utilizador a determinar se deve aceder ao link.

Uma vez que as tecnologias de apoio não incluem comandos para solicitar informações de contexto fornecidas pelos itens de lista principais, a utilização desta técnica requer que o utilizador navegue num item de cada vez na lista. Por conseguinte, esta técnica pode não ser apropriada para listas muito extensas ou profundamente encaixadas.

Nota: Sempre que possível, forneça texto do link que identifique a finalidade do link sem ser necessário contexto adicional.

Exemplos

Exemplo 1: Um documento fornecido em três formatos

Código Exemplo:

<ul>
<li>Annual Report 2005-2006
  <ul> 
  <li><a href="annrep0506.html">(HTML)</a></li>
  <li><a href="annrep0506.pdf">(PDF)</a></li>
  <li><a href="annrep0506.rtf">(RTF)</a></li>
  </ul>
</li>
<li>Annual Report 2006-2007
  <ul> 
  <li><a href="annrep0607.html">(HTML)</a></li>
  <li><a href="annrep0607.pdf">(PDF)</a></li>
  <li><a href="annrep0607.rtf">(RTF)</a></li>
  </ul>
</li>
</ul> 

Exemplo 2: Blocos de informação sobre hotéis

As informações sobre cada hotel consistem no nome do hotel, numa descrição e numa série de links para um mapa, fotografias, indicações, apreciações de convidados e um formulário de reservas.

Código Exemplo:

<ul>
<li><a href="royal_palm_hotel.html">Royal Palm Hotel</a>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">Map</a></li>
    <li><a href="royal_palm_hotel_photos.html">Photos</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">Directions</a></li>
    <li><a href="royal_palm_hotel_reviews.html">Guest reviews</a></li>
    <li><a href="royal_palm_hotel_book.html">Book now</a></li>
  </ul>
</li>
<li><a href="hotel_three_rivers.html">Hotel Three Rivers</a>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">Map</a></li>
    <li><a href="hotel_three_rivers_photos.html">Photos</a></li>
    <li><a href="hotel_three_rivers_directions.html">Directions</a></li>
    <li><a href="hotel_three_rivers_reviews.html">Guest reviews</a></li>
    <li><a href="hotel_three_rivers_book.html">Book now</a></li>
  </ul>
</li>
</ul> 

Recursos

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

Testes

Procedimento

Para cada link existente no conteúdo que utilize esta técnica:

  1. Encontre o elemento ul ou ol que contém o link.

  2. Verifique se este elemento de lista (ul, ol) é um descendente de um elemento li .

  3. Verifique se o texto do link, em conjunto com o texto desse elemento li, descreve a finalidade do link.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H83: Utilizar o atributo target para abrir uma nova janela a pedido do utilizador e indicá-lo no texto do link

Aplicabilidade

HTML 4.01 Transitional e XHTML 1.0 Transitional.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar a confusão que possa ser originada pelo aspecto de novas janelas que não tenham sido solicitadas pelo utilizador. A apresentação repentina de novas janelas pode desorientar alguns utilizadores, bem como passar completamente despercebida a outros. Em HTML 4.01 Transitional e XHTML 1.0 Transitional, o atributo target pode ser utilizado para abrir uma nova janela, em vez de janelas de pop-up automáticas. (O atributo target é eliminado de HTML 4.01 Strict e XHTML 1.0 Strict.) Tenha em atenção que a não utilização do target permite ao utilizador decidir se uma nova janela deve ser ou não apresentada. A utilização do atributo target fornece uma indicação claramente legível por máquina de que será apresentada uma nova janela. Os agentes de utilizador podem informar o utilizador e também podem ser configurados para não apresentar uma nova janela. Para as pessoas que não utilizam tecnologias de apoio, a indicação também estará disponível a partir do texto do link.

Exemplos

Exemplo 1

O exemplo seguinte mostra como utilizar o atributo target num link que indica que irá ser apresentado numa nova janela.

Código Exemplo:

<a href="help.html" target="_blank">Show Help (opens new window)</a>

Testes

Procedimento

  1. Clique em cada um dos links existentes no documento para verificar se é apresentado numa nova janela.

  2. Para cada link apresentado numa nova janela, verifique se utiliza o atributo target .

  3. Verifique se o texto do link contém informações a indicar que o link será apresentado numa nova janela.

Resultados Esperados

  • Os passos 2 e 3 são verdadeiros.


H84: Utilizar um botão com um elemento select para executar uma acção

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir ao utilizador controlar quando é executada uma acção, em vez de a acção ocorrer como um efeito secundário da escolha de um valor para o elemento select . O utilizador pode verificar os diferentes valores do elemento select, ou pode escolher acidentalmente o valor errado, sem originar a execução da acção. Quando o utilizador estiver satisfeito com a sua escolha, basta seleccionar o botão para executar a acção.

Isto é particularmente importante para os utilizadores que estiverem a escolher o valor do elemento select através do teclado, uma vez que navegar nas opções do elemento select altera o valor do controlo.

Exemplos

Exemplo 1: Um Calendário

Uma página Web permite ao utilizador escolher qualquer mês de qualquer ano e visualizar o calendário desse mês. Depois de o utilizador ter definido o mês e o ano, o calendário é apresentado pressionando o botão "Mostrar". Este exemplo responde no scripting do lado do cliente para implementar a acção.

Código Exemplo:

<label for="month">Month:</label>
<select name="month" id="month">
  <option value="1">January</option>
  <option value="2"> February</option>
  ...
  <option value="12">December</option>
</select> 
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "...">

Exemplo 2: Seleccionar uma acção

Um elemento select contém uma lista de acções possíveis. A acção não é executada até o utilizador pressionar o botão "Executar".

Código Exemplo:

<form action="http://somesite.com/action" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form> 

Recursos

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

Testes

Procedimento

Para cada combinação de elemento select /elemento button:

  1. Verifique se o foco (incluindo o foco do teclado) numa opção no elemento select não resulta em quaisquer acções.

  2. Verifique se a selecção do botão executa a acção associada ao valor select actual.

Resultados Esperados

  • Todos os passos são verdadeiros.


H85: Utilizar OPTGROUP para agrupar elementos OPTION dentro de um SELECT

Aplicabilidade

Páginas HTML e XHTML que recolham dados do utilizador.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

O elemento optgroup não é largamente suportado pelos leitores de ecrã.

O atributo label para option e optgroup é suportado de forma inconsistente pelos agentes de utilizador e não é largamente suportado pelas tecnologias de apoio.

Descrição

O objectivo desta técnica é agrupar itens numa lista de selecção. Uma lista de selecção é um conjunto de valores permitidos para um controlo de formulário, tal como uma lista de selecção múltipla ou uma caixa de combinação. Frequentemente, as listas de selecção têm grupos de opções relacionadas. Esses grupos devem ser identificados de forma semântica, em vez de serem simplesmente delimitados com entradas de lista "fictícias". Isto permite aos agentes de utilizador fechar as opções por grupo para suportar uma visualização mais rápida das opções, e indicar o grupo no qual se encontra uma opção de interesse. Também ajuda a dividir visualmente listas extensas, de modo a que os utilizadores possam localizar mais facilmente as opções que lhes interessam.

Em HTML, o elemento select é utilizado para criar listas de selecção múltipla e caixas de combinação. Cada uma das várias opções permitidas é indicada com os elementos option . Para agrupar as opções, utilize o elemento optgroup com os elementos option relacionados dentro desse elemento. Identifique o grupo com o atributo "label", de modo a que os utilizadores saibam o que está dentro do grupo.

O elemento optgroup deve estar directamente dentro do elemento select e os elementos option directamente dentro do optgroup. É possível que um elemento select inclua elementos option individuais e grupos optgroup, embora os autores devam considerar se esta é, na realidade, a utilização pretendida. Não é possível encaixar o elemento optgroup e, como tal, só é possível o agrupamento de um nível num elemento select.

Exemplos

Exemplo 1

A seguinte caixa de combinação recolhe dados sobre os alimentos favoritos. O agrupamento por tipo permite que os utilizadores seleccionem mais rapidamente a sua preferência.

Código Exemplo:

<form action="http://example.com/prog/someprog" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form> 

Exemplo 2

O exemplo seguinte mostra como uma caixa de selecção múltipla pode utilizar o elemento optrgroup .

Código Exemplo:

<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>Related Techniques:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ...
    </option>
  </optgroup>
  <optgroup label="CSS Techniques">
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
    <option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form  ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form> 

Recursos

Testes

Procedimento

  1. Verifique o conjunto de opções numa lista de selecção para ver se existem grupos de opções relacionadas.

  2. Se existirem grupos de opções relacionadas, devem ser agrupados com o optgroup.

Resultados Esperados

  • O passo 2 é verdadeiro.


H86: Fornecer alternativas em texto para arte ASCII, emoticons e leetspeak

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • As tecnologias de apoio fornecem diferentes níveis de suporte para ler os atributos title. Algumas não incluem funcionalidades que permitam aos utilizadores aceder a informações fornecidas através do atributo title.

  • A implementação desta técnica com o atributo title só é suficiente se o atributo title for suportado por acessibilidade. O conteúdo do atributo title necessita de estar disponível a todos os utilizadores de teclado (não só os que utilizam software de texto para fala) para este atributo ser suportado por acessibilidade.

  • O JAWS 6.2 e posterior e o WindowEyes 5.0 e posterior suportam os elementos abbr e acronym. Podem ser todos definidos para ler o atributo title quando estes elementos forem encontrados, mas esta não é a predefinição e não é, muitas vezes, activada pelos utilizadores.

  • Muitos agentes de utilizador gráficos apresentam texto junto a um elemento abbr ou acronym com uma linha tracejada por baixo ou à volta. Além disso, quando o ponteiro do rato está sobre um elemento, a definição por extenso é apresentada como uma descrição.

  • No Internet Explorer 7 e anterior, os itens assinalados utilizando o elemento abbr não são apresentados com qualquer formatação adicional. Para o IE 6 e anterior, a versão expandida não é apresentada como uma descrição quando o ponteiro do rato está sobre o item.

  • Num determinado agente de utilizador ou tecnologia de apoio, os elementos abbr e acronym são apresentados da mesma forma aos utilizadores.

Descrição

Antes de os gráficos serem largamente utilizados na Internet, os caracteres ASCII eram, muitas vezes, dispostos de modo a formar imagens ou gráficos. Embora a arte ASCII já não seja frequentemente utilizada na Internet, convém lembrar que, quando é utilizada, torna-se muito confusa para as pessoas cegas e que acedem à Internet através de leitores de ecrã. Se for utilizada, também deverá incluir uma explicação em texto sobre a imagem. Também é recomendado que exista um link para ignorar a arte ASCII (embora não seja obrigatório).

Os emoticons são muito populares. Incluem caracteres ASCII que formam expressões faciais e outras formas de comunicar uma emoção. Podem ser confusos para utilizadores de leitores de ecrã. Sempre que possível, é melhor utilizar simplesmente uma palavra como, por exemplo, "sorriso", em vez de um emoticon. Mas se os emoticons forem utilizados, deverão ter uma alternativa em texto. Em alguns contextos como, por exemplo, em blogues ou em fóruns, estão disponíveis plug-ins que convertem automaticamente caracteres ASCII utilizados como emoticons em imagens HTML com alternativas em texto.

O leetspeak utiliza várias combinações de caracteres ASCII para substituir as letras latinas. O leetspeak tornou-se parte do calão e da cultura na Internet e é frequentemente utilizado para substituir o texto e os filtros de spam. É muitas vezes imperceptível para pessoas cegas que utilizam leitores de ecrã e, por conseguinte, necessita de uma alternativa em texto para estar em conformidade com o Critério de Sucesso 1.1.1.

Nota: Uma vez que o suporte para esta técnica é limitado, é recomendado aos autores que forneçam a alternativa em texto no próprio texto.

Exemplos

Exemplo 1

O exemplo seguinte mostra três opções para fornecer alternativas para um emoticon que represente "medo", que consiste num sinal de igual, seguido do número oito, de um hífen e do número zero.

Código Exemplo:

=8-0 (fright)

<abbr title="fright">=8-0</abbr>

<img src="fright.gif" alt="fright"/> 

Exemplo 2

Arte ASCII com uma explicação da imagem que a precede. Inclui um link para ignorar a arte ASCII. Ignorar exemplo ASCII.

Código Exemplo:

                         Figure 1: ASCII art picture of a butterfly. 
 <a href="#skipbutterfly">Skip ASCII image</a>
                                 
                                                                LLLLLLLLLLL
                                                            __LLLLLLLLLLLLLL
                                                           LLLLLLLLLLLLLLLLL
                                                         _LLLLLLLLLLLLLLLLLL
                                                        LLLLLLLLLLLLLLLLLLLL
                                                      _LLLLLLLLLLLLLLLLLLLLL
                                                      LLLLLLLLLLLLLLLLLLLLLL
                                              L     _LLLLLLLLLLLLLLLLLLLLLLL
                                             LL     LLLLLL~~~LLLLLLLLLLLLLL
                                            _L    _LLLLL      LLLLLLLLLLLLL
                                            L~    LLL~        LLLLLLLLLLLLL
                                           LL   _LLL        _LL   LLLLLLLL
                                          LL    LL~         ~~     ~LLLLLL
                                          L   _LLL_LLLL___         _LLLLLL
                                         LL  LLLLLLLLLLLLLL      LLLLLLLL
                                         L  LLLLLLLLLLLLLLL        LLLLLL
                                        LL LLLLLLLLLLLLLLLL        LLLLL~
                  LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                         ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                       ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                   LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
             ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
          LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
      __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
     LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
   _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
  LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
 LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
 LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
  LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
   ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
           LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
               ~~~~~~LLLLLLLLLL~             LLLLLL
                         LLLLL              _LLLLLL
                         LLLLL    L     L   LLLLLLL
                          LLLLL__LL    _L__LLLLLLLL
                          LLLLLLLLLL  LLLLLLLLLLLL
                           LLLLLLLLLLLLLLLLLLLLLL
                            ~LLLLLLLLLLLLLLLLL~~
                               LLLLLLLLLLLLL
                                 ~~~~~~~~~
<a name="skipbutterfly></a> 

Exemplo 3

O exemplo seguinte é Leetspeak para "Austin Rocks".

Código Exemplo:

<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr> 

Testes

Procedimento

  1. Abra a página num browser comum.

  2. Verifique se o conteúdo inclui arte ASCII, emoticons e/ou leetspeak.

  3. Verifique se existe uma alternativa em texto imediatamente antes ou depois da arte ASCII, dos emoticons e/ou do Leetspeak.

Resultados Esperados

  • O passo 3 é verdadeiro.


H87: Não interferir com o refluxo de texto do agente de utilizador quando a janela de visualização é diminuída

Aplicabilidade

Não interferir com o refluxo de texto do agente de utilizador à medida que a janela de visualização é diminuída.

Esta técnica está relacionada com:

Descrição

Esta técnica ajuda a evitar situações em que possa ocorrer deslocamento horizontal. Muitas pessoas com incapacidades cognitivas e os utilizadores com baixa visão que não utilizam tecnologias de apoio têm muitos problemas com blocos de texto que necessitam de deslocamento horizontal. Isso implica não interferir com o refluxo de texto se a janela estiver com um tamanho reduzido. Uma das melhores formas de o fazer é definir as larguras das caixas de blocos de texto em percentagens.

Os agentes de utilizador HTML e XHTML fazem automaticamente o refluxo do texto à medida que a janela do browser é reduzida, desde que o autor não especifique as larguras utilizando medidas absolutas, tais como pixéis ou pontos.

Exemplos

Exemplo 1

O sítio da Web de um jornal inclui artigos com colunas que se ajustam à largura da janela dos agentes de utilizador. Os utilizadores com incapacidades cognitivas podem reduzir a coluna para uma largura que facilite a leitura.

Recursos

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

Testes

Procedimento

  1. Abra o conteúdo que inclua um bloco de texto num browser comum.

  2. Reduza a janela de visualização para 1/4 da largura do ecrã.

  3. Verifique se não é necessário deslocar-se horizontalmente no conteúdo para ler uma linha de texto.

Resultados Esperados

  • O passo 3 é verdadeiro.


H88: Utilizar HTML de acordo com as especificações

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar o HTML e o XHTML de acordo com as respectivas especificações. As especificações da tecnologia definem o significado e a utilização correcta das funcionalidades da tecnologia. A utilização dessas funcionalidades da forma descrita pela especificação garante que os agentes de utilizador, incluindo as tecnologias de apoio, serão capazes de mostrar representações da funcionalidade fiéis à intenção do autor e interoperáveis entre si.

Quando esta técnica foi publicada, as versões apropriadas destas tecnologias eram HTML 4.01 e XHTML 1.0. O HTML 4.01 é a versão aperfeiçoada mais recente do HTML, que fornece funcionalidades de acessibilidade específicas e é largamente suportada pelos agentes de utilizador. O XHTML 1.0 fornece as mesmas funcionalidades do HTML 4.01, com a excepção de que utiliza uma estrutura XML, que tem uma sintaxe mais precisa do que a estrutura HTML. Actualmente, as versões mais recentes destas tecnologias não são aperfeiçoadas e/ou não são largamente suportadas pelos agentes de utilizador.

Existem alguns aspectos principais relativamente à utilização de HTML e XHTML de acordo com a respectiva especificação.

  1. Utilizar apenas funcionalidades que estejam definidas na especificação. O HTML define conjuntos de elementos, atributos e valores de atributo que podem ser utilizados nas páginas Web. Estas funcionalidades têm significados semânticos específicos e destinam-se a ser processadas pelos agentes de utilizador de formas específicas. Contudo, as funcionalidades adicionais tornam-se, por vezes, numa prática comum de autor e, normalmente, são suportadas no início apenas por um agente de utilizador. Quando são utilizadas funcionalidades que não se encontram na especificação, muitos agentes de utilizador podem não suportar a funcionalidade durante um tempo ou não suportá-la de todo. Além disso, se não existirem especificações de referência para a utilização destas funcionalidades, diferentes agentes de utilizador podem fornecer um suporte variado. Isto interfere com a acessibilidade, uma vez que as tecnologias de apoio desenvolvidas com menos recursos do que os agentes de utilizador convencionais podem demorar muito tempo a adicionar um suporte útil, ou nunca chegar a adicioná-lo. Por conseguinte, os autores devem evitar funcionalidades não definidas em HTML e XHTML para prevenir problemas de acessibilidade inesperados.

  2. Utilizar funcionalidades da forma determinada pela especificação. A especificação HTML fornece orientações específicas sobre como determinados elementos, atributos e valores de atributo devem ser processados e compreendidos de forma semântica. Contudo, os autores utilizam, por vezes, as funcionalidades de uma forma que não é suportada pela especificação, por exemplo, utilizando elementos semantic para obter efeitos visuais sem planear a mensagem semântica subjacente a ser transmitida. Isto origina confusão para os agentes de utilizador e tecnologias de apoio que dependem de informações de semântica correctas para mostrar uma representação coerente da página. É importante utilizar funcionalidades HTML apenas conforme indicado na especificação HTML.

  3. Certificar-se de que o conteúdo pode ser analisado. O HTML e o XHTML também definem como o conteúdo deve ser codificado para ser correctamente processado pelos agentes de utilizador. As regras sobre a estrutura das marcas de início e de fim, os atributos e valores, o encaixe de elementos, etc. garantem que os agentes de utilizador irão analisar o conteúdo de forma a alcançar a representação pretendida do documento. O cumprimento das regras sobre a estrutura nestas especificações é uma parte importante na utilização destas tecnologias de acordo com a especificação.

Recursos

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

Consulte a secção de recursos de G134: Validar páginas Web.

Testes

Procedimento

Para cada página HTML ou XHTML:

  1. Verifique se a página só utiliza elementos, atributos e valores de atributo definidos na especificação aplicável.

  2. Verifique se os elementos, atributos e valores são utilizados da forma determinada pela especificação aplicável.

  3. Verifique se a página pode ser analisada correctamente, de acordo com as regras da especificação aplicável.

Nota: Os passos 1 e 3 são mais facilmente executados com ferramentas de validação de páginas. O passo 2 pode ser executado com a ajuda de ferramentas de avaliação heurística, embora, normalmente, seja necessária a avaliação manual.

Resultados Esperados

  • Os passos 1, 2 e 3 são verdadeiros.


H89: Utilizar o atributo title para fornecer ajuda contextualizada

Aplicabilidade

HTML e XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

  • Algumas tecnologias de apoio actuais dão feedback ao utilizador quando os campos de formulário têm conteúdo do atributo title disponível.

  • Alguns agentes de utilizador gráficos irão apresentar uma descrição quando o ponteiro do rato estiver sobre um campo de formulário que inclua um atributo title . Contudo, os agentes de utilizador actuais não fornecem acesso ao conteúdo do atributo title através do teclado.

  • Em alguns agentes de utilizador comuns, a descrição desaparece após um curto período de tempo (aproximadamente, 5 segundos). Isto pode dificultar o acesso ao conteúdo do atributo title por parte dos utilizadores que conseguem utilizar um rato, mas têm uma ligeira incapacidade motora, e pode resultar em dificuldades para os utilizadores que necessitam de mais tempo para ler a descrição.

  • Para a maioria dos utilizadores é difícil redimensionar, ajustar as cores de fundo, reposicionar ou controlar de outra forma a apresentação do conteúdo do atributo title em muitos agentes de utilizador actuais.

  • Esta técnica só pode ser utilizada quando o elemento tiver uma etiqueta explicitamente associada. Na falta de uma etiqueta, o título será utilizado como o Nome na API de acessibilidade dos agentes de utilizador actuais que a suportem. O texto de ajuda descrito abaixo cria um nome insuficiente.

Descrição

O objectivo desta técnica é fornecer ajuda contextualizada aos utilizadores à medida que introduzem dados nos formulários, fornecendo as informações de ajuda num atributo title . A ajuda pode incluir informações sobre o formato ou exemplos de dados de entrada.

Nota: Os agentes de utilizador e as tecnologias de apoio actuais nem sempre fornecem aos utilizadores as informações incluídas no atributo title . Evite utilizar esta técnica separadamente até o atributo title ter um suporte extensivo.

Exemplos

Exemplo 1

Uma aplicação de mapas fornece um formulário que consiste numa etiqueta "Endereço:", numa caixa de entrada de dados e num botão Submeter com o valor "Localizar mapa". A caixa de entrada de dados tem um valor de atributo title com um exemplo do formato de endereço que o utilizador deve introduzir.

Código Exemplo:

<label for="searchAddress">Address: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress" 
 title="Address example: 101 Collins St, Melbourne, Australia" /> 

Exemplo 2

Um formulário que permite aos utilizadores pagarem as suas facturas online requer que o utilizador introduza o número da sua conta. A caixa de entrada de dados associada à etiqueta "Número de conta" tem um atributo title que fornece informações sobre como localizar o número de conta.

Código Exemplo:

<label for="accNum1">Account number: </label>
<input id="accNum1" type="text" size="10" value="" title="Your account number 
 can be found in the top right-hand corner of your bill." /> 

Testes

Procedimento

  1. Identifique os controlos de formulário que necessitam de entrada de texto.

  2. Verifique se cada controlo de formulário tem uma etiqueta explicitamente associada.

  3. Verifique se cada controlo de formulário inclui ajuda contextualizada no atributo title .

Resultados Esperados

  • Os passos 2 e 3 são verdadeiros.


H90: Indicar os controlos de formulário obrigatórios

Aplicabilidade

Controlos HTML e XHTML que utilizem etiquetas externas.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As especificações HTML e XHTML permitem etiquetas implícitas e explícitas. Contudo, algumas tecnologias de apoio não processam correctamente as etiquetas implícitas (por exemplo, <label>First name <input type="text" name="firstname"></label>).

  • O JAWS 7.10 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Lê as etiquetas explícitas e as etiquetas implícitas dos campos de texto no modo de cursor virtual do PC e no modo de leitura do formulário. No modo de formulário não lê as etiquetas implícitas das caixas de verificação e dos campos dos botões de opção.

  • O Window-Eyes 5.5 foi testado no Windows XP com o Internet Explorer 6.0 e o Firefox 1.5. Irá sempre ler a etiqueta explícita de um campo de formulário. Não lê a etiqueta implícita do controlo de formulário no modo de procura ligado, mas irá ler a etiqueta implícita ao navegar de controlo para controlo no modo de procura desligado.

Os agentes de utilizador irão apresentar uma descrição quando o cursor do rato estiver sobre um elemento input que contenha um atributo title Os atributos title são expostos à tecnologia de apoio e são apresentados como descrições em vários browsers gráficos. As descrições não podem ser abertas através do teclado, como tal estas informações podem não estar disponíveis a utilizadores de teclado sem problemas de visão.

Se não existir nenhum label disponível, o JAWS e o Window-Eyes lêem o atributo title quando o controlo de formulário recebe o foco.

  • O JAWS 6.0 e posterior podem ser definidos para ler o label e o title quando os dois itens forem diferentes; contudo, muito poucos utilizadores têm conhecimento desta definição.

  • O WindowEyes 5.5 tem uma tecla de atalho, ins-E, que irá apresentar informações adicionais, incluindo o atributo title, para o item com o foco.

Por predefinição, alguns agentes de utilizador (especificamente o leitor de ecrã Window-Eyes) não indicam o asterisco nas etiquetas de formulário. Existe uma preferência que os utilizadores do Window-Eyes podem modificar para ajustar este comportamento, mas a previsão é que a maioria dos utilizadores não efectue esta alteração.

Descrição

O objectivo desta técnica é fornecer uma indicação clara de que é obrigatório um controlo de formulário específico numa aplicação Web ou formulário para uma submissão com êxito dos dados. Um símbolo ou texto a indicar que o controlo é obrigatório são associados de forma programática ao campo utilizando o elemento label, ou o legend para grupos de controlos associados através de fieldset. Se for utilizado um símbolo, o utilizador é informado do seu significado antes da primeira utilização.

Exemplos

Exemplo 1: Utilizar texto para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem a etiqueta explícita de "Nome próprio (obrigatório):". O atributo for dos elementos label corresponde ao atributo id do elemento input e o texto label indica que o controlo é obrigatório

Código Exemplo:

<label for="firstname">First name (required):</label> 
<input type="text" name="firstname" id="firstname" />

Nota: Alguns autores abreviam "obrigatório" para "obrig.", mas é notório que esta abreviatura é confusa.

Exemplo 2: Utilizar um asterisco para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem uma etiqueta explícita que inclui um asterisco para indicar que o controlo é obrigatório. É importante que o significado do asterisco seja definido no início do formulário. Neste exemplo, o asterisco está incluído num elemento span para permitir que o asterisco seja moldado de modo a ficar maior do que asterisco predefinido, uma vez que o asterisco pode ser difícil de ver por pessoas com deficiências da visão.

Código Exemplo:

CSS:
 .req {font-size: 150%} 

HTML:

<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" />

Exemplo 3: Utilizar uma imagem para indicar o estado obrigatório

O campo de texto no exemplo abaixo tem uma etiqueta explícita que inclui uma imagem para indicar que o controlo é obrigatório. É importante que o significado da imagem seja definido no início do formulário.

Código Exemplo:

<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label> 
<input type="text" name="firstname" id="firstname" />
 ...

Exemplo 4: Indicar o estado obrigatório para grupos de botões de opção ou controlos de caixas de verificação

Os botões de opção e as caixas de verificação são tratados de forma diferente de outros controlos interactivos, uma vez que as caixas de verificação e os botões de opção individuais não são obrigatórios, mas indicam que é obrigatória uma resposta para o grupo. Os métodos utilizados nos exemplos 1 a 3 aplicam-se a botões de opção e a caixas de verificação, mas a indicação do estado obrigatório dever ser colocada no elemento legend, em vez de no elemento label .

Código Exemplo:

<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

Recursos

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

Testes

Procedimento

  1. Para cada controlo de formulário obrigatório, verifique se o estado obrigatório é indicado no elemento label ou legend do controlo de formulário.

  2. Para cada indicador de estado obrigatório que não seja fornecido em texto, verifique se o significado do indicador é explicado antes do controlo de formulário que o utiliza.

Resultados Esperados

  • Todos os passos acima são verdadeiros.


H91: Utilizar links e controlos de formulário em HTML

Aplicabilidade

Links e controlos de formulário HTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar elementos link e controlos de formulário HTML normais para permitir a utilização dos elementos interactivos da interface de utilizador através do teclado e da tecnologia de apoio.

Os agentes de utilizador permitem a utilização dos links e controlos de formulário HTML através do teclado. Além disso, o agente de utilizador associa os controlos de formulário e os links a uma API de acessibilidade. As tecnologias de apoio utilizam a API de acessibilidade para obter as informações de acessibilidade apropriadas, tais como a função, o nome, o estado e o valor, e para apresentá-las aos utilizadores. A função é fornecida pelo elemento HTML, e o nome é fornecido pelo texto associado a esse elemento. Os elementos para os quais os valores e estados são apropriados também indicam os valores e os estados através de vários mecanismos.

Em alguns casos, o texto já se encontra associado ao controlo através de um atributo obrigatório. Por exemplo, os botões Submeter utilizam o atributo ' alt ' da imagem ou do texto do elementobutton como o nome. No caso dos controlos de formulário, são utilizados os elementos label ou os atributos 'title'. A tabela seguinte descreve como a função, o nome, o valor e o estado são determinados para controlos de formulários e links HTML.

Elemento HTML Função Nome Valor Estado
<a> link atributo 'title', texto num elemento <a> ou atributo 'alt' se for um link de imagem. Concatenado se forem fornecidos o texto e o atributo 'alt' da imagem. atributo 'href'
<button> botão texto dentro do elemento <button> ou atributo 'title'
<fieldset> agrupamento elemento <legend>
<input type = "button", "submit", or "reset"> botão atributo 'value'
<input type = "image"> botão atributo 'alt' ou atributo 'title'
<input type = "text"> texto editável elemento <label> associado ou atributo 'title' atributo 'value'
<input type = "password"> texto editável elemento <label> associado ou atributo 'title'
<input type="checkbox"> caixa de verificação elemento <label> associado ou atributo 'title' atributo 'checked'
<input type="radio"> botão de opção elemento <label> associado ou atributo 'title' atributo 'checked'
<select> caixa de combinação, lista ou lista pendente elemento <label> associado ou atributo 'title' elemento <option> com o atributo 'selected' definido para "selected"
<textarea> texto editável elemento <label> associado ou atributo 'title' texto no elemento <textarea>

Exemplos

Exemplo 1: Links

Os agentes de utilizador fornecem mecanismos para navegar até links e seleccioná-los. Em cada um dos seguintes exemplos, a função é "link" que provém de <a href>. Tenha em atenção que <a name> não fornece um função de "link". O valor é o URI no atributo 'href'.

Exemplo 1a

No exemplo 1a, o nome é o texto dentro do link, neste caso "Sítio da Web Exemplo".

Código Exemplo:

<a href="www.example.com">Example Site</a> 
Exemplo 1b

No exemplo 1b de uma imagem dentro de um link, o atributo 'alt' para a imagem fornece o nome. Algumas ferramentas de visualização de APIs, tais como Microsoft Inspect Objects, não revelam o nome, mas a TA revela.

Código Exemplo:

<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a> 
Exemplo 1c

No exemplo 1c, o nome será concatenado a partir dos diferentes elementos dentro do link para ler "Texto Exemplo".

Código Exemplo:

<a href="www.example.com"><img src="example_logo.gif" alt="Example">Text</a>

Exemplo 2: Botões

Existem várias formas de criar um botão em HTML, e estão todas associadas à função "botão".

Exemplo 2a

No exemplo 2a, o texto está incluído no elemento button, neste caso "Guardar", como o nome. Não existe qualquer valor.

Código Exemplo:

<button>Save</button> 
Exemplo 2b

O exemplo 2b utiliza o atributo 'value', neste caso "Guardar", "Submeter" ou "Repor", como o nome.

Código Exemplo:

<input type="button" value="Save" /> 
<input type="submit" value="Submit" />  
<input type="reset" value="Reset" /> 
Exemplo 2c

O exemplo 2c utiliza o atributo 'alt', neste caso "Guardar", como o nome.

Código Exemplo:

<input type="image" src="save.gif" alt="save" /> 
Exemplo 2d

No exemplo 2d, não existe nenhum atributo 'alt'. Assim, o atributo 'title', neste caso "Guardar", é utilizado como o nome.

Código Exemplo:

<input type="image" src="save.gif" title="save" /> 
Exemplo 2e

O exemplo 2e utiliza o atributo 'alt' do elemento input, neste caso "Guardar", como o nome. O atributo title não é utilizado.

Código Exemplo:

<input type="image" src="save.gif" alt="save" title="save" />

Exemplo 3:

Exemplo 3a

No exemplo 3a, o campo de entrada tem uma função de "texto editável". O elemento label é associado ao elemento input através do atributo 'for', que faz referência ao atributo 'id' do elemento inpu>. O nome provém do elemento label, neste caso "Tipo de fruta". O valor provém do respectivo atributo value, neste caso "bananas".

Código Exemplo:

<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
Exemplo 3b

No exemplo 3b, o campo de entrada tem a mesma função e valor do exemplo 3a, mas obtém o respectivo nome a partir do atributo 'title'.

Código Exemplo:

<input id="text_1" type="text" value="bananas" title="Type of fruit">

Exemplo 4: Caixa de verificação

O exemplo 4 tem uma função de "caixa de verificação", que provém do atributo 'type' do elemento input . O elemento label está associado ao elemento input através do atributo 'for', que se refere ao atributo 'id' do elemento input . O nome provém do elemento label, neste caso "Queijo". O seu estado pode ser "seleccionado" ou "desmarcado" e provém do atributo 'checked'. O estado pode ser alterado mediante a interacção do utilizador com o controlo.

Código Exemplo:

<label for="cb_1">Cheese</label> 
<input id="cb_1" type="checkbox" checked="checked"> 

Exemplo 5: Botões de Opção

O exemplo 5 tem uma função de "botão de opção" a partir do atributo 'type' no elemento input . O nome provém do elemento label . O estado pode ser "seleccionado" ou "desmarcado" e provém do atributo 'checked'. O estado pode ser alterado pelo utilizador.

Código Exemplo:

<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label> 

Exemplo 6:

Exemplo 6a

O exemplo 6a tem uma função de "Caixa de combinação" a partir do elemento select . O nome é "Números" e provém do elemento label . É um erro comum esquecer-se de atribuir um nome à selecção. O valor é o elemento option que tem o atributo 'selected' definido para "seleccionado". Neste caso, o valor predefinido é "Dois".

Código Exemplo:

<label for="s1">Numbers</label>
<select id="s1" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select> 
Exemplo 6b

O exemplo 6b tem o mesmo nome, função e valor do exemplo acima, mas define o nome com o atributo 'title' no elemento select . Esta técnica pode ser utilizada quando não for pretendida uma etiqueta visível.

Código Exemplo:

<select id="s1" title="Numbers" size="1">
 <option>One</option>
 <option selected="selected">Two</option>
 <option>Three</option>
</select> 

Exemplo 7: Textarea

Exemplo 7a

O exemplo 7a tem uma função de "texto editável" que provém do elemento textarea . O nome é "Introduza aqui o seu discurso" que provém do elemento label . O valor é o conteúdo dentro do elemento textarea, neste caso "Quatro vintenas e há sete anos".

Código Exemplo:

<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea> 
Exemplo 7b

O exemplo 7b tem a mesma função, nome e valor, mas define o nome utilizando o atributo 'title'.

Código Exemplo:

<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea> 

Exemplo 8:

Radio Fieldset

O radio fieldset no exemplo 8 tem uma função de "agrupamento". O nome provém do elemento legend .

Código Exemplo:

<fieldset>
  <legend>Choose a Color:</legend> 
     <input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br /> 
     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br /> 
     <input id="green" type="radio" name="color" value="green" /><label for="green">Green</label> 
</fieldset> 

Recursos

Testes

Procedimento

  1. Verifique o código fonte HTML.

  2. Para cada ocorrência de links e elementos de formulário, verifique se o nome, o valor e o estado são especificados conforme indicado na tabela acima.

Resultados Esperados

  • O passo 2 é verdadeiro.