[Nota sobre a tradução portuguesa do presente documento] [Programa ACESSO da UMIC]

[conteúdos]

W3C

Técnicas para as WCAG 2.0

Técnicas e Falhas para as Directrizes de Acessibilidade para o Conteúdo da Web 2.0

Nota do Grupo de Trabalho W3C de 11 de Dezembro de 2008

Esta versão:
http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/
Última versão:
http://www.w3.org/TR/WCAG20-TECHS/
Versão Anterior:
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20081103/
Editores:
Ben Caldwell, Trace R&D Center, Universidade de Wisconsin-Madison
Michael Cooper, W3C
Loretta Guarino Reid, Google, Inc.
Gregg Vanderheiden, Trace R&D Center, Universidade de Wisconsin-Madison
Editores Anteriores:
Wendy Chisholm (até Julho de 2006, enquanto ao serviço do W3C)
John Slatin (até Junho de 2006, enquanto ao serviço do Accessibility Institute, Universidade de Texas em Austin)

Este documento está também disponível nos seguintes formatos não-normativos:


Sinopse

As "técnicas para as WCAG 2.0" fornecem informações aos programadores de conteúdo da Web que pretendem cumprir os critérios de sucesso das Directrizes de Acessibilidade para o Conteúdo da Web (WCAG) 2.0 [WCAG20]. As técnicas são práticas de criação específicas que podem ser utilizadas no suporte dos critérios de sucesso das WCAG 2.0. Este documento fornece "Técnicas Gerais" que descrevem as práticas básicas aplicáveis a qualquer tecnologia e técnicas específicas da tecnologia que fornecem informação aplicável a tecnologias específicas. O Consórcio World Wide Web documenta apenas as técnicas não registadas; o Grupo de Trabalho das WCAG espera que os fornecedores de outras tecnologias forneçam técnicas semelhantes para descrever a forma como estar em conformidade com as WCAG 2.0 utilizando essas tecnologias. A utilização das técnicas fornecidas neste documento faz com que seja mais fácil o conteúdo da Web demonstrar conformidade com os critérios de critério das WCAG 2.0 do que se essas técnicas não fossem utilizadas.

Além das técnicas fornecidas neste documento, podem existir outras técnicas que possam ser utilizadas para implementar a conformidade com WCAG 2.0. O Grupo de Trabalho das WCAG encoraja a submissão dessas técnicas para que possam ser consideradas, de modo a serem incluídas neste documento, e para que o conjunto de técnicas mantidas pelo Grupo de Trabalho das WCAG seja o mais abrangente possível. Para submeter as técnicas para consideração, utilize o "Formulário para Submissão de Técnicas".

Este documento faz parte de uma série de documentos publicados pela Web Accessibility Initiative (WAI) do W3C para suportar as WCAG 2.0. Este documento foi publicado como uma Nota do Grupo de Trabalho ao mesmo tempo que as WCAG 2.0 foram publicadas como Recomendação W3C. Ao contrário das WCAG 2.0, prevê-se que as informações apresentadas nas Noções sobre as WCAG 2.0 sejam actualizadas de tempos a tempos. Para obter uma introdução às WCAG, aos documentos técnicos de apoio e ao material educativo, consulte a Descrição Geral das Directrizes de Acessibilidade para o Conteúdo da Web (WCAG) .

Estado do Documento

Esta secção apresenta o estado do documento aquando da sua publicação. Este documento poderá ser substituído por outros documentos. Para obter uma lista das actuais publicações do W3C e a última revisão deste relatório técnico, consulte o Índice de relatórios técnicas do W3C em http://www.w3.org/TR/.

Esta é a Nota do Grupo de Trabalho "Técnicas para as WCAG 2.0". Estas técnicas foram produzidas pelo Grupo de Trabalho das Directrizes de Acessibilidade para o Conteúdo da Web para fornecer orientações sobre como estar em conformidade com a Recomendação das Directrizes de Acessibilidade para o Conteúdo da Web (WCAG) 2.0. As técnicas baseiam-se nas Noções sobre as WCAG 2.0 e Como Cumprir as WCAG 2.0. Tenha em atenção que os conteúdos deste documento são informativos (fornecem orientações) e não normativos (não estabelecem requisitos de conformidade com as WCAG 2.0).

O Grupo de Trabalho solicita que todos os comentários sejam feitos através do formulário de comentários online. Caso não seja possível, os comentários podem também ser enviados para public-comments-wcag20@w3.org. Os arquivos da lista de comentários públicos estão disponíveis ao público. Os comentários recebidos sobre este documento poderão ser abordados em versões futuras deste documento, ou noutro formato. Não está previsto o Grupo de Trabalho responder formalmente aos comentários. Os arquivos das apresentações da mailing list WCAG WG estão disponíveis ao público e o Grupo de Trabalho poderá, posteriormente, abordar os comentários feitos a este documento.

Os materiais fornecidos pelo público para apoiarem a documentação das técnicas são particularmente bem-vindos. Utilize o Formulário para Submissão de Técnicas para submeter as técnicas.

Este documento foi produzido como parte integrante da Web Accessibility Initiative (WAI) do W3C. Os objectivos do Grupo de Trabalho das WCAG são apresentados na Carta do Grupo de Trabalho das WCAG. O Grupo de Trabalho das WCAG faz parte da Actividade Técnica da WAI.

A publicação como Nota do Grupo de Trabalho não implica que tenha sido aprovada pelos Membros do W3C. Este é um documento preliminar que, em qualquer altura, pode ser actualizado, substituído ou tornado obsoleto por outros documentos. Este documento deve ser citado como sendo um trabalho em curso.

Este documento foi elaborado por um grupo que trabalhou ao abrigo da Política de Patentes do W3C de 5 de Fevereiro de 2004. O W3C mantém uma lista pública de divulgação de patentes feita em conjunto com os materiais do grupo; essa página também inclui instruções sobre a divulgação de patentes. Uma pessoa que tenha conhecimento de uma patente, que julga incluir Reivindicações Essenciais, tem de divulgar a informação de acordo com a secção 6 da Política de Patentes do W3C.


Índice

Anexo


Introdução às Técnicas para as WCAG 2.0

Este documento faz parte de um conjunto de documentos publicados pela Web Accessibility Initiative (WAI) do W3C para suportar as WCAG 2.0 [WCAG20]. Inclui várias técnicas que, por seu lado, incluem práticas de criação específicas e exemplos para o desenvolvimento de conteúdos da Web mais acessíveis. Além disso, apresenta uma lista de falhas que descrevem erros comuns considerados falhas dos Critérios de Sucesso das WCAG 2.0.

Este não é um documento de introdução. É uma descrição técnica detalhada das técnicas que podem ser utilizadas para abordar os requisitos nas WCAG 2.0. Para obter uma introdução às WCAG, aos documentos técnicos de suporte e ao material educativo, consulte a Descrição Geral das Directrizes de Acessibilidade para o Conteúdo da Web (WCAG) .

Para tornar o conjunto de técnicas mantidas pelo Grupo de Trabalho das WCAG o mais abrangente possível, o Grupo de Trabalho das WCAG encoraja a submissão de novas técnicas para que possam ser consideradas de modo a serem incluídas neste documento. Para submeter as técnicas para consideração, utilize o "Formulário para Submissão de Técnicas".

Técnicas de Tipo Suficiente e de Tipo Aconselhada

Ao invés de apresentar técnicas de tecnologias específicas nas WCAG 2.0, as directrizes e os Critérios de Sucesso foram elaborados para serem de tecnologia neutra. Para fornecer abordagens e exemplos de como cumprir as directrizes utilizando tecnologias específicas (por exemplo, HTML), o grupo de trabalho identificou as técnicas de tipo suficiente para cada Critério de Sucesso que são suficientes para cumprir esse Critério de Sucesso. A lista com as técnicas de tipo suficiente é apresentada em "Noções sobre as WCAG 2.0" (e reflectida em Como Cumprir as WCAG 2.0). Desta forma, é possível actualizar a lista à medida que novas técnicas são descobertas e que as Tecnologias Web e Tecnologias de Apoio evoluem.

Tenha em atenção que todas as técnicas têm carácter informativo. As "técnicas de tipo suficiente" são consideradas suficientes pelo Grupo de Trabalho das WCAG para cumprir os critérios de sucesso. Contudo, não é necessário utilizar estas técnicas específicas. Se forem utilizadas técnicas diferentes das indicadas pelo Grupo de Trabalho, será necessário outro método para determinar a capacidade que a técnica tem de cumprir os Critérios de Sucesso.

A maioria dos Critérios de Sucesso apresenta várias técnicas de tipo suficiente. Poderá utilizar qualquer uma das técnicas de tipo suficiente apresentadas para cumprir os Critérios de Sucesso. Poderão existir outras técnicas não documentadas pelo grupo de trabalho, que também poderão cumprir os Critérios de Sucesso. À medida que são identificadas novas técnicas de tipo suficiente, estas serão acrescentadas à lista

Para além das técnicas de tipo suficiente, existem algumas técnicas de tipo aconselhada que podem melhorar a acessibilidade, mas que não se qualificam como técnicas de tipo suficiente, uma vez que não são suficientes para cumprir todos os requisitos dos Critérios de Sucesso, não são testáveis, e/ou porque são técnicas boas e eficazes em algumas circunstâncias, mas não são eficazes nem úteis noutros casos. Estas técnicas são apresentadas como técnicas de tipo aconselhada e surgem imediatamente a seguir às técnicas de tipo suficiente. Os autores são encorajados a utilizar estas técnicas sempre que necessário, para aumentar a acessibilidade às suas páginas Web.

1. Técnicas Gerais


G1: Adicionar um link no topo de cada página para aceder directamente à área do conteúdo principal

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para saltar blocos de conteúdo que se repetem em várias páginas Web, passando directamente para o conteúdo principal de uma página Web. O primeiro item interactivo na página Web é um link para aceder ao início do conteúdo principal. Activar o link desloca o foco para o conteúdo principal. Esta técnica é particularmente útil quando uma página Web tem uma área de conteúdo principal, em vez de um conjunto de áreas de conteúdo de igual importância.

Nota: Os links visíveis são necessários para aqueles que navegam com um teclado, incluindo utilizadores de manípulos, os que usam técnicas que geram digitações de teclado lentas, os utilizadores de software de ampliação de ecrã, os utilizadores de leitores de ecrã que trabalham com colegas sem problemas de visão, os utilizadores que usam apenas teclado e os que navegam utilizando software de reconhecimento de voz.

Exemplos

Exemplo 1: Um jornal online

Um jornal online contém muitas secções de informação: uma função de procura, uma faixa empresarial, menus laterais, histórias de importância secundária, como contactar o jornal, etc. A notícia principal localiza-se no centro da página. O primeiro link ao qual o utilizador acede quando utiliza a tecla de tabulação para percorrer a página tem o título "Passar para a Notícia Principal". Activar o link desloca o foco visual para a notícia. Pressionar de novo a tecla de tabulação encaminha o utilizador para o primeiro link na notícia principal.

Exemplo 2: Um link para "Passar para o conteúdo principal"

Uma página Web inclui uma variedade de técnicas de navegação em cada página: um breadcrumb (trilho) de navegação, uma ferramenta de procura, um mapa do sítio da Web e uma lista de recursos relacionados. O primeiro link na página tem o título "Passar para o Conteúdo Principal". O utilizador activa o link para ignorar as ferramentas de navegação.

Recursos

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

Testes

Procedimento
  1. Verifique se o link é o primeiro controlo que recebe o foco na página Web.

  2. Verifique se a descrição do link informa que acede ao conteúdo principal.

  3. Verifique se o link está sempre visível ou se fica visível quando recebe o foco do teclado.

  4. Verifique se activar o link desloca o foco para o conteúdo principal.

  5. Verifique se, após activar o link, o foco do teclado se desloca para o conteúdo principal.

Resultados Esperados
  • Todas as verificações acima são verdadeiras.


G4: Permitir que o conteúdo seja colocado em pausa e reiniciado a partir do preciso momento em que foi colocado em pausa

Aplicabilidade

Qualquer tecnologia que inclua conteúdo em deslocamento ou movimento.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma forma para colocar em pausa o deslocamento ou movimento do conteúdo. Se o utilizador necessitar de colocar o movimento em pausa, reduzir a distracção ou de tempo para o ler, pode fazê-lo e, em seguida, reiniciá-lo conforme necessário. Este mecanismo pode ser fornecido através de controlos interactivos que estão em conformidade com as WCAG, ou através de atalhos de teclado. Se os atalhos de teclado forem utilizados, estarão documentados.

Exemplos

  • Um sítio da Web inclui uma faixa de notícias em deslocamento no topo da página. Os utilizadores que necessitam de mais tempo para a ler podem pressionar a tecla Escape para colocar o deslocamento em pausa e reiniciá-lo pressionando a tecla Escape de novo.

  • Uma página Web contém um link com o título "Como apertar um sapato" que acede a uma animação Flash. O texto que precede o link informa que pressionar a barra de espaços coloca a animação em pausa e reinicia-a de novo.

Testes

Procedimento

Numa página com conteúdo em movimento ou deslocamento,

  1. Utilize o mecanismo fornecido na página Web ou pelo agente de utilizador para colocar em pausa o conteúdo em movimento ou deslocamento.

  2. Verifique se o movimento ou deslocamento parou e não reinicia por si próprio.

  3. Utilize o mecanismo fornecido para reiniciar o conteúdo em movimento.

  4. Verifique se o movimento ou deslocamento reiniciou a partir do momento em que foi parado.

Resultados Esperados
  • As verificações 2 e 4 são verdadeiras.


G5: Permitir que os utilizadores executem uma actividade sem qualquer limite de tempo

Aplicabilidade

Esta técnica aplica-se a quaisquer tecnologias ou métodos que suportem a implementação de uma actividade que não requer interacção temporizada para a sua funcionalidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer aos utilizadores todo o tempo que necessitam para completar uma actividade. Esta técnica implica o fornecimento de uma actividade específica que não necessite de interacção temporizada. Os utilizadores dispõem de todo o tempo que necessitam para interagir com a actividade.

Exemplos

  • Um exame interactivo para um curso fornece todas as perguntas numa página Web. Os utilizadores podem despender do tempo que necessitam para o completar.

  • Num jogo interactivo, os utilizadores podem despender do tempo que quiserem na sua vez de jogar, em vez de completarem a jogada num período de tempo limitado.

  • Num leilão online, cada licitante pode submeter apenas uma licitação, em vez de submeter várias licitações competitivas com base na temporização. As licitações estão abertas durante um dia, fornecendo tempo suficiente para uma pessoa preencher o formulário de licitação simples. Uma vez encerrada a licitação, ganha a melhor oferta.

Recursos

Testes

Procedimento
  1. Verifique se existem quaisquer interacções temporizadas.

Resultados Esperados
  • A verificação 1 é falsa.


G8: Fornecer um filme com áudio-descrições alargadas

Aplicabilidade

Qualquer tecnologia que suporte áudio e vídeo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma segunda versão do conteúdo do vídeo que forneça áudio-descrições alargadas. Uma das dificuldades na criação de áudio-descrições tradicionais é que, por vezes, o narrador tem de fornecer muita informação durante pausas muito curtas no diálogo. A áudio-descrição alargada coloca o áudio e o vídeo temporariamente em pausa, permitindo a apresentação de informação importante quando as pausas no diálogo são insuficientes para uma descrição adequada.

Fornecer uma segunda versão do vídeo com áudio-descrições alargadas torna este conteúdo acessível a pessoas cegas que necessitam de ouvir não apenas o diálogo mas também o contexto e outros aspectos do vídeo, que não são transmitidos unicamente pelo diálogo das personagens, e para as quais não existe tempo suficiente durante o diálogo normal.

Uma vez que interrompe a visualização para aqueles que não necessitam da descrição adicional, são muitas vezes fornecidas técnicas que permitem activar e desactivar esta funcionalidade. Em alternativa, podem ser fornecidas versões que incluam ou não a descrição adicional.

Exemplos

Exemplo 1

Numa versão alternativa de um vídeo online de uma família a fugir de um prédio em chamas, existe um diálogo contínuo entre o marido e a mulher, que discutem o paradeiro das crianças. Entretanto, em plano de fundo, uma parede cede, o que constitui informação importante na história, visto que irá bloquear a fuga por aquele lado do edifício. A faixa de vídeo pára (a mesma frame é repetida) enquanto o narrador fornece os detalhes sobre a parede a cair e, em seguida, o vídeo prossegue.

Exemplo 2

Um vídeo de formação inclui uma narrativa ao longo do vídeo, de forma quase contínua. Está disponível uma versão alternativa para as pessoas que têm dificuldade em visualizar essa parte do vídeo. A versão alternativa fixa o vídeo e fornece a áudio-descrição da informação-chave.

Recursos

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

Testes

Procedimento
  1. Abra a versão do filme que inclui as áudio-descrições alargadas.

  2. Verifique se o vídeo pára para a áudio-descrição alargada quando não existir espaço suficiente para incluir a narração necessária no decurso do diálogo normal.

  3. Verifique se a áudio-descrição inclui a informação necessária.

  4. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder às outras versões.

Resultados Esperados
  • As verificações 2, 3 e 4 são verdadeiras.


G9: Criar legendas para multimédia sincronizada em directo

Aplicabilidade

Aplica-se a todas as tecnologias que apresentem informação audiovisual.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores que não conseguem ouvir possam aceder às transmissões multimédia sincronizada em tempo real. É mais difícil criar legendas em tempo real exactas, uma vez que existe pouco tempo para corrigir os erros, ouvir uma segunda vez ou consultar alguém para se ter a certeza de que as palavras são reproduzidas correctamente. É também mais difícil simplificar ou parafrasear informação se esta fluir muito rapidamente.

Estão disponíveis técnicas de entrada de dados por digitação de texto em tempo real, utilizando tecnologias de digitação rápida e de estenografia. A reprodução de fala para texto (em que a pessoa ouve e, em seguida, reproduz a fala cuidadosamente para um computador programado para a sua fala) é utilizada actualmente para serviços de transmissão telefónicos, podendo ser utilizada no futuro para legendagem. No futuro, será possível a fala para texto com correcções.

Exemplos

  • Exemplo 1: Um estúdio de televisão utiliza o serviço de legendagem em tempo real para criar legendas para os seus serviços de notícias online.

Recursos

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

Testes

Procedimento
  1. Verifique se existe o procedimento e a política para garantir que as legendas são apresentadas em tempo real.

Resultados Esperados
  • A verificação 1 é verdadeira.


G10: Criar componentes utilizando uma tecnologia que suporte as funcionalidades API de acessibilidade das plataformas, nas quais os agentes de utilizador serão executados para revelar os nomes e as funções, permitir que as propriedades definidas pelo utilizador possam ser directamente definidas pelo utilizador e fornecer notificações de alterações

Aplicabilidade

Tecnologias de programação que incluam componentes normais programados para funcionar em interface com as APIs de acessibilidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que as tecnologias de apoio compreendam o conteúdo da Web, para que possam transmitir ao utilizador a informação equivalente através de uma interface de utilizador alternativa.

Por vezes, o conteúdo não é criado utilizando linguagem de marcação, mas uma linguagem de programação ou ferramentas. Em muitos casos, estas tecnologias incluem componentes da interface que já estão programados para funcionarem em interface com as APIs de acessibilidade. Se o autor utilizar estes componentes e preencher as propriedades (por ex., nome, etc.), os componentes da interface de utilizador resultantes no conteúdo ficarão acessíveis à tecnologia de apoio.

Contudo, se um autor pretender criar um componente da interface de utilizador inovador e não puder utilizar componentes normais, nesse caso, tem de acrescentar as normas de acessibilidade e implementá-las de uma forma que seja compatível com a API de acessibilidade.

Depois de concluído, o componente personalizado deve ser testado quanto ao Suporte por Acessibilidade.

Exemplos

  • Uma página Web utiliza java para criar uma applet. Um grupo de autores pretende criar um componente de interface totalmente inovador e por isso não podem utilizar os objectos Java existentes. Utilizam classes de Java Swing para criar o respectivo componente, visto que as classes que compõem o Java Swing já dispõem de normas para ligação às diferentes APIs de acessibilidade. Ao utilizarem as classes de Java Swing, os autores podem criar um componente de interface que revele o seu nome e a sua função, possa ser definido pela TA e forneça notificações de quaisquer actualizações.

  • Uma página Web utiliza um controlo ActiveX de origem, escrito em linguagem de programação C++. O controlo é concebido para suportar, de forma explícita, a API da Microsoft Active Accessibility (MSAA), para revelar a informação sobre os comandos aceites. O controlo interage directamente com a tecnologia de apoio executando o agente de utilizador em sistemas que suportem a MSAA.

Testes

Procedimento
  1. Apresente o conteúdo utilizando um Agente de Utilizador acessível.

  2. Utilize uma Ferramenta de Acessibilidade criada para a API de Acessibilidade do Agente de Utilizador, para avaliar cada componente da interface de utilizador.

  3. Verifique se o nome e a função para cada componente da interface de utilizador são detectados pela ferramenta.

  4. Altere os valores no componente.

  5. Verifique se a ferramenta de Acessibilidade é notificada.

  6. Verifique se o componente funciona com as tecnologias de apoio.

Resultados Esperados
  • As verificações 3, 5 e 6 são verdadeiras para cada componente da interface de utilizador.


G11: Criar conteúdo que fica em modo intermitente durante menos de 5 segundos

Aplicabilidade

Tecnologias que suportem conteúdo em modo intermitente.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é minimizar a distracção provocada pelo conteúdo em modo intermitente e permitir que os utilizadores foquem de novo o outro conteúdo na página.

O conteúdo em modo intermitente pode ser criado utilizando várias tecnologias, muitas das quais incluem opções para ignorar sempre o conteúdo em modo intermitente, ou então especificar o período de tempo durante o qual o conteúdo em modo intermitente é visualizado. Limitar o conteúdo em modo intermitente para cinco segundos minimiza a distracção que este possa causar. Isto beneficia as pessoas com certos tipos de incapacidade de aprendizagem e pessoas com baixa visão.

Exemplos

  • Uma imagem animada é utilizada para realçar artigos à venda. Numa lista de artigos à venda, existe uma imagem de uma etiqueta vermelha, seguida da frase "À Venda" para indicar os artigos disponíveis a um preço reduzido. A imagem da etiqueta vermelha está em modo intermitente quando se carrega a página, e pára após cinco segundos.

Testes

Procedimento
  1. Localize todos os itens em modo intermitente

  2. Para cada item em modo intermitente, verifique se o intervalo entre o início e o fim do modo intermitente é menor que cinco segundos.

Resultados Esperados
  • A verificação 2 é verdadeira.


G13: Descrever o que vai acontecer antes de ser efectuada uma alteração num controlo de formulário que provoca uma alteração de contexto

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer informação aos utilizadores sobre o que vai acontecer quando uma alteração num controlo de formulário provoca uma alteração de contexto. Visto que a alteração do valor de um controlo de formulário não provoca normalmente uma alteração de contexto, é importante que os autores forneçam instruções para que o utilizador tenha conhecimento do comportamento com antecedência. Sempre que possível, é aconselhável associar, de forma programática, as instruções que descrevem a alteração ao próprio controlo de formulário.

Em seguida, apresentamos alguns exemplos de como fornecer a instrução em situações diferentes.

  • Forneça a instrução na página Web com uma ordem de leitura, antes do elemento da interface de utilizador que provoca a alteração do contexto ao alterar a definição.

  • Para um processo com vários passos, em que o utilizador tem de executar passos específicos para aceder ao elemento da interface de utilizador, no qual as alterações da definição irão provocar uma alteração de contexto, forneça a instrução como parte do processo antes do passo em que o utilizador irá encontrar a alteração de contexto.

  • No caso de uma intranet, em que o utilizador tem de ter formação prévia obrigatória antes de utilizar uma aplicação da Web, na qual os elementos da interface de utilizador provocam alterações de contexto quando as definições são alteradas, forneça a instrução como parte da formação.

Exemplos

  • Um conjunto de botões de opção no topo de uma página inclui opções para alemão, francês e espanhol. As instruções precedem os botões que informam o utilizador que o idioma será alterado ao seleccionar uma opção.

  • Um inquérito online com 50 perguntas apresenta uma pergunta de cada vez. As instruções surgem no início do inquérito e explicam que ao seleccionar uma resposta para cada pergunta, os utilizadores passam para a pergunta seguinte do inquérito.

Recursos

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

Testes

Procedimento
  • Localize o conteúdo no qual a alteração das definições de um controlo de formulário resulta numa alteração de contexto.

  • Verifique se está disponível uma explicação do que vai acontecer quando o controlo é alterado, antes da activação dos controlos.

Resultados Esperados
  • A verificação 2 é verdadeira.


G14: Garantir que as informações transmitidas através de cores diferentes estão também disponíveis em texto

Aplicabilidade

Todas as tecnologias que suportem cor e texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que, quando são utilizadas cores diferentes para transmitir informação, tais como campos de formulário obrigatórios, a informação transmitida através de cores diferentes é também transmitida de forma explícita em texto.

Exemplos

Exemplo 1: Um calendário codificado por cores

O calendário de sessões numa conferência de tecnologia está organizado em três faixas. As sessões na Faixa 1 são apresentadas sobre um fundo azul. As sessões na Faixa 2 são apresentadas sobre um fundo amarelo. As sessões na Faixa 3 são apresentadas sobre um fundo verde. Após o nome de cada sessão encontra-se um código que identifica a faixa no texto: F1 para Faixa 1, F2 para Faixa 2 e F3 para a Faixa 3.

Exemplo 2: Um calendário codificado por cores com ícones

O calendário de sessões numa conferência de tecnologia está organizado em três faixas. Junto ao título de cada sessão encontra-se um ícone a cores que identifica a que faixa corresponde: ícones azuis identificam a Faixa 1, ícones amarelos identificam a Faixa 2 e ícones verdes identificam a Faixa 3. Cada ícone está associado a uma leitura alternativa em texto com o título "Faixa 1", "Faixa 2" ou "Faixa 3", conforme adequado.

Exemplo 3: Um formulário com campos obrigatórios

Um formulário inclui vários campos obrigatórios. As etiquetas para os campos obrigatórios são apresentadas a vermelho. Além disso, no final de cada etiqueta existe um asterisco, *. As instruções para se preencher o formulário indicam que "todos os campos obrigatórios são apresentados a vermelho e assinalados com um asterisco *", seguido de um exemplo.

Nota: Nem todos os leitores de ecrã lêem os asteriscos (em todos os modos de leitura) e pode ser difícil para os utilizadores com baixa visão, visto que os asteriscos são apresentados num tamanho mais pequeno do que o texto predefinido. É importante que os autores incluam texto a informar que o asterisco é utilizado, e considerem aumentar o tamanho do asterisco apresentado.

Exemplo 4: Um formulário com um botão Submeter verde

Uma candidatura online a um empréstimo explica que os botões verdes avançam no processo e os botões vermelhos cancelam o processo. Um formulário inclui um botão verde que contém o texto Avançar. As instruções indicam "Pressione o botão Avançar para submeter os seus resultados e prosseguir para o passo seguinte".

Recursos

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

Testes

Procedimento

Para cada item em que são utilizadas cores diferentes para transmitir informação.

  1. Verifique se a informação transmitida está também disponível em texto e se o texto não é conteúdo limitado.

Resultados Esperados
  • A verificação 1 é verdadeira.


G15: Utilizar uma ferramenta para garantir que o conteúdo não viola o limite de flash universal ou o limite de flash vermelho

Aplicabilidade

Aplica-se a qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

O objectivo de se testar se os limites de flash universal e flash vermelho são violados é permitir que as pessoas que sofrem ataques epilépticos devido a fotossensibilidade visualizem sítios da Web sem encontrarem conteúdos que possam provocar um ataque epiléptico. Os avisos podem ser fornecidos, mas as pessoas podem não os ver, e as crianças podem nem conseguir lê-los ou compreendê-los. Com esta técnica, todo o conteúdo é verificado e, caso viole os limites de flash universal e flash vermelho, não é incluído no sítio da Web ou é modificado para que não viole os referidos limites.

Nota 1: Existem alguns testes simples que podem ser executados para determinados tipos de modo flash simples. Por exemplo:

Nota 2: Para os restantes tipos, é necessária uma ferramenta para identificar todos os factores e aplicá-los ao vídeo de forma contínua.

Exemplos

  • Uma animação de uma tempestade acompanhada de trovoada apresenta seis clarões de relâmpagos. Os clarões são de tal modo rápidos e de grandes dimensões que o limite de flash universal é violado quando é testado com uma ferramenta de análise de flash. A animação é modificada para criar uma pausa breve após cada par de clarões de relâmpagos. Depois de as alterações serem feitas, a animação não viola o limite de flash universal.

Recursos

Testes

Procedimento

Verifique se o conteúdo não viola o limite de flash universal e/ou flash vermelho.

  1. Utilize uma ferramenta para verificar se o Flash Universal e o Flash Vermelho foram excedidos.

Resultados Esperados
  • A verificação 1 é verdadeira.


G17: Garantir uma relação de contraste de, no mínimo, 7:1 entre o texto (e imagens de texto) e o fundo por detrás do texto

Aplicabilidade

Qualquer tecnologia que produza saída de dados visuais.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores possam ler o texto apresentado sobre um plano de fundo. Esta técnica excede a relação de contraste de 4.5:1 para fornecer um valor de contraste mais elevado, de forma a facilitar a leitura a pessoas com baixa visão.

Se o fundo for de uma só cor (todo preto ou todo branco), então a relação de contraste do texto pode ser mantida, garantindo que cada letra do texto tem uma relação de contraste de 7:1 com o fundo.

Se o fundo ou as letras variarem em luminescência relativa (ou tiverem um padrão), então o fundo em torno das letras pode ser escolhido ou escurecido, para que as letras mantenham uma relação de contraste de 7:1 com o respectivo fundo, mesmo se não tiverem essa relação de contraste com o restante fundo.

A relação de contraste pode, por vezes, ser mantida, alterando a luminescência relativa das letras à medida que a luminescência relativa do fundo se altera na página.

Outro método é fornecer uma auréola em torno do texto, com a relação de contraste necessária se a imagem ou cor de fundo não forem suficientemente diferentes em termos de luminescência relativa.

Exemplos

  • É escolhido um fundo preto para que possam ser utilizadas letras em cores claras, compatíveis com o logótipo da empresa.

  • O texto é colocado sobre uma imagem do campus universitário. Visto que a imagem tem uma grande variedade de cores e partes escuras, a área por detrás do texto tem uma tonalidade branca para que a imagem fique muito esbatida, e a parte mais escura seja suficientemente clara para manter uma relação de contraste de 7:1 com o texto preto escrito sobre a imagem.

Recursos

Testes

Procedimento
  1. Meça a luminescência relativa de cada letra (a não ser que sejam todas uniformes) utilizando a fórmula:

    • L = 0,2126 * R + 0,7152 * G + 0,0722 * B em que R, G e B são definidos como:

      • se RsRGB <= 0,03928 então R = RsRGB/12,92 ou R = ((RsRGB+0,055)/1,055) ^ 2,4

      • se GsRGB <= 0,03928 então G = GsRGB/12,92 ou G = ((GsRGB+0,055)/1,055) ^ 2,4

      • se BsRGB <= 0,03928 então B = BsRGB/12,92 ou B = ((BsRGB+0,055)/1,055) ^ 2,4

      e RsRGB, GsRGB, e BsRGB são definidos como:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      O caracter "^" é o operador de exponenciação.

    Nota: Para letras pixelizadas, utilize o valor de luminescência relativa que se encontra dois pixéis para dentro a partir do limite da letra.

  2. Meça a luminescência relativa dos pixéis do plano de fundo imediatamente junto à letra, utilizando a mesma fórmula.

  3. Calcule a relação de contraste utilizando a seguinte fórmula.

    • (L1 + 0,05) / (L2 + 0,05), em que

  4. Verifique se a relação de contraste é igual ou superior a 7:1

Resultados Esperados
  • A verificação 4 é verdadeira.


G18: Garantir uma relação de contraste de, no mínimo, 4.5:1 entre o texto (e imagens de texto) e o fundo por detrás do texto

Aplicabilidade

Qualquer tecnologia que produza saída de dados visuais.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores possam ler o texto apresentado sobre um plano de fundo. Para o Critério de Sucesso 1.4.3, esta técnica descreve a relação de contraste mínima para texto com um tamanho inferior a 18 (se não estiver a negrito) e inferior a 14 (se estiver a negrito). Para o Critério de Sucesso 1.4.5, esta técnica fornece uma relação de contraste de 7:1 mais flexível para texto com, no mínimo, um tamanho 18 (se não estiver a negrito) ou, no mínimo, 14 (se estiver a negrito).

Se o fundo for de uma cor só (todo preto ou todo branco), então a luminescência relativa do texto pode ser mantida, garantindo que cada letra do texto tem uma relação de contraste de 4.5:1 com o fundo.

Se o fundo ou as letras variarem em luminescência relativa (ou tiverem um padrão), então o fundo em torno das letras pode ser escolhido ou escurecido, para que as letras mantenham uma relação de contraste de 4.5:1 com o respectivo fundo, mesmo se não tiverem essa relação de contraste com o restante fundo.

A relação de contraste pode, por vezes, ser mantida, alterando a luminescência relativa das letras à medida que a luminescência relativa do fundo se altera na página.

Outro método é fornecer uma auréola em torno do texto, com a relação de contraste necessária se a imagem ou cor de fundo não forem suficientemente diferentes em termos de luminescência relativa.

Exemplos

  • É escolhido um fundo preto para que possam ser utilizadas letras em cores claras, compatíveis com o logótipo da empresa.

  • O texto é colocado sobre uma imagem do campus universitário. Visto que a imagem tem uma grande variedade de cores e partes escuras, a área por detrás do texto tem uma tonalidade branca para que a imagem fique muito esbatida, e a parte mais escura seja suficientemente clara para manter uma relação de contraste de 4.5:1 com o texto preto escrito sobre a imagem.

    Consulte também as amostras de contraste nos recursos relacionados.

Recursos

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Meça a luminescência relativa de cada letra (a não ser que sejam todas uniformes) utilizando a fórmula:

    • L = 0,2126 * R + 0,7152 * G + 0,0722 * B em que R, G e B são definidos como:

      • se RsRGB <= 0,03928 então R = RsRGB/12,92 ou R = ((RsRGB+0,055)/1,055) ^ 2.4

      • se GsRGB <= 0,03928 então G = GsRGB/12,92 ou G = ((GsRGB+0,055)/1,055) ^ 2.4

      • se BsRGB <= 0,03928 então B = BsRGB/12,92 ou B = ((BsRGB+0,055)/1,055) ^ 2.4

      e RsRGB, GsRGB, e BsRGB são definidos como:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      O caracter "^" é o operador de exponenciação.

    Nota: Para letras pixelizadas, utilize o valor de luminescência relativa que se encontra dois pixéis para dentro a partir do limite da letra.

  2. Meça a luminescência relativa dos pixéis do plano de fundo imediatamente junto à letra, utilizando a mesma fórmula.

  3. Calcule a relação de contraste utilizando a seguinte fórmula.

    • (L1 + 0,05) / (L2 + 0,05), em que

  4. Verifique se a relação de contraste é igual ou superior a 4.5:1.

Resultados Esperados
  • A verificação 4 é verdadeira.


G19: Garantir que nenhum componente do conteúdo tenha mais de três flashes no período de um segundo

Aplicabilidade

Aplica-se a qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar flashes a níveis conhecidos por causar ataques epilépticos se os flashes forem brilhantes e grandes o suficiente. Visto que alguns utilizadores podem utilizar ampliadores de ecrã, esta técnica limita o modo flash de conteúdo de qualquer tamanho para um número máximo de três flashes num período de um segundo.

Nota 1: Esta técnica é mais rigorosa que o Critério de Sucesso de Nível 1, mas é mais fácil de testar e pode ser utilizada para cumprir o Critério de Sucesso de Nível 1, uma vez que todos os limites de falhas no Critério de Sucesso de Nível 1 envolvem 3,5 flashes ou mais no período de um segundo. A maioria dos conteúdos não tem flashes e mesmo o conteúdo em modo intermitente não apresenta uma intermitência tão rápida, excepto em ocasiões raras. Desta forma, para evitar testes mais complexos especificados pelo Critério de Sucesso, pode-se seguir esta técnica para garantir que o conteúdo tenha apenas um, dois ou, no máximo, três flashes no período de um segundo.

Nota 2: Em relação a 3,5 Flashes: Se existirem sete transições do escuro para o claro ou do claro para o escuro, serão 3,5 flashes, o que é mais do que os três flashes permitidos (seis transições).

Exemplos de 3,5 flashes ou sete transições:

  • INICIAR ESCURO-CLARO-ESCURO-CLARO-ESCURO-CLARO-ESCURO-CLARO ou

  • INICIAR CLARO-ESCURO-CLARO-ESCURO-CLARO-ESCURO-CLARO-ESCURO.

Exemplos

  • O conteúdo tem clarões de relâmpagos. O conteúdo é criado de modo a que os relâmpagos tenham apenas dois ou três flashes sem qualquer pausa.

Recursos

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

Testes

Procedimento
  1. Verifique se não existem mais de três flashes no período de um segundo.

  2. Se existirem três flashes, verifique se o estado Claro/Escuro no final do período de um segundo é o mesmo que no início.

Resultados Esperados
  • O Passo 1 e o Passo 2 são verdadeiros.


G21: Garantir que os utilizadores não ficam bloqueados no conteúdo

Aplicabilidade

Todas as tecnologias que suportem um funcionamento interactivo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores de teclado não fiquem bloqueados numa subsecção do conteúdo, da qual só podem sair utilizando um rato ou dispositivo apontador. Um exemplo comum é o conteúdo apresentado utilizando plug-ins. Os plug-ins são agentes de utilizador que apresentam o conteúdo na janela anfitriã do agente de utilizador, e respondem a todas as acções do utilizador que ocorrem enquanto o plug-in recebe o foco. Se o plug-in não fornecer um mecanismo no teclado para devolver o foco à janela principal, os utilizadores que dependem do teclado podem ficar bloqueados no conteúdo do plug-in.

Este problema pode ser evitado utilizando um dos seguintes mecanismos, para fornecer aos utilizadores uma forma de saírem da subsecção do conteúdo:

  • Garantir que a função de teclado para mover o foco no conteúdo (normalmente a tecla de tabulação) sai da subsecção do conteúdo ao chegar ao local de destino.

  • Fornecer uma função de teclado para tirar o foco da subsecção de conteúdo. Certifique-se de que a funcionalidade está documentada de forma acessível na subsecção.

  • Se a tecnologia utilizada na subsecção do conteúdo fornecer, de origem, um comando de teclado "mover para elemento principal", documente o comando antes de o utilizador aceder ao plug-in, para que o utilizador saiba como sair de novo.

Se o autor utilizar uma tecnologia que permita aos utilizadores aceder ao subconteúdo através do teclado e, por predefinição, não permita que saiam do subconteúdo através do teclado (i.e., não é uma funcionalidade da tecnologia de conteúdo da Web nem dos seus agentes de utilizador), então, para implementar esta técnica, o autor terá de criar essa capacidade no conteúdo ou então não utilizar a tecnologia.

Exemplos

  • Assim que um utilizador utilizar a tecla de tabulação para aceder a uma applet, esta apresenta mais separadores impedindo que a pessoa utilize a tabulação para sair desse estado. Contudo, a applet é criada para devolver o foco do teclado à janela principal quando a pessoa termina de percorrer a tabulação através da sequência de tabulação na applet.

  • Uma página que inclui conteúdo que não é suportado por acessibilidade inclui instruções sobre como mover o foco de novo para o conteúdo suportado por acessibilidade através do teclado. As instruções precedem o conteúdo não suportado por acessibilidade.

  • A informação de ajuda disponível para o conteúdo que não é suportado por acessibilidade mostra como mover o foco de novo para o conteúdo suportado por acessibilidade através do teclado, e a informação de ajuda pode ser acedida através do teclado.

  • A informação de ajuda disponível para a página Web mostra como mover o foco do conteúdo que não é suportado por acessibilidade para o conteúdo suportado por acessibilidade através do teclado, e a informação de ajuda pode ser acedida através do teclado.

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Utilize a tecla de tabulação para percorrer o conteúdo do início ao fim.

  2. Verifique se o foco do teclado está bloqueado num conteúdo, de uma forma que a pessoa não possa sair de qualquer parte do conteúdo e continuar a percorrer o resto do conteúdo.

Resultados Esperados
  • A verificação 2 é falsa.


G53: Identificar a finalidade de um link utilizando o texto do link em conjunto com o texto da respectiva frase

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

O Window-Eyes 5.5 inclui teclas de atalho para ler a frase e o parágrafo actuais.

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:

  • Caracter = 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 predifniçã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

  • Caracter = 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

Descrição

A finalidade desta técnica é identificar a finalidade de um link a partir do link e do contexto da respectiva frase. A frase com o respectivo link 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 pretende 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:

Uma página Web contém a frase "Para anunciar nesta página, clique aqui."

Embora a frase do link "clique aqui" não seja suficiente para compreender o link, a informação necessária precede o mesmo, na mesma frase.

Exemplo 2:

Uma página Web contém a frase "Os primeiros Puritanos ingleses chegaram à América a bordo do Mayflower".

Exemplo 3:

No resumo informativo que contém a frase "O Smallville Times informa que o calendário escolar para 2007 escolhido pelo Conselho Directivo terá início em 27 de Agosto", as palavras "informa que" são o link para aceder ao artigo, no Smallville Times, sobre a reunião do Conselho Directivo.

Nota: Embora este exemplo cumpra o Critério de Sucesso, ao apresentar a informação necessária para compreender o link após o mesmo, torna o processo incómodo para os utilizadores que lêem o documento com o auxílio de um leitor de ecrã.

Recursos

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

Testes

Procedimento

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

  1. Verifique se o link faz parte de uma frase.

  2. Verifique se o texto do link em conjunto com o texto da respectiva frase descreve a finalidade do link.

Resultados Esperados
  • As verificações acima são verdadeiras.


G54: Incluir um intérprete de língua gestual na sequência de vídeo

Aplicabilidade

Aplica-se a todas as tecnologias que apresentem informação multimédia sincronizada.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores que não conseguem ouvir ou ler o texto rapidamente possam aceder a material em multimédia sincronizada.

Para as pessoas que comunicam essencialmente em língua gestual, existem vezes em que não é preferível e outras em que não é possível lerem e compreenderem o texto à velocidade a que é apresentado em legendas. Para estas pessoas é importante fornecer uma apresentação em língua gestual das informações de áudio.

Uma forma universalmente compatível de o fazer é simplesmente incluir um vídeo do intérprete de língua gestual na sequência de vídeo. A desvantagem é que fornece uma imagem com uma resolução mais baixa, que não pode ser facilmente ampliada sem ampliar toda a imagem.

Nota 1: Se a sequência de vídeo for muito curta, o intérprete de língua gestual será indiscernível. Quando criar uma sequência de vídeo que inclua um vídeo de um intérprete de língua gestual, certifique-se de que existe um mecanismo para reproduzir a sequência de vídeo no ecrã inteiro na tecnologia de conteúdo suportada por acessibilidade. Caso contrário, certifique-se de que a parte do vídeo que contém o intérprete é ajustável ao tamanho respectivo se a sequência de vídeo completa fosse apresentada no ecrã inteiro.

Nota 2: Uma vez que a língua gestual não é, normalmente, uma versão com gestos da língua escrita, o autor tem de escolher que língua gestual deve incluir. Normalmente, será utilizada a língua gestual do público principal. Se se destinar a vários públicos, podem ser utilizadas várias línguas. Para obter informações sobre várias línguas gestuais, consulte a técnica de tipo aconselhada.

Exemplos

  • Exemplo 1: Uma estação de televisão apresenta um intérprete de língua gestual no canto do vídeo de informação online.

Recursos

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

Testes

Procedimento
  1. Peça a uma pessoa que consiga ouvir e que esteja familiarizada com a língua gestual que está a ser utilizada para ver o programa.

  2. Verifique se existe um intérprete de língua gestual no ecrã.

  3. Verifique se o diálogo e os sons importantes estão a ser transmitidos pelo intérprete visível no ecrã.

Resultados Esperados
  • As verificações 2 e 3 são verdadeiras.


G55: Aceder às definições através de um link

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é disponibilizar a definição de uma palavra, frase ou abreviatura fornecendo a definição, na mesma página Web ou numa página Web diferente, e criando um link entre o item e a respectiva definição.

Os links são uma opção eficaz para se aceder à definição de uma palavra, frase ou abreviatura. O utilizador pode utilizar o link para localizar a definição rápida e facilmente e, em seguida, voltar à sua posição anterior no conteúdo através do botão Retroceder do agente de utilizador.

Exemplos

Exemplo 1

Os termos técnicos e abreviaturas num artigo sobre lesões no desporto estão associados, através de um link, a definições num dicionário médico.

Exemplo 2

Um manual contém um glossário com os novos termos apresentados em cada capítulo. A primeira ocorrência de cada um destes termos inclui um link para aceder à respectiva definição no glossário.

Exemplo 3

É fornecido um glossário geral de abreviaturas. Todas as ocorrências de abreviaturas incluem um link para aceder directamente à definição correcta nesse glossário.

Exemplo 4

O termo jargão inclui um link para aceder à respectiva definição no Glossário das WCAG2.

Exemplo 5

O termo "modulo" é jargão utilizado em conteúdo da Web relacionado com matemática. Está disponível uma definição de "modulo" na página Web. Cada ocorrência do termo "modulo" inclui um link para aceder à respectiva definição.

Exemplo 6

Uma expressão idiomática em japonês contém um link para aceder à respectiva definição. Este exemplo inclui um link na página para aceder à definição de uma expressão idiomática.

Código Exemplo:

<p>....<a href="#definition">さじを投げる</a>....</p>

<h3>脚注:</h3>
<dl>
<dt id="definition" name="definition">さじを投げる</dt>
<dd>どうすることもできなくなり、あきらめること。</dd>
</dl> 

Recursos

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

Testes

Procedimento

Para cada palavra, frase ou abreviatura a ser definida:

  1. Verifique se, no mínimo, a primeira ocorrência do item é um link.

  2. Verifique se cada link conduz à definição do item.

Resultados Esperados
  • As verificações 1 e 2 são verdadeiras.


G56: Misturar ficheiros de áudio para que os sons que não sejam de fala sejam, no mínimo, 20 decibéis mais baixos do que o conteúdo de áudio de fala

Aplicabilidade

Qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir aos autores incluírem som por detrás da fala sem dificultar a compreensão da mesma para as pessoas com problemas de audição. Garantir que a fala em primeiro plano está 20 db acima do som de fundo torna a fala 4 vezes mais alta do que o som de fundo. Para mais informações sobre Decibéis (dB), consulte Sobre Decibéis(página em inglês).

Exemplos

Exemplo 1: Um locutor com a voz sobreposta ao cenário de um motim
  • O narrador descreve o motim. O volume do som do motim é ajustado, de modo a ficar 20 db a menos do volume da voz do locutor, antes de o cenário do motim se misturar com a voz do narrador.

Exemplo 2: Um contraste de som suficiente entre um narrador e a música de fundo

Este exemplo apresenta uma voz com música a tocar em plano de fundo, em que a voz está 20 dB acima do som de fundo. A voz (em primeiro plano) está gravada a 17,52 decibéis (valor médio quadrático - RMS) e a música (som de fundo) está a 37,52 decibéis, o que faz com que o som do primeiro plano esteja 20 decibéis acima do som de fundo.

Exemplo de áudio

Exemplo de Áudio: O primeiro plano está 20 decibéis acima do som de fundo (mp3)

Transcrição do exemplo de áudio (bom contraste):

"Normalmente, o primeiro plano refere-se a uma voz que fala e que deve ser compreendida. Neste preciso momento, a minha voz está 20 decibéis acima do som de fundo, que é a música. Este é um exemplo de como deve ser feito".

Exemplo visual da gravação acima

O exemplo de áudio acima é apresentado visualmente abaixo numa fotografia do ficheiro num editor de áudio. A secção que contém som em primeiro plano e em plano de fundo está realçada. O comprimento da onda é maior do que a secção que contém apenas som de fundo.

Representação visual de contraste insuficiente.
Exemplo de Falha 3: Contraste de Áudio Insuficiente entre um narrador e a música de fundo
Exemplo de áudio da falha

Este exemplo apresenta uma voz com música a tocar em plano de fundo, em que a voz não está 20 dB acima do som de fundo. A voz (em primeiro plano) está a 18 decibéis e a música (som de fundo) está a cerca de 16 decibéis, fazendo com que o primeiro plano esteja apenas 2 decibéis mais alto do que o som de fundo.

Exemplo de Áudio: O som em primeiro plano está menos de 20 decibéis acima do som de fundo (mp3)

Transcrição de um exemplo de áudio (mau contraste):

"Este é um exemplo de uma voz que não está suficientemente alta em relação ao som de fundo. A voz, em primeiro plano, está apenas cerca de 2 decibéis acima do som de fundo. Desta forma, é difícil de compreender por uma pessoa que tenha dificuldades de audição. É difícil discernir uma palavra de outra. Este é um exemplo do que não se deve fazer."

Exemplo visual da falha

A secção realçada contém som em primeiro plano e em plano de fundo. A onda tem praticamente o mesmo comprimento da secção que contém apenas som de fundo, o que significa que o som de fundo é demasiado alto comparado com a voz em primeiro plano.

Representação visual de mau contraste.

Recursos

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

Testes

Procedimento
  1. Localize os valores mais altos do conteúdo em plano de fundo entre a fala em primeiro plano.

  2. Meça o volume em dB(A) SPL.

  3. Meça o volume da fala em primeiro plano em dB(A) SPL.

  4. Subtraia os valores.

  5. Verifique se o resultado é 20 ou mais.

Resultados Esperados
  • A verificação 5 é verdadeira.


G57: Ordenar o conteúdo numa sequência com significação

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que a ordem do conteúdo apresentado às tecnologias de apoio permite ao utilizador compreender o conteúdo. Algumas técnicas permitem que o conteúdo seja apresentado visualmente numa sequência com significação, mesmo se a ordem subjacente do conteúdo for confusa.

Por exemplo, ao combinar idiomas com uma diferente direcção em HTML, o algoritmo bidireccional pode colocar a pontuação no local errado. O conteúdo ordenado correctamente mantém a pontuação na sequência correcta do conteúdo e utiliza a marcação para substituir o algoritmo bidireccional, em vez de mover a pontuação da sequência do conteúdo para que a apresentação predefinida a coloque correctamente.

Quando apresentados visualmente, os caracteres de espaço em branco, tais como espaço ou tabulação, podem não parecer fazer parte do conteúdo. Contudo, quando inseridos no conteúdo para controlar a formatação visual, podem interferir com o significado do conteúdo.

Numa granulosidade maior, o controlo da colocação de blocos de conteúdo num documento em HTML utilizando tabelas de esquema pode produzir uma apresentação, na qual as informações relacionadas são posicionadas juntas visualmente, mas separadas na sequência do conteúdo. Uma vez que as tabelas de esquema são lidas linha a linha, se a legenda de uma ilustração for colocada na linha a seguir à ilustração, poderá ser impossível associar a legenda à imagem.

Exemplos

Exemplo 1

Uma página Web da exposição de um museu contém uma barra de navegação com uma longa lista de links. A página também contém uma imagem de um dos quadros da exposição, um título para o quadro e uma descrição detalhada do quadro. Os links na barra de navegação formam uma sequência com significação. O título, a imagem e o texto da descrição também formam uma sequência com significação. O CSS é utilizado para posicionar os elementos na página.

Código Exemplo:

Markup:

<h1>My Museum Page</h1>
<ul id="nav">
	<li><a href="#">Link 1</a></li>
	...
	<li><a href="#">Link 10</a></li>
</ul>
<div id="description">
<h2>Mona Lisa</h2>
<p>
<img src="img.png" alt="Mona Lisa">
</p>
<p>...detailed description of the picture...</p>
</div>

CSS:

ul#nav
{
	float: left;
	width: 9em;
	list-style-type: none;
	margin: 0;
	padding: 0.5em;
	color: #fff;
	background-color: #063;
}

ul#nav a
{
	display: block;
	width: 100%;
	text-decoration: none;
	color: #fff;
	background-color: #063;
}

div#description
{
	margin-left: 11em;
}

Recursos

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

Testes

Procedimento
  1. Torne o conteúdo linear utilizando uma abordagem normal para a tecnologia (por ex., removendo estilos de disposição ou executando uma ferramenta de linearização)

  2. Verifique se a ordem do conteúdo produz o mesmo significado do original

Resultados Esperados
  • O passo 2 é verdadeiro.


G58: Colocar um link para a alternativa para multimédia baseada no tempo junto ao conteúdo não textual

Aplicabilidade

Esta técnica não é específica da tecnologia e pode ser utilizada em qualquer tecnologia que suporte links.

Esta técnica está relacionada com:

Descrição

Com esta técnica, é fornecido um link para o documento agrupado de legendas e áudio-descrição. O documento agrupado pode estar noutra localização na mesma página Web ou noutro URI. Um link para o documento agrupado está imediatamente adjacente ao conteúdo não textual. O link pode estar imediatamente antes ou depois do conteúdo em multimédia sincronizada. Se o documento agrupado estiver na mesma página Web de outro conteúdo, coloque "Fim de documento" no fim para o utilizador saber quando deve parar de ler e regressar ao local anterior. Se um botão "Retroceder" não encaminhar a pessoa para a sua localização original, será fornecido um link para voltar à localização do conteúdo não textual.

Exemplos

Exemplo 1: Um Documento .MOV num Documento HTML

Código numa página denominada "Olympic_Sports.htm"

Código Exemplo:

<a name="Olympic_Wrestling"></a>
<p><a href="http://www.example.com/movies/olympic_wrestling.mov">Olympic Wrestling movie</a>, 
<a href="http://www.example.com/transcripts/olympic_wrestling_transcript.htm>Olympic 
Wrestling collated Transcript</a></p>
Exemplo 2: O link para voltar ao Documento .MOV num Documento HTML

Código na página olympic_wrestling_transcript.htm

Código Exemplo:

<p>Sports announcer 1: This is a great battle tonight between England's "Will Johnson" and 
"Theodore Derringo" from Argentina</p>

<p>Scenery: There is a mat set out in the middle of the stadium with 500 people in the 
stands...</p>

<p> ...more dialogue ...<p>

<p> ...more scenery...</p>

<p> ...etc...</p>

<p>Sports announcer 2: And that is all for tonight, thank you for joining us tonight where 
Will Johnson is the new Gold Medalist. 
<a href="../movies/Olympic_Sports.htm#Olympic_Wrestling>Return to Movie page</a> </p>

Recursos

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

Testes

Procedimento
  1. Verifique se existe um link imediatamente antes ou depois do conteúdo não textual.

  2. Verifique se existe um link válido que aponte directamente para o documento agrupado desta multimédia sincronizada específica.

  3. Verifique se existe um link ou uma função de retrocesso disponíveis para encaminhar o utilizador para a localização original do conteúdo em multimédia sincronizada.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G59: Colocar os elementos interactivos numa ordem que siga as sequências e relações existentes no conteúdo

Aplicabilidade

Todas as tecnologias que contêm elementos interactivos e predefinem uma ordem de tabulação para elementos interactivos.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os elementos interactivos recebem foco numa ordem que siga as sequências e relações existentes no conteúdo. Ao conceber o conteúdo, os elementos interactivos, tais como links e controlos de formulário, são colocados no conteúdo para que a ordem de tabulação predefinida siga as sequências e relações existentes no conteúdo. Cada tecnologia predefine a sua ordem de tabulação, como tal o mecanismo para colocar os controlos no conteúdo dependerá da tecnologia utilizada.

Como exemplo, em HTML, a ordem de foco predefinida segue a ordem na qual os elementos aparecem na origem do conteúdo. Quando a ordem da origem HTML corresponde à ordem visual da página Web, a utilização da tecla de tabulação para percorrer o conteúdo permite seguir o esquema visual do conteúdo. Quando a ordem de origem não corresponde à ordem visual, a ordem de tabulação através do conteúdo tem de reflectir as relações lógicas existentes no conteúdo que são apresentadas visualmente.

Exemplos

  • Um formulário contém dois campos de entrada de texto que têm de ser preenchidos de forma consecutiva. O primeiro campo de entrada de texto é colocado em primeiro lugar no conteúdo, o segundo campo de entrada de texto é colocado em segundo lugar.

  • Um formulário contém duas secções de informação lado a lado. Uma secção contém informações sobre um candidato; a outra secção contém informações sobre a esposa do candidato. Todos os elementos interactivos na secção do candidato recebem foco antes de qualquer um dos elementos na secção da esposa. Os elementos de cada secção recebem foco na ordem de leitura dessa secção.

Recursos

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

Testes

Procedimento
  1. Determine a ordem dos elementos interactivos existentes no conteúdo.

  2. Determine a ordem lógica dos elementos interactivos.

  3. Verifique se a ordem dos elementos interactivos existentes no conteúdo é igual à ordem lógica.

Resultados Esperados
  • O passo 3 é verdadeiro.


G60: Tocar um som que desliga automaticamente em menos de três segundos

Aplicabilidade

Aplica-se a todas as tecnologias, excepto as que necessitam de interacção de voz.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é permitir que os autores reproduzam um som na sua página Web, mas evitar o problema de os utilizadores não conseguirem utilizar os seus leitores de ecrã devido a interferência do som do conteúdo. Também permite que o autor evite a colocação de controlos na página Web para controlar o som - e o problema com que se deparam os utilizadores de leitores de ecrã para encontrar o controlo (quando não é possível ouvir o leitor de ecrã).

A técnica é simples. O som toca durante 3 ou menos segundos e pára automaticamente.

Exemplos

  • Exemplo 1: Uma página Web abre com um toque de trombetas e, em seguida, fica em silêncio.

  • Exemplo 2: Uma página inicial abre com o presidente a dizer, "Binfor, onde a qualidade é o nosso negócio." e, em seguida, fica em silêncio.

  • Exemplo 3: Uma página Web abre com instruções sobre como começar: "Para começar, pressione a tecla Enter."

  • Exemplo 4: Uma página Web abre com um aviso e, em seguida, fica em silêncio.

Recursos

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

(nenhum)

Testes

Procedimento
  1. Carregue a página Web.

  2. Verifique se todos os sons que tocam automaticamente param em 3 segundos ou menos.

Resultados Esperados
  • O passo 2 é verdadeiro.


G61: Apresentar componentes repetidos pela mesma ordem relativa sempre que são apresentados

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é tornar o conteúdo mais fácil de utilizar, tornando mais previsível a colocação de componentes repetidos. Esta técnica ajuda a manter uma apresentação ou disposição consistentes entre páginas Web, apresentando os componentes que se repetem nestas unidades da Web pela mesma ordem relativa sempre que são apresentados. Podem ser inseridos outros componentes entre eles, mas a sua ordem relativa não é alterada.

Esta técnica também se aplica a componentes de navegação repetidos. As páginas Web contêm frequentemente um menu de navegação ou outro componente de navegação que permite ao utilizador passar para outras páginas Web. Esta técnica torna a colocação de componentes de navegação mais previsível, apresentando os links ou as referências programáticas dentro de um componente de navegação pela mesma ordem sempre que um componente de navegação é repetido. Podem ser removidos ou inseridos outros links entre os existentes, por exemplo, para permitir a navegação dentro de uma subsecção de um conjunto de páginas Web, mas a ordem relativa não é alterada.

Exemplos

  • Um sítio da Web tem um logótipo, um título, um formulário de procura e uma barra de navegação no topo de cada página; estes aparecem pela mesma ordem relativa em cada página em que se repetem. Numa página falta o formulário de procura, mas os restantes itens continuam na mesma ordem.

  • Um sítio da Web tem um menu de navegação no lado esquerdo com links para as secções mais importantes do sítio da Web. Quando o utilizador segue um link para outra secção do sítio da Web, os links para as secções mais importantes aparecem pela mesma ordem relativa na página seguinte. Por vezes, são retirados links e adicionados outros, mas os restantes links permanecem sempre na mesma ordem relativa. Por exemplo, num sítio da Web de uma empresa que vende produtos e oferece formação, quando um utilizador se desloca da secção dos produtos para a secção da formação, os links para cada um dos produtos são removidos da lista de navegação, enquanto os links para as ofertas de formação são adicionados.

Recursos

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

Testes

Procedimento
  1. Indique os componentes que se repetem em cada página Web num conjunto de páginas Web (por exemplo, em cada página de um sítio da Web).

  2. Para cada componente, verifique se é apresentado pela mesma ordem relativa no que respeita a outros componentes repetidos em cada página Web em que aparece.

  3. Para cada componente de navegação, verifique se os links ou as referências programáticas são sempre apresentados pela mesma ordem relativa.

Resultados Esperados
  • O passo 2 é verdadeiro.

  • O passo 3 é verdadeiro.


G62: Fornecer um glossário

Aplicabilidade

Todas as tecnologias que contenham texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é disponibilizar a definição de uma palavra, frase ou abreviatura, fornecendo a definição num glossário. Um glossário é uma lista de palavras, frases e abreviaturas por ordem alfabética com as respectivas definições. Os glossários são oportunos quando as palavras, frases e abreviaturas utilizadas no conteúdo estão relacionadas com uma matéria ou área de tecnologia específicas. Um glossário também pode fornecer a pronúncia de uma palavra ou frase.

O glossário é incluído no final da página Web ou é localizado através de um dos mecanismos para localizar conteúdo num conjunto de páginas Web. (Consulte as Noções sobre o Critério de Sucesso 2.4.5.)

Se o glossário incluir várias definições para a mesma palavra, frase ou abreviatura, o simples fornecimento do glossário não é suficiente para cumprir este Critério de Sucesso. Deve ser utilizada uma técnica diferente para encontrar a definição correcta. Isto é especialmente importante se as utilizações de uma palavra, frase ou abreviatura não forem exclusivas na página Web, ou seja, se diferentes ocorrências do item tiverem diferentes definições.

Exemplos

Exemplo 1

Os utilizadores de fóruns de chat online criaram vários acrónimos e abreviaturas para aumentar a velocidade das conversas por computador. Por exemplo, LOL refere-se a "laughing out loud" (rir muito alto) e FWIW é a abreviatura de "for what it's worth" (se serve de alguma coisa). O sítio da Web fornece uma página de glossário que apresenta as definições por extenso dos acrónimos e abreviaturas mais utilizados.

Exemplo 2

Uma página Web sobre teorias matemáticas inclui um glossário dos termos matemáticos, abreviaturas e acrónimos mais utilizados.

Exemplo 3

Um manual escolar inclui um glossário de novas palavras introduzidas em cada capítulo.

Exemplo 4

Um texto em holandês utiliza a frase "Hij ging met de kippen op stok" (Deitou-se com as galinhas). O glossário explica que esta frase significa "Hij ging vroeg naar bed" (Foi cedo para a cama).

Exemplo 5: Um glossário de expressões idiomáticas

O romance americano "The Adventures of Huckleberry Finn" (As Aventuras de Huckleberry Finn) inclui várias expressões idiomáticas que eram utilizadas no sudoeste dos Estados Unidos da América nos anos 40 do século XIX. Numa edição online concebida para estudantes, cada expressão idiomática tem um link para um item no glossário.

Recursos

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

Testes

Procedimento
  1. Verifique se

    • O glossário está incluído na página Web, ou

    • Está disponível um mecanismo para localizar o glossário.

  2. Verifique se cada palavra, frase ou abreviatura, das quais pretende a definição, se encontra definida no glossário

  3. Verifique se o glossário contém apenas uma definição para cada item.

Resultados Esperados
  • Os três 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."


G63: Fornecer um mapa do sítio da Web

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta é uma de várias técnicas para localizar conteúdo suficiente para abordar o Critério de Sucesso 2.4.5. Um mapa do sítio da Web é uma página Web que fornece links para diferentes secções do sítio da Web. Para disponibilizar este mapa no sítio da Web, é necessário, no mínimo, que todas as páginas indicadas no mapa tenham um link para o mesmo.

O mapa do sítio da Web serve várias finalidades.

  • Fornece uma descrição geral de todo o sítio da Web.

  • Ajuda os utilizadores a compreender o conteúdo do sítio da Web e a forma como está organizado.

  • Oferece uma alternativa a barras de navegação complexas que podem ser diferentes em partes diferentes do sítio da Web.

Existem diferentes tipos de mapas de sítios da Web. O tipo mais simples e mais comum é um plano geral que mostra links para cada secção ou subsítio da Web. As vistas desse plano geral não mostram as relações mais complexas do sítio da Web, tais como links entre páginas em diferentes secções. Para alguns sítios da Web de grandes dimensões, estes mapas utilizam títulos extensíveis que mostram detalhes adicionais sobre cada secção.

Um mapa de sítio da Web descreve o conteúdo e a organização de um sítio da Web. É importante que os mapas sejam actualizados sempre que o sítio da Web é actualizado. Uma página Web que não inclua links para todas as secções de um sítio da Web, que apresente uma organização diferente da organização do sítio da Web, ou que inclua links que já não sejam válidos, não é um mapa de sítio da Web válido.

Exemplos

Exemplo 1

A Web Accessibility Initiative fornece um mapa de sítio da Web WAI que apresenta diferentes secções do seu sítio da Web. O mapa mostra as diferentes secções do sítio da Web e algumas das subestruturas dessas secções.

Exemplo 2

O mapa do sítio da Web de uma revista online apresenta todas as secções da revista e as subsecções existentes em cada secção. Também inclui links para Ajuda, Como Contactar-nos, Política de Privacidade, Oportunidades de Emprego, Como Subscrever e a página inicial da revista.

Recursos

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

Testes

Procedimento
  1. Verifique se o sítio da Web contém um mapa.

  2. Verifique se os links do mapa conduzem às secções correspondentes do sítio da Web.

  3. Para cada link do mapa, verifique se a página de destino contém um link para o mapa do sítio da Web.

  4. Para cada página do sítio da Web, verifique se é possível aceder à página seguindo um conjunto de links apresentados no mapa do sítio da Web.

Resultados Esperados
  • Todas os passos acima são verdadeiros.


G64: Fornecer um Índice

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta é uma de várias técnicas para localizar conteúdo suficiente para abordar o Critério de Sucesso 2.4.5. Um índice fornece links para secções e subsecções do mesmo documento. As informações no documento estão, normalmente, organizadas de forma hierárquica, e pretendem ser lidas sequencialmente. Tal como podem existir vários livros numa biblioteca, cada um com o seu próprio índice, um sítio da Web pode conter vários documentos, cada um com o seu próprio índice.

O índice serve duas finalidades:

  • Fornece aos utilizadores uma descrição geral do conteúdo e organização do documento.

  • Permite aos leitores passar directamente para uma secção específica de um documento online.

Normalmente, o índice inclui apenas as secções mais importantes do documento, embora, em alguns casos, possa ser desejável um índice extensível que forneça uma vista mais detalhada de um documento complexo.

As secções do documento podem estar localizadas na mesma página Web ou divididas em várias páginas Web. Um índice é especialmente útil quando um documento está dividido em várias páginas Web.

Existe uma distinção entre um índice e outros elementos de Navegação, tais como uma Barra de Navegação ou um Mapa do Sítio da Web. Um índice fornece links para secções do mesmo documento. Essas secções podem estar localizadas na mesma página Web ou distribuídas por várias páginas Web, mas juntas fazem uma ideia completa. Para uma melhor compreensão, imagine uma cópia em papel de um livro com secções. Cada secção pertence ao livro. Podem existir vários livros numa biblioteca. Neste exemplo, a "biblioteca" é todo o sítio da Web.

Exemplos

Exemplo 1

As Directrizes de Acessibilidade para o Conteúdo da Web 2.0 contêm um índice que é uma lista hierárquica de links para as secções e subsecções do documento. A hierarquia do índice reflecte a organização das secções, e cada item do índice é um link que conduz o utilizador directamente para essa secção.

Exemplo 2

A primeira página de Utilizar Documentos PDF Acessíveis com o Adobe Reader 7.0: Um Manual para Pessoas com Incapacidades (página em inglês) contém um índice que apresenta as secções do manual. A versão em PDF do Manual para Pessoas com Incapacidades contém um índice mais detalhado para todo o documento na página 3.

Recursos

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

Testes

Procedimento
  1. Verifique se existe um índice ou um link para um índice no documento.

  2. Verifique se os valores e a ordem das entradas do índice correspondem aos nomes e à ordem das secções do documento.

  3. Verifique se os links das entradas do índice conduzem às secções correctas do documento.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G65: Fornecer um trilho de navegação

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Um trilho de navegação ajuda o utilizador a visualizar a forma como o conteúdo foi estruturado e como retroceder na navegação para páginas Web anteriores, e pode identificar a localização actual numa série de páginas Web. Um trilho de navegação apresenta localizações no caminho que o utilizador fez para aceder à página Web, ou apresenta a localização da página Web actual na organização do sítio da Web.

Os trilhos de navegação são implementados utilizando links para as páginas Web que foram acedidas no processo de navegação para a página Web actual. São colocadas na mesma localização em cada página Web do conjunto.

Pode ser útil para os utilizadores para separarem itens no trilho de navegação com um separador visível. Os exemplos de separadores incluem ">", "|", "/" e "::".

Exemplos

Exemplo 1

Um programador navega no sítio da Web de um fabricante de ferramentas de autor para descobrir como criar hiperligações. Os resultados da procura conduzem-no a uma página Web com instruções específicas sobre como criar hiperligações utilizando a ferramenta de autor. Contém os seguintes links para criar um trilho de navegação:

Código Exemplo:

Home :: Developer Center :: How To Center 

Neste exemplo, o trilho de navegação não contém o título da página Web actual, "Como criar hiperligações". Essa informação está disponível como o título da página Web.

Exemplo 2

O sítio da Web do portfólio de um fotógrafo foi organizado em diferentes galerias e cada galeria foi dividida em categorias. Um utilizador que navegue no sítio da Web até uma página que contenha uma fotografia de um pinguim Gentoo verá o seguinte trilho de navegação no topo da página Web:

Código Exemplo:

Home / Galleries / Antarctica / Penguins / Gentoo Penguin 

Todos os itens, excepto "Pinguim Gentoo" estão implementados como links. A localização actual, Pinguim Gentoo, está incluída no trilho de navegação, mas não está implementada como um link.

Recursos

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

Testes

Procedimento

Quando tiverem sido implementados trilhos de navegação num conjunto de páginas Web:

  1. Navegue até uma página Web.

  2. Verifique se é apresentado um trilho de navegação.

  3. Verifique se o trilho de navegação apresenta a sequência de navegação correcta para alcançar a localização actual ou o caminho hierárquico correcto para a localização actual na estrutura do sítio da Web.

  4. Para um trilho de navegação não inclua a localização actual:

    1. Verifique se todos os elementos do trilho de navegação estão implementados como links.

  5. Para um trilho de navegação que inclua a localização actual:

    1. Verifique se todos os elementos, excepto para a localização actual, estão implementados como links.

    2. Verifique se a localização actual não está implementada como um link.

  6. Verifique se todos os links conduzem para a página Web correcta, conforme especificado pelo trilho de navegação.

Resultados Esperados
  • Para todas as páginas Web do conjunto que utilizam trilhos de navegação,

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

    • Os passos 4 e 5 são verdadeiros.


G68: Fornecer uma etiqueta descritiva que descreva a finalidade do conteúdo composto por apenas áudio em directo e por apenas vídeo em directo

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta técnica fornece uma etiqueta descritiva para conteúdo composto por apenas áudio em directo e por apenas vídeo em directo. Esta etiqueta pode ser utilizada em combinação com uma alternativa para multimédia baseada no tempo para áudio ou uma alternativa para multimédia baseada no tempo ou áudio-descrição do vídeo. Contudo, essas alternativas não fazem parte desta técnica. A finalidade desta técnica é garantir que o utilizador possa determinar o que é o conteúdo não textual, mesmo que não consiga acedê-lo. NOTA: Mesmo se também estiverem disponíveis alternativas completas, é importante que os utilizadores possam identificar o conteúdo não textual quando o encontrarem, para não ficarem confusos e poderem associá-lo à alternativa completa.

Exemplos

Exemplo 1
  • Uma gravação de vídeo em directo da auto-estrada da costa Este tem a seguinte etiqueta descritiva "Filme de vídeo em directo da Auto-estrada da Costa Este a Sul do cruzamento I-81 com as condições de trânsito actuais."

  • Uma gravação de áudio em directo da Câmara dos Representantes no Mississipi tem a seguinte etiqueta descritiva "Gravação de áudio em directo dos microfones da Câmara dos Representantes no Mississipi."

Recursos

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

Testes

Procedimento
  1. Remova, oculte ou disfarce o conteúdo não textual.

  2. Apresente a(s) alternativa(s) em texto.

  3. Verifique se a finalidade do conteúdo não textual é clara, mesmo se se perder o conteúdo.

Resultados Esperados
  • O passo 3 é verdadeiro.


G69: Fornecer uma alternativa para multimédia baseada no tempo

Aplicabilidade

Técnica Geral. Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer uma forma alternativa acessível de apresentar as informações numa apresentação em multimédia sincronizada.

Numa apresentação em multimédia sincronizada, as informações são apresentadas em várias formas, incluindo

  • diálogo,

  • sons (naturais e artificiais),

  • ambiente e cenário,

  • acções e expressões das pessoas, animais, etc.,

  • texto ou gráficos

  • e outros.

Para apresentar as mesmas informações numa forma acessível, esta técnica implica a criação de um documento que conte a mesma história e apresente as mesmas informações da multimédia sincronizada. Um documento deste tipo é, por vezes, designado por guião. Inclui todos os diálogos e acções importantes, bem como descrições de cenários, etc. que façam parte da história.

Se tiver sido utilizado um guião verdadeiro para criar a multimédia sincronizada, este pode ser um bom começo. Contudo, na produção e edição, a multimédia sincronizada é, normalmente, diferente do guião. Para esta técnica, o guião original teria de ser corrigido para fazer corresponder o diálogo ao que realmente acontece no formato editado final da multimédia sincronizada.

Além disso, alguns tipos especiais de multimédia sincronizada incluem interacção que tem de ocorrer em locais específicos na reprodução da multimédia sincronizada. Por vezes, pode resultar numa acção (por ex., algo que é comprado, enviado, realizado, etc.). Por outras, pode alterar o curso da multimédia sincronizada (por ex., a multimédia sincronizada tem vários caminhos que são determinados pela entrada de dados por parte do utilizador). Nesses casos, seriam utilizados links ou outro mecanismo na alternativa para multimédia baseada no tempo para permitir que as pessoas que utilizam a alternativa possam ter as mesmas opções e capacidades do que as pessoas que utilizam a multimédia sincronizada.

Exemplos

  • Um filme de formação mostra aos funcionários como utilizar uma nova peça de equipamento. Inclui uma pessoa a falar enquanto a operação é demonstrada. O guião utilizado para criar o filme de formação é utilizado como ponto de partida. Depois, é editado e corrigido para corresponder ao diálogo, etc. O filme e a alternativa resultante para multimédia baseada no tempo são, em seguida, disponibilizados no sítio da Web da empresa. Os funcionários podem utilizar um ou os dois para obter informações sobre como utilizar a máquina.

  • É criado um ambiente interactivo de compras que permite aos utilizadores navegar numa loja virtual e fazer compras. Uma alternativa para multimédia baseada no tempo permite que os utilizadores acedam às mesmas compras em texto com links para escolherem corredores e comprar coisas, em vez de as arrastarem para um cesto de compras virtual.

Recursos

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

Testes

Procedimento
  1. Veja a apresentação em multimédia sincronizada enquanto consulta a alternativa para multimédia baseada no tempo.

  2. Verifique se o diálogo na alternativa para multimédia baseada no tempo corresponde ao diálogo na apresentação em multimédia sincronizada.

  3. Verifique se a alternativa para multimédia baseada no tempo tem descrições de sons.

  4. Verifique se a alternativa para multimédia baseada no tempo tem descrições de cenários e alterações de cenários.

  5. Verifique se a alternativa para multimédia baseada no tempo tem descrições de acções e expressões de quaisquer "actores" (pessoas, animais, etc.).

  6. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder a outras versões.

Resultados Esperados
  • Os passos 2, 3, 4 e 5 são verdadeiros.


G70: Fornecer uma função para procurar um dicionário online

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com

Descrição

O objectivo desta técnica é fornecer a definição de palavras, frases, jargão ou definições por extenso das abreviaturas, adicionando um mecanismo para aceder a um dicionário online para a página Web. Esta técnica utiliza recursos existentes na Internet para fornecer a definição, em vez de necessitar que o autor crie uma glossário ou outro mecanismo no sítio da Web. Ao fornecer acesso a partir da página Web, um utilizador pode facilmente localizar a definição pretendida. Esta técnica só pode ser utilizada se o dicionário online devolver a definição correcta.

Exemplos

Exemplo 1

Um sítio da Web que descreva a forma como funciona um computador deve incluir um formulário de procura em cada página Web. A procura de termos informáticos, acrónimos e abreviaturas será efectuada num dicionário online. Uma vez que o dicionário é especializado em termos informáticos, a definição por extenso dos acrónimos encontrada deve ser mais exacta do que a existente num dicionário geral.

Exemplo 2

Um curso online de gramática inglesa fornece um parágrafo de texto que introduz novas palavras. Cada uma das palavras corresponde a um link para um dicionário online para encontrar a definição da palavra. Ao activar um link, abrir-se-á uma nova janela para um dicionário online com a definição da palavra específica.

Recursos

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

Testes

Procedimento

Para cada palavra, frase ou abreviatura, dais quais pretenda a definição:

  1. Verifique se existe um mecanismo na página Web para procurar a palavra, frase ou abreviatura através de um dicionário online.

  2. Verifique se o resultado da procura da palavra, frase ou abreviatura no dicionário corresponde à definição correcta.

Resultados Esperados
  • Os passos 1 e 2 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."


G71: Fornecer um link de ajuda em todas as páginas Web

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

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

Descrição

O objectivo desta técnica é fornecer ajuda contextualizada aos utilizadores à medida que introduzem dados nos formulários, fornecendo, no mínimo, um link para as informações de ajuda em cada página Web. O link conduz a uma página de ajuda com informações específicas dessa página Web. Outra abordagem é fornecer um link de ajuda para todos os controlos interactivos. A colocação desse link imediatamente antes ou depois do controlo permite aos utilizadores chegarem facilmente até ao mesmo se tiverem problemas no controlo. A apresentação das informações de ajuda numa nova janela de browser garante que todos os dados que já tenham sido introduzidos no formulário não sejam perdidos. NOTA: Um link não é o único meio para fornecer ajuda.

Exemplos

Exemplo 1

O exemplo abaixo mostra um elemento label que inclui um link de ajuda. Incluir o link de ajuda no elemento label permite que os utilizadores de leitores de ecrã tenham acesso ao link de ajuda ao interagir com o controlo do formulário de introdução de dados.

Código Exemplo:

<form action="test.html">
	<label for="test">Test control
	<a href="help.html" target="_blank">Help</a></label>
	<input type="text" name="test" id="test" />
</form>

Testes

Procedimento
  1. Identifique uma página Web que contenha formulários.

  2. Verifique se existe, no mínimo, um link para informações de ajuda específicas para o preenchimento do formulário nesta página Web ou outro recurso.

  3. Verifique se existem links antes ou depois de cada controlo interactivo para informações de ajuda específicas para esse controlo.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G73: Fornecer uma descrição extensa noutra localização com um link para a mesma junto ao conteúdo não textual

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma forma de aceder, através de um link, a descrições extensas remotas em tecnologias que não disponham de uma funcionalidade de descrições extensas integrada (por ex., longdesc), ou onde essa funcionalidade não seja suportada.

Com esta técnica, a descrição extensa é fornecida numa localização diferente do conteúdo não textual. Este pode estar noutra localização no mesmo URI ou noutro URI. É fornecido um link para essa descrição extensa junto ao conteúdo não textual. O link pode estar imediatamente antes ou depois do conteúdo não textual. Se a descrição estiver juntamente com outro texto, coloque "Fim da descrição" no fim para o utilizador saber quando deve parar de ler e regressar ao conteúdo principal. Se um botão "Retroceder" não encaminhar a pessoa para a sua localização original, será fornecido um link para voltar à localização do conteúdo não textual.

Esta técnica era geralmente utilizada em HTML antes de "longdesc" ter sido adicionado à especificação. Em HTML, chamava-se D-Link, porque era normalmente implementada colocando um D junto às imagens e utilizando o D como um link para a descrição extensa. Esta técnica não é específica da tecnologia e pode ser utilizada em qualquer tecnologia que suporte links.

Exemplos

Exemplo 1: Gráfico de barras

Um gráfico de barras numa página Web mostra as vendas dos três melhores vendedores.

A alternativa em texto abreviado indica: "Gráfico de vendas de Outubro para os três melhores vendedores."

Imediatamente a seguir ao conteúdo não textual encontra-se uma pequena imagem apresentando uma descrição extensa. O texto alternativo para a imagem é "Descrição extensa do gráfico". A imagem tem um link para a parte inferior da página, onde existe uma secção intitulada "Descrição de gráficos nesta página". O link aponta para esta descrição específica: "As vendas de Outubro mostram que a Mary lidera com 400 unidades. Logo a seguir vem o Mike com 389. O Chris completa o nosso top 3 com 350 unidades vendidas. [fim da descrição]"

Exemplo 2: Gráfico de barras - numa tecnologia não HTML, em que a funcionalidade "retroceder" do agente de utilizador não é suportada por motivos de segurança.

Um gráfico de barras numa página Web mostra as vendas dos três melhores vendedores.

A alternativa em texto abreviado indica: "Gráfico de vendas de Outubro para os três melhores vendedores."

Imediatamente a seguir ao conteúdo não textual encontra-se uma pequena imagem apresentando a descrição extensa. O texto alternativo para a imagem é "Descrição extensa do gráfico". A imagem tem um link para outra página intitulada "Descrição de gráficos no Relatório de Vendas de Outubro". O link da descrição aponta para esta descrição específica: "As vendas de Outubro mostram que a Mary lidera com 400 unidades. Logo a seguir vem o Mike com 389. O Chris completa o nosso top 3 com 350 unidades vendidas. Fim da descrição. <link> Retroceder ao Gráfico de Vendas </link> ]"

Exemplo 3: Legenda utilizada como link

Um gráfico. A legenda da figura imediatamente a seguir ao gráfico funciona como um link para a descrição extensa. O atributo Title do link torna claro que se trata de um link para uma descrição extensa.

Exemplo 4: Transcrição de um ficheiro composto por apenas áudio

Uma gravação de um discurso do Martin Luther King. Os links para o ficheiro de áudio e para a transcrição aparecem lado a lado.

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 link imediatamente antes ou depois do conteúdo não textual.

  2. Verifique se existe um link válido que aponte directamente para a descrição extensa deste conteúdo não textual específico.

  3. Verifique se a descrição extensa transmite a mesma informação do conteúdo não textual.

  4. Verifique se existe um link ou uma função de retrocesso disponíveis para encaminhar o utilizador para a localização original do conteúdo não textual.

Resultados Esperados

Todos os passos acima são verdadeiros.


G74: Fornecer uma descrição extensa no texto junto ao conteúdo não textual, com uma referência à localização da descrição extensa na descrição abreviada

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma descrição extensa para que o utilizador não necessite de se deslocar até outra localização para obter a descrição. Também permite que todos os utilizadores vejam a descrição, o que pode ser útil para pessoas que não encontrem algumas funcionalidades no conteúdo não textual.

Com esta técnica, a descrição extensa é fornecida como parte da apresentação normal (i.e., todos a recebem). A descrição encontra-se junto ao conteúdo não textual, mas não tem de ser o item logo a seguir. Por exemplo, pode existir uma legenda sob um gráfico com a descrição extensa fornecida no parágrafo seguinte.

A localização desta descrição extensa é assim fornecida na alternativa em texto abreviado para que o utilizador saiba onde procurá-la se não puder visualizar o conteúdo não textual.

Exemplos

Exemplo 1: Gráfico de barras

Um gráfico de barras numa página Web mostra as vendas dos três melhores vendedores.

A alternativa em texto abreviado indica: "Gráfico de vendas de Outubro para os três melhores vendedores."

O seguinte encontra-se no parágrafo imediatamente a seguir ao gráfico. "As vendas de Outubro mostram que a Mary lidera com 400 unidades. Logo a seguir vem o Mike com 389. O Chris completa o nosso top 3 com 350 unidades vendidas."

Recursos

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

Testes

Procedimento
  1. Verifique se a alternativa em texto abreviado inclui a localização da descrição extensa.

  2. Verifique se a descrição extensa se encontra junto ao conteúdo não textual, tanto visualmente como na ordem de leitura linear.

  3. Verifique se a descrição extensa transmite a mesma informação do conteúdo não textual.

Resultados Esperados

Todos os passos acima são verdadeiros.


G75: Fornecer um mecanismo para adiar qualquer actualização do conteúdo

Aplicabilidade

Conteúdo que é actualizado automaticamente.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores podem adiar actualizações automáticas do conteúdo, ou outras interrupções não urgentes. Isto pode ser conseguido através de uma preferência ou alertando os utilizadores de uma actualização iminente, permitindo-lhes suprimi-la. Se for fornecida uma preferência, a actualização automática do conteúdo pode ser desactivada por predefinição e os utilizadores podem especificar a frequência das actualizações automáticas do conteúdo se optarem por activar a definição.

Exemplos

  • Uma página Web fornece cotações da bolsa e é actualizada automaticamente de tempos a tempos. A página fornece um breve formulário com um campo "Frequência de actualização dos dados (minutos):" para que os utilizadores possam ajustar a frequência da actualização.

Testes

Procedimento
  1. Encontre páginas com conteúdo que é actualizado automaticamente.

  2. Para cada actualização automática, procure um mecanismo para ajustar a frequência das actualizações.

  3. Verifique se a actualização automática está desactivada por predefinição ou se o utilizador é avisado antes de ocorrer uma actualização automática e autorizado a suprimi-la.

Resultados Esperados
  • O passo 3 é verdadeiro.


G76: Fornecer um mecanismo para solicitar uma actualização do conteúdo, em vez de actualizar automaticamente

Aplicabilidade

Qualquer tecnologia ou combinação de tecnologias que suportem actualizações automáticas.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é deixar o utilizador controlar se e quando o conteúdo for actualizado, de modo a evitar confusão ou desorientação provocadas por actualizações automáticas que alteram o contexto. Os utilizadores de leitores de ecrã podem achar as actualizações automáticas confusas, porque nem sempre é claro o que está a acontecer. Quando uma página é actualizada, o "cursor virtual" do leitor de ecrã, que assinala a localização actual do utilizador na página, desloca-se para o topo da página. As pessoas que utilizam software de ampliação de ecrã e as pessoas com incapacidades de leitura também podem ficar desorientadas quando as páginas são actualizadas automaticamente.

Algum conteúdo é frequentemente actualizado com novos dados ou informações. Alguns programadores forçam actualizações automáticas inserindo códigos no conteúdo que fazem com que o conteúdo solicite uma nova cópia de si próprio ao servidor. Estas actualizações e a frequência das mesmas nem sempre estão sob controlo do utilizador. Em vez de accionar actualizações automaticamente, os autores podem fornecer um mecanismo que permita ao utilizador solicitar uma actualização do conteúdo conforme for necessário.

Exemplos

Exemplo 1

Em HTML, um programador pode fornecer um botão ou link que permita ao utilizador actualizar o conteúdo. Por exemplo, numa página com itens de novidades localizada em http://www.example.com/news.jsp

Código Exemplo:

<a href="news.jsp">Update this page</a>
Exemplo 2

Numa interface Web para e-mail (Webmail), um programador pode fornecer um botão ou link para ir buscar novos e-mails a receber, em vez de actualizar automaticamente.

Recursos

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

Testes

Procedimento
  1. Encontre mecanismos para actualizar o conteúdo (se existirem).

  2. Para cada mecanismo, verifique se permite ao utilizador solicitar uma actualização.

  3. Para cada mecanismo, verifique se pode provocar uma actualização automática.

Resultados Esperados
  • Se o passo 2 for verdadeiro, então o passo 3 é falso.


G78: Fornecer uma segunda faixa de áudio, seleccionável pelo utilizador, que inclua áudio-descrições

Aplicabilidade

Aplica-se a qualquer tecnologia que inclua uma faixa de áudio e conteúdo visual.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma versão áudio (falada) das informações fornecidas visualmente, de modo a que as pessoas cegas possam compreender o material audiovisual.

Uma vez que, actualmente, a maioria dos agentes de utilizador não conseguem unir várias faixas de áudio, esta técnica adiciona as informações de áudio suplementares à multimédia sincronizada, fornecendo uma opção que permite aos utilizadores substituir a faixa de áudio por uma nova cópia da faixa de áudio original que inclui a áudio-descrição adicional. Estas informações suplementares dizem respeito a acções, caracteres, mudanças de cenário e texto no ecrã (não legendas) que são importantes para compreender o conteúdo.

Como não convém que estas novas informações atrapalhem as informações de áudio essenciais na faixa de áudio original (ou que estas sejam atrapalhadas por efeitos sonoros altos), as novas informações são adicionadas durante as pausas no diálogo e nos efeitos sonoros. Isto limita a quantidade de informação suplementar que pode ser adicionada ao programa.

A faixa de áudio com a áudio-descrição (da informação visual) pode ser uma faixa de áudio alternativa que o utilizador pode escolher, ou a faixa de áudio normal que todas as pessoas ouvem.

Exemplos

  • É adicionada uma áudio-descrição num documentário sobre viagens no nordeste durante os intervalos no diálogo para permitir que os ouvintes cegos saibam sobre o que a pessoa está a falar a qualquer momento.

  • Um vídeo mostra um pica-pau a fazer um ninho numa árvore. Um botão no conteúdo permite aos utilizadores ligar ou desligar a faixa da áudio-descrição.

  • É adicionada um áudio-descrição numa conferência sempre que o professor diz coisas como "e isto é uma das coisas mais importantes". As áudio-descrições permitem que os ouvintes que não conseguem ver o vídeo saibam o que "isto" é.

  • O ficheiro de um filme tem duas faixas de áudio, em que uma inclui a áudio-descrição. Os utilizadores podem escolher qualquer uma delas quando estiverem a ouvir o filme, seleccionando a faixa apropriada no leitor multimédia.

Recursos

Testes

Procedimento
  1. Verifique se a faixa de áudio que inclui as áudio-descrições pode ser ligada utilizando um controlo no próprio conteúdo ou seleccionando uma preferência no leitor multimédia.

  2. Ouça a multimédia sincronizada.

  3. Verifique se são utilizados os intervalos no diálogo para transmitir informações importantes sobre o conteúdo visual.

Resultados Esperados
  • Os passos 1 e 3 são verdadeiros.


G79: Fornecer uma versão falada do texto

Aplicabilidade

Tecnologias que suportem links e formatos de áudio.

Esta técnica está relacionada com:

Descrição

Alguns utilizadores que têm dificuldade em descobrir (descodificar) palavras em texto escrito consideram ser bastante útil ouvir o texto lido em voz alta. Agora, este serviço pode ser fornecido facilmente utilizando voz humana gravada ou fala sintetizada. Por exemplo, existem vários produtos que os autores podem utilizar para converter o texto em fala sintetizada, e depois guardar a versão falada como um ficheiro de áudio. Pode ser fornecido um link para a versão falada no conteúdo. O custo depende, em parte da, qualidade da voz utilizada e da probabilidade de o texto mudar com frequência.

  • Versões faladas de textos abreviados e de conteúdo de texto estático

    Este método é eficaz para pequenas quantidades de texto e para documentos mais extensos que não sofrem alterações com frequência.

    1. Faça uma gravação de uma pessoa a ler o texto em voz alta, ou utilize uma ferramenta que converta cada um dos documentos ou passagens seleccionadas em fala sintetizada. Escolha a voz mais clara e agradável, se possível.

    2. Guarde a versão falada como um ficheiro de áudio. Utilize um formato de áudio disponível e suportado por leitores multimédia.

    3. Forneça um link para a versão áudio.

    4. Identifique o formato de áudio (por exemplo, .MP3, .WAV, .AU, etc.).

    5. Forneça um link para um leitor multimédia que suporte o formato.

  • Versões faladas de texto que sofre alterações

    Os métodos baseados no servidor podem ser melhores quando as páginas sofrem alterações com frequência ou quando a escolha do utilizador determina o conteúdo do texto. Algumas ferramentas baseadas no servidor permitem aos utilizadores seleccionar qualquer texto que pretendam, e ouvi-lo. Normalmente, o utilizador pressiona um botão que inicia a conversão texto para fala e lê o texto em voz alta.

Exemplos

Exemplo 1: Um sítio da Web para um organismo público

Um sítio da Web de um município tem um botão em todas as páginas que têm a etiqueta "Leia esta página em voz alta". O utilizador selecciona o botão e a página é falada por um fala sintetizada.

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Verifique se está disponível uma versão falada do conteúdo.

Resultados Esperados
  • O passo 1 é verdadeiro.


G80: Fornecer um botão Submeter para iniciar uma alteração de contexto

Aplicabilidade

Conteúdo que inclui formulários.

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. Uma vez que a utilização pretendida de um botão Submeter é gerar um pedido HTTP que submeta dados introduzidos num formulário, este é um controlo apropriado para provocar uma alteração de contexto e é uma prática que não cria confusão aos utilizadores.

Exemplos

Exemplo 1

Exemplo 1: Um botão Submeter é utilizado para cada formulário que provoque uma alteração no contexto.

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 dispõe de um botão Submeter.

Resultados Esperados
  • O passo 2 é verdadeiro.


G81: Fornecer um vídeo sincronizado do intérprete de língua gestual que possa ser visualizado numa janela diferente ou sobreposto na imagem pelo leitor multimédia

Aplicabilidade

Aplica-se a todas as tecnologias de multimédia sincronizada que permitem a sincronização de várias sequências de vídeo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores que não conseguem ouvir ou ler o texto rapidamente possam aceder a material em multimédia sincronizada sem afectar a apresentação do material a todos os espectadores.

Para as pessoas que comunicam essencialmente em língua gestual, existem vezes em que não é preferível e outras em que não é possível lerem e compreenderem o texto à velocidade a que é apresentado em legendas. Para estas pessoas é importante fornecer uma apresentação em língua gestual das informações de áudio.

Esta técnica alcança o seu objectivo fornecendo a interpretação em língua gestual como uma sequência de vídeo separada, sincronizada com a sequência de vídeo original. Consoante o leitor, esta sequência de vídeo secundária pode ser colocada no topo do vídeo original ou apresentada numa janela separada. Também pode ser possível aumentar a imagem da interpretação em língua gestual separadamente do vídeo original para facilitar a leitura das mãos, do corpo e movimentos faciais do intérprete.

NOTA: Uma vez que a língua gestual não é, normalmente, uma versão com gestos da língua escrita, o autor tem de escolher que língua gestual deve incluir. Normalmente, será utilizada a língua gestual do público principal. Se se destinar a vários públicos, podem ser utilizadas várias línguas. Para obter informações sobre várias línguas gestuais, consulte a técnica de tipo aconselhada.

Exemplos

Exemplo 1

Exemplo 1: Uma universidade fornece uma sequência de vídeo com interpretação de língua gestual sincronizada que pode ser apresentada, se o espectador assim o entender, juntamente com qualquer um dos programas de ensino.

Recursos

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

  • Directrizes para a Produção de Livros de Língua Gestual

    • "Apresentação em Língua Gestual" (página em inglês) fornece uma extensa descrição geral das questões a ter em consideração ao filmar intérpretes de língua gestual. Inclui o tema sobre a interpretação em língua gestual dos originais falados e escritos.

    • As técnicas de filmagem são apresentadas no Capítulo 12, “Filmar os Intérpretes"(página em inglês).

    • As informações úteis sobre como apresentar o intérprete de língua gestual em relação ao conteúdo em multimédia sincronizada original são fornecidas no Capítulo 13, "Edição"(página em inglês).

      Nota: Estas técnicas podem precisar de ser adaptadas para apresentação baseada na Web.

(nenhum)

Testes

Procedimento
  1. Active a apresentação da janela da língua gestual no leitor.

  2. Peça a uma pessoa que consiga ouvir e que esteja familiarizada com a língua gestual que está a ser utilizada para ver o programa.

  3. Verifique se existe um intérprete de língua gestual no ecrã ou numa janela separada.

  4. Verifique se o diálogo e os sons importantes estão a ser transmitidos pelo intérprete e estão sincronizados com o áudio.

Resultados Esperados
  • Os passos 3 e 4 são verdadeiros.


G82: Fornecer uma alternativa em texto que identifique a finalidade do conteúdo não textual

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer informações úteis através da alternativa em texto, mesmo se não puder ser fornecida toda a função do conteúdo não textual.

Por vezes, uma alternativa em texto não pode servir a mesma finalidade do conteúdo não textual original (por exemplo, uma applet destinada a desenvolver capacidades bidimensionais de definição rápida e coordenação dos olhos com a mão). Nestes casos, é utilizada esta técnica. Com esta técnica, é fornecida uma descrição da finalidade do conteúdo não textual.

Exemplos

Exemplo 1
  • Uma applet de desenvolvimento de coordenação dos olhos com a mão tem a seguinte alternativa em texto: "Uma Applet que utiliza o rato e os alvos em movimento para desenvolver a coordenação dos olhos com a mão".

  • Uma applet de câmara com um disco redondo que é pressionado nas extremidades para controlar uma câmara remota e um cursor no meio para ampliar/reduzir (zoom) tem a seguinte alternativa em texto: "Controlo para apontar e ampliar/reduzir a câmara de vídeo remota".

Recursos

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

Testes

Procedimento
  1. Remova, oculte ou disfarce o conteúdo não textual.

  2. Substitua-o pela alternativa em texto.

  3. Verifique se a finalidade do conteúdo não textual é clara, mesmo se se perder a função.

Resultados Esperados
  • O passo 3 é verdadeiro.


G83: Fornecer descrições em texto para identificar os campos obrigatórios que não foram preenchidos

Aplicabilidade

Conteúdo que inclua campos obrigatórios na entrada de dados por parte do utilizador.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é notificar o utilizador sobre um campo de preenchimento obrigatório que não foi preenchido. Quando os utilizadores não introduzem dados nos campos de formulário obrigatórios, a informação é fornecida em texto para permitir aos utilizadores identificar os campos que foram esquecidos. Uma abordagem é utilizar a validação do lado do cliente e fornecer uma caixa de diálogo de aviso a identificar os campos obrigatórios que foram esquecidos. Outra abordagem, utilizando a validação do lado do servidor, é voltar a apresentar o formulário (incluindo todos os dados anteriormente introduzidos), com uma descrição em texto no local do campo obrigatório esquecido, ou uma descrição em texto que identifique os campos obrigatórios esquecidos.

Exemplos

  • Um utilizador tenta submeter um formulário, mas esqueceu-se de introduzir dados ou de seleccionar uma opção num ou mais campos obrigatórios. Utilizando a validação do lado do cliente, a falha é detectada e é apresentada uma caixa de diálogo de aviso a informar o utilizador de que existem campos obrigatórios por preencher. As etiquetas dos campos com este problema são alteradas para identificar o campo com o problema, e são inseridos links para os campos com problema no documento a seguir ao botão Submeter para que o utilizador possa deslocar-se para os mesmos depois de fechar o aviso.

  • Um utilizador tenta submeter um formulário, mas esqueceu-se de introduzir dados ou de seleccionar uma opção num ou mais campos obrigatórios. Utilizando a validação do lado do servidor, a falha é detectada e o formulário é novamente apresentado com uma descrição em texto no topo a informar que campos obrigatórios foram esquecidos. Cada campo obrigatório esquecido é também identificado através de uma etiqueta de texto para que o utilizador não tenha de regressar à lista no topo do formulário para encontrar os campos esquecidos.

  • Um utilizador está a preencher um formulário que inclui campos obrigatórios. As etiquetas dos campos indicam se são ou não obrigatórios. O utilizador utiliza a tecla de tabulação para chegar ao campo obrigatório, e utiliza a mesma tecla para sair do campo sem introduzir quaisquer dados ou seleccionar uma opção. Um script do lado do cliente modifica a etiqueta do campo para indicar que foi um erro deixá-lo em branco.

    Nota: Alguns leitores de ecrã podem não reparar nem anunciar a alteração à etiqueta para que os utilizadores de leitores de ecrã possam ignorar a existência do erro.

Testes

Procedimento
  1. Preencha um formulário, deixando deliberadamente um ou mais campos obrigatórios em branco, e submeta-o.

  2. Verifique se é fornecida uma descrição em texto a identificar os campos obrigatórios que não foram preenchidos.

Resultados Esperados
  • O passo 2 é verdadeiro.


G84: Fornecer uma descrição em texto quando o utilizador fornecer informação que não se enquadre na lista de valores permitidos

Aplicabilidade

Conteúdo que recolhe dados do utilizador onde tem de ser introduzido um conjunto limitado de valores.

Esta técnica está relacionada com:

Descrição

Quando os utilizadores introduzem dados que são validados, e são detectados erros, é necessário descrever a natureza do erro para que o utilizador possa aceder ao mesmo. Uma abordagem é apresentar uma caixa de diálogo de aviso que descreve os campos com erros quando o utilizador tenta submeter o formulário. Outra abordagem, se a validação for efectuada pelo servidor, é devolver o formulário (com os dados do utilizador ainda nos campos) e fornecer uma descrição em texto no topo da página a indicar a existência de um problema de validação, a descrever a natureza do problema e a fornecer formas de localizar facilmente os campos com problema. A parte "em texto" do Critério de Sucesso realça que não é suficiente indicar simplesmente que um campo tem um erro, colocando um asterisco na respectiva etiqueta ou colocando-a a vermelho. Deve ser fornecida uma descrição em texto do problema.

Quando os dados tiverem de limitar-se a um conjunto de valores permitidos, a descrição em texto deve indicar esse facto. Se possível, deve incluir a lista de valores, ou sugerir o valor permitido mais semelhante ao valor introduzido.

Exemplos

  • O utilizador introduz dados inválidos no campo de um formulário. Antes de o utilizador submeter o formulário, é apresentada uma caixa de diálogo que descreve a natureza do erro para o utilizador poder corrigi-lo.

  • O utilizador introduz dados inválidos no campo de um formulário e submete o formulário. O servidor devolve formulário, com os dados do utilizador ainda presentes, e indica claramente em texto no topo da página que existem erros de entrada. O texto descreve a natureza dos erros e indica claramente qual o campo que apresenta o problema para o utilizador poder navegar facilmente até ao mesmo e corrigi-lo.

Testes

Procedimento
  1. Introduza dados inválidos no campo de um formulário.

  2. Verifique se a informação sobre o problema é fornecida em texto.

Resultados Esperados
  • O passo 2 é verdadeiro.


G85: Fornecer uma descrição em texto quando a entrada de dados por parte do utilizador não se enquadre no formato ou valores obrigatórios

Aplicabilidade

Conteúdo que aceite entrada de dados por parte do utilizador, com restrições no formato, valor e/ou tipo de dados.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer ajuda na correcção de erros de entrada, em que as informações fornecidas pelo utilizador não são aceites. Quando os utilizadores introduzem dados que são validados, e são detectados erros de entrada, são fornecidas informações em texto sobre a natureza e localização do erro de entrada para permitir aos utilizadores identificar o problema. Uma abordagem é utilizar validação do lado do cliente e fornecer uma caixa de diálogo de aviso que descreva imediatamente o erro quando os utilizadores introduzem dados inválidos num campo. Outra abordagem, utilizando a validação do lado do servidor, é voltar a apresentar o formulário (incluindo todos os dados anteriormente introduzidos), e uma descrição em texto no topo da página a indicar a existência de um erro, a descrever a natureza do problema e a fornecer formas de localizar facilmente os campos com problema.

Além de ser fornecida a descrição em texto, é necessário que a mesma apresente uma das seguintes informações para ajudar o utilizador:

  • Forneça exemplos dos dados correctos para o campo,

  • Descreva os dados correctos para o campo,

  • Mostre valores dos dados correctos que sejam semelhantes aos dados introduzidos pelo utilizador, com instruções sobre como introduzir um dos valores correctos, caso o utilizador escolha fazê-lo.

Exemplos

  • O utilizador introduz dados inválidos no campo de um formulário. Quando o utilizador sai do campo, é apresentada uma caixa de diálogo de aviso que descreve a natureza do erro para o utilizador poder corrigi-lo.

  • O utilizador introduz dados inválidos no campo de um formulário e submete o formulário. O servidor devolve o formulário, com os dados do utilizador ainda presentes, e indica em texto no topo da página que existem erros de entrada. O texto descreve a natureza dos erros e indica qual o campo que apresenta o problema para o utilizador poder navegar facilmente até ao mesmo e corrigi-lo.

  • O utilizador introduz dados inválidos no campo de um formulário e tenta submeter o formulário. O scripting do lado do cliente detecta o erro, cancela a submissão e modifica o documento para fornecer uma descrição em texto a seguir ao botão Submeter com a descrição do erro e com links para os campos com o erro. O script também modifica as etiquetas dos campos com problemas para os realçar.

Testes

Procedimento
  1. Preencha um formulário, introduzindo deliberadamente dados que não se enquadrem no formato ou valores obrigatórios.

  2. Verifique se é fornecida uma descrição em texto que identifique o campo com o erro e forneça algumas informações sobre a natureza dos dados inválidos e como corrigi-los.

Resultados Esperados
  • O passo 2 é verdadeiro.


G86: Fornecer um resumo de texto que necessite de uma capacidade de leitura menos avançada do que o ensino secundário

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um resumo de conteúdo complexo. O resumo é fornecido além do conteúdo original.

Os utilizadores com incapacidades que dificultam a descodificação de palavras e orações terão, provavelmente, dificuldades em ler e compreender texto complexo. Esta técnica fornece uma breve enunciação das ideias e informações mais importantes existentes no conteúdo. O resumo é mais fácil de ler, porque utiliza frases mais curtas e palavras mais comuns do que o original.

Podem ser utilizados os passos seguintes para preparar o resumo:

  1. Identifique as ideias e informações mais importantes existentes no conteúdo.

  2. Escreva um ou mais parágrafos que utilizem orações mais curtas e palavras mais comuns para expressar as mesmas ideias e informações. (O número de parágrafos depende do tamanho do original.)

  3. Avalie a legibilidade do resumo.

  4. Edite o resumo. Considere dividir frases mais longas em duas ou substituir palavras longas ou pouco familiares por termos mais curtos e mais comuns.

  5. Repita os passos 3 e 4, conforme necessário.

Exemplos

Exemplo 1: Um artigo técnico com um resumo legível

Um artigo descreve uma inovação técnica. O primeiro item depois do título do artigo é uma secção intitulada “Resumo". O comprimento médio das orações do resumo é de 16 palavras (em comparação com as 23 palavras das orações do artigo), e utiliza palavras curtas e comuns, em vez do jargão técnico do artigo. É aplicada uma fórmula de legibilidade; o resumo necessita de uma capacidade de leitura menos avançada do que o terceiro ciclo do ensino básico.

Recursos

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

Testes

Procedimento

Para cada resumo fornecido como conteúdo suplementar:

  1. Avalie a legibilidade do resumo.

  2. Verifique se o resumo necessita de uma capacidade de leitura menos avançada do que o terceiro ciclo do ensino básico.

Resultados Esperados
  • O passo 2 é verdadeiro.


G87: Fornecer legendas ocultas

Aplicabilidade

Qualquer tecnologia audiovisual na qual existam agentes de utilizador que suportem legendas ocultas.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma forma para que as pessoas com deficiências auditivas, ou que tenham problemas em ouvir o diálogo em material em multimédia sincronizada, possam ver o material e perceber o diálogo e os sons, sem ser necessário que as pessoas que não sejam surdas vejam as legendas. Com esta técnica, todo o diálogo e os sons importantes são incorporados como texto de modo a que o texto não esteja visível, a não ser que o utilizador assim o deseje. Como resultado, só está visível quando for necessário. Isto requer suporte especial para legendagem no agente de utilizador.

NOTA: Não confunda as legendas para surdos com o outro tipo de legendas. Essas só fornecem o texto do diálogo e não incluem os sons importantes.

Exemplos

Exemplo 1

Exemplo 1: Para garantir que os utilizadores que são surdos possam utilizar os seus materiais educativos interactivos, a escola fornece legendas e instruções para activar as legendas para todos os programas educativos de áudio interactivos.

Exemplo 2: Todos os filmes online incluem legendas e são fornecidos num formato que permite a inserção de legendas ocultas.

Exemplo 3: Os ficheiros de legendas especiais, incluindo as informações de sincronização, são fornecidos para um filme existente. Existem leitores que podem reproduzir as legendas numa janela separada no ecrã, sincronizadas com a janela do filme.

Exemplo 4: Um vídeo de um evento local fornece legendas que podem ser reproduzidas sobre o vídeo ou numa janela separada, dependendo do leitor utilizado.

Recursos

Testes

Procedimento
  1. Active a funcionalidade de legendas ocultas do leitor multimédia.

  2. Veja o conteúdo em multimédia sincronizada.

  3. Verifique se as legendas (de todo o diálogo e sons importantes) estão visíveis.

Resultados Esperados
  • O passo 3 é verdadeiro.


G88: Fornecer títulos descritivos para páginas Web

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um título descritivo a cada página Web. Os títulos descritivos ajudam os utilizadores a localizar o conteúdo e a orientarem-se e a navegarem no mesmo. Um título descritivo permite a um utilizador identificar facilmente qual a página Web que está a utilizar e a perceber quando uma página foi alterada. O título pode ser utilizado para identificar a página Web sem ser necessário que os utilizadores leiam ou interpretem o conteúdo da página. Os utilizadores podem identificar mais rapidamente o conteúdo que necessitam quando aparecem títulos descritivos e precisos nos mapas dos sítios da Web ou nas listas de resultados da procura. Os títulos descritivos utilizados no texto do link ajudam os utilizadores a navegar de forma mais precisa até ao conteúdo pretendido.

O título de cada página Web deve:

  • Identificar o assunto da página Web

  • Fazer sentido quando lido fora de contexto, por exemplo, por um leitor de ecrã, num mapa de sítio da Web ou numa lista de resultados da procura

  • Ser curto

Também pode ser útil que o título:

  • Identifique o sítio da Web, ou outro recurso, ao qual a página Web pertence

  • Seja exclusivo no sítio da Web, ou outro recurso, ao qual a página Web pertence

Exemplos

Exemplo 1: Um título que indique primeiro as informações de identificação mais importantes

Uma página Web é publicada por um grupo de uma organização maior. O título da página Web identifica primeiro o tópico da página e, em seguida, mostra o nome do grupo seguido pelo nome da organização.

Código Exemplo:

<title>Working with us: The Small Group: The Big Organization</title>
Exemplo 2: Uma apresentação em multimédia sincronizada com um título descritivo

Uma apresentação em multimédia sincronizada sobre o tsunami no Sul da Ásia em 2004 intitula-se “O Tsunami de 2004".

Exemplo 3: Uma página Web com um título descritivo em três partes

Uma página Web fornece directrizes e sugestões para criar legendas ocultas. A página Web faz parte de um “subsítio" num sítio da Web de maiores dimensões. O título está separado em três partes por travessões. A primeira parte do título identifica a organização. A segunda parte identifica o subsítio ao qual a página Web pertence. A terceira parte identifica a própria página Web. (Para obter um exemplo real, consulte WGBH – Media Access Group – Perguntas Frequentes sobre Legendagem(página em inglês).)

Exemplo 4: Uma página Web de um jornal

Um sítio da Web que só permite ver a edição actual intitula a sua página Web "Notícias Nacionais, Primeira Página". Um sítio da Web que permite ver edições de diferentes datas intitula a sua página Web "Notícias Nacionais, Primeira Página, 17 de Outubro de 2005".

Recursos

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

Testes

Procedimento
  1. Verifique se a página Web tem um título.

  2. Verifique se o título é relevante para o conteúdo da página Web.

  3. Verifique se a página Web pode ser identificada utilizando o título.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G89: Fornecer o exemplo e o formato de dados esperados

Aplicabilidade

Páginas que recolham informações dos utilizadores e restrinjam o formato que o utilizador pode utilizar.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é ajudar o utilizador a evitar erros de entrada, informando-o das restrições de formato de dados que tem de introduzir. Isto pode ser efectuado descrevendo as características do formato ou fornecendo um exemplo do formato que os dados devem ter.

Nota: Para formatos de dados com variações comuns, tais como datas e horas, pode ser útil fornecer uma opção de preferência para que os utilizadores possam utilizar o formato que lhes seja mais cómodo.

Exemplos

Exemplo 1

O seguinte controlo de formulário em HTML para uma data indica na etiqueta que a data tem de estar no formato dia-mês-ano, e não no formato mês-dia-ano, como muitos utilizadores nos Estados Unidos poderão assumir.

Código Exemplo:

<label for="date">Date (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Testes

Procedimento
  1. Identifique os controlos de formulário que só aceitarão entrada de dados por parte do utilizador num determinado formato.

  2. Verifique se cada um dos controlos de formulário identificados no passo 1 fornece informações sobre o formato esperado.

Resultados Esperados
  • O passo 2 é verdadeiro.


G90: Fornecer processadores de eventos accionados por teclado

Aplicabilidade

Aplica-se a todas as tecnologias nas quais o conteúdo inclua funcionalidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que as pessoas que dependem de um teclado ou de uma interface de teclado acedam à funcionalidade do conteúdo. Para tal, certifique-se de que todos os processadores de eventos accionados por eventos de IU sem teclado também estão associados a um evento baseado em teclado, ou forneça mecanismos redundantes baseados em teclado para alcançar a funcionalidade fornecida por outras funções específicas do dispositivo.

Exemplos

  • Exemplo 1: Funcionalidade arrastar e largar Uma aplicação de fotografias inclui uma funcionalidade "arrastar" e "largar" para permitir aos utilizadores reordenar fotografias num álbum online para uma apresentação de diapositivos. Também inclui uma funcionalidade que permite aos utilizadores seleccionar uma fotografia e "cortar" e "colar" os itens na lista no momento apropriado utilizando apenas o teclado.

  • Exemplo 2: Funcionalidade reordenar Uma aplicação Web que permite aos utilizadores criar inquéritos arrastando as perguntas para um determinado local inclui uma lista das perguntas seguidas por um campo de texto que permite aos utilizadores reordenar as perguntas conforme necessário, introduzindo o número da pergunta pretendida.

Recursos

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

Testes

Procedimento
  1. Verifique se todas as funcionalidades podem ser acedidas utilizando apenas o teclado.

Resultados Esperados
  • O passo 1 é verdadeiro.


G91: Fornecer texto de link que descreva a finalidade de um link

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é descrever a finalidade de um link no texto do link. A descrição permite que um utilizador distinga este link dos links da página Web que conduzem a outros destinos, e ajuda o utilizador a determinar se deve seguir o link. Normalmente, o URI do destino não é suficientemente descritivo.

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>

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 texto do link descreve a finalidade do link.

Resultados Esperados
  • O passo acima é verdadeiro.


G92: Fornecer uma descrição extensa para conteúdo não textual que sirva a mesma finalidade e apresente as mesmas informações

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma alternativa em texto extenso que sirva a mesma finalidade e apresente as mesmas informações do conteúdo não textual original quando uma alternativa em texto abreviado não for suficiente.

Combinada com a alternativa em texto abreviado, a descrição extensa deverá poder substituir o conteúdo não textual. A alternativa em texto abreviado identifica o conteúdo não textual e a alternativa em texto extenso fornece as informações. Se o conteúdo não textual fosse removido da página e substituído pelas descrições abreviadas e extensas, a página continuaria a fornecer a mesma função e informação.

As seguintes questões são úteis na decisão sobre o que deverá constar nas alternativas em texto.

  • Qual o motivo da existência deste conteúdo não textual?

  • Que informações apresenta?

  • Qual a sua finalidade?

  • Se não for possível utilizar o conteúdo não textual, que palavras deverei utilizar para transmitir a mesma função e/ou informação?

Exemplos

Exemplo 1

Um gráfico que mostra as vendas de Outubro tem uma alternativa em texto abreviado intitulada "Gráfico de vendas de Outubro". A descrição extensa seria "Gráfico de Barras que mostra as vendas de Outubro. Existem 6 vendedores. A Maria está em primeiro com 349 unidades. A Frances está em segundo com 301. E, em seguida, está o Juan com 256, a Sue com 250, a Li com 200 e o Max com 195. A utilização principal do gráfico é mostrar quem vai à frente, por isso a descrição está por ordem de vendas."

Exemplo 2

Um gráfico de linhas que mostra as temperaturas médias de Inverno nos últimos 10 anos inclui uma alternativa em texto abreviado intitulada "Temperaturas médias de Inverno 1996-2006." A descrição extensa inclui a tabela de dados que foi utilizada para gerar o gráfico de linhas.

Recursos

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

Testes

Procedimento
  1. Remova, oculte ou disfarce o conteúdo não textual.

  2. Apresente a descrição extensa.

  3. Verifique se a descrição extensa transmite as mesmas informações do conteúdo não textual.

Resultados Esperados
  • O passo 3 é verdadeiro.


G93: Fornecer legendas abertas (sempre visíveis)

Aplicabilidade

Qualquer tecnologia de multimédia sincronizada, mesmo que não suporte legendas ocultas.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma forma para as pessoas que são surdas ou que têm problemas em ouvir o diálogo em material audiovisual poderem ver o material. Com esta técnica, todo o diálogo e os sons importantes são incorporados como texto na faixa de vídeo. Como resultado, estão sempre visíveis e não é exigido nenhum suporte especial para legendagem pelo agente de utilizador.

NOTA: Não confunda as legendas para surdos com o outro tipo de legendas. Essas só fornecem o texto do diálogo e não incluem os sons importantes.

Exemplos

  • Para garantir que todas as pessoas possam ver os seus filmes online, mesmo não sabendo como activar as legendas no leitor multimédia, uma associação de bibliotecários coloca as legendas directamente no vídeo.

  • Uma agência de informação fornece legendas abertas em todo o seu material.

Recursos

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

(nenhum indicado)

Testes

Procedimento
  1. Veja a multimédia sincronizada com as legendas ocultas desactivadas.

  2. Verifique se as legendas (de todo o diálogo e sons importantes) estão visíveis.

Resultados Esperados
  • O passo 2 é verdadeiro.


G94: Fornecer a alternativa em texto abreviado para conteúdo não textual que serve a mesma finalidade e apresenta as mesmas informações do conteúdo não textual

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é criar uma alternativa em texto que sirva a mesma finalidade e apresente as mesmas informações do conteúdo não textual original. Como resultado, é possível remover o conteúdo não textual e substituí-lo pela alternativa em texto sem perder quaisquer funcionalidades ou informações. Esta alternativa em texto não deverá necessariamente descrever o conteúdo não textual, mas sim servir a mesma finalidade e transmitir as mesmas informações. Por vezes, isto pode resultar numa alternativa em texto que parece uma descrição do conteúdo não textual, mas isso só aconteceria se essa fosse a melhor forma de servir a mesma funcionalidade.

Se possível, a alternativa em texto abreviado deve transmitir completamente a finalidade e as informações. Se tal não for possível numa frase ou oração curtas, a alternativa em texto abreviado deve fornecer uma breve descrição geral das informações. Para transmitir todas as informações, seria também utilizada uma alternativa em texto extenso.

A alternativa em texto deverá ser capaz de substituir o conteúdo não textual. Se o conteúdo fosse removido da página e substituído pelo texto, a página continuaria a fornecer a mesma função e informação. A alternativa em texto deve ser breve, mas o mais informativa possível.

É uma boa ideia considerar as seguintes questões na decisão sobre que texto deve ser incluído na alternativa:

  • Qual o motivo da existência deste conteúdo não textual?

  • Que informações apresenta?

  • Qual a sua finalidade?

  • Se não for possível utilizar o conteúdo não textual, que palavras deverei utilizar para transmitir a mesma função e/ou informação?

Quando o conteúdo não textual incluir palavras que sejam importantes para compreender o conteúdo, o texto alt deve incluir essas palavras. Se o texto na imagem for demasiado extenso para caber numa alternativa em texto abreviado, deverá ser descrito na alternativa em texto abreviado, e deverá ser também fornecida uma alternativa em texto extenso com o texto completo.

Exemplos

  • Um botão Procurar utiliza uma imagem de uma lupa. A alternativa em texto é "procurar" e não "lupa".

  • Uma imagem mostra como dar um nó, incluindo setas a indicar como se colocam as cordas para dar o nó. A alternativa em texto descreve como dar o nó, não o aspecto da imagem.

  • Uma imagem mostra o aspecto de um brinquedo visto de frente. A alternativa em texto descreve uma vista da frente do brinquedo.

  • Uma animação mostra como mudar um pneu. Uma alternativa em texto abreviado descreve o assunto da animação. Uma alternativa em texto extenso descreve como mudar um pneu.

  • Um logótipo da empresa TechTron aparece junto a cada um dos produtos que constituem uma lista e tem uma alternativa em texto abreviado intitulada "TechTron."

  • Um gráfico que mostra as vendas de Outubro tem uma alternativa em texto abreviado intitulada "Gráfico de vendas de Outubro". Também tem uma alternativa em texto extenso que fornece todas as informações apresentadas no gráfico.

  • Um título contém uma imagem das palavras "A História da Guerra" em texto estilizado. O texto alt para a imagem é "A História da Guerra".

  • Uma imagem de uma série de livros numa prateleira contém áreas interactivas que fornecem o meio de navegação para uma página Web sobre um determinado livro. A alternativa em texto "Os livros disponíveis para compra nesta secção. Para obter mais informações sobre um dos livros, seleccione-o." descreve a imagem e a natureza interactiva.

Recursos

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

Testes

Procedimento
  1. Remova, oculte ou disfarce o conteúdo não textual.

  2. Substitua-o pela alternativa em texto.

  3. Verifique se nada se perdeu (a finalidade do conteúdo não textual é cumprida pela alternativa em texto).

  4. Se o conteúdo não textual incluir palavras que sejam importantes para compreender o conteúdo, as palavras são incluídas na alternativa em texto.

Resultados Esperados
  • O passo 3 é verdadeiro. Se o conteúdo não textual incluir palavras que sejam importantes para compreender o conteúdo, o passo 4 é igualmente verdadeiro.


G95: Fornecer alternativas em texto abreviado que fornecem uma breve descrição do conteúdo não textual

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta técnica é utilizada quando o texto necessário para servir a mesma finalidade e apresentar as mesmas informações do conteúdo não textual original for demasiado extenso ou quando este objectivo não puder ser alcançado apenas com texto. Nesse caso, esta técnica é utilizada para fornecer uma alternativa em texto abreviado que descreva brevemente o conteúdo não textual. (Em seguida, é fornecida uma alternativa em texto extenso utilizando outra técnica, para que a combinação sirva a mesma finalidade e apresente as mesmas informações do conteúdo não textual original.)

É uma boa ideia considerar as seguintes questões na decisão sobre que texto deve ser incluído na alternativa:

  • Qual o motivo da existência deste conteúdo não textual?

  • Que informações apresenta?

  • Qual a sua finalidade?

  • Se não for possível utilizar o conteúdo não textual, que palavras deverei utilizar para transmitir a mesma função e/ou informação?

Exemplos

  • Um gráfico que mostra as vendas de Outubro tem uma alternativa em texto abreviado intitulada "Gráfico de vendas de Outubro". Também tem uma descrição extensa que fornece todas as informações existentes no gráfico.

Recursos

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

Testes

Procedimento
  1. Verifique se existe uma alternativa em texto abreviado que forneça uma breve descrição do conteúdo não textual.

Resultados Esperados
  • O passo 1 é verdadeiro.


G96: Fornecer identificação textual de itens que dependem apenas de informação sensorial para serem compreendidos

Aplicabilidade

Todas as tecnologias que apresentam a descrição de uma apresentação de conteúdo ao utilizador.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os itens de uma página Web são referenciados no conteúdo, não só por forma, tamanho, som ou localização, como também de formas que não dependem dessa percepção sensorial. Por exemplo, uma referência também pode descrever a função do item ou da respectiva etiqueta.

Exemplos

Exemplo 1

É fornecido um botão circular num formulário para submeter o formulário e avançar para o passo seguinte de uma sequência. O botão tem uma etiqueta que diz "Avançar". As instruções indicam: "para submeter o formulário, pressione o botão circular com a etiqueta Avançar". Para localizar o botão são necessárias a forma e as informações textuais.

Exemplo 2

As instruções para uma página Web que fornece formação online indicam: "Utilizar a lista de links à direita com o título “Lista de Classes” para navegar para o curso online pretendido." Esta descrição fornece a localização, bem como sinais de aviso textuais para ajudar a encontrar a lista correcta de links.

Exemplo 3

A seguinte disposição coloca um botão no canto inferior direito e indica-o por posição. Uma indicação da etiqueta de texto esclarece qual o botão a utilizar pelos utilizadores que acedem a uma versão linearizada, na qual a posição não é significativa.

Código Exemplo:

<table>
  <tbody>
    <tr>
      <td colspan="2">Push the lower right [Preview] button.</td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Print</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Cancel</span>
      </td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        OK</span>
      </td>
      <td>
        <span style="background: ButtonFace; color: ButtonText; border: 
        medium outset ButtonShadow; 
        width: 5em; display: block; font-weight: bold; text-align: center;">
        Preview</span>
      </td>
    </tr>
  </tbody>
</table> 

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Encontre todas as referências na página Web que mencionem a forma, o tamanho ou a posição de um objecto. Para cada item:

  1. Verifique se a referência contém informações adicionais que permitam localizar e identificar o item sem qualquer conhecimento da sua forma, tamanho ou posição relativa.

Resultados Esperados
  • O passo 1 é verdadeiro.


G97: Fornecer a abreviatura imediatamente a seguir à definição por extenso

Aplicabilidade

Todas as tecnologias que contenham texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é disponibilizar a definição por extenso de uma abreviatura, associando a definição por extenso à respectiva abreviatura da primeira vez que ocorre numa página Web. A definição por extenso de qualquer abreviatura pode ser encontrada procurando pela primeira utilização na página Web.

Ao encurtar uma palavra, frase ou nome mediante utilização de abreviatura, iniciais, acrónimo ou qualquer outra forma abreviada, forneça a definição por extenso antes de fornecer a forma abreviada. Isto facilita a leitura do texto e é recomendado por vários guias de estilo.

Tenha em atenção que algumas abreviaturas necessitam de explicações em vez de definições por extenso. Esta técnica não é apropriada para esse tipo de abreviaturas.

Esta técnica aplica-se à primeira ocorrência de uma abreviatura numa página Web. Ao combinar vários recursos numa única página Web, a definição por extenso da abreviatura seria apresentada no início de cada recurso. Contudo, neste caso, pode ser mais apropriado utilizar uma técnica diferente para fornecer a definição por extenso.

Exemplos

Exemplo 1

"O Alto Comissariado das Nações Unidas para os Direitos Humanos (ACNUDH) foi fundado em 1950 para fornecer protecção e assistência aos refugiados."

Recursos

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

Testes

Procedimento

Para cada abreviatura no conteúdo:

  1. Procure a primeira utilização dessa abreviatura no componente criado.

  2. Verifique se a primeira utilização é imediatamente precedida pela definição por extenso da abreviatura.

  3. Verifique se a definição por extenso é a correcta para a utilização da abreviatura.

Resultados Esperados
  • Os passo 2 e 3 são verdadeiros.


G98: Fornecer a possibilidade de o utilizador rever e corrigir as respostas antes de as submeter

Aplicabilidade

Sítios da Web que recolhem dados de utilizadores específicos do momento em que são submetidos, tais como dados de teste, e que não podem ser alterados depois de serem submetidos.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer aos utilizadores uma forma de garantir que os dados que introduzem estão correctos antes de executar uma transacção irreversível. As aplicações de testes, financeiras e legais permitem executar transacções que não podem ser "anuladas". Por conseguinte, é importante não existirem erros na submissão de dados, uma vez que o utilizador não terá a oportunidade de corrigir o erro depois de a transacção ter sido executada.

Num formulário simples de uma página, isto é fácil porque o utilizador pode rever o formulário antes de o submeter. Contudo, num formulário com várias páginas Web, os dados são recolhidos do utilizador em vários passos antes de a transacção ser executada. O utilizador pode não se lembrar de todos os dados que foram introduzidos em passos anteriores antes do passo no qual foi executada a transacção.

Uma abordagem é colocar os resultados de cada um dos passos em cache e permitir ao utilizador avançar e retroceder na navegação conforme pretendido para rever todos os dados introduzidos. Outra abordagem é fornecer um resumo de todos os dados recolhidos em todos os passos para o utilizador poder revê-los antes de terminar a transacção.

Antes do passo final que permite a execução da transacção, é pedido ao utilizador que reveja os dados introduzidos e os confirme. Depois da confirmação do utilizador, a transacção é concluída.

Exemplos

  • Uma aplicação bancária online fornece vários passos para executar uma transferência de fundos entre contas, tal como se segue:

    1. Seleccione a conta a "transferir de".

    2. Seleccione a conta a "transferir para".

    3. Introduza o montante da transferência.

  • É fornecido um resumo da transacção que mostra as duas contas e o montante da transferência. O utilizador pode seleccionar um botão para executar a transacção ou cancelá-la.

  • Uma aplicação de testes fornece várias páginas de perguntas. A qualquer momento, o utilizador pode voltar às secções anteriormente preenchidas para rever e alterar as respostas. É apresentada uma página final com botões que permitem submeter ou rever as respostas.

Testes

Procedimento

Numa aplicação de testes ou numa aplicação que permita executar transacções financeiras ou legais e que também recolha dados dos utilizadores em vários passos:

  1. Verifique se o utilizador pode voltar aos passos anteriores para rever e alterar os dados.

  2. Verifique se é fornecido um resumo de todos os dados introduzidos pelo utilizador antes de ser executada a transacção e se é fornecido um método para corrigir os erros, se necessário.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G99: Fornecer a possibilidade de recuperar a informação eliminada

Aplicabilidade

Conteúdo em que as acções do utilizador eliminam o conteúdo.

Esta técnica está relacionada com:

Descrição

Quando uma aplicação Web fornece a capacidade de eliminar informações, o servidor pode fornecer um meio para recuperar as informações eliminadas por engano por um utilizador. Uma abordagem é atrasar a eliminação dos dados, simplesmente marcando-os para eliminação ou movendo-os para uma área de retenção (tal como o “lixo”) e aguardar algum tempo antes de os eliminar realmente. Durante este período de tempo, o utilizador pode pedir que os dados sejam restaurados ou pode recuperá-los a partir da área de retenção. Outra abordagem é gravar todas as transacções eliminadas, de modo a que os dados possam ser restaurados se solicitado pelo utilizador, tal como no histórico de edição armazenado pelos wikis e em aplicações de controlo de origem. As informações recuperáveis armazenadas deverão ser as que são necessárias para corrigir a transacção.

Exemplos

  • Uma aplicação Web permite aos utilizadores configurar pastas e armazenar dados nas mesmas. Cada pasta e item de dados incluem uma caixa de verificação que permite seleccioná-los, e dois botões, um para mover e outro para eliminar. Se o utilizador seleccionar o botão Eliminar por engano, poderão perder-se grandes quantidades de dados. A aplicação apresenta imediatamente os dados como eliminados ao utilizador, mas agenda-os para serem verdadeiramente eliminados dentro de uma semana. Durante a semana, o utilizador pode aceder a uma pasta "itens eliminados" e pedir que qualquer pasta ou item de dados a aguardar para serem eliminados sejam restaurados.

Testes

Procedimento
  1. Identifique a funcionalidade que permite eliminar conteúdo.

  2. Elimine conteúdo e tente recuperá-lo.

  3. Verifique se é possível recuperar informações eliminadas.

Resultados Esperados
  • O passo 3 é verdadeiro.


G100: Fornecer o nome aceite ou um nome descritivo do conteúdo não textual

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir aos utilizador identificar o conteúdo não textual, mesmo se o conteúdo não textual pretender fornecer uma experiência sensorial específica. Por exemplo, uma pessoa surda pode querer saber como é um ficheiro de áudio – mesmo que não consiga ouvi-lo. Da mesma forma, uma pessoa cega pode querer saber qual é o tema de uma imagem visual – mesmo que não consiga vê-la.

Exemplos

Exemplo 1
  • Exemplo 1: Um quadro da Mona Lisa tem o texto alternativo "Mona Lisa, de Leonardo da Vinci".

  • Exemplo 2: Um ficheiro de áudio tem o texto alternativo "Estudantes do 5º ano a tocar Theremin".

  • Exemplo 3: Uma famosa e moderna obra de arte intitula-se "Vermelho, Azul e Amarelo, de Piet Mondrian".

Recursos

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

Testes

Procedimento
  1. Verifique se o texto alternativo fornece um nome descritivo.

  2. Verifique se o texto alternativo fornece um nome que tenha sido anteriormente atribuído ao conteúdo não textual pelo autor ou outro.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G101: Fornecer a definição de uma palavra ou frase utilizadas de uma forma invulgar ou restrita

Aplicabilidade

Todas as tecnologias que contenham texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma definição para qualquer palavra utilizada de uma forma invulgar ou restrita.

Uma palavra é utilizada de uma forma invulgar ou restrita quando:

  • os dicionários fornecem várias definições da palavra, mas tem de ser utilizada uma definição específica para compreender o conteúdo;

  • tem de ser utilizada uma definição específica para compreender o conteúdo e os dicionários apresentam essa definição como rara, arcaica, obsoleta, etc.;

  • o autor cria uma nova definição que tem de ser utilizada para compreender o conteúdo.

Esta técnica também pode ser utilizada para fornecer definições para jargão, ou seja, o termo especializado utilizado numa determinada profissão ou área técnica e compreendido por pessoas dessa área, mas não por pessoas fora dela.

A técnica também pode ser utilizada para definir expressões idiomáticas. Por exemplo, os falantes de uma língua que vivem numa determinada região podem utilizar expressões idiomáticas que são aceites por todas as pessoas dessa região, mas não por pessoas de outras regiões onde é falada a mesma língua.

Exemplos

Exemplo 1: Um termo utilizado de uma forma restrita

A palavra "tecnologia" é muito utilizada para abranger tudo desde as ferramentas de pedra utilizadas pelos homens primitivos aos serviços digitais contemporâneos, tais como os telemóveis. Mas nas WCAG 2.0, a palavra tecnologia é utilizada de uma forma mais restrita: significa um mecanismo para que as instruções codificadas sejam apresentadas, reproduzidas ou executadas por agentes de utilizador, incluindo as linguagens de marcação, os formatos de dados e as linguagens de programação utilizados na produção e fornecimento de conteúdo da Web.

Exemplo 2: Uma palavra utilizada segundo uma definição obsoleta

A palavra "éter" é definida como uma substância que ocupava o espaço interplanetário: "Ele acreditava que o som viajava através do éter".

Exemplo 3: Jargão

A palavra "controlador" é definida como software que contém instruções específicas para uma impressora: "Pode ser necessário actualizar o controlador para a impressora."

Exemplo 4: Uma expressão idiomática

Algumas pessoas dizem "spill the beans" (dar com a língua nos dentes) quando querem dizer "revelar um segredo", por ex., "Na esquadra, o Joe deu com a língua nos dentes sobre o plano para raptar o Primeiro-Ministro."

Exemplo 5: Uma expressão idiomática em japonês

Este exemplo utiliza parênteses para fornecer a definição de uma expressão idiomática em japonês. A frase em japonês diz "he throws a spoon" (ele atira uma colher). Significa que não havia nada que ele pudesse fazer e que, finalmente, desistiu.

さじを投げる(どうすることもできなくなり、あきらめること)。

Exemplo 6: Uma palavra estrangeira desconhecida adoptada em inglês

Os utilizadores podem não compreender o significado de uma palavra desconhecida adoptada de outro idioma: "We need to leave town pronto" (rapidamente) (Precisamos de deixar a cidade pronto (rapidamente).

Exemplo 7: Palavras desconhecidas adoptadas em japonês

Em japonês, Kata-kana é utilizado para palavras estrangeiras adoptadas. Se as palavras forem desconhecidas para os utilizadores, forneça o significado ou tradução para que os utilizadores possam compreendê-las.

アクセシビリティ(高齢者・障害者を含む全ての人が利用できること)は、Webサイトに不可欠である。

Tradução: A "acessibilidade" (pode ser acedido por todos os utilizadores, incluindo por pessoas mais velhas e por pessoas com incapacidades) é um aspecto essencial dos sítios da Web.

レイアウトテーブルとCSSの併用をハイブリッド(複合型)という。

Tradução: A utilização da tabela de esquema com o CSS é designada por "híbrido" (combinação de várias formas).

Recursos

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

Testes

Procedimento

Para cada palavra ou frase utilizadas de uma forma invulgar ou restrita:

  1. Verifique se é fornecida uma definição para a palavra ou frase

Resultados Esperados
  • O passo 1 é verdadeiro.


G102: Fornecer a definição por extenso ou explicação de uma abreviatura

Aplicabilidade

Todas as tecnologias que contenham texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer as informações necessárias para compreender uma abreviatura.

Uma abreviatura é a forma abreviada de uma palavra, frase ou nome. Para a maioria das abreviaturas, fornecer a palavra, a frase ou o nome completos é suficiente.

Algumas abreviaturas representam palavras ou frases que são "emprestadas" de um idioma estrangeiro. Por exemplo, muitas das abreviaturas normalmente utilizadas em inglês derivam de frases latinas, tal como a pequena lista de exemplos apresentada abaixo. A definição por extenso só é aqui fornecida como informação secundária. Para esta categoria de abreviaturas, é mais útil fornecer uma explicação do que a definição por extenso original, e a explicação da abreviatura é fornecida em vez da definição por extenso.

Abreviaturas inglesas derivadas do latim
Abreviatura Definição por extenso em latim Explicação
a.m. ante meridiem antes do meio-dia; de manhã
p.m. post meridiem depois do meio-dia, à tarde
e.g. exempli gratia por exemplo
cf confer/conferatur comparar

Se as abreviaturas não necessitarem de uma definição por extenso (por exemplo, porque a definição por extenso original tem sido rejeitada pela organização à qual se refere, ou se a abreviatura se tiver tornado parte da língua), forneça uma explicação, se apropriado, ou trate a abreviatura como uma palavra que não necessita de explicação.

Exemplos

Exemplo 1: ADA

Algumas abreviaturas têm mais de um significado, e o significado depende do contexto. Por exemplo, ADA significa "American Dental Association" (Associação Dentária Americana) num contexto e "Americans with Disabilities Act" (Legislação sobre os Americanos com Incapacidades) noutro. Apenas será necessário fornecer a definição por extenso relevante para o contexto.

Exemplo 2: Abreviaturas para frases em inglês "emprestadas" do latim

Na frase seguinte, seria fornecida a explicação "por exemplo" para "e.g.": Os alunos que participam em desportos de equipa, e.g., basquetebol ou futebol, têm de definir os seus horários consoante os horários dos treinos.

Exemplo 3: ABS

Alguns idiomas (incluindo o inglês e o holandês) adoptaram o acrónimo ABS (Antiblockiersystem: anti-lock brakes) do alemão. É fornecida uma explicação (anti-lock brakes - "sistema de travagem antibloqueio"), em vez da definição por extenso.

Exemplo 4: Acrónimos sem definição por extenso

Os exemplos de acrónimos que já não têm definições por extenso incluem

  • SIL, que significava "Summer Institute of Linguistics", é agora um substantivo no seu próprio direito. Consulte História sobre SIL(página em inglês).

  • IMS, que significa "Instructional Management Systems", é agora um substantivo no seu próprio direito.

Para esta categoria de exemplos, é suficiente uma breve explicação sobre o que é ou faz a organização.

Exemplo 5: Frases que já foram abreviaturas, mas que se tornaram parte da língua

A expressão holandesa "'s nachts" que significa "à noite" era originalmente uma abreviatura de "des nachts". Na língua holandesa actual, a palavra "des" já é pouco utilizada e é entendida como sendo um arcaísmo. Fornecer uma definição por extenso podia ser confuso. Não é fornecida uma definição por extenso de "'s nachts".

A expressão inglesa "o'clock" era originalmente uma abreviatura de "of the clock". Entretanto, "o'clock" tornou-se parte da língua inglesa e não é necessário fornecer uma definição por extenso.

Recursos

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

Testes

Procedimento

Para cada abreviatura existente no conteúdo,

  1. Se não existir nenhuma definição por extenso da abreviatura, é fornecida uma explicação.

  2. Se a definição por extenso da abreviatura estiver num idioma diferente do conteúdo, é fornecida uma explicação.

  3. Caso contrário, é fornecida uma definição por extenso.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G103: Fornecer ilustrações visuais, imagens e símbolos para ajudar a explicar ideias, eventos e processos

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer ilustrações visuais que ajudem os utilizadores com incapacidades de leitura a compreender texto complexo que descreva conceitos ou processos. As ilustrações são fornecidas para além do texto.

Os utilizadores com incapacidades que dificultam a descodificação de palavras e orações têm mais probabilidade de ter dificuldades na leitura e compreensão de texto complexo. Os gráficos, os diagramas, as animações, as fotografias, os organizadores de gráficos ou outros conteúdos visuais ajudam, muitas vezes, os utilizadores. Por exemplo:

  • Os gráficos ajudam os utilizadores a compreender dados complexos.

  • Os diagramas, os organigramas, os vídeos e as animações ajudam os utilizadores a compreender processos.

  • Os mapas de conceitos e outros organizadores de gráficos ajudam os utilizadores a compreender como as ideias se relacionam entre si.

  • As fotografias, os desenhos e os vídeos podem ajudar os utilizadores a compreender eventos naturais ou históricos, ou objectos.

Exemplos

Exemplo 1: Um relatório anual de uma empresa

Um relatório anual indica vários factores que influenciaram o desempenho da empresa no ano passado. O relatório também inclui gráficos e diagramas que ilustram como estes factores interagem. Cada gráfico ou diagrama tem uma alternativa em texto, conforme exigido pelo Critério de Sucesso 1.1.1. Cada um deles tem igualmente um número na respectiva legenda (por ex., “Figura 7"). Estes números são utilizados no texto para fazer referência aos gráficos ou aos diagramas.

Exemplo 2: Capturas de ecrã em documentação técnica

A documentação online de um produto inclui instruções passo a passo. Cada passo é ilustrado por uma captura de ecrã que mostra o aspecto visual do ecrã. Cada captura de ecrã tem alternativas em texto, conforme exigido pelo Critério de Sucesso 1.1.1.

Exemplo 3: Ilustrações de um evento natural complexo

Um sítio da Web fala sobre o tsunami de 2004. O sítio da Web descreve como o tsunami afectou vários locais à volta do Oceano Índico e inclui fotografias da devastação em cada área, em que cada fotografia tem uma alternativa em texto, conforme exigido pelo Critério de Sucesso 1.1.1. O sítio da Web também explica o que acontece debaixo de água durante um tsunami. A explicação é acompanhada por uma animação que mostra como ocorre um tsunami e como se espalha pelo oceano. A animação tem uma alternativa em texto, conforme exigido pelo Critério de Sucesso 1.1.1.

Recursos

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

  • Hall, T. e Strangman, N. CAST: Organizadores de Gráficos. De 5 de Abril de 2005 de Publicações NCAC(página em inglês). Este artigo ilustra vários e diferentes tipos de organizadores de gráficos, explica como cada tipo pode ser útil e resume conclusões de investigações que mostram que os organizadores de gráficos ajudam na aprendizagem, especialmente entre estudantes com incapacidades aprendizagem.

  • Tufte, Edward. Informações visionárias. Cheshire, Conn.: Graphics Press. 1990.

  • Tufte, Edward. A apresentação visual de informações quantitativas. Cheshire, Conn.: Graphics Press. 1983.

  • Tufte, Edward. Explicações visuais: imagens e números, depoimentos e relatos. Cheshire, Conn.: 1997.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Identifique texto que apresente ideias ou processos que têm de ser compreendidos para utilizar o conteúdo.

  2. Verifique se as ilustrações visuais estão disponíveis no conteúdo ou através de links existentes no mesmo.

  3. Verifique se as ilustrações visuais mostram os conceitos ou processos apresentados no texto.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G105: Guardar dados para poderem ser utilizados depois de um utilizador efectuar uma nova autenticação

Aplicabilidade

Páginas Web que necessitem de autenticação por parte do utilizador e limitem o tempo disponível para submeter os dados.

Esta técnica está relacionada com:

Descrição

Os servidores da Web que necessitam de autenticação por parte do utilizador terminam muitas vezes a sessão depois de um período de tempo definido se não houver nenhuma acção do utilizador. Se o utilizador não conseguir introduzir os dados suficientemente rápido e a sessão expirar antes de os dados serem submetidos, o servidor irá solicitar uma nova autenticação antes de prosseguir. Quando tal acontece, o servidor armazena os dados numa cache temporária enquanto o utilizador inicia a sessão, e depois de o utilizador ter efectuada a nova autenticação, os dados são disponibilizados a partir da cache e o formulário é processado como se a sessão nunca tivesse expirado. O servidor não mantém a cache indefinidamente, apenas durante o tempo suficiente para garantir o êxito após uma nova autenticação numa sessão de um só utilizador, tal como um dia.

Exemplos

  • Um utilizador iniciou sessão para utilizar um fórum e responder a uma mensagem. O tempo que demorou a responder é superior ao tempo permitido pelo servidor para uma sessão de inactividade. O utilizador submete a resposta e é informado de que a sessão expirou, tendo de iniciar sessão novamente para submeter a resposta. A resposta do utilizador é guardada pelo servidor e se o utilizador efectuar o início de sessão com êxito, a resposta é processada normalmente. Se não for possível iniciar a sessão com êxito, a resposta será rejeitada.

  • O utilizador iniciou sessão numa área protegida e preenche um formulário. A sessão expira por motivos de segurança. Os dados do formulário são guardados pelo servidor e o utilizador é informado de que a sessão expirou, tendo de iniciar sessão novamente. Se a sessão for iniciada com êxito, o formulário é apresentado com todos os dados anteriormente introduzidos e o utilizador pode submeter o formulário. Se não for possível iniciar a sessão com êxito, os dados do formulário serão rejeitados.

Testes

Procedimento

Num sítio da Web que necessite que o utilizador inicie sessão para submeter os dados,

  1. Inicie sessão e dê início à actividade temporizada.

  2. Permita que a sessão expire.

  3. Submeta os dados.

  4. Efectue a nova autenticação.

  5. Verifique se é possível prosseguir e concluir o processo sem perder os dados, incluindo os dados originais e todas as alterações efectuadas após a nova autenticação.

Resultados Esperados
  • O passo 5 é verdadeiro.


G107: Utilizar "activar" em vez de "focar" como um accionador para as alterações de contexto

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um método de activação de funcionalidades que seja previsível pelo utilizador. Os utilizadores com incapacidades cognitivas e os que utilizam leitores ou ampliadores de ecrã podem ficar confusos com um evento inesperado, tal como a submissão automática de um formulário ou a activação de uma função que provoque uma alteração de contexto.

Com esta técnica, todas as alterações de contexto serão accionadas apenas mediante uma acção específica por parte do utilizador. Além disso, essa acção pode ser uma das que normalmente provoca alterações no contexto, tal como clicar num link ou pressionar um botão Submeter. As acções que simplesmente movem o foco para um elemento não provocarão nenhuma alteração de contexto.

Exemplos

Exemplo 1
  • Uma página só apresenta uma nova janela quando o utilizador clica (ou utiliza a barra de espaços) num botão, em vez de utilizar o foco para apresentar uma nova janela.

  • É utilizado um botão Submeter para avançar para o ecrã seguinte de entrada de dados, em vez de o ecrã seguinte aparecer automaticamente quando o utilizador utiliza a tecla de tabulação para percorrer até um botão Concluído.

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Utilizando um teclado, desloque ciclicamente o foco por todo o conteúdo.

  2. Verifique se não ocorrem nenhumas alterações de contexto quando um componente recebe o foco.

Resultados Esperados
  • O passo 2 é verdadeiro.


G108: Utilizar funcionalidades de marcação para revelar o nome e a função, permitir que as propriedades definidas pelo utilizador possam ser directamente definidas e fornecer notificações de alterações

Aplicabilidade

Tecnologias de marcação onde é possível revelar o nome e a função, permitir que as propriedades definidas pelo utilizador possam ser directamente definidas e fornecer notificações de alterações.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que a tecnologia de apoio compreenda o conteúdo da Web de modo a transmitir ao utilizador informações equivalentes, através de uma interface de utilizador alternativa, permitindo-lhe utilizar controlos através da TA.

Esta técnica implica a utilização de funcionalidades normais, documentadas e suportadas para apresentar estas propriedades à TA. Baseia-se no facto de estes controlos normais, em browsers normais, cumprirem os requisitos.

Estas suposições são boas para HTML e também podem ser apropriadas para outras tecnologias.

Mesmo quando os componentes suportam acessibilidade, é essencial que algumas informações sejam fornecidas pelo autor. Por exemplo, um controlo pode ter a capacidade de fornecer um nome, mas o autor tem à mesma de fornecer o nome. Contudo, o atributo role pode já ter sido fornecido, uma vez que se trata de um componente normal com uma função fixa.

Exemplos

Exemplo 1

Exemplo 1: Uma página Web escrita em HTML ou XHTML utiliza controlos de formulário e identifica o controlo de formulário mediante o atributo title. O agente de utilizador cria informações sobre estes controlos, incluindo o nome, disponíveis para a tecnologia de apoio através do DOM e de uma API de Acessibilidade específica da plataforma.

Recursos

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

Testes

Procedimento
  1. Examine visualmente a marcação ou utilize uma ferramenta.

  2. Verifique se é utilizada a marcação correcta, de modo a que o nome e a função para cada interface de utilizador possam ser determinados.

  3. Verifique se é utilizada a marcação correcta, de modo a que os componentes da interface de utilizador que aceitam entradas de dados por parte do utilizador possam ser utilizados a partir da TA.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros para cada componente da interface de utilizador.


G110: Utilizar um redireccionamento imediato do lado do cliente

Aplicabilidade

Aplica-se a todas as tecnologias.

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) ), uma vez que um redireccionamento do lado do servidor não faz com que o novo conteúdo seja apresentado antes de o servidor enviar o conteúdo localizado no novo URI. Contudo, os autores nem sempre têm controlo sobre as tecnologias do lado do servidor; nesse caso, podem utilizar um redireccionamento do lado do cliente. Um redireccionamento do lado do cliente é implementado por código dentro do conteúdo que dá instruções ao agente de utilizador para obter o conteúdo a partir de um URI diferente. É importante que a página de redireccionamento ou a página Web apenas incluam informações relacionadas com o redireccionamento.

Exemplos

Exemplo 1: HTML: meta Refresh com um URI e Sem Tempo Limite Excedido

Em HTML 4.x e XHTML 1.x, é possível implementar um redireccionamento do lado do cliente utilizando o elemento meta : consulte H76: Utilizar meta refresh para criar um redireccionamento imediato do lado do cliente (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 links ou referências programáticas para outra página ou página Web.

  2. Para cada link ou referência programática, verifique se a página Web referenciada inclui um código (por ex., um elemento meta ou um script) que provoque um redireccionamento do lado do cliente.

  3. Para cada link ou referência programática que provoque um redireccionamento do lado do cliente, verifique se o redireccionamento é implementado sem um limite de tempo ou atraso e se a página apenas inclui informações relacionadas com o redireccionamento.

Resultados Esperados

O passo 2 é falso ou o passo 3 é verdadeiro.


G111: Utilizar cores e padrões

Aplicabilidade

Todas as tecnologias que suportem imagens.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que, quando forem utilizadas cores diferentes para transmitir informações no conteúdo não textual, sejam incluídos padrões para transmitir as mesmas informações de um modo que não dependa da cor.

Exemplos

Exemplo 1

Um sítio da Web de bens imobiliários fornece um gráfico de barras dos preços médios das casas em várias regiões dos Estados Unidos. A barra correspondente a cada região é apresentada com uma só cor diferente e um padrão diferente. Existe contraste suficiente entre as cores únicas e as cores dos padrões para cumprir o Critério de Sucesso 1.4.1. A legenda utiliza as mesmas cores e padrões para identificar cada barra.

Exemplo 2

Um mapa online de um sistema de transportes apresenta cada itinerário numa cor diferente. As paragens em cada itinerário estão assinaladas com um ícone identificativo, tal como um losango, um quadrado ou um círculo para ajudar a diferenciar cada itinerário.

Exemplo 3

Um organigrama descreve um conjunto de passos repetidos para executar um processo. Utiliza linhas tracejadas e setas com um fundo verde para apontar para o passo seguinte do processo quando a condição especificada é aceite. Utiliza setas tracejadas com um fundo vermelho para apontar para o passo seguinte do processo quando a condição especificada falha. Existe contraste suficiente entre a linha e as cores de fundo para cumprir o Critério de Sucesso 1.4.1.

Exemplo 4

O conteúdo inclui um jogo interactivo. As peças do jogo para os 4 jogadores distinguem-se umas das outras pela cor e pelo padrão.

Recursos

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

Testes

Procedimento

Para cada imagem na página Web que utilize cores diferentes para transmitir informações:

  1. Verifique se todas as informações que são transmitidas utilizando cores também são transmitidas utilizando padrões que não se baseiam na cor.

Resultados Esperados
  • O passo 1 é verdadeiro.


G112: Utilizar definições em linha

Aplicabilidade

Todas as tecnologias que contenham texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma definição no contexto para qualquer palavra utilizada de uma forma invulgar ou restrita. A definição é fornecida no texto, imediatamente antes ou depois de a palavra ser utilizada. A definição pode ser incluída na mesma oração da palavra que está a ser definida, ou numa oração separada.

Exemplos

Exemplo 1: Éter

Ele acreditava que o som viajava através do éter, que era visto como uma substância que ocupava o espaço interplanetário.

Exemplo 2: Controlador

Pode ser necessário actualizar o controlador para a impressora (o controlador é software que contém instruções específicas para a impressora).

Exemplo 3: Palavras-chave W3C

Definição: As palavras-chave "tem", "não tem", "exigido", "deve", "não deve", "deveria", "não deveria", "recomendado", "pode" e "opcional" nesta especificação têm de ser interpretadas conforme descrito em RFC 2119(página em inglês).

Exemplo 4: Uma expressão idiomática japonesa definida no contexto

Este exemplo utiliza parênteses para fornecer a definição de uma expressão idiomática em japonês. A frase em japonês diz "he throws a spoon" (ele atira uma colher). Significa que não havia nada que ele pudesse fazer e que, finalmente, desistiu.

さじを投げる(どうすることもできなくなり、あきらめること)。

Recursos

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

Testes

Procedimento

Para cada palavra ou frase utilizadas de uma forma invulgar ou restrita:

  1. Verifique se a palavra é definida no texto antes ou depois da primeira ocorrência da palavra.

Resultados Esperados
  • O passo 1 é verdadeiro.


G115: Utilizar elementos semantic para marcar a estrutura

Aplicabilidade

Linguagens de marcação, incluindo HTML 4.01, XHTML 1.x

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é marcar a estrutura do conteúdo da Web utilizando os elementos semantic apropriados. Por outras palavras, os elementos são utilizados de acordo com o seu significado, não pelo seu aspecto visual.

A utilização dos elementos semantic apropriados irá garantir que a estrutura esteja disponível para o agente de utilizador. Isto implica indicar explicitamente o papel que diferentes unidades têm na compreensão do significado do conteúdo. A natureza de um bloco de conteúdo, tal como um parágrafo, um cabeçalho, texto realçado, uma tabela, etc. pode ser indicada desta forma. Em alguns casos, as relações entre unidades de conteúdo também devem ser indicadas, tal como entre cabeçalhos e subcabeçalhos, ou entre as células de uma tabela. O agente de utilizador pode 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 grau de inclinação diferentes numa apresentação em auditório.

Em HTML, por exemplo, os elementos ao nível da frase, tais como em, abbre cite adicionam informações de semântica nas orações, assinalando texto para realce e identificando abreviaturas e citações, respectivamente. MathML, uma linguagem de marcação concebida para manter distinções importantes entre a estrutura e a apresentação na matemática, inclui uma marcação de “apresentação” especial para as numerações complexas utilizadas para representar ideias matemáticas, bem como uma marcação de “conteúdo” (semântica) para as próprias ideias matemáticas.

Exemplos

Exemplo 1

Um parágrafo contém uma hiperligação para outra página. A hiperligação é marcada utilizando o elemento a .

Código Exemplo:

<p>Do you want to try our new tool yourself? A free 
demonstration version is available in our 
<a href="download.html">download section</a></p>
Exemplo 2

Uma página sobre a história do casamento utiliza uma citação do romance "Orgulho e Preconceito" de Jane Austen como exemplo. A referência ao livro é marcada utilizando o elemento cite e a própria citação é marcada utilizando o elemento blockquote .

Código Exemplo:

<p>Marriage was considered a logical step for a bachelor, 
as can be seen in the first chapter of the novel 
<cite>Pride and Prejudice</cite>:</p>
<blockquote>
     <p>It is a truth universally acknowledged, that a single man in
     possession of a good fortune, must be in want of a wife.</p>

     <p>However little known the feelings or views of such a man may
     be on his first entering a neighbourhood, this truth is so well
     fixed in the minds of the surrounding families, that he is considered
     the rightful property of some one or other of their daughters.</p>
</blockquote>
Exemplo 3

Um manual do automóvel explica como ligar o motor. As instruções incluem um aviso para se certificar de que o automóvel está em ponto morto. O autor acha que o aviso é tão importante que deve ser realçado e, como tal, o aviso é marcado utilizando o elemento strong .

Código Exemplo:

<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear 
is in neutral</strong>. Next, turn the key in the ignition. 
The engine should start.</p>
Exemplo 4

Este exemplo mostra como utilizar os elementos em e strong para realçar texto.

Código Exemplo:

<p>What she <em>really</em> meant to say was, 
"This is not ok, it is <strong>excellent</strong>!"</p>
Exemplo 5: Utilizar cor de fundo e de realce para identificar informações importantes semântica e visualmente.

Código Exemplo:

<style type="text/css">
 .vocab {
background-color:cyan;
font-style:normal;
}
</style>
 .......
<p>New vocabulary words are emphasized and highlighted 
with a cyan background</p>
<p>The <em class="vocab">scathing </em> review of the play 
seemed a bit too harsh. .... </p>

Recursos

Testes

Procedimento
  1. Verifique se existem partes do conteúdo que tenham uma função semântica.

  2. Para cada parte que tenha uma função semântica, se existir uma marcação correspondente na tecnologia, verifique se o conteúdo foi marcado utilizando essa marcação semântica.

Resultados Esperados
  • O passo 2 é verdadeiro.


G117: Utilizar texto para transmitir informações que são transmitidas através de variações na apresentação do texto

Aplicabilidade

Tecnologias que suportem variações na apresentação visual do texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que as informações transmitidas através de variações na formatação do texto são transmitidas igualmente no texto. Quando o aspecto visual do texto varia para transmitir informações, indique a informação explicitamente no texto. As variações no aspecto visual podem ser efectuadas através de alterações no tipo e tamanho de letra, no sublinhado, no rasurado e vários outros atributos de texto. Quando estes tipos de variações transmitem informações, essas informações necessitam de estar disponíveis em qualquer outra parte do conteúdo através de texto. A introdução de secções adicionais no documento ou uma descrição em linha, em que ocorre a variação na apresentação do texto, podem ser utilizadas para transmitir as informações.

Exemplos

Exemplo 1: Um teste online exige que os alunos escrevam um breve resumo de um documento extenso.

Quando uma oração do documento original incluir uma palavra ou frase que têm de ser utilizadas no resumo, essa palavra ou frase são apresentadas num tipo de letra diferente do resto da oração. Uma secção separada também indica todas as palavras e frases que têm de ser utilizadas no resumo.

Exemplo 2: Variações de tipo de letra e indicações explícitas.

Foram feitos vários rascunhos de um documento online. As introduções estão sublinhadas e as eliminações estão rasuradas. No fim do rascunho, um "histórico das alterações" indica todas as alterações efectuadas a cada rascunho.

Recursos

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

Testes

Procedimento
  1. Encontre itens nos quais são utilizadas variações na apresentação do texto para transmitir informações.

  2. Para esses itens, verifique se as informações transmitidas visualmente também são indicadas explicitamente no texto.

Resultados Esperados
  • O passo 2 é verdadeiro.


G120: Fornecer a pronúncia imediatamente a seguir à palavra

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é disponibilizar a pronúncia de uma palavra, fornecendo a pronúncia a seguir à palavra, no mínimo, na sua primeira ocorrência numa página Web.

Quando uma página Web contém palavras que se escrevem da mesma maneira, mas têm pronúncias diferentes, esta técnica não é apropriada para fornecer a pronúncia, a menos que seja fornecida para cada ocorrência.

Esta técnica aplica-se à primeira ocorrência de uma abreviatura numa página Web. Ao combinar vários recursos numa única página Web, a abreviatura seria definida por extenso no início de cada recurso. Contudo, neste caso, é mais apropriado utilizar uma técnica diferente para fornecer a definição por extenso.

Exemplos

Exemplo 1

No exemplo seguinte de texto em japonês, as informações que fornecem a pronúncia em caracteres Han (Kanji) são apresentadas entre parênteses imediatamente a seguir ao texto.

Código Exemplo:

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

Recursos

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

Testes

Procedimento

Para cada palavra que necessite de informações sobre a pronúncia:

  1. Procure a primeira ocorrência dessa palavra na página Web.

  2. Verifique se a primeira ocorrência é imediatamente seguida pela pronúncia da palavra.

Resultados Esperados
  • O passo 2 é verdadeiro.


G121: Aceder às pronúncias através de um link

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é disponibilizar a pronúncia de uma palavra, fornecendo informações sobre a pronúncia, na mesma página Web ou noutra, e estabelecendo uma ligação, através de um link, entre o item e a sua pronúncia.

Exemplos

Exemplo 1

Uma palavra tem um link para a sua entrada num dicionário que inclui informações sobre a pronúncia.

Exemplo 2

Uma palavra tem um link para um ficheiro de áudio que irá ler a pronúncia.

Exemplo 3

Uma palavra tem um link para a sua entrada num dicionário de pronúncias.

Exemplo 4

Uma palavra tem um link para uma representação IPA (Alfabeto Fonético Internacional) da sua pronúncia.

Exemplo 5

Uma palavra tem um link para uma soletração fonética clara da pronúncia.

Recursos

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

Testes

Procedimento

Para cada palavra que necessite de informações sobre a pronúncia:

  1. Verifique se, no mínimo, a primeira ocorrência do item é um link.

  2. Verifique se cada link conduz a informações sobre a pronúncia do item.

Resultados Esperados
  • Todos os passos são verdadeiros.


G122: Incluir um sinal de aviso de texto sempre que forem utilizados sinais de aviso a cores

Aplicabilidade

Todas as tecnologias que suportem cor e texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é combinar sinais de aviso a cores e de texto ou de caracteres para transmitir informações. A maioria dos utilizadores consegue pesquisar rapidamente o conteúdo para localizar as informações transmitidas utilizando cores diferentes. Os utilizadores que não conseguem distinguir as cores podem procurar ou ouvir sinais de aviso de texto. As pessoas que utilizam apresentações em braille ou outras interfaces tácteis podem detectar sinais de aviso de texto através do toque.

Exemplos

Exemplo 1: Campos obrigatórios num formulário em HTML

As instruções para um formulário online indicam: "Os campos obrigatórios são apresentados a vermelho e assinalados com (obrigatório)". O sinal de aviso "(obrigatório)" está incluído no elemento label .

Código Exemplo:

<label for="lastname" class="required">Last name(required):</label>
<input id="lastname" type="text" size="25" value=""/>
 .required {
color=red;
}

Recursos

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

Testes

Procedimento

Para qualquer conteúdo no qual sejam utilizadas cores diferentes para transmitir informações:

  1. Verifique se as mesmas informações estão disponíveis através de sinais de aviso de texto ou de caracteres.

Resultados Esperados
  • O passo 1 é verdadeiro.


G123: Adicionar um link no início de um bloco de conteúdo repetido para aceder directamente ao fim do bloco

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para ignorar um bloco de conteúdo, passando para o fim do bloco. O primeiro link do bloco, ou o link imediatamente antes do bloco, move o foco para o conteúdo imediatamente a seguir ao bloco. Ao activar o link, o foco do teclado avança para o bloco. Quando existirem vários blocos para ignorar, o utilizador passa de bloco em bloco através destes links.

Exemplos

Exemplo 1: Ignorar Links de Navegação

As páginas no sítio da Web de uma organização incluem uma barra de navegação ou menu principal que incluem links para as secções mais importantes do sítio da Web, o mapa do sítio da Web, informações sobre a organização e com contactar as organização. O primeiro link nesta área intitula-se "Ignorar Links de Navegação". Um utilizador activa o link para ignorar estes links.

Exemplo 2: O índice de um livro

Um livro contém um índice que está dividido num conjunto de páginas. No conteúdo, no início de cada página do índice, existem links para cada letra do alfabeto, que conduzem ao índice em que as entradas começam com essa letra. O primeiro link do conjunto intitula-se "Ignorar Links até ao Índice". Um utilizador activa este link para ignorar os links.

Exemplo 3: Vários conjuntos de links

Todas as páginas de um sítio da Web incluem uma secção que contém links para o mapa do sítio da Web, informações sobre a organização e como contactar a organização. Todas as páginas em cada secção do sítio da Web também contêm um conjunto de links para as respectivas subsecções. O primeiro link no primeiro bloco intitula-se "Ignorar Links de Navegação", que permite ignorar o primeiro conjunto de links. O primeiro link no segundo bloco intitula-se "Ignorar Links de Secções", que permite ignorar os links de subsecções.

Exemplo 4: Página HTML com vários blocos de links de navegação

Este exemplo demonstra a utilização de elementos Heading no início de cada secção (H69) e os links que permitem avançar para o fim de cada secção. Isto permite às pessoas ignorar blocos de conteúdo repetido utilizando navegação por teclado ou por título, consoante as capacidades dos agentes de utilizador. Tenha em atenção que algumas secções do conteúdo estão moldadas num elemento div para solucionar uma limitação do Internet Explorer (consulte Notas dos Agentes de Utilizador para Criar links HTML para ignorar blocos de conteúdo (futuro link)).

Código Exemplo:

<p><a href="#content">Content title</a></p>
    <h2>Main Navigation</h2>
    <ul>
      <li><a href="#subnav">Sub Navigation</a></li>
      <li><a href="/a/">Link A</a></li>
      <li><a href="/b/">Link B</a></li>
      <li><a href="/c/">Link C</a></li>
 ...
      <li><a href="/j/">Link J</a></li>
    </ul>
    <div class="iekbfix">
      <h2 id="subnav">Sub Navigation</h2>
      <ul>
        <li><a href="#ultranav">Ultra Sub Navigation</a></li>
        <li><a href="/suba/">Sub A</a></li>
        <li><a href="/subb/">Sub B</a></li>
        <li><a href="/subc/">Sub C</a></li>
 ...
        <li><a href="/subj/">Sub J</a></li>
      </ul>
    </div>
    <div class="iekbfix">
      <h2 id="ultranav">Ultra Sub Navigation</h2>
      <ul>
        <li><a href="#content">Content title</a></li>
        <li><a href="/ultraa/">Ultra A</a></li>
        <li><a href="/ultrab/">Ultra B</a></li>
        <li><a href="/ultrac/">Ultra C</a></li>
 ...
        <li><a href="/ultraj/">Ultra J</a></li>
      </ul>
    </div>
    <div>
      <h2 id="content">Content title</h2>
      <p>Now that I have your attention...</p>
    </div>

E o CSS.

Código Exemplo:

div.iekbfix {
  width: 100%;
} 

Recursos

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

Testes

Procedimento
  1. Verifique se um link é o último controlo que pode receber foco antes do bloco de conteúdo repetido ou do primeiro link do bloco.

  2. Verifique se a descrição do link informa que permite ignorar o bloco.

  3. Verifique se o link está sempre visível ou só está visível quando recebe foco do teclado.

  4. Verifique se activar o link move o foco para o conteúdo imediatamente a seguir ao bloco.

  5. Verifique se, depois de activar o link, o foco do teclado se moveu para o conteúdo imediatamente a seguir ao bloco.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G124: Adicionar links no topo da página para cada área do conteúdo

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para saltar blocos de material através do fornecimento de uma lista de links para as diferentes secções do conteúdo. Os links desta lista, tal como um pequeno índice no início do conteúdo, colocam o foco nas diferentes secções do conteúdo. Esta técnica é particularmente útil para páginas com muitas secções independentes, tais como portais. Também pode ser combinada com outras técnicas para saltar blocos numa secção.

Exemplos

Exemplo 1

Num sítio, todas as páginas Web começam com três links que conduzem até ao conteúdo principal dessas mesmas páginas, ao campo de procura e à barra de navegação.

Recursos

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

Testes

Procedimento

Para cada link do conjunto de links fornecido para esta finalidade:

  1. Verifique se os únicos controlos na página Web que precedem o link são outros links do conjunto.

  2. Verifique se a descrição de cada link informa que o mesmo conduz a uma secção do conteúdo.

  3. Verifique se o link está sempre visível ou só está visível quando recebe foco do teclado.

  4. Verifique se a activação do link move o foco para essa secção do conteúdo.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G125: Fornecer links para navegar para páginas Web relacionadas

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é tornar possível aos utilizadores a localização de informações adicionais, fornecendo links para as páginas Web relacionadas. É uma de várias técnicas para localizar conteúdo considerada de tipo suficiente para abordar o Critério de Sucesso 2.4.5. Os links são um componente básico da World Wide Web e são o mecanismo que faz da Internet uma "teia" interligada de conteúdo. A maioria dos autores utiliza esta técnica automaticamente ao criar páginas Web.

Exemplos

Exemplo 1

As Directrizes de Acessibilidade para o Conteúdo da Web 2.0 incluem links para definições de termos utilizados nas directrizes e nos Critérios de Sucesso, links para documentos que explicam como cumprir diferentes Critérios de Sucesso, um índice para cada secção com links para diferentes subsecções dessa secção e uma Comparação dos pontos de verificação das WCAG 1.0 com as WCAG 2.0 (página em inglês). À medida que os utilizadores navegam no documento, podem seguir estes links para encontrar informações relacionadas.

Recursos

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

Testes

Procedimento

Para cada link na página Web:

  1. Verifique se o link conduz às informações relacionadas.

Resultados Esperados
  • O passo 1 é verdadeiro.


G126: Fornecer uma lista de links para todas as outras páginas Web

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma lista de links para todas as páginas Web do conjunto em cada página Web. É uma de várias técnicas para localizar conteúdo considerada de tipo suficiente para abordar o Critério de Sucesso 2.4.5. Esta técnica só é eficaz para pequenos conjuntos de páginas Web; se a lista de links for mais longa do que o resto do conteúdo da página Web, pode dificultar a compreensão e a utilização da página Web para os utilizadores.

Nota: O Critério de Sucesso 2.4.1 requer uma técnica para ignorar esta lista de links.

Exemplos

Exemplo 1

O sítio da Web de uma família inclui páginas iniciais para todos os membros da família. Cada página contém uma lista de links para as páginas iniciais dos restantes membros da família.

Exemplo 2

Um livro electrónico está dividido em páginas Web separadas para cada capítulo. Cada página Web começa com um pequeno índice que contém links para todos os capítulos do livro.

Recursos

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

Testes

Procedimento
  1. Verifique se cada página Web contém uma lista de links para as outras páginas do sítio da Web.

  2. Verifique se os links da lista conduzem às páginas Web correspondentes.

  3. Verifique se a lista contém um link para todas as páginas do sítio da Web.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G127: Identificar a relação de uma página Web com um conjunto maior de páginas Web

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir aos utilizadores identificar a relação entre a página Web actual e outras páginas Web do mesmo conjunto (por ex., no mesmo sítio da Web). Em alguns casos, isto pode ser feito de forma programática, por exemplo, utilizando o atributo rel do elemento link em HTML. Noutros casos, as informações são fornecidas, incluindo as informações relevantes no título da página Web.

Exemplos

Exemplo 1: O título de uma página Web inclui o nome do subsítio da Web

Um sítio da Web de grandes dimensões inclui lições práticas e materiais de referência para várias tecnologias. O título de cada página Web inclui o nome do subsítio da Web, bem como da organização que produz o sítio da Web.

Exemplo 2: Incluir informações de identificação em metadados

Uma página Web inclui metadados que a identificam como o índice de um conjunto de documentos. Os metadados para cada documento do conjunto identificam a posição do documento no conjunto e fornecem uma referência para o índice.

Exemplo 3: Capítulos de um manual escolar online

Um manual escolar online está dividido em capítulos. O título de cada página Web inclui o número e o título do capítulo, bem como o título do manual escolar.

Recursos

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

Testes

Procedimento
  1. Verifique se o título da página Web descreve a relação da mesma com o conjunto ao qual pertence.

  2. Verifique se a página Web inclui metadados que identificam a relação da página Web com o conjunto ao qual pertence.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G128: Indicar a localização actual nas barras de navegação

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é ajudar a orientar o utilizador, fornecendo informações sobre a localização actual através do componente de navegação da interface de utilizador. Esta técnica é especialmente útil quando as páginas Web são passos numa tarefa que têm de ser processados por ordem. Fornecer esta indicação ajuda o utilizador a compreender melhor o local onde se encontra na sequência. A localização pode ser indicada adicionando um ícone ou texto, ou alterando o estado do item.

Exemplos

Exemplo 1

Uma página Web implementa uma navegação tipo painel de separadores. Uma lista de separadores do painel é apresentada horizontalmente na página. O conteúdo actual é apresentado num painel abaixo da lista dos separadores do painel. Quando o utilizador navega até um determinado separador do painel e o selecciona, o conteúdo do painel é actualizado para reflectir o tópico do separador seleccionado. Além disso, a cor de fundo predefinida do separador seleccionado muda, e é apresentado um ícone de marca de verificação junto ao texto do painel de separadores para indicar que é o painel activo. O ícone de marca de verificação inclui uma alternativa em texto apropriada.

Exemplo 2

O esquema de uma página Web utiliza um conjunto de frames e frames. Um dos frames é designado como o frame de navegação e outro frame apresenta o conteúdo do sítio da Web. Quando o utilizador selecciona um link no frame de navegação, as informações relacionados com o link são apresentadas no frame de conteúdo. O texto para o item seleccionado no frame de navegação é actualizado com um asterisco para indicar que é o tópico seleccionado.

Exemplo 3

A barra de navegação de um sítio da Web é implementada como uma lista de links. A barra de navegação aparece em todas as páginas Web num conjunto de páginas Web. À medida que o utilizador coloca o foco sobre um determinado link, ou fica suspenso sobre o mesmo, na barra de navegação, a cor de fundo do link muda. Esta alteração no estilo da suspensão ou no foco é especificada através da folha de estilo em cascata para a página Web. Quando o foco é removido do link, o estilo é reposto para o estilo normal do link. Quando o link é activado para alterar os conteúdos da página, o link seleccionado na barra de navegação é desactivado, uma vez que o resultado de seguir este link é a página Web que está actualmente a ser apresentada. Alterar a cor de fundo fornece aos utilizadores sem problemas de visão uma notificação visual do link que devem seleccionar. Desactivar o link fornece informações a todos os utilizadores de que se trata do tópico actualmente seleccionado.

Recursos

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

Testes

Procedimento

Quando o componente de navegação se repetir num conjunto de páginas Web:

  1. Verifique se é fornecida ao utilizador uma indicação do item actualmente seleccionado na unidade de navegação.

  2. Verifique se o item seleccionado corresponde ao conteúdo que está a ser apresentado.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G130: Fornecer cabeçalhos descritivos

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é tornar os cabeçalhos das secções existentes no conteúdo da Web descritivos. Os cabeçalhos e títulos descritivos (consulte G88: Fornecer títulos descritivos para páginas Web) funcionam em conjunto para fornecer aos utilizadores uma descrição geral do conteúdo e respectiva organização. Os cabeçalhos descritivos identificam as secções do conteúdo em relação à página Web como um todo e a outras secções da mesma página Web.

O cabeçalho descritivo ajuda os utilizadores a encontrar conteúdo específico e orienta-os na página Web.

Os autores também poderão considerar a colocação das informações mais importantes no início de cada cabeçalho. Isso ajuda os utilizadores a "passar os olhos" pelos cabeçalhos para localizar o conteúdo específico que necessitam, e é especialmente útil quando os browsers ou a tecnologia de apoio permitem a navegação de cabeçalho para cabeçalho.

Exemplos

Exemplo 1

Uma página HTML que descreva a série de tarefas para 'primeiros socorros para desastres' pode ter os seguintes cabeçalhos:

Código Exemplo:

       <h1>Primeiros socorros para Desastres</h1>                                                     <h1>Disaster preparation</h1>
  <h2>Inundação (Primeiros socorros)</h2>
  <h2>Incêndio (Primeiros socorros)</h2>

Tenha em atenção que os cabeçalhos de nível 2 têm as informações características no início (i.e., em vez de "Primeiros socorros em caso de inundação", "Primeiros socorros em caso de incêndio", etc.).

Exemplo 2

Um breve artigo sobre a história de uma cidade fala sobre a fundação e expansão da cidade e depois entra em detalhes sobre a situação actual. O título da página Web é "História da Nossa Cidade". A primeira secção intitula-se "A fundação da Nossa Cidade". A segunda secção intitula-se "Expansão da Nossa Cidade". A terceira secção intitula-se "A Nossa Cidade Hoje", que inclui as seguintes subsecções: "As Pessoas na Nossa Cidade", "Organizações na Nossa Cidade" e "Edifícios na Nossa Cidade".

Recursos

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

Testes

Procedimento
  1. Verifique se a página Web contém cabeçalhos.

  2. Verifique se cada cabeçalho identifica a sua secção do conteúdo.

Resultados Esperados
  • O passo 2 é verdadeiro.


G131: Fornecer etiquetas descritivas

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que a etiqueta de qualquer componente interactivo no conteúdo da Web torne clara a finalidade do componente. A utilização das técnicas específicas da tecnologia apropriadas para tecnologias de associação de etiquetas com controlos interactivos permite à tecnologia de apoio reconhecer a etiqueta e apresentá-la ao utilizador.

Exemplos

Exemplo 1: Mapas online com controlos para ampliar e reduzir (zoom)

A uma aplicação Web apresenta mapas de uma cidade. Os utilizadores podem ampliar para ver parte do mapa em maior detalhe, e podem reduzir para ver uma parte maior da cidade. Os controlos podem ser utilizados utilizando um rato ou um teclado. Os controlos intitulam-se “Aumentar (Ctrl + Shift + L)" e “Reduzir (Ctrl + Shift + R)."

Exemplo 2: Um formulário a perguntar o nome do utilizador

Um formulário pergunta o nome do utilizador. Consiste em dois campos de entrada de dados para perguntar o primeiro nome e o apelido. O primeiro campo intitula-se "Primeiro nome", o segundo intitula-se "Apelido".

Exemplo 3: Um formulário com campos obrigatórios

Um formulário de compra inclui vários campos que são obrigatórios. Além de identificar o campo, a etiqueta para cada campo obrigatório inclui a palavra "obrigatório" entre parênteses.

Recursos

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

Testes

Procedimento

Para cada componente da interface existente no conteúdo:

  1. Identifique a finalidade do componente da interface.

  2. Verifique se existe alguma etiqueta obrigatória.

  3. Verifique se cada etiqueta torna clara a finalidade do componente.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G133: Fornecer uma caixa de verificação na primeira página de um formulário de várias partes, que permite aos utilizadores solicitar um limite de tempo de sessão maior ou nenhum limite de tempo de sessão

Aplicabilidade

Conteúdo que inclua formulário de várias partes.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é minimizar o risco de os utilizadores com incapacidades perderem o seu trabalho, fornecendo uma caixa de verificação para solicitar tempo adicional para preencher formulários de várias partes. A caixa de verificação pode permitir ao utilizador solicitar um período de tempo específico adicional (por exemplo, 15 minutos) ou um período de tempo indeterminado. (Tenha em atenção que permitir um período de tempo indeterminado será inapropriado se comprometer a privacidade do utilizador ou a segurança da rede.)

Exemplos

Exemplo 1: Uma caixa de verificação para solicitar um período de tempo específico

Uma página Web contém a primeira parte de um formulário de cinco partes. Imediatamente a seguir às instruções gerais para preencher o formulário encontra-se uma caixa de verificação com a etiqueta, “Fornecer mais 15 minutos para preencher cada parte deste formulário".

Exemplo 2: Solicitar um período de tempo indeterminado

Uma página Web contém a primeira parte de uma formulário de três partes. Cada parte do formulário inclui mais de 10 itens. Alguns itens requerem que os utilizadores sigam links para obterem informações adicionais. Imediatamente a seguir às instruções gerais para preencher o formulário encontra-se uma caixa de verificação com a etiqueta, “Fornecer o tempo necessário para preencher este formulário. Compreendo que tenho de fechar o (sair do) browser da Web se optar por parar antes de preencher a última parte do formulário".

Testes

Procedimento

Se a página Web incluir a primeira parte de um formulário de várias partes:

  1. Verifique se a página Web inclui uma caixa de verificação para solicitar tempo adicional para preencher o formulário.

  2. Verifique se, no caso de a caixa de verificação estar seleccionada, é fornecido tempo adicional para preencher o formulário.

Resultados Esperados
  1. Todos os passos são verdadeiros.


G134: Validar páginas Web

Aplicabilidade

Qualquer linguagem de marcação e muitas outras tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar ambiguidades nas páginas Web que resultam muitas vezes de códigos que não são validados contra especificações formais. É utilizado o mecanismo de cada tecnologia para especificar a tecnologia e a respectiva versão, e a página Web é validada contra a especificação formal dessa tecnologia. Se existir uma validação disponível para essa tecnologia, o programador pode utilizá-la.

Normalmente, a validação irá eliminar as ambiguidades (e mais), uma vez que um passo essencial na validação é verificar se a marcação da tecnologia (numa linguagem de marcação) ou os códigos (noutras tecnologias) são correctamente utilizados. A validação não verifica necessariamente se existe conformidade total com uma especificação, mas é o melhor meio para verificar automaticamente o conteúdo em relação à sua especificação.

Exemplos

Exemplo 1: Validar HTML

As páginas HTML incluem uma declaração do tipo de documento (por vezes, referido como declaração !DOCTYPE ) e são válidas de acordo com a versão HTML especificada pela declaração do tipo de documento. O programador pode utilizar validações offline e online (consulte os Recursos abaixo) para verificar a validade das páginas HTML.

Exemplo 2: Validar XML

Os documentos XHTML, SVG, SMIL e outros baseados em XML fazem referência à 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 a validade dos documentos XML.

Exemplo 3: Validação batch com Ant

A tarefa xmlvalidate do Apache Ant pode ser utilizada para validação batch de ficheiros XML. O seguinte destino Apache Ant é um exemplo simples para a validação de ficheiros com a extensão .xml no directório dev\\Web (relativo ao Ant build file).

Código Exemplo:

                                                             <target name="validate-xml"> 
   <xmlvalidate lenient="no"> 
   <fileset dir="dev/web" includes="*.xml" /> 
   </xmlvalidate> 
   </target> 

Recursos

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

Validar HTML e XHTML

  • O Serviço de Validação de Marcação W3C (página em inglês) do World Wide Web Consortium permite validar ficheiros HTML e XHTML por URI, carregamento de ficheiros e introdução directa de documentos HTML ou XHTML completos. Existem também outras funcionalidades avançadas que permitem a validação por carregamento de ficheiros, validação avançada por URI (opções avançadas como codificações e tipos de documento).

  • Documentação de Instalação para o Serviço de Validação de Marcação W3C (página em inglês) explica como instalar este serviço (por exemplo, para utilizar numa Intranet).

  • HTML Validator (página em alemão) é uma versão alemã do Serviço de Validação de Marcação W3C.

  • WDG HTML Validator (página em inglês) do Grupo Web Design, permite introduzir um URI para validar páginas individuais ou sítios da Web inteiros. Também existem versões para validar páginas Web em modo batch - por lotes - (especificando um ou mais URIs de documentos HTML para validar), por carregamento de ficheiros e introdução directa de códigos HTML.

  • Offline HTMLHelp.com Validator (página em inglês) é uma ferramenta para utilizadores Unix; é a versão offline do WDG HTML Validator.

  • Off-line HTML Validator – Um clipbook para NoteTab (página em inglês) do Professor Igor Podlubny, é uma extensão do editor de programação NoteTab. Utiliza Análise SGML de fonte aberta de James Clark(página em inglês), igualmente utilizada pelo Serviço de Validação de Marcação W3C.

  • Off-line HTML Validator para o Windows (página em inglês) de Jan Kacur, é outra validação baseada na Análise SGML de fonte aberta de James Clark. Também está disponível o código fonte (em Delphi).

  • Offline HTML Validator Faça-Você-Mesmo (página em inglês) de Matti Tukiainen, explica como criar uma validação simples com a Análise SGML de James Clark no Windows.

  • Validar um sítio da Web inteiro (página em inglês) de Peter Kranz, explica como instalar uma versão modificada do Serviço de Validação de Marcação W3C que apresenta resultados de validação como XML no Mac OS. Está disponível o código fonte (em Perl e Python).

  • HTML Validation Widget (página em inglês) adiciona uma opção "Validar HTML" ao menu de contexto do Internet Explorer e valida o documento HTML actual com o HTML Validator do Grupo Web Design.

  • Posso utilizar o Serviço de Validação de Marcação W3C para validar HTML? (página em inglês) explica como validar HTML a partir do editor gratuito HTML-Kit.

  • HTML/XML Validator é uma ferramenta de reparação online para HTML e XHTML baseada em Tidy e PHP 5. Está disponível em vários idiomas, mas não é uma validação verdadeira.

  • Corrija o seu Sítio da Web com o DOCTYPE Correcto! (página em inglês) de Jeffrey Zeldman, explica que doctypes HTML e XHTML funcionam e quais são os seus efeitos no modo de apresentação de alguns browsers.

  • Modificar Dreamweaver para Produzir XHTML Válido (página em inglês) de Carrie Bickner.

  • XHTML-Schemata für FrontPage 2003 und Visual Studio .NET (página em alemão) de Christoph Schneegans, é um artigo alemão que explica como podem ser utilizados os W3C XML Schemas para XHTML 1.0 no FrontPage 2003 e Visual Studio .NET para criar um código válido.

  • Nvu (página em inglês) é uma ferramenta de autor da Web gratuita e de fonte aberta para Windows, Macintosh e Linux que pode utilizar o Serviço de Validação HTML W3C.

  • Amaya (página em inglês) do World Wide Web Consortium, é uma ferramenta de autor da Web gratuita e de fonte aberta com suporte para HTML, XHTML, CSS, SVG e MathML, que o alerta para erros de validação quando guarda um documento.

  • Web Developer Extension (página em inglês) é uma extensão para o Mozilla, Firefox e Flock de Chris Pedrick, que permite utilizar os Serviços de Validação W3C para HTML e CSS.

Validar XML

  • HTML/XHTML/WML/XML Validator (página em inglês) permite validar documentos por URI ou carregamento de ficheiros. Também está disponível uma interface avançada.

  • HTML/XHTML/WML/XML Validator (página em alemão) é uma versão alemã da mesma validação.

  • XML Validator - Um Serviço de Validação de Documentos (página em inglês) de JavaView, permite verificar a boa formação e a validade dos ficheiros XML, por carregamento de ficheiros ou introdução directa do código XML.

  • Tarefa XMLValidate do Apache Ant (página em inglês), pode ser utilizada para validar documentos baseados em XML. Esta ferramenta pode ser utilizada para validar directórios inteiros (e subdirectórios) de ficheiros XML.

  • XML Schema Validator (página em inglês) de Christoph Schneegans, é uma ferramenta online que permite validar ficheiros XML (e XHTML) por URI, carregamento de ficheiros, introdução directa de documentos XML completos e introdução directa de fragmentos de códigos XML. Também está disponível uma bookmarklet que permite validar a página actualmente apresentada no browser. Esta validação pretende ser mais exacta do que a validação W3C.

  • XML Schema Validator (página em inglês) de DecisionSoft, é uma ferramenta online que permite validar um ficheiro XML em comparação com um WC3 XML Schema, podendo ambos ser carregados.

  • Formulário de Validação XML STG (página em inglês) de Scholarly Technology Group of Brown University, permite validar ficheiros XML por URI, carregamento de ficheiros e introdução directa de documentos XML completos.

  • NetBeans: Trabalhar com XML, Parte 1 e NetBeans: Trabalhar com XML, Parte 2 (páginas em inglês) de Tim Boudreau e outros, explicam como activar o suporte e a validação XML, bem como outras funcionalidades relacionadas, na estrutura NetBeans de fonte aberta.

  • Schema Validator(página em inglês): esta é uma validação que permite colar códigos XML e WC3 XML Schema em caixas de texto para validar códigos XML.

  • XML Nanny(página em inglês): uma ferramenta gráfica para validar XML e XHTML, com suporte para DTD, W3C XML Schema, RELAX NG e Schematron (Max OX X).

Tenha em atenção que vários editores de programação, editores XML e ambientes de desenvolvimento integrados (IDEs) podem validar ficheiros XML. Estes incluem as seguintes ferramentas gratuitas e/ou de fonte aberta:

  • o editor de programação JEdit (página em inglês) com os plug-ins XML e SideKick, que suporta DTDs e W3C XML Schemas,

  • o “workbench" Eclipse com a Web Tools Platform (Plataforma de Ferramentas Web)(páginas em inglês),

  • a ferramenta de autor da Web SCREEM (página em inglês) para o ambiente e trabalho Gnome, que suporta DTDs,

  • o editor XML Jaxe(página em inglês), que valida ficheiros XML com Apache Xerces,

  • o editor XML Xerlin(página em inglês), que suporta DTDs e, até certo ponto, W3C XML Schema,

  • o editor XML xmloperator(página em inglês), que suporta DTDs e RELAX NG Schemas,

  • Emacs em modo nXML (consulte o Modo YahooGroup Emacs nXML) (página em inglês),

  • o editor XML Pollo(página em inglês), que suporta DTDs, W3C XML Schemas e RELAX NG Schemas, e é mais indicado para ficheiros XML em árvore.

Validar CSS

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Para tecnologias baseadas em HTML, SGML e XML:

  1. Carregue cada página ou documento numa análise de validação.

  2. Verifique se não são encontrados erros de validação.

Para CSS:

  1. Carregue cada folha de estilo externa ou interna numa Validação CSS.

  2. Verifique se não são encontrados erros de validação.

Para outras tecnologias:

Siga o procedimento de validação definido para a tecnologia em utilização, se existir alguma.

Resultados Esperados

Para tecnologias baseadas em HTML, SGML e XML:

O passo 2 é verdadeiro.

Para CSS:

O passo 2 é verdadeiro.


G135: Utilizar as funcionalidades API de acessibilidade de uma tecnologia para revelar os nomes e as funções, permitir que as propriedades definidas pelo utilizador possam ser directamente definidas e fornecer notificações de alterações

Aplicabilidade

Tecnologias de programação que têm componentes normais programados para interagir com APIs de acessibilidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir à tecnologia de apoio compreender o conteúdo da Web, de modo a poder transmitir informações equivalentes ao utilizador através de uma interface de utilizador alternativa.

Por vezes, o conteúdo não é criado utilizando linguagem de marcação, mas utilizando uma linguagem de programação ou ferramentas. Em muitos casos, estas tecnologias têm componentes de interface que já se encontram programados para interagir com APIs de acessibilidade. Se um autor utilizar estes componentes e preencher as propriedades (por ex., nome, etc.), os componentes resultantes da interface de utilizador existentes no conteúdo estarão acessíveis à tecnologia de apoio.

Exemplos

Exemplo 1
  • Uma página Web utiliza Java para criar uma applet. Os objectos de Java Swing (por ex., botão) são utilizados porque têm propriedades de acessibilidade incorporadas que podem ser acedidas a partir da tecnologia de apoio escrita em Java e, com Java Access Bridge, das escritas noutras linguagens que utilizam a API de Acessibilidade do sistema operativo. O autor preenche os valores para os componentes e o resultado está acessível à TA.

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
  1. Apresente o conteúdo utilizando um Agente de Utilizador acessível.

  2. Utilize uma Ferramenta de Acessibilidade concebida para a API de Acessibilidade do Agente de Utilizador para avaliar cada componente da interface de utilizador.

  3. Verifique se o nome e a função de cada componente da interface de utilizador são encontrados pela ferramenta.

Resultados Esperados
  • O passo 3 é verdadeiro para cada componente da interface de utilizador.


G136: Fornecer um link no início de uma página Web que não esteja em conformidade que aponte para uma versão alternativa em conformidade

Aplicabilidade

O conteúdo principal não está conformidade com as WCAG, mas existem versões alternativas que estão em conformidade com as WCAG. Esta técnica só pode ser utilizada se uma tecnologia tornar possível a criação de um link acessível para uma versão alternativa.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir aos utilizadores aceder ao conteúdo alternativo que está em conformidade com as WCAG, se o conteúdo principal ou o conteúdo predefinido que os utilizadores encontram quando visitam um determinado URI não estiverem em conformidade. A página alternativa, ou a versão alternativa em conformidade, pode fazer alguns compromissos de concepção e funcionalidade de modo a alcançar a conformidade, mas tem de cumprir os requisitos descritos na definição, de modo a ser uma versão alternativa em conformidade. A definição de "versão alternativa em conformidade" é:

versão alternativa em conformidade

versão que

  1. está em conformidade com o nível designado,

  2. fornece as mesmas informações e a funcionalidade no mesmo idioma humano,

  3. está tão actualizada como o conteúdo que não está em conformidade, e

  4. para a qual, no mínimo, uma das seguintes afirmações é verdadeira:

    1. é possível aceder à versão em conformidade a partir da página que não está em conformidade, através de um mecanismo suportado por acessibilidade, ou

    2. só é possível aceder à versão que não está em conformidade a partir da versão em conformidade, ou

    3. só é possível aceder à versão que não está em conformidade a partir de uma página em conformidade, que também forneça um mecanismo para aceder à versão em conformidade

Nota 1: Nesta definição, a expressão "só é possível aceder" significa que existe algum mecanismo, tal como um redireccionamento condicional, que impede um utilizador de "chegar" (carregar) à página que não está em conformidade, a menos que o utilizador tenha acabado de vir da versão em conformidade.

Nota 2: Não é necessário que a versão alternativa corresponda, página a página, à original (por ex., a versão alternativa em conformidade pode consistir em várias páginas).

Nota 3: Se estiverem disponíveis versões de vários idiomas, serão necessárias versões alternativas em conformidade para cada idioma oferecido.

Nota 4: Podem ser fornecidas versões alternativas para acomodar diferentes ambientes de tecnologia ou grupos de utilizadores. Cada versão deverá estar o mais em conformidade possível. É necessária uma versão em conformidade total, para cumprir o requisito de conformidade 1.

Nota 5: Não é necessário que a versão alternativa em conformidade resida no âmbito de conformidade, nem mesmo no mesmo sítio da Web, desde que esteja tão disponível como a versão que não está em conformidade.

Nota 6: As versões alternativas não devem ser confundidas com o conteúdo suplementar, que suporta a página original e melhora a compreensão.

Nota 7: A definição de preferências de utilizador no conteúdo para produzir uma versão em conformidade é um mecanismo aceitável para aceder a outra versão, desde que o método utilizado para definir as preferências seja suportado por acessibilidade.

Consulte as Noções sobre Versões Alternativas em Conformidade

Ao utilizar esta técnica, a colocação de um link em conformidade com as WCAG para o conteúdo alternativo no topo da página permite que os utilizadores encontrem o link rapidamente e acedam à versão alternativa em conformidade. Para garantir que os utilizadores conseguem sempre encontrar a versão alternativa, independentemente do local onde entrarem no sítio da Web, cada página que não esteja em conformidade com o nível especificado irá incluir um link para a versão alternativa em conformidade.

Exemplos

  • Num sítio da Web, para cada página que não esteja em conformidade com as WCAG no nível especificado, o primeiro link na página intitula-se "Versão Alternativa". Este link conduz à versão alternativa da página que está em conformidade com as WCAG no nível especificado.

Testes

Procedimento
  1. Identifique uma página que não esteja em conformidade com as WCAG no nível de conformidade especificado.

  2. Verifique se a página contém um link para uma versão alternativa em conformidade da página.

  3. Verifique se a versão alternativa é uma versão alternativa em conformidade da página original e se está em conformidade com as WCAG 2.0 no nível de conformidade especificado.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G138: Utilizar a marcação semântica sempre que forem utilizados sinais de aviso a cores

Aplicabilidade

Todas as tecnologias que suportem cor e texto.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é combinar cores e marcação semântica para transmitir informações. A maioria dos utilizadores consegue pesquisar rapidamente o conteúdo para localizar informações transmitidas mediante utilização de cores. Para os utilizadores que não conseguem distinguir as cores, a marcação semântica pode fornecer um tipo diferente de sinal de aviso. Os agentes de utilizador podem assim tornar este tipo de estrutura perceptível ao utilizador, por exemplo, utilizando uma apresentação visual diferente para diferentes tipos de estruturas ou utilizando uma voz ou grau de inclinação diferentes numa apresentação em auditório.

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

Exemplos

Exemplo 1: Cores e realce forte para os campos de formulário obrigatórios

Um formulário HTML contém vários campos obrigatórios. As etiquetas para os campos obrigatórios são apresentadas a vermelho. Além disso, o texto de cada etiqueta está marcado com o elemento STRONG para um realce mais forte. As instruções para preencher o formulário indicam que "todos os campos obrigatórios são apresentados a vermelho e estão realçados", e são seguidas de um exemplo.

Recursos

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

Testes

Procedimento

Para qualquer conteúdo em que são utilizadas cores diferentes para transmitir informações:

  1. Verifique se as mesmas informações estão disponíveis através de marcação semântica.

Resultados Esperados
  • O passo 1 é verdadeiro.


G139: Criar um mecanismo que permita aos utilizadores passarem directamente para os erros

Aplicabilidade

Conteúdo que aceite entrada de dados por parte do utilizador, com restrições no formato, valor e/ou tipo de dados.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é ajudar os utilizadores a encontrar erros de entrada, em que as informações fornecidas pelo utilizador não foram aceites. Isto inclui campos com informações obrigatórias em falta e campos com informações incorrectas. Quando os utilizadores introduzem dados que são verificados, e são detectados erros de entrada, é fornecido um link para esse erro para que o utilizador não tenha de procurá-lo. Uma abordagem é utilizar validação do lado do servidor, apresentar novamente o formulário (incluindo todos os dados anteriormente introduzidos), e colocar uma descrição do texto no topo da página a indicar que existiu um erro de entrada, a descrever a natureza do problema e a fornecer um link para o(s) campo(s) com o problema.

Exemplos

Exemplo 1: Verificação de erros do lado do servidor

O utilizador introduz dados inválidos no campo de um formulário e submete o formulário. O servidor devolve o formulário, com os dados do utilizador ainda presentes, e indica claramente no texto no topo da página que não foram aceites. O texto descreve a natureza do(s) erro(s) e fornece um link para o campo com o problema, de modo a que o utilizador possa navegar facilmente até ao mesmo e corrigir o problema.

Exemplo 2: Verificação de erros do lado do cliente com uma janela de pop-up

O utilizador introduz dados inválidos no campo de um formulário e tenta submeter o formulário. O scripting do lado do cliente detecta o erro, cancela a submissão e modifica o documento para fornecer uma mensagem de texto a descrever o erro, com links para o(s) campo(s) com o erro. O script também modifica as etiquetas dos campos com os problemas para os realçar.

Exemplo 3: Verificação de erros do lado do cliente sem janela de pop-up

Quando o utilizador submete o formulário, em vez de o conduzir a uma nova página, um script coloca automaticamente o foco num link de texto que indica "Ocorreram erros". O link conduz ao primeiro item de uma lista ordenada de mensagens de erro descritivas. Cada item de lista é um link para o controlo onde ocorreu o erro. E o erro inclui um link que permite voltar à lista ordenada de mensagens de erro descritivas. O processo é repetido conforme necessário.

Testes

Procedimento
  1. Preencha um formulário, deixando deliberadamente um campo obrigatório em branco, crie um erro de entrada noutro campo e submeta o formulário.

  2. Verifique se é fornecida uma mensagem de texto a identificar o campo onde faltam dados obrigatórios.

  3. Verifique se é fornecida uma mensagem de texto a identificar o campo com o erro de entrada.

  4. Verifique se existe um link para cada campo onde faltam dados obrigatórios a partir da mensagem de dados em falta.

  5. Verifique se existe um link para a lista de erros a partir da mensagem de erro.

Nota: O Critério de Sucesso 3.3.2 exige que, se for detectado um erro de entrada e se forem conhecidas sugestões de correcção que possam ser fornecidas sem comprometer a segurança ou finalidade do conteúdo, as sugestões sejam fornecidas ao utilizador.

Resultados Esperados
  • Se o passo 2 for verdadeiro, o passo 4 é verdadeiro.

  • Se o passo 3 for verdadeiro, o passo 5 é verdadeiro.


G140: Separar a informação e a estrutura da apresentação para permitir diferentes apresentações

Aplicabilidade

Qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é facilitar a interacção da tecnologia de apoio com o conteúdo, separando de forma lógica a codificação da estrutura da codificação da apresentação do conteúdo. A codificação da estrutura é a indicação dos elementos, tais como cabeçalhos, parágrafos, listas, tabelas, etc., e é efectuada utilizando funcionalidades da tecnologia reservadas para essa finalidade. Por contraste, a codificação da apresentação é a indicação dos efeitos de formatação, tais como tipo de letra, cor, tamanho, posição, margens, etc., e é igualmente suportada por funcionalidades da tecnologia.

Enquanto as funcionalidades da apresentação implicam visualmente a estrutura - os utilizadores podem determinar cabeçalhos, parágrafos, listas, etc. a partir das convenções de formatação utilizadas - estas funcionalidades não codificam a estrutura claramente o suficiente para a tecnologia de apoio interagir com a página de forma eficaz. Fornecer uma estrutura, uma funcionalidade e camadas de apresentação separadas permite à semântica sugerida pela formatação tornar-se determinada de forma programática através da camada da estrutura.

Seguir esta técnica permite aos agentes de utilizador:

  • Efectuar transformações de estrutura significativas com base na estrutura existente do conteúdo, tais como reordenar secções ou gerar uma lista de secções ou uma lista de links.

  • Suportar a interacção com o conteúdo com base nas características da estrutura que não podem ser determinadas pela tecnologia de apoio segundo apenas as informações de apresentação. Por exemplo, pode ser aconselhável fornecer interacções especiais com listas, indicando o número de itens de lista ou passando para o fim, mas isto só será possível se a estrutura da lista estiver codificada além da apresentação da lista.

  • Modificar a apresentação do conteúdo, substituindo as regras de apresentação alternativa ligadas às funcionalidades da estrutura.

Exemplos

Exemplo 1: HTML com CSS

Um documento HTML utiliza as funcionalidades da estrutura de HTML, tais como parágrafos, listas, cabeçalhos, etc., e evita funcionalidades de apresentação, tais como alterações de tipo de letra, sugestões de disposição, etc. O CSS é utilizado para formatar o documento com base nas respectivas propriedades de estrutura. Os atributos "class" bem trabalhados em HTML aumentam a semântica da marcação estrutural, se for necessário para permitir uma formação mais flexível com o CSS. As tecnologias de apoio podem substituir ou aumentar o CSS para modificar a apresentação ou ignorar o CSS e interagir directamente com a codificação da estrutura.

Exemplo 2: PDF com marcas

Um documento PDF consiste, essencialmente, no conteúdo incorporado nas informações de formatação. As informações sobre a estrutura são fornecidas numa secção separada do documento utilizando marcas tipo XML; a isto chama-se "PDF com marcas". As informações nestas etiquetas podem ser utilizadas pelas tecnologias de apoio para adaptar a apresentação ou compreender a estrutura sugerida pela apresentação.

Testes

Procedimento
  1. Verifique a codificação de um documento.

  2. Verifique se as informações sobre a estrutura e a funcionalidade são explicitamente fornecidas e separadas de forma lógica das informações sobre a apresentação.

Resultados Esperados
  • O passo 2 é verdadeiro.


G141: Organizar uma página utilizando cabeçalhos

Aplicabilidade

Páginas com conteúdo organizado em secções.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que as secções têm cabeçalhos que as identifiquem. O Critério de Sucesso 1.3.1 exige que os cabeçalhos sejam assinalados para poderem ser identificados de forma programática.

Em HTML, isto seria efectuado utilizando os elementos heading HTML (h1, h2, h3, h4, h5 e h6). Isto permite aos agentes de utilizador identificar automaticamente os cabeçalhos das secções. Outras tecnologias utilizam outras técnicas para identificar cabeçalhos. Para facilitar a navegação e compreensão de toda a estrutura do documento, os autores devem utilizar cabeçalhos correctamente encaixados (por ex., h1 seguido de h2, h2 seguido de h2 ou h3, h3 seguido de h3 ou h4, etc.).

Exemplos

Exemplo 1: Cabeçalhos utilizados para organizar uma página HTML

Uma página sobre técnicas de culinária utiliza um elemento h1 para todo o título, elementos h2 para as secções mais importantes sobre cozinhar com óleo versus cozinhar com manteiga e elementos h3 para subsecções sobre técnicas para cozinhar com óleo.

Código Exemplo:

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

Recursos

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

Testes

Procedimento
  1. Examine uma página com o conteúdo organizado em secções.

  2. Verifique se existe um cabeçalho para cada secção.

Resultados Esperados
  • O passo 2 é verdadeiro.


G142: Utilizar uma tecnologia que disponha de agentes de utilizador normalmente disponíveis que suportem zoom (ampliar/reduzir)

Aplicabilidade

Todas as tecnologias com capacidade de zoom (ampliar/reduzir) fornecida pelo agente de utilizador.

Esta técnica está relacionada com:

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

A funcionalidade de Zoom (ampliar/reduzir) no IE 7.0 nem sempre ajusta de forma uniforme quando é utilizado o posicionamento absoluto e a página tiver sido ajustada para um tamanho mais pequeno. O Microsoft Internet Explorer 7.0 suporta alterações de Zoom (ampliar/reduzir) e de Tamanho de Texto para tipos de letra definidos com %, picas ou tamanhos identificados.

O Opera 9 suporta Zoom (ampliar/reduzir).

O Firefox 2 e inferior suportam apenas alterações de tamanho de texto, mas podem alterar o tamanho dos tipos de letra pt e px, bem como %, picas e tamanhos identificados.

O Firefox 3 suporta alterações de zoom (ampliar/reduzir) e de tamanho de texto.

Descrição

O objectivo desta técnica é garantir que o conteúdo possa ser ajustado de forma uniforme, utilizando uma tecnologia Web suportada por agentes de utilizador que alteram o tamanho do texto através de uma ferramenta de Zoom (ampliar/reduzir).

O conteúdo criado em tecnologias que são suportadas por agentes de utilizador que podem ajustar o conteúdo de forma uniforme (ou seja, ampliar/reduzir o conteúdo) cumpre este Critério de Sucesso. Uma vez que esta técnica depende completamente da funcionalidade do agente de utilizador, é essencial efectuar testes com uma vasta variedade de agentes de utilizador.

Esta técnica exige que a função de zoom (ampliar/reduzir) preserve todas as relações de espaço na página e que toda a funcionalidade continue disponível.

Exemplos

  • O Internet Explorer 7 e o Opera 9 fornecem uma função de zoom (ampliar/reduzir) que ajusta o conteúdo da página HTML/CSS de forma uniforme.

  • Para permitir aos utilizadores redimensionar o texto, o Adobe Reader fornece uma ferramenta de ampliação que ajusta as páginas em PDF de forma uniforme.

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. Visualize o conteúdo num agente de utilizador.

  2. Amplie o conteúdo para 200%.

  3. Verifique se todo o conteúdo e toda a funcionalidade estão disponíveis.

Resultados Esperados
  • O passo 3 é verdadeiro.


G143: Fornecer uma alternativa em texto que descreva a finalidade do CAPTCHA

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer informações através da alternativa em texto que identifica o conteúdo não textual como um CAPTCHA . Estes testes implicam pedir ao utilizador para introduzir texto que é apresentado numa imagem obscurecida ou num ficheiro de áudio. A partir da alternativa em texto, o utilizador pode prever que o CAPTCHA requer a execução de uma tarefa e o tipo de tarefa de que se trata.

Quando uma versão alternativa de um CAPTCHA está disponível, a alternativa em texto deve incluir instruções sobre como encontrar a versão alternativa.

Exemplos

  • Um teste CAPTCHA pede ao utilizador para introduzir texto que é apresentado numa imagem obscurecida. A alternativa em texto intitula-se "Escrever a palavra na imagem".

  • Um teste CAPTCHA pede ao utilizador para introduzir texto que é reproduzido num ficheiro de áudio. A alternativa em texto intitula-se "Escrever os textos lidos no áudio".

Testes

Procedimento
  1. Remova, oculte ou disfarce o CAPTCHA.

  2. Substitua-o por uma alternativa em texto.

  3. Verifique se a alternativa em texto descreve a finalidade do CAPTCHA.

Resultados Esperados
  • O passo 3 é verdadeiro.


G144: Garantir que a Página Web inclua outro CAPTCHA que sirva a mesma finalidade utilizando uma modalidade diferente

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é reduzir as ocasiões em que um utilizador com uma incapacidade não consegue executar uma tarefa CAPTCHA. Uma vez que existem tarefas CAPTCHA alternativas que utilizam modalidades diferentes, há mais probabilidade de um utilizador conseguir executar uma das tarefas com êxito.

Exemplos

  • Uma página Web inclui um teste CAPTCHA que tem de ser executado com êxito antes de o utilizador poder avançar para o passo seguinte de um processo. A página inclui uma tarefa visual, tal como escrever palavras apresentadas numa imagem, e uma tarefa de áudio, tal como escrever textos lidos num ficheiro de áudio. Um utilizador com incapacidades de leitura que não consiga passar no CAPTCHA de áudio pode conseguir passar no CAPTCHA de vídeo.

  • O comentário num blogue inclui um CAPTCHA visual que tem de ser executado antes de um utilizador poder submeter comentários. Além do CAPTCHA visual, inclui um CAPTCHA com um campo de formulário que pergunta: "Quanto é dois mais sete?" com um campo de entrada de texto que permite aos utilizadores introduzirem a resposta correcta.

Testes

Procedimento

Para cada CAPTCHA numa página Web:

  1. Verifique se a página Web contém outro CAPTCHA para a mesma finalidade, mas utilizando uma modalidade diferente.

Resultados Esperados
  • O passo 1 é verdadeiro.


G145: Garantir uma relação de contraste de, no mínimo, 3:1 entre o texto (e imagens de texto) e o fundo por detrás do texto

Aplicabilidade

Qualquer tecnologia que produza saída de dados visuais.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores possam ler texto apresentado sobre um plano de fundo. Esta técnica diminui o requisito de relação de contraste de 4.5:1 para texto com, no mínimo, um tamanho 18 (se não estiver a negrito) ou, no mínimo, um tamanho 14 (se estiver a negrito).

Se o fundo for de uma só cor (todo preto ou todo branco), então a relação de contraste do texto ampliado pode ser mantida, garantindo que cada letra do texto tem uma relação de contraste de 3:1 com o fundo.

Se o fundo ou as letras variarem em luminescência relativa (ou tiverem um padrão), então o fundo em torno das letras pode ser escolhido ou escurecido, para que as letras mantenham uma relação de contraste de 3:1 com o respectivo fundo, mesmo se não tiverem essa relação de contraste com o restante fundo.

A relação de contraste pode, por vezes, ser mantida, alterando a luminescência relativa das letras à medida que a luminescência relativa do fundo se altera na página.

Outro método é fornecer uma auréola em torno do texto, com a relação de contraste necessária se a imagem ou cor de fundo não forem suficientemente diferentes em termos de luminescência relativa.

Exemplos

  • É escolhido um fundo preto para que possam ser utilizadas letras em cores claras, compatíveis com o logótipo da empresa.

    O texto ampliado é colocado sobre uma imagem do campus universitário. Visto que a imagem tem uma grande variedade de cores e partes escuras, a área por detrás do texto tem uma tonalidade branca para que a imagem fique muito esbatida e a parte mais escura seja suficientemente clara para manter uma relação de contraste de 3:1 com o texto preto escrito sobre a imagem.

Recursos

(actualmente, não existe nenhuma indicada)

Testes

Procedimento
  1. 1. Meça a luminescência relativa de cada letra (a não ser que sejam todas uniformes) utilizando a fórmula:

    • L = 0,2126 * R + 0,7152 * G + 0,0722 * B em que R, G e B são definidos como:

      • se RsRGB <= 0,03928 então R = RsRGB/12,92 ou R = ((RsRGB+0,055)/1,055) ^ 2,4

      • se GsRGB <= 0,03928 então G = GsRGB/12,92 ou G = ((GsRGB+0,055)/1,055) ^ 2,4

      • se BsRGB <= 0,03928 então B = BsRGB/12,92 ou B = ((BsRGB+0,055)/1,055) ^ 2,4

      e RsRGB, GsRGBe BsRGB são definidos como:

      • RsRGB = R8bit/255

      • GsRGB = G8bit/255

      • BsRGB = B8bit/255

      O carácter "^" é o operador de exponenciação.

    Nota: Para letras pixelizadas, utilize o valor de luminescência relativa que se encontra dois pixéis para dentro a partir do limite da letra.

  2. Meça a luminescência relativa dos pixéis do plano de fundo imediatamente junto à letra, utilizando a mesma fórmula.

  3. Calcule a relação de contraste utilizando a seguinte fórmula.

    • (L1 + 0,05) / (L2 + 0,05), em que

  4. Verifique se a relação de contraste é igual ou superior a 3:1

Resultados Esperados
  • O passo 4 é verdadeiro.


G146: Utilizar disposições líquidas

Aplicabilidade

Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é poder apresentar conteúdo sem introduzir barras de deslocamento horizontais, utilizando técnicas de disposição que se adaptem ao espaço horizontal disponível. As disposições líquidas definem áreas de disposição que são redimensionadas com o texto e que refluem conforme necessário para acomodar a apresentação no ecrã. Embora a disposição exacta varie, a relação dos elementos e da ordem de leitura mantêm-se as mesmas. Esta é uma forma eficaz de criar concepções que tenham uma boa apresentação em diferentes dispositivos e para utilizadores com diferentes preferências de tamanho de letra.

Os princípios básicos das disposições líquidas são:

  1. Definir o tamanho das áreas de disposição utilizando unidades que irão fazer com que a área seja ajustada de acordo com o texto, ou seja, aumente ou diminua à medida que o texto aumenta ou diminui;

  2. Colocar as áreas de disposição como uma linha de caixas flutuantes adjacentes, que se moldam a novas linhas conforme necessário, tal como as palavras se moldam num parágrafo.

As disposições líquidas complexas podem ser alcançadas encaixando áreas de disposição, criando assim disposições líquidas localizadas numa disposição líquida maior. Até as disposições líquidas simples necessitam de uma concepção delicada para alcançar resultados com bom aspecto numa vasta variedade de tamanhos de texto, mas as disposições líquidas com uma boa concepção podem ser a concepção da página mais eficaz.

Exemplos

Exemplo 1: Disposição líquida simples em HTML e CSS

O seguinte exemplo simples utiliza HTML e CSS para criar uma disposição líquida. As três colunas ajustam o respectivo tamanho à medida que o tamanho do texto é ajustado. Quando a largura horizontal total exceder a largura disponível das colunas, a última coluna molda-se para ser posicionada abaixo, em vez de ao lado, da coluna anterior. O tamanho da letra pode ser aumentado sem cortar ou introduzir deslocamento horizontal até a palavra mais extensa deixar de caber numa coluna. Este exemplo em particular utiliza tamanhos de percentagem para as colunas e define-as como áreas flutuantes utilizando a propriedade "flutuar".

Código Exemplo:

                                                             
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example of Basic Liquid Layout</title>
<style type="text/css">

 .column
	{
	border-left: 1px solid green;
	padding-left:1%;
	float: left;
	width: 32%;
	}
#footer
	{
	border-top: 1px solid green;
	clear: both;
	}
</style>

</head>
<body>
   <h1>WCAG Example</h1>
   <h2>Text in Three Columns</h2>
      <div title="column one" class="column">
        <h3>Block 1</h3>
        <p> The objective of this technique is to be able to present content 
            without introducing horizontal scroll bars by using layout 
            techniques that adapt to the available horizontal space.
        </p>
      </div>

      <div title="column two" class="column">
        <h3>Block 2</h3>
        <p> This is a very simple example of a page layout that adapts as the
            text size changes.
        </p>
      </div>

      <div title="column three" class="column">
      <h3>Block 3</h3>
        <p> For techniques that support more complex page layouts, see the
            Resources listed below.
        </p>
      </div>

      <p id="footer">Footer text</p>
</body>
</html> 

Recursos

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

Testes

Procedimento
  1. Visualize o conteúdo num agente de utilizador.

  2. Aumente o tamanho do texto para 200%.

  3. Verifique se todo o conteúdo e toda a funcionalidade estão disponíveis sem deslocamento horizontal.

Resultados Esperados
  • O passo 3 é verdadeiro.


G148: Não especificar a cor de fundo, não especificar a cor do texto, e não utilizar funcionalidades de tecnologia que alterem essas predefinições

Aplicabilidade

Qualquer tecnologia em que o texto e a cor do fundo sejam especificados em separado e os browsers possam controlar as cores predefinidas.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que os utilizadores possam ler texto apresentado sobre um plano de fundo. Com esta técnica, o autor evita ter de fazer qualquer contraste, simplesmente não especificando a cor do texto e não especificando o fundo. Como resultado, as cores de ambos são completamente determinadas pelo agente de utilizador.

Exemplos

Exemplo 1

Exemplo 1: O autor não especifica nem a cor do texto nem o fundo. Também não utiliza o CSS. Como resultado, o utilizador pode predefinir o seu browser para fornecer as cores e contrastes que melhor satisfaçam as suas necessidades.

Recursos

Testes

Procedimento
  1. Veja todos os locais onde a cor do texto pode ser especificada.

  2. Verifique se a cor do texto não está especificada.

  3. Veja todas as áreas onde a cor de fundo ou a imagem utilizada como fundo podem ser especificadas.

  4. Verifique se não existe nenhuma cor de fundo ou imagem utilizada como fundo especificada.

Resultados Esperados
  • Os passos 2 e 4 são verdadeiros.


G149: Utilizar componentes de interface de utilizador que são realçados pelo agente de utilizador quando recebem o foco

Aplicabilidade

Todas as tecnologias com realce de foco fornecido pelo agente de utilizador.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que o componente que recebe o foco pode ser visualmente identificado pelo utilizador dependendo do suporte do agente de utilizador. É comum os agentes de utilizador realçarem controlos normais de alguma forma quando recebem o foco. Os agentes de utilizador em conformidade com as UAAG fazem-no quando cumprem o ponto de verificação 10.2 "Realçar selecção, foco do conteúdo, elementos activados, links visitados". Quando os autores utilizam controlos normais para os quais o agente de utilizador fornece suporte, os utilizadores são informados da localização do foco de uma forma normal e previsível.

Exemplos

  • Quando os campos de entrada de texto html recebem foco, os browsers apresentam uma barra vertical intermitente no ponto de inserção no campo de texto.

  • Quando os links html recebem foco, ficam rodeados por um rectângulo tracejado de realce de foco.

Recursos

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

Testes

Procedimento

Para cada componente que pode receber foco existente na página Web:

  1. Defina o foco para o controlo.

  2. Verifique se o agente de utilizador realçou o controlo de alguma forma.

Resultados Esperados
  • O passo 2 é verdadeiro.


G150: Fornecer alternativas baseadas em texto para conteúdo composto por apenas áudio em directo

Aplicabilidade

Todas as tecnologias que apresentem informações compostas por apenas áudio em directo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores que não conseguem ouvir possam aceder a transmissões de áudio em tempo real. É mais difícil criar alternativas em tempo real exactas, uma vez que existe pouco tempo para corrigir os erros, ouvir uma segunda vez ou consultar alguém para se ter a certeza de que as palavras foram reproduzidas correctamente. É também mais difícil simplificar ou parafrasear informação se esta fluir muito rapidamente.

Estão disponíveis técnicas de entrada de dados por digitação de texto em tempo real, utilizando tecnologias de digitação rápida e de estenografia. A reprodução de fala para texto (em que a pessoa ouve e, em seguida, reproduz a fala cuidadosamente para um computador programado para a sua fala) é utilizada actualmente para serviços de transmissão telefónicos, podendo ser utilizada no futuro para legendagem. No futuro, será possível a fala para texto com correcções.

Exemplos

  • Uma emissora de rádio utiliza serviços de legendagem baseados na Web para fornecer alternativas para eventos desportivos em directo; a saída de dados do serviço é incorporada numa janela da página Web que também inclui um controlo da sequência de áudio.

Testes

Procedimento
  1. Verifique se existe um procedimento e uma política para garantir que as alternativas em texto são fornecidas em tempo real.

Resultados Esperados
  • O passo 1 é verdadeiro.


G151: Fornecer um link para uma transcrição de texto de um comunicado ou script preparados se o script for seguido

Aplicabilidade

Todas as tecnologias que apresentem informações compostas por apenas áudio em directo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma transcrição ou script se o conteúdo de áudio em directo estiver a seguir um script definido. Uma vez que é preparado antecipadamente, o script pode ser mais preciso e completo do que a transcrição em directo. Contudo, o script não estará sincronizado com o áudio à medida que é reproduzido. O áudio em directo não deve desviar-se do script para esta técnica.

Com esta técnica, é fornecido um link para a transcrição ou script que deve estar em conformidade com as WCAG 2.0, e que pode ser incluído noutra localização na mesma página Web ou noutro URI.

Exemplos

  • Uma peça de teatro em directo na rádio de um grupo de teatro alternativo está a ser transmitida para a Internet. Uma vez que os actores se mantêm completamente fiéis a um script definido, e o orçamento para o programa é pequeno, os produtores fornecem um link (com a autorização do autor da peça) para o script da peça em HTML.

  • Um membro do governo emite um discurso importante na Internet. É disponibilizada uma transcrição do discurso no sítio da Web quando o discurso começa.

Testes

Procedimento
  1. Verifique se existe um link que aponte directamente para o script ou transcrição.

  2. Verifique se o áudio em directo segue o script.

  3. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder às outras versões.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G152: Definir imagens gif animadas para deixar de estar em modo intermitente após n ciclos (em menos de 5 segundos)

Aplicabilidade

Qualquer tecnologia que suporte imagens gif animadas (GIF89a).

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que as imagens gif animadas deixam de estar em modo intermitente em menos de cinco segundos. Existem três aspectos da concepção das imagens gif animadas que funcionam em conjunto para determinar o período de tempo em que a imagem está em modo intermitente (ou, de outra forma, em modo de animação):

  • o número de frames existente na imagem, que corresponde às imagens discretas na sequência de animação;

  • a velocidade dos frames, que corresponde à duração de apresentação de cada imagem;

  • o número de repetições, que corresponde ao número de vezes que é reproduzida toda a animação.

Simplificando, a duração da animação corresponde ao número de frames vezes a velocidade dos frames vezes o número de repetições. Por exemplo, uma imagem simples em modo intermitente com 2 frames, uma velocidade de frames de 0,5 segundos e 3 repetições terá uma duração de (2 x 0,5 x 3) segundos, ou exactamente 3 segundos.

Muitas imagens gif animadas têm uma velocidade de frames constante, i.e., o período de tempo em que cada frame é apresentado é o mesmo. Contudo, é possível definir uma velocidade de frames diferente para cada frame, para permitir que determinados frames sejam apresentados durante mais tempo do que outros. Neste caso, a duração da animação corresponde à soma das velocidades dos frames vezes o número de repetições. Por exemplo, uma imagem simples com dois frames, sendo que o primeiro é apresentado durante 0,75 segundos e o segundo durante 0,25 segundos, e três repetições terá uma duração de ((0,75 + 0,25) x 3) segundos, ou exactamente 3 segundos.

Para uma imagem deixar de estar em modo intermitente em menos de cinco segundos, uma das três variáveis tem de ser ajustada. Geralmente, define-se o número de repetições para cinco segundos divididos pelo resultado do número de frames vezes a velocidade dos frames (ou pela soma da velocidade dos frames). Limite este número até ao número inteiro mais próximo, não arredonde para o número inteiro seguinte, para garantir que a imagem irá parar em menos de cinco segundos.

Mesmo que uma só repetição resulte em mais de cinco segundos de animação, tem de ser ajustado um dos restantes factores. Reduza o número de frames da imagem ou aumente a velocidades dos frames. Tenha cuidado ao aumentar a velocidade dos frames para que a imagem resultante não falhe o requisito de não exceder os limites de flash universal ou flash vermelho; é muito importante ter isto em atenção, especialmente para imagens grandes.

Exemplos

  • Uma imagem simples em modo intermitente. Uma imagem tem 2 frames, uma velocidade de frames de 0,5 segundos e 3 repetições. A animação tem uma duração de (2 x 0,5 x 3) segundos, ou exactamente 3 segundos e, por conseguinte, cumpre os requisitos do critério de sucesso.

Testes

Procedimento
  1. Apresente uma imagem gif animada e cronometre o respectivo tempo de duração.

  2. Em alternativa, utilize um editor de imagens para determinar o número de frames, a velocidade dos frames e o número de repetições. Calcule o resultado do número de frames vezes a velocidade dos frames vezes o número de repetições. Se a velocidade dos frames não for uniforme, calcule o resultado da soma da velocidade dos frames vezes o número de repetições.

  3. Utilizando qualquer um dos métodos, a duração da animação deve ser inferior ou igual a 5 segundos.

Resultados Esperados
  • O passo 3 é verdadeiro.


G153: Tornar o texto mais fácil de ler

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que o texto da página Web não seja difícil de ler. Os utilizadores com incapacidades que dificultam a descodificação de palavras e orações terão, provavelmente, dificuldades em ler e compreender texto complexo. Se o texto não necessitar de uma capacidade de leitura mais avançada do que o terceiro ciclo do ensino básico, não serão necessários suplementos ou versões alternativas.

Para reduzir a complexidade do texto:

  • Crie um tópico único ou subtópico por parágrafo.

  • Utilize as formas de oração mais simples consistentes com a finalidade do conteúdo. Por exemplo, a forma de oração mais simples no inglês consiste em Sujeito-Verbo-Complemento, como em "John hit the ball" (O John atirou a bola) ou "The Web site conforms to WCAG 2.0" (O sítio da Web está em conformidade com as WCAG 2.0).

  • Utilize orações que não sejam mais longas do que o comprimento normalmente aceite para o ensino secundário (Nota: Em inglês são 25 palavras).

  • Considere dividir as orações mais longas em duas.

  • Utilize orações que não incluam mais de duas conjunções.

  • Indique relações lógicas entre frases, orações , parágrafos ou secções do texto.

  • Evite utilizar jargão e calão profissional, e outros termos com um significado especializado, que podem não ser claros para as pessoas.

  • Substitua palavras extensas ou invulgares por termos mais curtos e comuns.

  • Remova palavras redundantes, ou seja, palavras que não alterem o significado da oração.

  • Utilize substantivos simples ou sintagmas nominais pequenos.

  • Remova palavras ou frases complexas que podem ser substituídas por palavras mais comuns sem alterar o significado da oração.

  • Utilize listas numeradas ou com marcas de item, em vez de parágrafos que incluam séries longas de palavras ou frases separadas por vírgulas.

  • Faça referências claras a pronomes e referências a outros pontos no documento.

  • Utilize a voz activa para documentos escritos em inglês e mais alguns idiomas ocidentais, a menos que exista algum motivo específico para utilizar construções na passiva. As orações na voz activa costumam ser mais curtas e mais fáceis de compreender do que as orações na voz passiva.

  • Utilize tempos verbais de forma consistente.

  • Utilize nomes e etiquetas de forma consistente.

Exemplos

  • As páginas de ajuda para uma aplicação Web são escritas numa linguagem que não é mais avançada do que o terceiro ciclo do ensino básico.

Testes

Procedimento
  1. Avalie a legibilidade do texto.

  2. Verifique se o texto necessita de uma capacidade de leitura menos avançada do que o terceiro ciclo do ensino básico.

Resultados Esperados
  • O passo 2 é verdadeiro.


G155: Fornecer uma caixa de verificação para além de um botão "Submeter"

Aplicabilidade

Qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma caixa de verificação que os utilizadores têm de seleccionar para indicar que reviram os dados e que estes estão prontos para serem submetidos. Isto é importante quando a natureza da transacção é tal que pode não ser reversível se forem posteriormente detectados erros de entrada de dados, ou se o resultado de uma acção for a eliminação desses dados. O autor fornece uma caixa de verificação que não está seleccionada quando a página é carregada, que inclui uma etiqueta a indicar "Confirmo que os dados estão correctos e prontos para serem submetidos" ou "Confirmo que pretendo eliminar estes dados". A caixa de verificação deve estar junto ao botão Submeter para o utilizador poder vê-la durante o processo de submissão. Se a caixa de verificação não estiver seleccionada quando o formulário for submetido, os dados são rejeitados e é pedido ao utilizador que os reveja, seleccione a caixa de verificação e volte a submetê-los. Os dados só serão aceites e a transacção processada se a caixa de verificação estiver seleccionada.

Esta caixa de verificação ajuda a proteger contra as consequências de uma submissão acidental do formulário, e também serve para pedir ao utilizador que se certifique de que introduziu os dados correctamente. Isto é mais seguro do que simplesmente colocar uma etiqueta no botão Submeter a indicar "Os dados estão correctos. Submeter". Fornecer a caixa de verificação como um controlo separado do botão Submeter obriga o utilizador a verificar novamente, uma vez que tem de seleccionar a caixa de verificação e activar o botão Submeter para que a transacção possa prosseguir. Assim, este é um mecanismo para rever, confirmar e corrigir as informações antes de concluir a submissão.

Nota: Quando os utilizadores submetem as informações sem seleccionar a caixa de verificação, não devem perder as informações introduzidas quando regressarem ao formulário para voltarem a submetê-lo.

Exemplos

  • Um serviço bancário online permite aos utilizadores transferir dinheiro entre contas em diferentes moedas. Uma vez que as taxas de câmbio estão sempre a mudar, o dinheiro não pode ser novamente trocado com a mesma taxa se o utilizador detectar um erro nos dados depois de a transacção ser processada. Além dos campos "transferir de", "transferir para" e "montante", existe uma caixa de verificação com uma etiqueta "Confirmei que o montante que pretendo transferir está correcto". Se esta caixa de verificação não estiver seleccionada quando o utilizador submeter o formulário, a transacção não é processada e o utilizador é notificado. Se a caixa de verificação estiver seleccionada, a transacção (irreversível) é processada.

  • Um sistema de pagamento online armazena informações da conta bancária do utilizador de modo a processar os pagamentos. O registo de novas contas e a verificação da sua titularidade é um processo complicado para os utilizadores. Existe a possibilidade de eliminar contas antigas, mas se uma conta for eliminada acidentalmente, será difícil restabelecê-la, e o histórico de transacções dessa conta será perdido. Por conseguinte, em páginas que permitam aos utilizadores eliminar contas, existe uma caixa de verificação com a etiqueta "Confirmo que pretendo eliminar esta conta". Se esta caixa de verificação não estiver seleccionada quando o utilizador submeter o formulário, a conta não é eliminada e o utilizador recebe uma mensagem de erro. A conta só é eliminada se a caixa de verificação estiver seleccionada.

  • Um formulário de saída num sítio da Web de compras inclui um formulário que recolhe informações sobre a encomenda, o envio e a factura. Depois de submeter o formulário, o utilizador é conduzido a uma página onde é apresentado um resumo das informações submetidas para sua revisão. Abaixo do resumo, é apresentada uma caixa de verificação com a etiqueta "Revi e confirmei que os dados estão correctos". O utilizador tem de seleccionar a caixa de verificação e activar um botão "concluir encomenda" para concluir a transacção.

Testes

Procedimento

Para páginas de entrada de dados por parte do utilizador que originam transacções irreversíveis:

  1. Verifique se, além do botão Submeter, é fornecida uma caixa de verificação a indicar a confirmação dos dados ou da acção por parte do utilizador.

  2. Verifique se, no caso de a caixa de verificação não estar seleccionada quando o formulário é submetido, os dados são rejeitados e é pedido ao utilizador que reveja os dados, seleccione a caixa de verificação e volte a submetê-los.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G156: Utilizar uma tecnologia que disponha de agentes de utilizador normalmente disponíveis que possam alterar o primeiro plano e o fundo dos blocos de texto

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

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

A maioria dos browsers permite ao utilizador mudar as definições de cor para substituir os esquemas de cor HTML e CSS do autor da Web. Isto inclui IE, todas as versões do Firefox, Mozilla e Opera a partir da versão 6.

Quando as cores especificadas são substituídas no Firefox e Netscape, a maioria dos menus pendentes e das caixas de pop-up Javascript tornam-se inutilizáveis. As caixas de pop-up ficam com um fundo transparente, sobrepondo o texto da caixa ao texto da página, e os menus pendentes ficam transparentes ou com um fundo cinzento-escuro.

O IE 6 não irá substituir cores de fundo no browser, a menos que também tenha sido escolhida a mesma cor de fundo nas definições do sistema.

Descrição

Algumas pessoas com incapacidades cognitivas necessitam de combinações de cores específicas do texto em primeiro plano e do fundo para os ajudar a compreender correctamente os conteúdos da página Web. Os browsers mais conhecidos fornecem a opção de alterar globalmente as definições de cor do browser. Neste caso, as cores seleccionadas pelo utilizador substituem as cores de primeiro plano e de fundo especificadas pelo autor da Web.

Para cumprir este critério de sucesso, o autor da Web irá conceber a página de modo a funcionar com browsers que tenham estes controlos, e o autor não os irá substituir.

Tenha em atenção que a substituição das cores de primeiro plano e de fundo de todo o texto numa página pode ocultar sinais de aviso visuais referentes à distribuição e organização da página Web, dificultando a sua compreensão e utilização. Esta técnica pode não ser apropriada quando são utilizadas cores de fundo para delinear áreas da página. Esta técnica pode ser apropriada para tecnologias e agentes de utilizador que não alteram as cores das margens quando as cores de fundo são substituídas. Se forem utilizadas cores de fundo para delinear áreas da página, pode ser utilizado "C23: Especificar o texto e as cores de fundo do conteúdo secundário, tais como faixas, funcionalidades e navegação em CSS e não especificar texto e cores de fundo do conteúdo principal (CSS) " para permitir ao utilizador controlar as cores do texto principal, mantendo ao mesmo tempo a estrutura visual da página Web.

Exemplos

  • É concebida uma página Web utilizando HTML e CSS para especificar as cores de primeiro plano e de fundo. O utilizador define as suas cores no Internet Explorer 7 e pode visualizar o conteúdo com as cores de primeiro plano e de fundo escolhidas.

  • É concebida uma página Web utilizando HTML e CSS. Existe um link na página para as instruções sobre como definir cores em vários browsers.

Recursos

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

Testes

Procedimento
  1. Abra a página Web num browser que permita aos utilizadores alterar as cores do conteúdo HTML.

  2. Altere as cores de primeiro plano e de fundo nas definições do browser para serem diferentes das especificadas no conteúdo.

  3. Regresse à página e verifique se as novas cores de primeiro plano e de fundo especificadas no browser substituem as cores especificadas no conteúdo.

Resultados Esperados
  • O passo 3 é verdadeiro.


G157: Incorporar um serviço de legendagem de áudio numa página Web

Aplicabilidade

Todas as tecnologias que apresentem informações compostas por apenas áudio em directo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é utilizar um serviço de legendagem em tempo real para fornecer uma versão em texto do conteúdo de áudio em directo. Estes serviços utilizam uma pessoa com formação que ouve o que está a ser dito e utiliza um teclado especial para introduzir o texto com apenas um ligeiro atraso. Permitem capturar um evento em directo com um elevado nível de exactidão, bem como introduzir notas em áudio não falado, que são essenciais para a compreensão do evento. A janela que contém o texto da legenda está disponível na mesma página Web do conteúdo de áudio em directo.

Exemplos

  • Uma emissora de rádio online fornece uma janela na sua página Web para os serviços de notícias. As reportagens em directo, especialmente as reportagens de incidentes inesperados, são transcritas por um serviço de legendagem em tempo real e apresentadas na janela.

  • Um serviço de conferência ou de partilha de ecrã inclui uma janela com uma transcrição em tempo real da apresentação oral. Isto é conseguido através de uma organização antecipada com um serviço de legendagem de áudio-teleconferência por retransmissor remoto. O serviço de Web conferência ou de partilha de ecrã online necessita de ser concebido pensando nesta possível utilização, uma vez que a utilização de uma janela separada para o texto em directo seria uma barreira significativa para a utilização.

  • Uma audioconferência recorrente utiliza um utilitário de levantar a mão para ajudar na colocação em fila. Para facilitar a utilização deste produto em conjunto com um serviço de legendagem de conferência por retransmissor online, o utilitário de colocação em fila foi concebido para ser totalmente operacional numa janela estreita. Para um maior aperfeiçoamento, foi criado um sítio da Web para apresentar as duas janelas numa única página Web.

Recursos

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

Testes

Procedimento
  1. Verifique se a página Web inclui uma janela associada ao conteúdo de áudio em directo.

  2. Verifique se o texto do conteúdo de áudio em directo é apresentado na janela com menos de 30 segundos de atraso.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G158: Fornecer uma alternativa para multimédia baseada no tempo para conteúdo composto por apenas áudio

Aplicabilidade

Técnica geral. Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer uma forma alternativa acessível de apresentar as informações numa apresentação composta por apenas áudio.

Numa apresentação composta por apenas áudio, as informações são apresentadas de várias formas, incluindo diálogo e sons (tanto verdadeiros como artificiais). Para apresentar as mesmas informações de uma forma acessível, esta técnica implica a criação de um documento que conte a mesma história e apresente as mesmas informações do conteúdo composto por apenas áudio pré-gravado. Nesta técnica, o documento funciona como descrição extensa do conteúdo e inclui todos os diálogos importantes, bem como descrições dos sons de fundo, etc., que fazem parte da história.

Se tiver sido utilizado um script verdadeiro para criar o conteúdo composto por apenas áudio, este pode ser um bom começo. Contudo, na produção e edição, o conteúdo varia, nalguns aspectos, do script. Para esta técnica, o script original teria de ser corrigido para fazer corresponder o diálogo ao que realmente acontece no formato editado final da apresentação do áudio.

Exemplos

  • Uma transcrição via podcast inclui uma descrição de novas funcionalidades numa versão de software recente. Envolve dois interlocutores a falar informalmente sobre as novas e actualizadas funcionalidades e a descrever a forma como são utilizadas. Um dos interlocutores trabalha a partir de uma lista de perguntas que foi utilizada para fazer um plano geral da conversa antes da gravação. Depois de concluída a gravação, o plano geral é editado e completado para corresponder ao diálogo, etc. A transcrição resultante é depois disponibilizada no sítio da Web dos interlocutores juntamente com o ficheiro composto por apenas áudio. A alternativa em texto que identifica o conteúdo composto por apenas áudio indica: "Episódio 42: Versão Zap 12 (segue-se a transcrição do texto)" e o link para a transcrição é fornecido imediatamente a seguir ao conteúdo composto por apenas áudio.

Recursos

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

Testes

Procedimento
  1. Visualize o conteúdo composto por apenas áudio enquanto consulta a alternativa para multimédia baseada no tempo.

  2. Verifique se o diálogo na transcrição corresponde ao diálogo e informações apresentados na apresentação composta por apenas áudio.

  3. Se o áudio incluir várias vozes, verifique se a transcrição identifica quem está a falar durante todo o diálogo.

  4. Verifique se, no mínimo, uma das seguintes afirmações é verdadeira:

    1. A própria transcrição pode ser determinada de forma programática a partir da alternativa em texto para o conteúdo composto por apenas áudio.

    2. A transcrição é consultada a partir da alternativa em texto determinada de forma programática para o conteúdo composto por apenas áudio.

  5. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder às outras versões.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G159: Fornecer uma alternativa para multimédia baseada no tempo para conteúdo composto por apenas vídeo

Aplicabilidade

Técnica geral. Aplica-se a todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer uma forma alternativa acessível de apresentar as informações numa apresentação composta por apenas vídeo.

Numa apresentação composta por apenas vídeo, as informações são apresentadas de várias formas, incluindo animação, texto ou gráficos, cenário, acções e expressões das pessoas, animais, etc. Para apresentar as mesmas informações de uma forma acessível, esta técnica implica a criação de um documento que conte a mesma história e apresente as mesmas informações do conteúdo composto por apenas vídeo pré-gravado. Nesta técnica, o documento funciona como descrição extensa do conteúdo e inclui todas as informações importantes, bem como descrições do cenário, das acções, expressões, etc., que fazem parte da apresentação.

Se tiver sido utilizado um guião para o conteúdo composto por apenas vídeo, este pode ser um bom começo. Contudo, na produção e edição, a versão final varia muitas vezes, nalguns aspectos, do guião. Para utilizar o guião, este teria de ser corrigido para corresponder à forma editada final da apresentação composta por apenas vídeo.

Exemplos

  • Uma animação mostra como montar um trabalho feito em madeira. Não existe áudio, mas a animação inclui uma série de números para representar cada passo do processo, bem como setas e realces "imagem na imagem" que ilustram como é executada a montagem. Também inclui pequenas cenas que ilustram o que irá acontecer se a montagem for mal feita. Uma alternativa em texto que identifica o conteúdo composto por apenas vídeo indica: "Vídeo de montagem de uma caixa de pão (segue-se a descrição em texto)", e a descrição em texto do vídeo inclui uma descrição em texto completa de cada passo apresentado no vídeo.

Recursos

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

Testes

Procedimento
  1. Visualize o conteúdo composto por apenas vídeo enquanto consulta a alternativa para multimédia baseada no tempo.

  2. Verifique se as informações da transcrição são as mesmas da apresentação composta por apenas vídeo.

  3. Se o vídeo incluir várias pessoas ou personagens, verifique se a transcrição identifica que pessoa ou personagem estão associadas a que acção descrita.

  4. Verifique se, no mínimo, uma das seguintes afirmações é verdadeira:

    1. A própria transcrição pode ser determinada de forma programática a partir da alternativa em texto para o conteúdo composto por apenas vídeo.

    2. A transcrição é consultada a partir da alternativa em texto determinada de forma programática para o conteúdo composto por apenas vídeo.

    3. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder às outras versões.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G160: Fornecer versões em língua gestual das informações, ideias e processos que têm de ser compreendidos para utilizar o conteúdo

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Para algumas pessoas surdas ou com determinadas incapacidades cognitivas, a língua gestual pode ser a sua primeira língua. Uma versão em língua gestual da página poderá ser mais fácil de compreender do que uma versão em linguagem escrita. O objectivo desta técnica é fornecer versões em língua gestual do conteúdo que ajudem os utilizadores de língua gestual a compreender texto difícil que descreva conceitos ou processos. O conteúdo em língua gestual é fornecido além o texto.

Uma vez que se trata de conteúdo suplementar (e não língua gestual para fala no conteúdo) deveria ser visualizado em separado do conteúdo, não tendo necessariamente de ser sincronizado. Embora possam existir ocasiões em que tal seja útil, não é obrigatório.

Para disponibilizar a versão em língua gestual com os restantes conteúdos da página Web, o vídeo pode ser incorporado na página Web directamente ou a página Web pode incluir um link que apresente um leitor de vídeo numa janela separada. A versão em língua gestual também pode ser fornecida através de um link para uma página Web separada que apresenta o vídeo.

A língua gestual é uma língua visual e a três dimensões que utiliza as mãos, os braços, os ombros, a cabeça, o rosto, os lábios e a língua do intérprete. Para os espectadores compreenderem o que está a ser interpretado, o vídeo tem de gravar a língua gestual completamente. Em geral, o intérprete deve estar o mais próximo possível da câmara sem arriscar cortes (tais como as mãos saírem do vídeo).

As informações sobre como encontrar intérpretes de língua gestual são apresentadas na secção de recursos abaixo.

Nota 1: Se a sequência de vídeo for muito curta, o intérprete de língua gestual será indiscernível. Ao criar uma sequência de vídeo que inclua um vídeo de um intérprete de língua gestual, certifique-se de que existe um mecanismo para reproduzir a sequência de vídeo em todo o ecrã na tecnologia de conteúdo suportada por acessibilidade. Caso contrário, certifique-se de que a parte destinada ao intérprete no vídeo é ajustável ao tamanho que deveria ter se toda a sequência de vídeo fosse no ecrã inteiro.

Nota 2: Uma vez que a língua gestual não é, normalmente, uma versão com gestos da língua escrita, o autor tem de escolher que língua gestual deve incluir. Normalmente, será utilizada a língua gestual do público principal. Se se destinar a vários públicos, podem ser utilizadas várias línguas. Para obter informações sobre várias línguas gestuais, consulte a técnica de tipo aconselhada.

Exemplos

  • As informações sobre como contactar o suporte ou enviar perguntas sobre um sítio da Web são fornecidas num vídeo em língua gestual, bem como em texto.

  • As páginas de ajuda para uma aplicação Web são fornecidas em língua gestual, bem como em texto.

  • O sítio da Web de uma empresa fornece vídeos em língua gestual a descrever os detalhes técnicos de cada produto.

  • Um sítio da Web religioso inclui a Língua Gestual Americana entre as diferentes línguas nas quais está disponível o sítio da Web.

Recursos

Testes

Procedimento
  1. Identifique texto que apresente ideias ou processos que têm de ser compreendidos para utilizar o conteúdo.

  2. Verifique se existem suplementos em língua gestual para o texto disponíveis no conteúdo ou através de links no conteúdo.

  3. Verifique se os suplementos em língua gestual mostram os conceitos ou processos apresentados no texto.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G161: Fornecer uma função de procura para ajudar os utilizadores a encontrar o conteúdo

Aplicabilidade

Todas as tecnologias que incluam formulários.

Esta técnica está relacionada com:

Descrição

Fornecer uma função de procura que procura páginas Web é uma estratégia de concepção que oferece aos utilizadores uma forma de encontrar conteúdo. Os utilizadores podem localizar conteúdo, procurando palavras ou frases específicas, sem necessitarem de compreender ou de navegar através da estrutura do sítio da Web. Esta pode ser uma forma mais rápida e fácil de encontrar conteúdo, especialmente em sítios da Web de grandes dimensões.

Algumas empresas de pesquisa oferecem acesso gratuito nos sítios da Web às suas aplicações de procura. Existem motores de busca disponíveis que podem ser instalados no seu servidor. Algumas empresas de alojamento Web oferecem scripts de procura que os clientes podem incluir nas suas páginas Web. A maioria dos serviços também oferece versões pagas das suas ferramentas com funcionalidades mais avançadas.

A implementação de uma função de procura que irá verificar a ortografia dos termos, incluir diferentes terminações para os termos (radicais) e permitir a utilização de terminologia diferente (sinónimos) irá aumentar ainda mais a acessibilidade da função de procura.

A funcionalidade de procura é adicionada incluindo um simples formulário na página Web, normalmente um campo de texto para o termo da procura e um botão para accionar a procura, ou adicionando um link para uma página que inclua um formulário de procura. O próprio formulário de procura tem de estar, obviamente, acessível.

As técnicas que são utilizadas para optimizar os resultados do motor de busca para procuras externas também suportam motores de busca internos e tornam-nos mais eficazes: utilizam palavras-chave, META tags e uma estrutura de navegação acessível. Os sítios da Web de procura fornecem orientação sobre como criar conteúdo optimizado para procura, por exemplo Directrizes da Microsoft para uma boa indexação (página em inglês), Criar um sítio da Web de fácil utilização no Google (página em inglês)e Directrizes de Qualidade de Procura de Conteúdo Yahoo! (página em inglês).

Exemplos

Exemplo 1: Um Sítio da Web de Compras

Um sítio da Web de compras organiza os seus produtos em diferentes categorias, tais como roupa de senhora, roupa de homem e roupa de criança. Estas têm subcategorias, tais como tops, calças, sapatos e acessórios. Cada página também inclui um formulário de procura. Os utilizadores podem introduzir o número do produto ou a descrição do produto no campo de procura e aceder directamente a esse produto, em vez de terem de navegar pelas categorias do produto para o encontrar.

Exemplo 2: Um Centro de Ajuda

Um Centro de Ajuda inclui milhares de páginas de informações de Ajuda sobre os produtos de uma empresa. Um formulário de procura permite aos utilizadores procurar apenas nas páginas do Centro de Ajuda para encontrar artigos que incluam os termos da procura.

Recursos

Testes

Procedimento
  1. Verifique se a página Web contém um formulário de procura ou um link para uma página de procura.

  2. No formulário de procura, introduza texto que exista no conjunto de páginas Web.

  3. Active a procura.

  4. Verifique se o utilizador é conduzido até uma página que inclua o termo da procura.

  5. Verifique se o utilizador é conduzido até uma página que inclua uma lista de links para páginas que incluam o termo da procura.

Resultados Esperados
  • Os passos 1, 4 e 5 são verdadeiros.


G162: Colocar etiquetas para aumentar a previsibilidade das relações

Aplicabilidade

Todas as tecnologias que suportem formulários.

Esta técnica está relacionada com:

Descrição

Quando as etiquetas estão posicionadas num local visualmente previsível para o utilizador, é mais fácil compreender formulários complexos e localizar campos específicos. As etiquetas para a maioria dos campos estão posicionadas imediatamente antes do campo, ou seja, para idiomas escritos da esquerda para a direita, à esquerda do campo ou acima do mesmo, e para idiomas escritos da direita para a esquerda, à direita do campo ou acima do mesmo. As etiquetas para os botões de opção e caixas de verificação estão posicionadas a seguir ao campo.

Estas posições estão definidas, uma vez que é a posição normal (e, por conseguinte, a mais previsível) da etiqueta para os campos, botões de opção e caixas de verificação.

As etiquetas estão posicionadas antes dos campos de entrada de dados, uma vez que o comprimento dos campos pode variar. Posicioná-las antes dos campos permite alinhar as etiquetas. Também facilita a localização das etiquetas com um ampliador de ecrã, uma vez que se encontram imediatamente antes do campo e também podem ser encontradas numa coluna vertical (quando o início dos campos está alinhado verticalmente). Finalmente, se o campo incluir dados, é mais fácil compreendê-los ou verificá-los se o utilizador ler a etiqueta primeiro e depois o conteúdo, em vez de fazer ao contrário.

As caixas de verificação e os botões de opção têm uma largura uniforme, enquanto as respectivas etiquetas, muitas vezes, não têm. Assim, ter o botão de opção ou a caixa de verificação em primeiro permite alinhar os botões e as etiquetas verticalmente.

Exemplos

Exemplo 1: Etiquetas acima dos campos de texto

Dois campos de formulário com etiquetas posicionadas imediatamente acima.

Exemplo 2: Etiquetas à esquerda dos campos de texto

Dois campos de formulário com etiquetas posicionadas imediatamente à esquerda

Exemplo 3: Etiquetas à direita dos botões de opção

Um grupo de controlos de formulário contém dois botões de opção com etiquetas posicionadas imediatamente à direita.

Recursos

Testes

Procedimento

Para cada campo de formulário na página Web:

  1. Verifique se o campo de formulário tem uma etiqueta visível.

  2. Se o campo de formulário for uma caixa de verificação ou um botão de opção, verifique se a etiqueta se encontra imediatamente a seguir ao campo.

  3. Se o campo de formulário não for uma caixa de verificação ou um botão de opção, verifique se a etiqueta se encontra imediatamente antes do campo.

Resultados Esperados
  • Todos os passos são verdadeiros.


G163: Utilizar sinais diacríticos normais que podem ser desactivados

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer aos utilizadores um mecanismo para activar e desactivar os sinais diacríticos normais.

Muitos idiomas utilizam sinais diacríticos ou a diacrítica para indicar a pronúncia das palavras ou para ajudar a distinguir entre palavras. Alguns idiomas podem utilizar a diacrítica para indicar vogais, duplas consoantes, a ausência de uma vogal ou consoante, ou para outras finalidades. Embora o texto possa ser legível sem essa diacrítica, adicioná-la pode melhorar a legibilidade.

Exemplos

Exemplo 1

Uma página Web em havaiano mostra todos os sinais diacríticos, por predefinição, e fornece links que permitem aos utilizadores seleccionar o nível de apresentação dos sinais diacríticos:

  • Não mostrar sinais diacríticos

  • Utilizar o carácter de apóstrofe (‘) para ʻokina, mas não mostrar sinais de vogal longa

  • Mostrar todos os sinais diacríticos

O utilizador selecciona o nível preferido, e esta preferência é armazenada numa cookie de sessão. Todas as páginas subsequentes durante essa mesma sessão têm acesso à cookie, e mostram ou ocultam os sinais diacríticos de acordo com o nível seleccionado.

No lado do servidor, o conteúdo é armazenado com todos os sinais diacríticos. Se um utilizador preferir menos sinais diacríticos, ou nenhuns, estes serão substituídos ou removidos conforme pretendido por uma função do lado do servidor antes de a resposta ser enviada.

Consulte o exemplo em Idioma havaiano online (página em inglês).

Testes

Procedimento

Para qualquer página num idioma humano que utilize sinais diacríticos para distinguir os significados:

  1. Verifique se a versão predefinida do conteúdo utiliza sinais diacríticos.

  2. Verifique se existe um mecanismo para activar ou desactivar os sinais diacríticos.

  3. Verifique se a utilização de um mecanismo para desactivar os sinais diacríticos resulta em conteúdo que não mostra sinais diacríticos.

  4. Verifique se a utilização de um mecanismo para activar os sinais diacríticos resulta em conteúdo que mostra sinais diacríticos.

Resultados Esperados
  • Os passos 1 a 4 são verdadeiros.


G164: Fornecer um período de tempo determinado após a submissão do formulário quando a encomenda puder ser actualizada ou cancelada pelo utilizador

Aplicabilidade

Todas as tecnologias que forneçam formulários.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é permitir que os utilizadores recuperem de erros efectuados ao submeter um pedido, fornecendo-lhes um período de tempo durante o qual podem cancelar ou alterar o pedido. Em geral, um contrato ou um pedido são compromissos legais e não podem ser cancelados. Contudo, um sítio da Web pode optar por oferecer esta possibilidade e fornecer uma forma para os utilizadores recuperarem de erros.

O conteúdo da Web necessita de informar o utilizador sobre a duração do período de tempo de cancelamento após a submissão do formulário e qual o procedimento para cancelar o pedido. O processo de cancelamento pode não ser possível online. Pode, por exemplo, necessitar que seja enviado um aviso por escrito para um endereço indicado na página Web.

Exemplos

Exemplo 1: Compras online

Um sítio da Web de compras online permite que os utilizadores cancelem as compras até 24 horas depois de as terem efectuado. O sítio da Web divulga a sua política e inclui um resumo da mesma no recibo de compra enviado por e-mail ao utilizador. Após 24 horas, a compra será enviada ao utilizador e já não pode ser cancelada.

Exemplo 2: Pedidos feitos por encomenda

Um sítio da Web vende casacos desportivos feitos por encomenda. O cliente escolhe o tecido e fornece as suas medidas. O sítio da Web dá aos clientes até três dias para alterar ou cancelar um pedido. Depois de o material ter sido cortado às medidas do cliente, já não é possível alterar ou cancelar o pedido. A política da empresa está descrita no seu sítio da Web.

Testes

Procedimento
  1. Verifique se a página Web descreve o período de tempo para cancelar ou alterar um pedido.

  2. Verifique se a página Web descreve o processo para cancelar ou alterar um pedido.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G165: Utilizar o indicador de foco predefinido para a plataforma para que os indicadores de foco predefinidos de alta visibilidade se mantenham

Aplicabilidade

Tecnologias que incluam elementos que possam receber foco.

Esta técnica está relacionada com:

Descrição

Os sistemas operativos têm um indicador de foco nativo, que está disponível em vários agentes de utilizador. A apresentação predefinida do indicador de foco nem sempre está altamente visível e pode ainda ser difícil de ver quando está sobre determinados fundos. Contudo, várias plataformas permitem ao utilizador personalizar a apresentação deste indicador de foco. A tecnologia de apoio também pode alterar o aspecto do indicador de foco nativo. Se utilizar o indicador de foco nativo, todas as definições ao nível do sistema para a visibilidade serão transportadas para a página Web. Se desenhar o seu próprio indicador de foco, por exemplo, colorindo secções da página em resposta à acção do utilizador, estas definições não serão aplicadas, e a TA não conseguirá encontrar o seu indicador de foco.

Exemplos

Exemplo 1

O indicador de foco predefinido no Microsoft Windows é uma linha preta tracejada de um pixel à volta do elemento que recebe o foco. Numa página com um fundo escuro, pode ser muito difícil de ver. O criador da página utiliza a predefinição e o utilizador personaliza-a no Windows para torná-la mais clara.

Exemplo 2

Em HTML, os links e os elementos de formulário podem receber o foco por predefinição. Além disso, qualquer elemento com um atributo tabindex >= 0 pode receber foco. Ambos os tipos de elementos que podem receber o foco utilizam o indicador de foco do sistema e irão detectar as alterações da plataforma no estilo do indicador de foco.

Testes

Procedimento
  1. Utilize as funcionalidades da sua plataforma para personalizar o aspecto do indicador de foco.

  2. Utilize a tecla de tabulação para percorrer a página, tomando atenção ao caminho do foco.

  3. Verifique se o indicador de foco para cada controlo está visível.

Resultados Esperados
  • O passo 3 é verdadeiro.


G166: Fornecer áudio que descreva o conteúdo importante do vídeo e o descreva como tal

Aplicabilidade

Todas as tecnologias que possam incluir conteúdo de vídeo.

Esta técnica está relacionada com:

Descrição

O conteúdo composto por apenas vídeo não está acessível a pessoas cegas e pessoas com baixa visão. Por conseguinte, é importante que exista uma alternativa em áudio. Uma forma de o fazer é fornecer uma faixa de áudio a descrever as informações existentes no vídeo. O áudio deve ter um formato comum utilizado na Internet, tal como o MP3.

Exemplos

Exemplo 1

Uma página Web tem um link para uma apresentação composta por apenas vídeo de uma nave espacial a aterrar em Marte. O link para o vídeo é uma imagem de uma nave espacial. Junto ao vídeo está um link para um ficheiro de áudio que inclui uma pessoa a descrever o vídeo. Isto terá um aspecto semelhante ao seguinte código exemplo em HTML.

Código Exemplo:

<a href="../video/marslanding.mp4"><img src="../images/spaceship.jpg" 
   alt="Mars landing, video-only" width="193" height="255"/></a>
<br />
<a href="Mars_landing_audio.mp3">Audio description of "Mars Landing"</a>

Testes

Procedimento

Para uma página Web que inclua conteúdo composto por apenas vídeo:

  1. Verifique se existe um link para uma alternativa em áudio imediatamente antes ou depois do conteúdo composto por apenas vídeo.

Resultados Esperados
  • O passo 1 é verdadeiro.


G167: Utilizar um botão contíguo para definir a finalidade de um campo

Aplicabilidade

Todas as tecnologias que suportem formulários.

Esta técnica está relacionada com:

Descrição

Quando um botão invoca uma função num campo de entrada de dados, tem uma etiqueta de texto clara e é apresentado junto ao campo de entrada de dados, também funciona como uma etiqueta para esse campo. Esta etiqueta ajuda os utilizadores a compreender a finalidade do campo sem introduzir texto repetitivo na página Web. Os botões que identificam campos de texto únicos, normalmente, sucedem ao campo de entrada de dados.

Nota: O campo também tem de ter um nome determinado de forma programática, de acordo com o Critério de Sucesso 4.1.2.

Exemplos

Exemplo 1: Uma função de procura

Uma página Web inclui um campo de texto onde o utilizador pode introduzir termos da procura e um botão intitulado "Procura" para executar a procura. O botão está posicionado logo a seguir ao campo de texto, de modo a ser claro ao utilizador de que se trata do campo de texto onde pode introduzir o termo da procura.

Um campo de texto com um botão posicionado à direita, a demonstrar a utilização de um botão para identificar um campo.
Exemplo 2: Escolher um formulário

Um utilizador nos Estados Unidos tem de preencher um formulário. Uma vez que as leis e os requisitos diferem entres os vários estados do Estados Unidos, o utilizador tem de seleccionar a versão do formulário consoante o seu estado ou residência. O utilizador pode escolher um estado a partir de uma lista pendente. O botão contíguo intitula-se "Obter Formulário consoante o Estado". Ao pressionar este botão o utilizador é conduzido até à página Web que inclui o formulário para o estado seleccionado.

Testes

Procedimento

Para um campo e um botão que utilizem esta técnica:

  1. Verifique se o campo e o botão estão ao lado um do outro na sequência de leitura determinada de forma programática.

  2. Verifique se o campo e o botão são apresentados ao lado um do outro.

Resultados Esperados
  • Todos os passos são verdadeiros.


G168: Solicitar a confirmação para prosseguir com a acção seleccionada

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta técnica permite confirmar com o utilizador se a acção seleccionada foi intencional. Utilize esta técnica em situações em que a acção não pode ser anulada depois de ter sido concluída. Isto irá evitar que os utilizadores submetam um formulário ou eliminem dados por engano.

Por exemplo, isto pode ocorrer quando o utilizador está à espera que sejam apresentados os botões "submeter" e "cancelar" numa ordem contrária à que é apresentada e selecciona um botão muito rapidamente sem reparar na ordem. A apresentação de um pedido de confirmação ao utilizador permite-lhe detectar o erro e impedir a submissão dos dados ou a perda dos dados introduzidos.

O pedido de confirmação deve informar o utilizador da acção seleccionada e das consequências de prosseguir com a acção.

Exemplos

Exemplo 1: Viagem de avião

Um sítio da Web de viagens online permite aos utilizadores criar itinerários de viagem que reservam lugares com diferentes companhias aéreas. Os utilizadores podem procurar, emendar e cancelar os seus itinerários actuais. Se o utilizador tiver de cancelar os seus planos de viagem, basta localizar o itinerário na página Web e eliminá-lo da sua lista de itinerários actuais. Esta acção resulta no cancelamento das suas reservas e não é reversível. O utilizador é informado de que a acção seleccionada irá cancelar as suas reservas actuais e que pode não ser possível fazer uma reserva semelhante nos mesmos voos depois de esta acção ser executada. É pedido ao utilizador para confirmar ou cancelar a eliminação do itinerário.

Exemplo 2: Webmail

Uma aplicação Webmail armazena uma mensagem de e-mail de um utilizador num servidor, de modo a poder ser acedida a partir de qualquer local na Internet. Quando um utilizador elimina uma mensagem de e-mail, esta é movida para uma pasta "lixo", a partir da qual pode ser recuperada se tiver sido eliminada por engano. Existe um comando "esvaziar lixo" para eliminar as mensagens na pasta "lixo" a partir do servidor. Depois de esvaziada a pasta "lixo", as mensagens já não podem ser recuperadas. Antes de esvaziar a pasta "lixo", é pedido ao utilizador para confirmar ou cancelar a eliminação do e-mail na pasta "lixo".

Exemplo 3: Um teste online

É utilizado um formulário para recolher respostas para um teste. Quando os botões "submeter" ou "repor" são seleccionados, é apresentada uma página Web ao utilizador que o informa da sua escolha e solicita a confirmação para prosseguir. Exemplo 1: "Seleccionou repor o formulário. Essa acção irá eliminar todos os dados anteriormente introduzidos e não submeterá quaisquer respostas. Pretende repor o formulário? [botão sim] [botão não]" Exemplo 2: "Seleccionou submeter o formulário. Essa acção irá submeter os dados introduzidos como as respostas finais e não podem ser alterados. Pretende submeter o formulário? [botão sim] [botão não]"

Exemplo 4: Vender acções

Um sítio da Web de corretagem permite aos utilizadores comprar e vender acções e outros valores. Se o utilizador efectuar uma transacção durante as horas em que a bolsa de valores estiver aberta, é apresentada uma caixa de diálogo a informar que a transacção é imediata e irreversível, e inclui os botões "continuar" e "cancelar".

Testes

Procedimento
  1. Inicie a acção que não pode ser anulada ou alterada.

  2. Verifique se é apresentado um pedido para confirmar a acção seleccionada.

  3. Verifique se a acção pode ser confirmada e cancelada.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G169: Alinhar o texto apenas a um lado

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Muitas pessoas com incapacidades cognitivas têm grandes problemas com blocos de texto justificados (alinhados às margens esquerda e direita). As páginas ficam com espaços desiguais entre as palavras, o que pode dificultar a leitura do texto para algumas pessoas. Esta falha descreve situações em que ocorre esta disposição de texto confusa. A melhor forma para evitar este problema é criar uma disposição do texto totalmente justificada.

Exemplos

Exemplo 1

Para a maioria das tecnologias, ignore quaisquer declarações sobre alinhamento. Por exemplo, o texto seguinte será justificado à esquerda em HTML, por predefinição, onde o idioma da página é escrito da direita para a esquerda.

Código Exemplo:

<p>
Lorem ipsum dolor sit amet, ...
</p> 
Exemplo 2

Uma página Web inclui secções com vários alinhamentos. Os parágrafos no corpo da página estão alinhados à margem esquerda. O texto também inclui um número de citações alinhadas à margem direita.

Testes

Procedimento
  1. Abra a página num browser comum.

  2. Verifique se o conteúdo não está justificado (alinhado às margens esquerda e direita).

Resultados Esperados
  • O passo 2 é verdadeiro.


G170: Fornecer um controlo junto do início da página Web que desligue os sons que tocam automaticamente

Aplicabilidade

Todas as tecnologias onde o som possa ser reproduzido automaticamente.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é permitir ao utilizador desligar sons que tocam automaticamente quando uma página é carregada. O controlo para desligar os sons deve estar localizado no início da página para permitir que os utilizadores o encontrem fácil e rapidamente. Isto é útil para as pessoas que utilizam tecnologias de apoio (tais como leitores de ecrã, ampliadores de ecrã, mecanismos de comutação, etc.) e para quem não as utiliza (tais como pessoas com incapacidades cognitivas, de aprendizagem e de linguagem).

Nesta técnica, um autor inclui um controlo que permite aos utilizadores desligar todos os sons que tocam automaticamente. O controlo deve ser operável por teclado, localizar-se no início do separador e da ordem de leitura e estar claramente identificado para indicar que permite desligar os sons que estão a tocar.

Exemplos

Exemplo 1

Uma página Web inclui uma apresentação em multimédia baseada no tempo que inclui uma faixa de áudio, bem como um vídeo animado que descreve como reparar um cortador de relva. A página inclui 2 botões intitulados "Colocar em Pausa" e "Parar", que permitem ao utilizador controlar a reprodução da multimédia baseada no tempo.

Exemplo 2

Uma página Web inclui um breve filme. A página inclui um botão intitulado "Colocar o filme em pausa", que permite ao utilizador colocar o filme em pausa.

Exemplo 3

Uma página Web inclui uma apresentação em Flash que inclui vídeo e áudio. A página inclui um botão intitulado "Desligar a multimédia", que permite ao utilizador parar a reprodução do vídeo e do áudio.

Testes

Procedimento
  1. Carregue uma página Web.

  2. Verifique se existem música ou sons que iniciam automaticamente.

  3. Verifique se é fornecido um controlo no início da página que permita ao utilizador desligar os sons.

Resultados Esperados
  • O passo 3 é verdadeiro.


G171: Tocar sons apenas a pedido do utilizador

Aplicabilidade

Todas as tecnologias que possam reproduzir som.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é permitir que um utilizador controle a utilização dos sons no conteúdo da Web. As pessoas que utilizam um leitor de ecrã podem achar muito difícil e confuso ouvir o leitor de ecrã se o conteúdo da Web também reproduzir sons. Fornecer uma forma de reproduzir sons apenas a pedido dará ao utilizador o controlo necessário para ouvir quaisquer sons ou outro áudio sem interferir com os sons provenientes de um leitor de ecrã.

Exemplos

Exemplo 1

Uma página Web de uma associação de preservação de baleias cinzentas tem um som de fundo em loop do canto das baleias e também tem sons dos salpicos da água. Os sons não começam a tocar automaticamente, em vez disso, o conteúdo da Web fornece um link no topo da página para permitir ao utilizador iniciar os sons manualmente. O botão intitula-se "Ligar os sons" e depois de o utilizador o pressionar, os sons começam a tocar. Em seguida, é apresentada ao utilizador uma opção que permite "Desligar os sons".

Exemplo 2

É fornecido um link para um ficheiro de áudio que inclui os sons das baleias cinzentas. O texto do link indica: "Ouvir o canto da baleia cinzenta (mp3)".

Testes

Procedimento
  1. Carregue uma página Web que saiba que inclui sons que tocam durante 3 segundos ou mais.

  2. Verifique se não são reproduzidos sons automaticamente.

  3. Verifique se existe uma forma de o utilizador iniciar os sons manualmente.

Resultados Esperados
  • O passo 3 é verdadeiro.


G172: Fornecer um mecanismo para remover toda a justificação do texto

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma versão da página que não esteja totalmente justificada (alinhada às margens esquerda e direita).

Podem existir circunstâncias em que, por motivos de disposição, um autor pode pretender ter o texto totalmente justificado. Nesses casos, é suficiente fornecer uma funcionalidade que remova a justificação do texto. O controlo deve ser colocado no início da página para facilitar a sua localização e acesso.

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

Exemplos

Exemplo 1

Um romance clássico online encontra-se num sítio da Web que tenta reproduzir o aspecto da obra originalmente publicada, o que inclui o texto totalmente justificado. É fornecido um botão no topo da página intitulado "remover toda a justificação" e é utilizada uma técnica de mudança de estilo para trocar a folha de estilo. A nova folha de estilo alinha o texto apenas à esquerda.

Testes

Procedimento
  1. Abra uma página totalmente justificada.

  2. Verifique se existe uma funcionalidade para remover toda a justificação.

  3. Verifique se a funcionalidade remove toda a justificação.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G173: Fornecer uma versão de um filme com áudio-descrições

Aplicabilidade

Qualquer tecnologia que suporte áudio e vídeo.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer uma segunda versão do conteúdo de vídeo que forneça áudio-descrições, de modo a que as pessoas que não conseguem ver possam compreender o conteúdo audiovisual.

Uma vez que, actualmente, a maioria dos agentes de utilizador não consegue combinar várias faixas de áudio, esta técnica adiciona as informações de áudio suplementares à multimédia sincronizada, fornecendo uma segunda versão do filme, em que a banda sonora original e a áudio-descrição adicional foram reunidas numa única faixa. Estas informações adicionais concentram-se nas acções, nas personagens, nas mudanças de cenário e no texto no ecrã (não legendas) que são importantes para a compreensão do conteúdo.

Como não é útil que estas novas informações ocultem as informações de áudio essenciais na banda sonora original (ou que sejam ocultadas por altos efeitos de som), as novas informações são adicionadas durante as pausas existentes no diálogo e nos efeitos de som. Isto limita a quantidade de informações suplementares que pode ser adicionada ao programa.

Fornecer uma segunda versão do filme que inclua áudio-descrições como a faixa de áudio principal irá tornar este conteúdo acessível às pessoas cegas que necessitam de ouvir não só o diálogo, como também o contexto e outros aspectos do vídeo que não são comunicados apenas pelo diálogo das personagens.

Exemplos

  • Estão disponíveis duas versões de um vídeo de uma ópera. A primeira versão inclui apenas a música. A segunda versão inclui a música e uma voz a descrever as acções dos artistas no palco.

  • Um vídeo de um malabarista em frente a um grupo de crianças inclui uma versão com uma áudio-descrição. O narrador da áudio-descrição descreve o número e tipo de itens com que o artista faz os malabarismos, bem como as reacções das crianças durante a actuação.

Recursos

Testes

Procedimento
  1. Abra a versão da multimédia que inclui detalhes visuais importantes que não podem ser compreendidos a partir apenas da banda sonora principal.

  2. Ouça o filme.

  3. Verifique se são utilizados os intervalos no diálogo para transmitir informações importantes relacionadas com o conteúdo visual.

  4. Se as versões alternativas estiverem numa página separada, verifique se existem links disponíveis para permitir ao utilizador aceder às outras versões.

Resultados Esperados
  • O passo 3 é verdadeiro.


G174: Fornecer um controlo com uma relação de contraste suficiente que permita aos utilizadores mudar para uma apresentação que utilize contraste suficiente

Aplicabilidade

Qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

Quando o contraste entre o texto e o fundo numa determinada parte da página não tiver sido concebido para cumprir o nível de contraste dos Critérios de Sucesso 1.4.3 ou 1.4.6, é possível cumprir estas directrizes utilizando a cláusula "Versão Alternativa" dos requisitos de conformidade (Requisito de Conformidade 1). Um link ou controlo na página podem alterar a página de modo a que todos os aspectos fiquem em conformidade, ou podem conduzir o utilizador a uma nova versão da página que esteja em conformidade com o nível pretendido.

Para que esta técnica seja utilizada com êxito, as seguintes três afirmações têm de ser verdadeiras.

  1. O link ou controlo na página original têm de cumprir o requisito de contraste do Critério de Sucesso pretendido. (Se o utilizador não conseguir ver o controlo, não poderá utilizá-lo para poder aceder à nova página.)

  2. A nova página tem de incluir as mesmas informações e funcionalidade da página original.

  3. A nova página tem de estar em conformidade com todo o Critério de Sucesso relativamente ao nível de conformidade pretendido (i.e., a nova página não pode apenas ter o nível de contraste pretendido e não cumprir os restantes requisitos de conformidade).

Esta técnica pode ser utilizada para cumprir o Critério de Sucesso 1.4.3 tendo texto (ou imagens do texto) na versão alternativa da página com um contraste de 4.5:1 e qualquer texto grande (ou imagens do texto grande) com um contraste de 3:1 com o fundo. Se a versão alternativa da página tiver todo o texto (ou imagens do texto) com um contraste de 7:1 e o texto grande (ou imagens do texto grande) com um contraste de 4.5:1 cumprirá os Critérios de Sucesso 1.4.3 e 1.4.6.

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

Exemplos

  • Uma página com alguns cabeçalhos que não cumprem os requisitos de contraste de 3:1 tem um link de alto contraste (5:1) no topo da página que conduz o utilizador a uma nova versão com um contraste mínimo de 4.5:1 em todo o texto e imagens do texto.

  • Uma página utiliza fundos sombreados por motivos de efeito, mas isso resulta num contraste de 4:1 entre o texto e o fundo. Existe um controlo no topo da página intitulado "alto contraste", que permite utilizar diferentes estilos e diminuir as cores de fundo para alcançar um contraste de 7:1.

Testes

Procedimento
  1. Verifique se existe um link ou controlo na página original que forneça acesso à versão alternativa.

  2. Verifique se o link ou controlo na página original estão em conformidade com todos os critérios de sucesso para o nível de conformidade que está a ser testado.

  3. Verifique se a versão alternativa cumpre o contraste e todos os restantes critérios de sucesso para o nível de conformidade que está a ser testado.

Resultados Esperados
  • Todos os passos são verdadeiros.


G175: Fornecer uma ferramenta de selecção de várias cores na página para cores de primeiro plano e de plano de fundo

Aplicabilidade

Qualquer tecnologia que permita aos utilizadores guardar preferências para reutilizar noutras páginas.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é incluir um controlo numa página Web, ou conjunto de páginas Web, que permita aos utilizadores especificar as cores de primeiro plano e de fundo preferidas para o conteúdo. Esta técnica pode ser implementada utilizando qualquer tecnologia que permita aos utilizadores guardar preferências que possam ser utilizadas em todas as páginas. Mediante a utilização desta técnica, um autor inclui um controlo de selecção de cores no sítio da Web que permite aos utilizadores seleccionar e guardar as preferências de cores de primeiro plano e de fundo para utilizar nas outras páginas de um sítio da Web. As páginas são concebidas para procurar estas preferências e para se adaptarem em conformidade quando as definições guardadas são encontradas.

Muitos utilizadores com incapacidades cognitivas têm problemas com texto preto normal num fundo branco. Por vezes, conseguem ler muito melhor o texto utilizando cores diferentes para o texto e fundo e, por vezes, estas combinações de cores são muito específicas e não as esperadas por outras pessoas (por exemplo, castanho ou azul).

Alguns destes utilizadores terão dificuldade em definir as cores utilizando as definições de cor do browser ou as definições de cor dos sistemas operativos. Fornecer uma ferramenta na página Web que disponibilize uma vasta gama de cores de primeiro plano e de fundo permitir-lhes-á alterar facilmente as cores sem terem de procurar as definições do browser.

Exemplos

Exemplo 1

O utilizador pode introduzir valores hexadecimais nos campos de texto. O link "seleccionar" irá abrir uma ferramenta de selecção de cores para o campo contíguo.

Captura de ecrã que mostra os controlos de cores de primeiro plano e de fundo, que correspondem a campos de texto com valores hexadecimais. Cada campo inclui um link que abre um controlo de selecção de cores posicionado entre a etiqueta e o campo de texto.

A ferramenta de selecção de cores apresentada para seleccionar um cor.

Captura de ecrã que mostra a ferramenta de selecção de cores com o seleccionador de cores apresentado para seleccionar um cor de fundo. O utilizador tem 216 cores à sua disposição.

Em seguida, é apresentado um exemplo real desta técnica implementada utilizando PHP, Javascript, CSS e XHTML: Exemplo de Seleccionador de Cores.

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 controlo na página identificado como uma ferramenta de selecção de cores.

  2. Verifique se a ferramenta de selecção de cores fornece uma variedade de opções de cor para o texto e o fundo.

  3. Seleccione novas cores para o texto e fundo utilizando a ferramenta.

  4. Verifique se o conteúdo é actualizado para utilizar as combinações de cor seleccionadas.

Resultados Esperados
  • Os passos 1 e 4 são verdadeiros.


G176: Manter a área de flashes suficientemente pequena

Aplicabilidade

Apropriada para todo o conteúdo geral da Web, incluindo casos especiais em que o conteúdo é especificamente concebido para ser apresentado num átrio.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer uma forma fácil de cumprir o critério de sucesso para conteúdo em modo flash, mas que é pequeno.

Se tiver conteúdo com mais de 3 flashes no período de um segundo (de modo a que a técnica G19 não possa ser utilizada), mas a área em modo flash tiver menos de 25% dos 10 graus do campo de visão (que representa a área central de visão do olho), está automaticamente em conformidade.

Os 10 graus do campo de visão representam a área central de visão do olho. Esta área está muito relacionada com os sensores visuais. Os flashes nesta área são transmitidos para o córtex visual. Para as pessoas que sofrem de fotossensibilidade, estes flashes no córtex visual podem provocar ataques epilépticos. Os flashes noutras áreas do olho (que têm muito menos sensores) têm um efeito muito menor no córtex. Daí, o foco em apenas 10 graus da visão central.

Fórmula 1: Área Pequena de Segurança para Conteúdo da Web

A maioria dos autores da Web não sabe como converter o campo de visão em pixéis, que é o que normalmente têm de enfrentar. Esta técnica fornece a conversão.

Actualmente, a visualização mais predominante é de 1024 x 768 e de cerca de 15 a 17 polegadas na diagonal. Quando observado a uma distância de visualização normal (11 a 26 polegadas), um campo de visão de 10 graus irá capturar uma área de aproximadamente 341 x 256 pixéis. Isto não é circular, tal como não é a visão central da maioria dos utilizadores, e a diferença é tão pequena (e na orla da visão central onde os sensores são menos) que não é importante.

Uma vez que o critério é 25% de qualquer campo de visão de 10 graus, um evento em modo flash num ecrã (não existindo mais flashes no ecrã) que seja mais pequeno do que uma área contígua de 21.824 pixéis ao quadrado (qualquer forma), cumprirá o requisito de Limites de Flash Universal e Flash Vermelho.

Foi escolhido 1024 x 768 porque representa o tamanho de ecrã mais comum. Também funciona com ecrãs de maior resolução, uma vez que a densidade de pixéis mais comprimida iria resultar num tamanho de imagem mais pequeno e seguro.

Os utilizadores de ecrãs de menor resolução, ou que os ampliam ou vêem a uma distância menor, terão um risco mais elevado dependendo da distância de visualização. Para satisfazer as necessidades deste grupo, deve ser utilizada a técnica G19: Garantir que nenhum componente do conteúdo tenha mais de três flashes no período de um segundo, uma vez que é independente da resolução de ecrã ou da distância de visualização.

Fórmula 2: Área Pequena de Segurança para Visualizações Conhecidas

Para calcular a área pequena de segurança (em pixéis) no ecrã, quando o tamanho, a resolução e a distância de visualização do ecrã são conhecidos, utilize o seguinte procedimento.

Nota: Por várias razões (distribuição dos sensores de visão central que, muitas vezes, não são circulares, simplicidade, conforto ao computador, razões históricas), é utilizada uma aproximação rectangular de 4:3 dos 10 graus centrais do campo de visão que é 10 graus mais ampla e 7,5 graus mais elevada. Isto tem uma área de 75 graus ao quadrado, contra a área de 78,5 graus ao quadrado de um verdadeiro círculo de 10 graus.

  1. Para converter a distância de visualização para o tamanho do rectângulo, multiplique a distância de visualização por 0,1745 (10 x Pi / 180) para obter a largura do rectângulo, e multiplique a distância de visualização por 0,1309 (7,5 x Pi / 180) para obter a altura do rectângulo. (Este cálculo pode ser efectuado em polegadas, milímetros, ou em qualquer outra unidade de comprimento.)

  2. Determine o tamanho do ângulo de visão de 10 graus em pixéis.

    Para tal, multiplique a largura e a altura do rectângulo do passo 1 pela resolução do ecrã, em pixéis por comprimento da unidade, para obter o tamanho horizontal e vertical do rectângulo em pixéis.

    • Para um ecrã panorâmico de 1080 pixéis (que corresponde a 1920 por 1080 pixéis), a resolução do ecrã em pixéis por polegada é de 2203 dividido pelo tamanho diagonal do ecrã, em polegadas.

    • Para um ecrã panorâmico de 720 pixéis (que, normalmente, corresponde a 1365 por 768 pixéis), a resolução do ecrã em pixéis por polegada é de 1566 dividido pelo tamanho diagonal do ecrã, em polegadas.

    • Para um monitor de computador LCD que especifica a distância dos pixéis em milímetros/pixel, a resolução do ecrã em pixéis por polegada é de 25,4 dividido pela distância dos pixéis em milímetros.

    Para qualquer ecrã, se souber o tamanho diagonal do ecrã e a resolução horizontal e vertical do ecrã em pixéis, então a resolução do ecrã em pixéis por polegada é a raiz quadrada de ((resolução horizontal em pixéis) x (resolução horizontal em pixéis) + (resolução vertical em pixéis) x (resolução vertical em pixéis)).

  3. Multiplique a largura do rectângulo pela altura e divida por 4.

Exemplos

  • Um autor cria uma animação que será apresentada num ecrã no átrio de um empresa. Utilizando o tamanho e a resolução do ecrã e a distância mais curta a que uma pessoa pode estar do ecrã, foi calculado o tamanho de 25% dos 10 graus da visão central em pixéis (utilizando a fórmula acima). Isto corresponde à área pequena de segurança. Nunca será apresentado qualquer flash numa área maior do que a área pequena de segurança.

Recursos

Testes

Procedimento
  1. É calculada a área pequena de segurança.

  2. Verifique se existe apenas uma área do ecrã em modo flash num determinado momento.

  3. Verifique se o conteúdo em modo flash cabe numa caixa contígua, cuja área é inferior à área pequena de segurança.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


G177: Fornecer texto de correcção sugerido

Aplicabilidade

Conteúdo que aceite entrada de dados por parte do utilizador, com restrições no formato, valor e/ou tipo de dados.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é sugerir texto correcto quando as informações fornecidas pelo utilizador não são aceites e o texto correcto possível é conhecido. As sugestões podem incluir ortografia correcta ou texto semelhante de um conjunto conhecido de texto possível.

Dependendo do formulário, as sugestões podem encontrar-se junto ao campo onde foi detectado o erro, noutra localização na página ou através de um mecanismo de procura ou referência onde os resultados são apresentados noutro URI. Sempre que possível, as sugestões de correcção devem ser incorporadas de um modo que seja fácil para o utilizador. Por exemplo, uma submissão incorrecta pode devolver uma lista de possíveis correcções, onde o utilizador pode seleccionar uma caixa de verificação ou um botão de opção para indicar qual a opção pretendida. As sugestões ou os links para as sugestões devem ser colocados junto aos campos de formulário aos quais estejam associados como, por exemplo, no topo do formulário, antes dos campos de formulário ou a seguir aos campos de formulário que necessitam de ser corrigidos.

Exemplos

  • Um campo de formulário necessita que o utilizador introduza um período de tempo que pode variar entre dias e anos. O utilizador introduz o número "6". O servidor devolve o formulário depois de o utilizador o submeter e também inclui uma sugestão junto ao campo de formulário: "Erro detectado. Queria dizer: 6 dias, 6 semanas, 6 meses ou 6 anos?"

  • O utilizador introduz o nome de uma cidade mal escrito. O servidor devolve o formulário depois de o utilizador o submeter e também inclui uma mensagem no topo do formulário a indicar o erro e um link para uma lista de nomes de cidades possíveis, por comparação do nome introduzido pelo utilizador com uma base de dados de nomes de cidades.

  • Um planeador de viagens de autocarro permite aos utilizadores introduzir o seu local de partida e o destino, permitindo introduzir nomes de ruas, cruzamentos e marcos divisórios de cidades. Quando um utilizador introduz "Kohl," é apresentada uma lista de resultados de procura com correspondências semelhantes a indicar: "A sua procura por 'Kohl' devolveu o seguinte". É apresentada uma caixa de selecção a indicar: "Kohl Center," "Kohl's Dept. Store-East" e "Kohl's Dept. Store-West" como opções que o utilizador pode escolher.

  • É efectuada a verificação ortográfica dos dados introduzidos e é fornecido um link para alternativas no caso de ter sido detectado um erro ortográfico. Quando o utilizador clica no link, a procura é automaticamente submetida outra vez com a ortografia correcta.

Testes

Procedimento
  1. Identifique os campos de formulário onde o texto correcto pode insinuar texto incorrecto.

  2. Preencha o formulário, introduzindo deliberadamente texto incorrecto nos campos de formulário identificados.

  3. Verifique se são apresentadas sugestões de texto correcto ao utilizador.

  4. Verifique se as sugestões ou um link para as sugestões são fornecidos junto ao campo de formulário.

Resultados Esperados
  • Os passos 3 e 4 são verdadeiros.


G178: Fornecer controlos na página Web que permitam aos utilizadores alterar gradualmente o tamanho de todo o texto numa página até 200%

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer um mecanismo na página Web para aumentar de forma incremental o tamanho do texto. Muitas pessoas com baixa visão não utilizam software de ampliação, e podem não estar familiarizados com os ajustes de tamanho de texto dos browsers. Isto pode acontecer com pessoas mais velhas que só agora estão a aprender a utilizar computadores e que podem ter problemas de perda de visão relacionados com a idade. Também pode acontecer com algumas pessoas que sofrem de incapacidades cognitivas que também necessitem de um tamanho de letra maior.

Esta técnica fornece um mecanismo que será considerado mas fácil de utilizar por alguns utilizadores. O mecanismo pode incluir links ou botões que irão alterar a apresentação visual para uma folha de estilo diferente ou utilizar scripts para alterar o tamanho do texto de forma dinâmica.

Para implementar esta técnica, um autor fornece controlos que permitem ao utilizador aumentar ou diminuir de forma incremental o tamanho do texto de toda a página para um tamanho que seja, no mínimo, 200% do tamanho do texto predefinido.

Isto pode ser alcançado fornecendo links, botões ou imagens com links, e os próprios controlos devem ser o mais fácil possível de encontrar (por ex. posicionados bem à vista na página, apresentados num tamanho de texto maior, alto contraste, etc.).

Esta técnica também pode ser utilizada em circunstâncias em que os tipos de letras ajustáveis não podem ser utilizados, tais como em situações de código legado.

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

Exemplos

  • O artigo de um jornal inclui dois botões no topo da página. O botão "aumentar tamanho do texto" tem um "T" grande com uma seta para cima e o botão "diminuir tamanho do texto" tem um "T" pequeno com uma seta para baixo. Cada um dos botões tem texto alt .

  • Um sítio da Web tem várias folhas de estilo com um tamanho de texto diferente. O utilizador pode escolher qualquer uma das folhas de estilo, se o seu browser fornecer esta funcionalidade. Cada página também inclui os links "Aumentar tamanho do texto" e "Diminuir tamanho do texto", que permitem alterar a folha de estilo actualmente aplicada à folha de estilo alternativa apropriada.

  • Um sítio da Web inclui o texto "Alterar tamanho do texto" seguido dos links "Para Cima" e "Para Baixo" em todas as páginas Web. Os links accionam um Javascript que altera o valor da propriedade tamanho de texto em conformidade.

  • Um sítio da Web inclui um link em todas as páginas intitulado "Alterar tamanho do texto". A página resultante inclui uma série de links que incluem opções que representam os tamanhos disponíveis. Os links intitulam-se "Tamanho de letra mais pequeno", "Tamanho de letra pequeno", "Tamanho de letra predefinido", "Tamanho de letra grande", etc. As instruções que precedem a lista indicam aos utilizadores que escolham um link para alterar para o tamanho de letra pretendido.

Testes

Procedimento
  1. Aumente o tamanho do texto e certifique-se de que o tamanho do texto foi aumentado.

  2. Verifique se o tamanho do texto pode ser aumentado para 200% do tamanho original.

  3. Diminua o tamanho do texto para o valor predefinido e certifique-se de que o tamanho predefinido foi reposto.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G179: Garantir que não existe perda de conteúdo nem de funcionalidade quando o texto é redimensionado e que as caixas de texto não sejam redimensionadas

Aplicabilidade

Todas as tecnologias que refluam o texto quando as janelas são redimensionadas.

Esta técnica está relacionada com:

Descrição

Alguns agentes de utilizador suportam a alteração do tamanho do texto sem alterar outras dimensões da caixa de texto. Pode ocorrer perda de conteúdo ou de funcionalidade quando o texto sai fora do espaço que lhe foi atribuído. Contudo, as propriedades de disposição podem fornecer uma forma de continuar a apresentar o conteúdo de forma eficaz. Os tamanhos do bloco podem ser definidos para um tamanho suficientemente grande, de modo a que o texto não saia fora do espaço quando redimensionado para 200%. O texto pode moldar-se quando deixa de caber no bloco, e o bloco pode ter um comprimento suficiente que permita a todo o texto continuar a caber no bloco. O bloco pode fornecer barras de deslocamento quando o texto redimensionado sair fora do espaço.

Exemplos

Exemplo 1: Uma disposição de página com várias colunas

O HTML e o CSS são utilizados para criar uma disposição de duas colunas para uma página de texto. A utilização do valor predefinido da propriedade white-space, normal, faz com que o texto se molde. Assim, à medida que o tamanho do texto é aumentado para 200%, o texto reflui e a coluna de texto aumenta de tamanho. Se a coluna for demasiado grande para a janela, o agente de utilizador fornece barras de deslocamento, de modo a que o utilizador possa deslocar o texto para lê-lo, uma vez que o autor especificou a regra CSS overflow:scroll ou overflow:auto.

Exemplo 2

A disposição de um jornal com blocos de texto nas colunas. Os blocos têm uma largura fixa, mas não têm um comprimento definido. Quando o texto é redimensionado no browser, o texto molda-se e torna os blocos mais compridos.

Exemplo 3: Tamanhos relativos da caixa e do texto em percentagem e unidades "em"

A utilização de unidades relativas no texto e na caixa permite que a caixa aumente para acomodar o texto, sem quaisquer cortes. Esta imagem mostra o texto com um tamanho e tipo de letra "normal" no Internet Explorer. A caixa cinzenta é a caixa div.

captura de ecrã de unidades relativas com tamanho de texto normal.

Esta imagem mostra o mesmo texto e caixa utilizando o tamanho de letra "maior" no Internet Explorer. A caixa cinzenta aumentou para incluir o texto maior.

captura de ecrã do dimensionamernto relativo com o tamanho do texto maior.

Código Exemplo:

<style type="text/css">
  div { background-color:#ccc; line-height:120%; position:relative; }
  div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
</style>

<div class="RelativeRelative">
  Now is the time for all good men to come to the aid of their country.
</div>

Testes

Procedimento
  1. Aumente o tamanho do texto para 200%.

  2. Verifique se todo o conteúdo e funcionalidade estão disponíveis.

Resultados Esperados
  • O passo 2 é verdadeiro.


G180: Fornecer um meio ao utilizador para definir o limite de tempo para 10 vezes superior ao limite de tempo predefinido

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer tempo suficiente às pessoas com incapacidades para executar tarefas que podem demorar mais tempo a serem executadas do que por pessoas que não têm esses problemas. Alguns mecanismos, tais como uma definição de preferência ou um controlo na página, permitem ao utilizador mudar os limites de tempo para, no mínimo, dez vezes superior ao limite de tempo predefinido. Preferencialmente, o mecanismo tem um ajuste da variável que permite ao utilizador alterar o limite de tempo para qualquer valor dentro do intervalo possível, mas também pode fornecer formas de alterar o limite de tempo através de pequenos incrementos. O utilizador altera o limite de tempo no início da sua sessão, antes de uma actividade que tenha limite de tempo.

Exemplos

  • Uma companhia aérea tem uma aplicação de compra de bilhetes online. Por predefinição, a aplicação tem um limite de tempo de um minuto para cada passo do processo de compra. No início da sessão, a página Web inclui informações que indicam: "Estimamos que cada passo do processo de compra demore um minuto a ser executado pelos utilizadores. Pretende ajustar o limite de tempo?" seguido de vários botões de opção "1 minuto, 2 minutos, 5 minutos, 10 minutos".

  • Uma aplicação Webmail termina automaticamente a sessão dos utilizadores quando não há qualquer acção durante 30 minutos. A aplicação inclui uma preferência que permite aos utilizadores ajustar o período de tempo para qualquer valor.

Testes

Procedimento
  1. Certifique-se de que existe um mecanismo para definir o limite de tempo para 10 vezes superior ao limite de tempo predefinido.

  2. Altere o limite de tempo para um novo valor que seja 10 vezes superior ao limite de tempo predefinido.

  3. Execute uma acção que tenha limite de tempo.

  4. Aguarde até o limite de tempo predefinido terminar.

  5. Verifique se o limite de tempo não expira até o limite especificado no passo 2 terminar.

Resultados Esperados
  • Os passos 1 e 5 são verdadeiros.


G181: Codificar dados de utilizador como dados ocultos ou encriptados numa página de nova autorização

Aplicabilidade

Páginas que necessitem de autenticação por parte do utilizador quando o tempo disponível para submeter os dados é limitado.

Esta técnica está relacionada com:

Descrição

Os servidores da Web que necessitam de autenticação do utilizador terminam, muitas vezes, a sessão após um período de tempo definido sem qualquer acção por parte do utilizador. Se o utilizador não for suficientemente rápido a introduzir os dados e a sessão expirar antes da submissão, o servidor irá necessitar de uma nova autenticação antes de prosseguir. Quando isto acontece, o servidor transmite (como dados ocultos) as informações do formulário para a página utilizada para a nova autenticação. Em seguida, quando o utilizador efectua a nova autenticação, o servidor pode utilizar as informações transmitidas a partir da página da nova autenticação para submeter o formulário directamente ou apresentar uma página que inclua os dados que serão submetidos para revisão. Nesta técnica, o servidor não tem de armazenar quaisquer dados submetidos pelo utilizador. Esta é uma técnica importante para os casos em que seja ilegal, ou represente um risco de segurança, o servidor armazenar as informações temporariamente. Também é útil, uma vez que isenta o servidor de ter de manter as informações armazenadas e de as voltar a ligar com a sessão recentemente autenticada.

Nota: Se os dados que os utilizadores estiverem a submeter forem confidenciais ou representarem um risco de segurança, os autores devem considerar o processo utilizado para transmitir os dados para a página da nova autenticação e, após a nova autenticação, para a página que irá processar os dados originais para garantir que os dados estão protegidos.

Exemplos

  • Um utilizador iniciou sessão para utilizar um wiki e começar a editar uma página. O tempo despendido a executar as edições excede o tempo permitido pelo servidor para inactividade da sessão. Quando o utilizador submete as edições, é notificado de que a sessão expirou e é redireccionado para uma página de início de sessão. O script que trata da submissão do formulário original transmite as edições como uma variável para a página de início de sessão e, depois de o utilizador iniciar sessão com êxito, transmite as edições do utilizador para o script que trata das submissões dos formulários e as edições são processadas como se a sessão não tivesse expirado.

  • Um utilizador iniciou sessão num sítio da Web de compras seguro e introduz algumas informações num formulário de encomenda. Por motivos de segurança, a sessão expira após 30 minutos, mas o utilizador só submete o formulário 45 minutos depois de a página ter sido carregada. O utilizador é informado de que a sessão expirou e é-lhe pedido que inicie sessão novamente. Se o utilizador iniciar a sessão com êxito, o formulário de encomenda é apresentado ao utilizador com todos os dados anteriormente introduzidos e o utilizador pode revê-los e submeter o formulário. Se o início de sessão não for efectuado com êxito, os dados do formulário são rejeitados pelo servidor.

Testes

Procedimento

Num sítio da Web que necessite que o utilizador inicie sessão para submeter os dados:

  1. Inicie sessão e comece a actividade temporizada.

  2. Deixe a sessão expirar.

  3. Submeta os dados.

  4. Volte a autenticar.

  5. Verifique se o processo pode continuar e ser concluído sem perder os dados, incluindo os dados originais e todas as alterações efectuadas após a nova autenticação.

  6. Verifique se o processo utilizado para guardar as informações submetidas no passo 3 não está armazenado no servidor. (Nota: Isto requer conhecimento da tecnologia e das funcionalidade utilizadas para implementar a técnica.)

Resultados Esperados
  • Os passos 5 e 6 são verdadeiros.


G182: Garantir que estão disponíveis sinais de aviso visuais adicionais quando forem utilizadas cores de texto diferentes para transmitir informações

Aplicabilidade

Texto a cores quando a cor é utilizada para transmitir informações, tais como:

  • Palavras que são links num parágrafo

  • Itens numa lista, onde alguns são diferentes de outros e são apresentados em texto a cores

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer um sinal visual redundante para os utilizadores que podem não conseguir distinguir uma diferença na cor do texto. Normalmente, as cores são utilizadas para indicar o estado diferente das palavras que fazem parte de um parágrafo ou outro bloco de texto, ou quando não é possível utilizar caracteres especiais ou gráficos para indicar as palavras que têm um estado especial. Por exemplo, as palavras dispersas no texto podem ser links de hipertexto assinaladas como tal estando numa cor diferente. Esta técnica descreve uma forma de fornecer sinais de aviso para além das cores, de modo a que os utilizadores que possam ter dificuldades em distinguir as cores ou tenham baixa visão as possam identificar.

Para utilizar esta técnica, um autor incorpora um sinal visual para além da cor em todos os locais em que só é utilizada a cor para transmitir informações. Os sinais visuais podem assumir várias formas, incluindo alterações ao estilo do tipo de letra, adição de sublinhados, negrito, itálico ou alterações ao tamanho da letra.

Exemplos

  • Um artigo a comparar a utilização de elementos semelhantes em diferentes linguagens de marcação utiliza texto a cores para identificar os elementos de cada linguagem. Os elementos da primeira linguagem de marcação estão identificados com AZUL, texto a negrito. Os elementos da segunda são apresentados a VERMELHO, texto em itálico.

  • Um sítio da Web de notícias apresenta os cabeçalhos dos artigos que aparecem no sítio da Web. As informações adicionais, tais como a secção onde aparece o artigo, a hora a que foi publicado, uma localização relacionada ou uma indicação de que é acompanhado por um vídeo em directo, são apresentadas em alguns casos. As informações adicionais são apresentadas numa cor diferente da do link que conduz ao artigo, mas cada link é apresentado num tipo de letra maior do que o resto do texto, de modo a que os utilizadores possam identificar os links mais facilmente.

  • Os itens de notícias breves têm, por vezes, frases que também são links para mais informações. Essas frases estão a cores e no tipo de letra Sans-Serif, enquanto o resto do parágrafo está a preto e em Times New Roman.

Testes

Procedimento
  1. Localize todas as ocorrências em que a cor do texto é utilizada para transmitir informações.

  2. Verifique se todo o texto em que é utilizada cor para transmitir informações também foi moldado ou utiliza um tipo de letra que o torna visualmente distinto do outro texto circundante.

Resultados Esperados
  • O passo 2 é verdadeiro.


G183: Utilizar uma relação de contraste de 3:1 com o texto circundante e fornecer sinais de aviso visuais adicionais no foco para links ou controlos identificados apenas por cor

Aplicabilidade

Texto a cores quando só a cor é utilizada para transmitir informações, tais como palavras que são links num parágrafo.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer um sinal visual redundante para os utilizadores que podem não conseguir distinguir uma diferença na cor do texto. Normalmente, as cores são utilizadas para indicar palavras que são links num parágrafo ou noutro bloco de texto. Por exemplo, as palavras dispersas no texto podem ser links de hipertexto identificados apenas por uma cor diferente do texto circundante. Esta técnica descreve uma forma de fornecer sinais de aviso adicionais no efeito hover e foco, de modo a que os utilizadores que possam ter dificuldades em distinguir as cores ou tenham baixa visão as possam identificar.

Com esta técnica, pode ser utilizada uma diferença de luminescência relativa (claridade) de 3:1 ou superior em relação ao texto circundante se a confirmação visual adicional estiver disponível quando um utilizador apontar o link ou utilizar a tecla de tabulação para avançar até ao mesmo. Os realces visuais podem, por exemplo, assumir a forma de sublinhado, uma alteração no estilo do tipo de letra, tal como negrito ou itálico, ou um aumento no tamanho da letra.

Embora a utilização desta técnica seja suficiente para cumprir este critério de sucesso, não é a técnica preferida para distinguir o link. Isto deve-se ao facto de os links que utilizam apenas a luminescência relativa da cor poderem não ser óbvios para as pessoas que só vêem a preto e branco. Se não existir um grande número de links no bloco de texto, recomendamos a utilização do sublinhado para os links.

Nota 1: Esta técnica é sobre a utilização das cores para além da luminosidade. Nesta técnica, a relação de contraste refere-se ao contraste entre um link e as palavras circundantes. Nos Critérios de Sucesso 1.4.3 e 1.4.6, a relação de contraste refere-se ao contraste entre uma palavra e o fundo. A diferença deve-se ao facto de esta técnica ser sobre a capacidade de os utilizadores distinguirem a diferença (uma diferença visível) entre diferentes blocos de texto, enquanto a relação de contraste utilizada nos Critérios de Sucesso 1.4.3 e 1.4.6 é sobre a legibilidade do texto em relação ao fundo para pessoas com incapacidades de visão e de distinção das cores.

Nota 2: Se um autor pretender utilizar a parte sobre as cores desta técnica (i.e., utilizar cores diferentes para as palavras em que as cores têm um contraste suficiente entre si) e também pretender estar em conformidade com o Critério de Sucesso 1.4.3 (contraste das palavras com o fundo), podem ser utilizadas as seguintes cores (por ex., texto a preto num parágrafo num fundo a branco com os links apresentados numa das cores indicadas na lista abaixo).

Nota 3: Se, a uma determinada altura, as tecnologias de apoio ou os browsers da Web fornecerem uma opção para sublinhar todos os links nas páginas Web, isto poderia ser utilizado em vez de um mecanismo de realce de links fornecido pelo autor.

Exemplos

Exemplo 1: Cores que fornecem um contraste de 3:1 com palavras a preto e um contraste de 4.5:1 com um fundo a branco
Exemplo 2

Os links de hipertexto num documento estão a azul-claro (#3366CC) e o texto normal está a preto (#000000). Uma vez que o texto em azul é suficientemente claro, tem um contraste de 3.9:1 com o texto circundante e pode ser identificado como sendo diferente do texto circundante por pessoas com todos os tipos de daltonismo, incluindo as pessoas que não distinguem nenhuma cor.

Recursos

Testes

Procedimento
  1. Localize todas as ocorrências em que só a cor é utilizada para transmitir informações sobre o texto.

  2. Verifique se a luminescência relativa da cor do texto difere da luminescência relativa do texto circundante mediante uma relação de contraste de, no mínimo, 3:1.

  3. Verifique se apontar (com o ponteiro do rato) para o link provoca um melhoramento visual (tal como, um sublinhado, alteração do tipo de letra, etc.)

  4. Verifique se mover o foco do teclado para o link provoca um melhoramento visual (tal como, um sublinhado, alteração do tipo de letra, etc.)

Resultados Esperados
  • Os passos 2, 3 e 4 são verdadeiros.


G184: Fornecer instruções em texto no início de um formulário ou conjunto de campos que descrevem a entrada de dados necessária

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é ajudar o utilizador a evitar erros de entrada, informando-o antecipadamente sobre as restrições de formato de dados que tem de introduzir. As instruções sobre essas restrições são fornecidas no início dos formulários. Esta técnica resulta melhor para formulários com poucos campos, ou para os formulários que tenham muitos campos que exijam dados no mesmo formato. Nestes casos, é mais eficaz descrever o formato uma vez nas instruções no início do formulário, em vez de repetir a mesma informação para cada campo que tenha o mesmo requisito de formato restrito.

Exemplos

Exemplo 1

Um sítio da Web de negócios permite aos utilizadores enviar descrições de empregos que tiverem. O formulário para reunir as informações inclui campos para o nome da empresa, cargo, datas de início e de fim e descrição da função. No início do formulário encontram-se as seguintes instruções:

  • Introduza as informações solicitadas sobre o cargo que pretende adicionar ao seu perfil. As datas devem ser introduzidas no formato mm/dd/aaaa.

Exemplo 2

Um directório empresarial permite aos utilizadores personalizar as informações, tais como o número de telefone e responsabilidades da função, editando o seu perfil. No início do formulário encontram-se as seguintes instruções:

  • Pode modificar as informações em qualquer um dos campos. Depois de seleccionar Concluir, as alterações serão guardadas e terá a oportunidade de publicar o seu perfil. Se decidir que não pretende manter as alterações, seleccione o botão Cancelar.

  • Não pode editar as informações que são apresentadas como texto do sistema no seu perfil (i.e., não incluídas num campo). Estas informações foram obtidas a partir dos recursos humanos de uma empresa. Se encontrar alguma informação incorrecta ou desactualizada que não consiga editar, seleccione o ícone de ajuda junto às informações para descobrir como corrigi-las.

  • Os números de telefone só podem incluir números e travessões (-).

  • Os campos obrigatórios estão assinalados com um asterisco (*) e têm de ser preenchidos para concluir o formulário.

Testes

Procedimento
  1. Identifique controlos de formulário que só irão aceitar dados introduzidos pelo utilizador num determinado formato.

  2. Verifique se são fornecidas instruções no início do formulário sobre o formato esperado para cada um dos controlos de formulário identificados no passo 1.

Resultados Esperados
  • O passo 2 é verdadeiro.


G185: Aceder, através de um link, a todas as outras páginas do sítio da Web a partir da página inicial

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é tornar possível aos utilizadores a localização de todas as informações num sítio da Web de pequenas dimensões, fornecendo links para todas as páginas Web a partir da página inicial. Se o número de páginas do sítio da Web for pequeno o suficiente, a página inicial pode incluir directamente informações sobre o mapa do sítio da Web. As restantes páginas do sítio da Web incluem links para a página inicial.

Desta forma, a página inicial funciona como dois mecanismo num só. Fornece a navegação normal para as páginas e é igualmente um mapa do sítio da Web.

Todas as páginas do sítio da Web podem incluir links para todas as restantes páginas, e esses conjuntos de links cumprem o Critério de Sucesso 3.2.3 (Navegação Consistente).

Exemplos

  • Um pequeno sítio da Web comercial de um consultor contém uma página inicial, uma página Contactos para contactar o consultor, uma página a descrever a formação do consultor e uma página com exemplos do trabalho do consultor. Cada página contém uma barra de navegação que conduz a todas as restantes páginas existentes no sítio da Web.

Testes

Procedimento
  1. Verifique se a página inicial inclui links para todas as restantes páginas do sítio da Web.

  2. Verifique se todas as restantes páginas do sítio da Web incluem links para a página inicial.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G186: Utilizar um controlo na página Web que pára o conteúdo em movimento, em modo intermitente ou em actualização automática

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer ao utilizador um controlo que lhe permita parar o conteúdo em movimento ou em modo intermitente. Uma vez que o controlo se encontra na página Web, o próprio controlo cumpre o nível apropriado de conformidade com as WCAG, por ex., tem um contraste apropriado, um nome que o identifica e é acessível por teclado. O controlo encontra-se no topo da página ou está adjacente ao conteúdo em movimento. Um único controlo pode parar todo o conteúdo em movimento ou em modo intermitente existente na página, ou podem existir controlos separados para partes individuais do conteúdo.

Exemplos

Exemplo 1: Ticker Tape da Bolsa de Valores

Uma página Web apresenta os resultados mais recentes da bolsa de valores numa "ticker tape" (fita registadora) que se desloca automaticamente ao longo da parte inferior do ecrã. Um botão "Colocar em Pausa" permite ao utilizador parar a ticker tape. Quando a ticker tape é retirada da pausa, retoma a apresentação das informações actuais sobre a bolsa de valores.

Exemplo 2: Ferramenta de Teleconferência

Uma página Web de teleconferência apresenta uma fila de pessoas que pretendem falar. Uma caixa de verificação na página permite ao utilizador escolher se a apresentação da fila deve ser actualizada automaticamente quando é adicionada ou removida uma pessoa, ou se só deve ser actualizada quando o utilizador pressiona o botão "Actualizar". Quando a fila está a ser actualizada automaticamente, o botão Actualizar está desactivado.

Testes

Procedimento
  1. Verifique se existe um controlo na página Web para parar o movimento.

  2. Active o controlo.

  3. Verifique se o movimento, o modo intermitente ou a actualização automática pararam.

Resultados Esperados
  • Os passos 1 e 3 são verdadeiros.


G187: Utilizar uma tecnologia para incluir conteúdo em modo intermitente que possa ser desactivado através do agente de utilizador

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que o conteúdo em modo intermitente pode ser desactivado utilizando funcionalidades do agente de utilizador. Os agentes de utilizador permitem ao utilizador parar a animação do conteúdo em determinadas tecnologias. Quando o utilizador activa esta funcionalidade, toda a animação, incluindo a que está em modo intermitente, é parada.

A forma mais comum para os utilizadores pararem a animação é pressionar a tecla "escape". Desde que não existam processos que sejam prioritários na fila de eventos ao pressionar essa tecla, ela funciona como um comando para parar a animação do conteúdo em movimento ou em modo intermitente.

As tecnologias nas quais esta técnica costuma funcionar incluem:

  • Graphics Interchange Format (GIF)

  • Animated Portable Network Graphics (APNG)

Exemplos

  • Uma página inclui uma faixa em modo intermitente com o objectivo de chamar a atenção dos utilizadores para a mesma. A faixa é uma imagem gif animada que se repete indefinidamente. O utilizador pressiona a tecla "escape", fazendo com que o agente de utilizador pare a animação de todas as imagens gif animadas existentes na página.

Testes

Procedimento
  1. Carregue uma página que inclua conteúdo em modo intermitente.

  2. Active o comando do browser para parar a animação (normalmente, a tecla Escape).

  3. Certifique-se de que o modo intermitente pára.

Resultados Esperados
  • O passo 3 é verdadeiro.


G188: Fornecer um botão na página para aumentar o espaçamento entre linhas e entre parágrafos

Aplicabilidade

Qualquer tecnologia.

Esta técnica está relacionada com:

Descrição

Muitas pessoas com incapacidades cognitivas têm dificuldade em ler texto com espaçamento simples. Um botão que aumente a altura da linha irá ajudá-las a ler o conteúdo. Para manter a separação dos parágrafos, o espaço entre eles também deve aumentar, de modo a ser, no mínimo, 1,5 vezes tão alto como o espaçamento entre as linhas.

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

Exemplos

Exemplo 1

Utilize a mudança normal de folhas de estilo ou inclua um botão ou link na página que mude a folha de estilo. A nova folha de estilo inclui uma régua para aumentar a altura da linha e uma categoria para aumentar o espaçamento entre parágrafos.

Código Exemplo:

p {line-height: 150%; margin-bottom: 2em;} 

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 botão ou um link na página que aumentem a altura da linha e o espaçamento entre parágrafos e que estejam identificados como tal.

  2. Active o botão ou o link.

  3. Verifique se a funcionalidade aumenta a altura da linha e o espaçamento entre parágrafos.

  4. Verifique se o aumento do espaçamento entre parágrafos é, no mínimo, 1,5 vezes superior ao espaçamento entre linhas.

Resultados Esperados
  • Os passos 1, 3 e 4 são verdadeiros.


G189: Fornecer um controlo junto do início da página Web que altere o texto do link

Aplicabilidade

Todas as tecnologias que incluam links.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer ao utilizador um controlo no início da página que o conduza até uma versão alternativa em conformidade da página Web em que só o texto de cada link é suficiente para determinar a sua finalidade fora de contexto.

Alguns utilizadores preferem links que sejam independentes, em que não haja necessidade de explorar o contexto do link. Outros utilizadores consideram que incluir as informações de contexto em cada link é repetitivo e que reduz a sua capacidade de utilizar um sítio da Web. Entre os utilizadores das tecnologias de apoio, a resposta ao grupo de trabalho sobre o que é preferível ficou dividida. Esta técnica permite aos utilizadores escolher a abordagem que melhor satisfaça as suas necessidades. Os utilizadores que necessitam ou preferem um texto do link potencialmente extenso, mas completo, utilizam esta versão.

Se o controlo para mudar para a versão alternativa for um link, a finalidade do controlo tem de ser sempre compreendida a partir do texto do link.

Esta técnica fornece a versão alternativa da visualização actual da página. Também é possível, e em alguns casos aconselhável, guardar esta preferência num cookie ou perfil de utilizador do lado do servidor, de modo a que os utilizadores só tenham de efectuar a selecção uma vez por sítio da Web e sejam automaticamente conduzidos à sua versão preferida.

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

Exemplos

Exemplo 1: Fornecer um Link para outra Versão

Uma página Web apresenta livros para download em diferentes formatos. As versões alternativas da página Web utilizam apenas o formato do livro como o texto do link ou o título do livro e o tipo de formato.

Versão com texto do link abreviado:

Código Exemplo:

...
<h1>Books for download</h1>
  <p><a href="books-full-links.html" >Full link Version</a></p>

  <ul>
  <li>The History of the Web: 
  <a href="history.docx" class="hist">Word</a>, 
  <a href="history.pdf" class="hist">PDF</a>, 
  <a href="history.html" class="hist">HTML</a>
  </li>
  ...
  </ul> 

Versão com texto do link completo:

Código Exemplo:

...
<h1>Books for download</h1>
  <p><a href="books-short-links.html" >Short link Version</a></p>

  <ul>
  <li>The History of the Web: 
  <a href="history.docx" class="hist">The History of the Web(Word)</a>, 
  <a href="history.pdf" class="hist">The History of the Web(PDF<)/a>, 
  <a href="history.html" class="hist">The History of the Web(HTML)</a>
  </li>
  ...
  </ul>

Testes

Procedimento
  1. Verifique se existe um controlo no início da página Web para alterar o texto do link.

  2. Active o controlo.

  3. Verifique se todos os links na página da Web resultante têm um texto que descreva a sua finalidade.

Resultados Esperados
  • Os passos 1 e 3 são verdadeiros.


G190: Fornecer um link adjacente ou associado a um objecto que não esteja em conformidade para aceder a uma versão alternativa em conformidade

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

É recomendado que todos os objectos numa página estejam em conformidade, mas existem determinadas circunstâncias em que tal pode não ser possível. Podem existir situações em que um objecto ou uma secção de conteúdo se destinem a pessoas com determinadas incapacidades, e que esses mesmos atributos os tornem inacessíveis a outras pessoas. Também podem existir outras razões para não ter um objecto em conformidade numa página Web. Quando um objecto não está em conformidade, existe um link para uma versão alternativa em conformidade junto ao objecto que não está em conformidade, na ordem de leitura linear, ou um link associado ao conteúdo que não está em conformidade. A versão alternativa em conformidade transmite as mesmas informações da versão que não está em conformidade.

Exemplos

Exemplo 1: Um vídeo de uma música rap, em que as áudio-descrições interferem com a integridade artística da música

Um vídeo de uma música rap intitulada "The Hip Hop Kid" tem um cenário musical. A introdução das partes faladas da "Áudio-Descrição" durante as pausas na música interfere com as linhas de guitarra e os sons de bateria que o artista está a tentar transmitir. Na página Web, imediatamente a seguir ao tema do vídeo, existe um link que indica: "Versão áudio-descrição de 'The hip hop kid'" que inclui uma versão do vídeo com áudio-descrições do que acontece visualmente no vídeo.

Exemplo 2: Uma imagem de um documento histórico

Uma página Web sobre a Declaração da Independência inclui uma imagem do documento. Não existe contraste suficiente entre o texto e o fundo, e a caligrafia do documento é difícil de ler. Um link conduz o utilizador a uma versão HTML do documento.

Exemplo 3: Uma animação que não é suportada por acessibilidade

Uma animação interactiva criada utilizando uma tecnologia Web que não é suportada por acessibilidade é apresentada numa página Web. Existe um link para uma versão alternativa em conformidade da animação junto ao conteúdo que não está em conformidade.

Testes

Procedimento

Para cada objecto que não esteja em conformidade numa página:

  1. Certifique-se de que existe um objecto que não esteja em conformidade na página Web.

  2. Certifique-se de que existe um link para uma versão em conformidade identificável do objecto imediatamente a seguir ao objecto que não está em conformidade na ordem de leitura linear.

  3. Certifique-se de que o link conduz a uma versão em conformidade.

Resultados Esperados
  • Os passos 2 e 3 são verdadeiros.


Fornecer um link, um botão ou outro mecanismo que recarregue a página sem qualquer conteúdo em modo intermitente

Aplicabilidade

Esta técnica está relacionada com todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Esta é uma técnica geral para permitir que as pessoas que não conseguem utilizar uma página com conteúdo em modo intermitente possam desactivá-lo. O Requisito de Conformidade 1 permite que sejam utilizadas páginas alternativas em conformidade para cumprir o requisito de conformidade. Esta técnica é um exemplo dessa abordagem aplicada ao Critério de Sucesso 2.2.2.

É importante que a página sem conteúdo em modo intermitente inclua todas as informações que estavam na página com conteúdo em modo intermitente.

Nota 1: Remover o conteúdo em modo intermitente da página só seria satisfatório se o conteúdo em modo intermitente fosse redundante com o conteúdo sem estar em modo intermitente da página original.

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

Exemplos

  • Uma página inclui texto em modo intermitente no início para avisar os utilizadores que não devem submeter a página sem se registarem primeiro. Um link no topo da página recarrega a página com o texto em modo intermitente substituído por texto concebido para ser de alta visibilidade, mas sem estar em modo intermitente.

Testes

Procedimento
  1. Verifique se existe um mecanismo para recarregar a página para desactivar o modo intermitente.

  2. Verifique se a página recarregada não está em modo intermitente.

  3. Verifique se a página recarregada tem todas as informações e funcionalidade da página original.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G192: Estar em conformidade total com as especificações

Aplicabilidade

Esta técnica está relacionada com todas as linguagens de marcação com especificações.

Esta técnica está relacionada com:

Descrição

Quando as linguagens de marcação são utilizadas de uma forma totalmente em conformidade com as suas especificações, são cumpridos todos os requisitos indicados no Critério de Sucesso 4.1.1. Por conseguinte, apesar de a conformidade total com as especificações não ser obrigatória para a conformidade com as WCAG 2.0, é uma prática recomendada e considerada de tipo suficiente para cumprir o Critério de Sucesso 4.1.1.

Exemplos

  • Uma página é criada cuidadosamente para garantir que todas as tecnologias são utilizadas de acordo com a especificação. É efectuada uma validação e todos os erros identificados são corrigidos. Os requisitos da especificação que não possam ser identificados através da validação são igualmente verificados e todas as falhas são corrigidas.

Testes

Procedimento
  1. Verifique se todas as tecnologias são utilizadas de acordo com a especificação.

Nota: Embora as validações possam ser óptimas ferramentas para detectar erros, normalmente não conseguem detectar todos os casos em que o conteúdo falha na conformidade total com uma especificação.

Resultados Esperados
  • O passo 1 é verdadeiro.


G193: Fornecer ajuda por intermédio de um assistente na página Web

Aplicabilidade

Todas as tecnologias.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é fornecer ajuda utilizando um avatar de multimédia que fornece assistência na utilização da página Web. Um avatar pode ser particularmente útil para pessoas com incapacidades cognitivas que possam ter dificuldades em ler texto. A utilização de suportes visuais irá ajudar algumas pessoas a focarem-se no conteúdo apresentado.

Nota: O avatar de multimédia também tem de cumprir o importante Critério de Sucesso na Directriz 1.2.

Exemplos

  • A página inicial de uma aplicação bancária online tem um avatar incorporado denominado Vanna, que fornece aos novos clientes online uma visita pelas funcionalidades da aplicação. O assistente pode ser iniciado, parado ou colocado em pausa. O cliente pode retroceder e avançar no conteúdo. Está disponível uma alternativa em texto das informações a partir de um link junto ao avatar.

  • Um sítio da Web de voluntariado tem uma página de boas-vindas para novos voluntários, que inclui um formulário de inscrição. No lado direito da página, existe um ficheiro multimédia interactivo com um avatar que explica todas as funcionalidades e secções do formulário de inscrição.

Testes

Procedimento
  1. Verifique se existe um assistente na página Web.

  2. Verifique se o assistente fornece informações para ajudar a compreender o conteúdo da página.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G194: Fornecer a verificação ortográfica e sugestões para entrada de texto

Aplicabilidade

Esta técnica está relacionada com todas as tecnologias.

Esta técnica está relacionada com:

Descrição

Nesta técnica, são fornecidas a verificação ortográfica e as sugestões de palavras. É frequente as pessoas com incapacidades cognitivas terem dificuldade em escrever uma palavra, mas podem ser capazes de a escrever quase correctamente. Um programa de verificação ortográfica irá poupar-lhes o tempo que despenderiam a procurar a forma correcta de escrever a palavra. Isto também será útil para pessoas cegas ou com baixa visão que possam enganar-se a escrever. Também ajudará pessoas com incapacidades de destreza que possam utilizar um ponteiro de cabeça, ou ter um software de digitalização que torne a escrita muito lenta e difícil. Uma solução de verificação ortográfica que fornece sugestões de palavras e um mecanismo simples para seleccionar uma e introduzi-la no campo de entrada de dados fornece uma importante ajuda a estes utilizadores e outros.

Exemplos

  • Um motor de busca tem um campo de formulário para procurar termos. Quando o formulário é submetido, uma aplicação do lado do servidor verifica a ortografia. Se a verificação ortográfica não encontrar palavras correspondentes para esse idioma, devolve uma página com uma mensagem de texto no topo a indicar "Pretendia dizer..." com um link para a palavra sugerida. Se o utilizador clicar no link, o termo sugerido é introduzido no campo de formulário e é novamente submetido.

  • Uma companhia aérea tem uma aplicação de compra de bilhetes online. Quando um utilizador introduz o nome de uma cidade no campo de formulário, é apresentado um menu pendente que mostra a correspondência mais próxima do nome da cidade na parte superior do menu e outras sugestões abaixo.

Testes

Procedimento
  1. Verifique se existe um campo de formulário na página.

  2. Introduza uma palavra mal escrita.

  3. Verifique se é apresentada uma sugestão de ortografia.

  4. Verifique se existe um mecanismo disponível para introduzir a palavra sugerida no formulário.

Resultados Esperados
  • Os passos 3 e 4 são verdadeiros.


G195: Utilizar um indicador de foco de alta visibilidade fornecido pelo autor

Aplicabilidade

Aplicável em geral.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é melhorar o indicador do foco no browser, criando um de alta visibilidade no conteúdo. Em muitos browsers, o indicador de foco predefinido é uma linha preta, fina e tracejada. Pode ser difícil ver a linha quando está à volta de um elemento de formulário que já tem contorno, quando o elemento que recebe o foco se encontra dentro da célula de uma tabela, quando o elemento que recebe o foco é muito pequeno ou quando o fundo da página tem uma cor escura.

Nesta técnica, quando o utilizador coloca o foco sobre um elemento, utilizando o rato, a tecla de tabulação, as teclas de cursor, os atalhos de teclado ou qualquer outro método, a aplicação torna o foco mais visível, utilizando uma combinação de uma cor de alto contraste, um linha fina e outros indicadores visuais, tais como o brilho.

Exemplos

Exemplo 1: Links

Uma página Web tem um fundo com uma cor escura e o texto e os links com uma cor clara. Quando o foco é colocado sobre um link, este é realçado com uma linha em amarelo vivo, com 3 pixéis.

Exemplo 2: Elementos de Formulário

Uma página Web inclui um formulário dentro de uma tabela. Os limites da tabela e dos elementos de formulário são linhas pretas e finas. Quando o foco é colocado sobre um elemento de formulário, o elemento é realçado com uma linha vermelha de 5 pixéis que é parcialmente transparente.

Exemplo 3: Menus

Uma página Web inclui um menu interactivo com submenus. Um utilizador pode mover o foco no menu utilizando as teclas de cursor. À medida que o foco se move, o item de menu actualmente com o foco muda o fundo para uma cor diferente, com uma relação de contraste de 3:1 com os itens circundantes e uma relação de contraste de 4.5:1 com o seu próprio texto.

Testes

Procedimento
  1. Utilizando o rato, coloque o foco em cada elemento da interface de utilizador que pode receber foco existente na página.

  2. Verifique se existe um indicador de foco de alta visibilidade.

  3. Utilizando o teclado, coloque o foco em cada elemento da interface de utilizador que pode receber foco existente na página.

  4. Verifique se existe um indicador de foco de alta visibilidade.

Resultados Esperados
  • Os passos 2 e 4 são verdadeiros.


G196: Utilizar uma alternativa em texto num item de um grupo de imagens que descreva todos os itens do grupo

Aplicabilidade

Qualquer tecnologia onde seja utilizado um agrupamento de conteúdo não textual para apresentar as informações ou a funcionalidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar a duplicação desnecessária que ocorre quando é utilizado um agrupamento de conteúdo não textual adjacente para apresentar as informações ou a funcionalidade.

Em alguns casos, as páginas irão apresentar um grupo de imagens para transmitir as informações. Quando apresentados em conjunto ou numa combinação específica, estes agrupamentos podem transmitir diferentes tipos de informação. Por exemplo, duas imagens de uma estrela, em que uma é apresentada a preto e branco e a outra a cores, podem ser utilizadas em conjunto para representar a classificação de um utilizador. Por exemplo, três estrelas preenchidas seguidas por duas estrelas não preenchidas podem representar uma classificação de três em cinco estrelas.

Para utilizar esta técnica, um autor fornece uma alternativa em texto que serve a mesma finalidade para todo o grupo e associa-a a um item do grupo. Em seguida, os restantes itens do grupo são assinalados de modo a poderem ser ignorados pelas tecnologias de apoio. Desta forma, o utilizador pode identificar de forma mais eficaz a finalidade do grupo e evitar a possível duplicação ou confusão no caso de ter sido fornecida uma alternativa em texto para cada item do grupo.

Exemplos

Exemplo 1: Um sistema de classificação em HTML

No exemplo seguinte, é apresentada uma classificação de três estrelas preenchidas e duas estrelas não preenchidas. Embora fosse possível fornecer uma alternativa em texto para cada uma das cinco imagens, o autor optou por fornecer a classificação na forma de "3 em 5 estrelas" para a primeira imagem e assinalou as restantes utilizando texto alt nulo.

Código Exemplo:

<p>Rating: 
   <img src="star1" alt="3 out of 5 stars">
   <img src="star1" alt="">
   <img src="star1" alt="">
   <img src="star2" alt="">
   <img src="star2" alt="">
  </p>
Exemplo 2: Um botão criado a partir de um grupo de imagens em XHTML

Neste exemplo, cada botão tem um conjunto de imagens para indicar o nível de conformidade com as WCAG exigido. Esta abordagem permite que as tecnologias de apoio evitem indicações do tipo: "Imagem A, Imagem A, Imagem A", etc.

Código Exemplo:

<p>Conformance Level:</p>
 <button name="A"><img src="a.png" alt="A" /></button> <br />
 <button name="AA"><img src="a.png" alt="AA" /><img src="a.png" alt="" /></button> <br />
 <button name="AAA"><img src="a.png" alt="AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>

Testes

Procedimento
  1. Verifique se um item no grupo inclui uma alternativa em texto que sirva a mesma finalidade para todo o grupo.

  2. Verifique se os restantes itens no grupo estão assinalados de forma a poderem ser ignorados pelas tecnologias de apoio.

  3. Verifique se os itens assinalados de forma a poderem ser ignorados pelas tecnologias de apoio estão adjacentes ao item que contém a alternativa em texto para o grupo.

Resultados Esperados
  • Todos os passos acima são verdadeiros.


G197: Utilizar etiquetas, nomes e alternativas em texto de forma consistente para conteúdo que tenha a mesma funcionalidade

Aplicabilidade

Todo o conteúdo.

Esta técnica está relacionada com:

Descrição

A finalidade desta técnica é ajudar os utilizadores com incapacidades cognitivas, cegueira ou perda de visão a compreender o que acontece quando interagem com uma função numa página Web. Se existirem etiquetas diferentes nos componentes da interface de utilizador (i.e., elementos, links, objectos JavaScript objects, etc.) que tenham a mesma função, o utilizador não irá saber que encontrou um componente com a mesma função nem o que poderá esperar. Isto pode originar vários erros desnecessários. É igualmente recomendado que esta abordagem a uma colocação de etiquetas consistente seja aplicada em todo o sítio da Web.

Exemplos

  • Uma página Web tem um campo de formulário no topo intitulado "Procura". Na parte inferior da página existe outro campo de formulário que fornece a mesma função e também está identificado como "Procura".

  • Uma imagem de um ponto de interrogação é utilizada para conduzir os utilizadores para secções da página que fornecem informações adicionais. Sempre que a imagem do ponto de interrogação aparece, tem a mesma alternativa em texto "mais informações".

  • Um link para a página Contacte-nos de um sítio da Web tem o texto "Contacto". Na parte inferior da página existe um link que também conduz até à página Contacte-nos e inclui igualmente o texto "Contacto".

Testes

Procedimento
  1. Verifique se cada componente está associado a texto que o identifique (i.e., etiqueta, nome ou alternativa em texto).

  2. Verifique se este texto associado é idêntico para cada componente da interface de utilizador com a mesma função.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G198: Fornecer uma forma para o utilizador desactivar o limite de tempo

Aplicabilidade

Esta técnica está relacionada com todas as tecnologias.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é fornecer um mecanismo para as pessoas que não conseguem executar tarefas num determinado limite de tempo o poderem desactivar.

É essencial que o mecanismo para desactivar o limite de tempo possa ser executado sem um limite de tempo e antes de a página expirar. Para tal, o mecanismo deve estar disponível no topo da página, ou próximo do mesmo, de modo a poder ser encontrado e activado rapidamente por pessoas que tenham várias incapacidades.

Exemplos

  • Uma página tem uma lista de cabeçalhos de notícias que é automaticamente actualizada a cada minuto. No topo da página existe um link que desactiva a actualização.

Testes

Procedimento
  1. Verifique se existe um mecanismo para desactivar todos os limites de tempo no topo da página.

  2. Verifique se o tempo limite para a página é suficientemente longo para um utilizador poder navegar facilmente até ao mecanismo, mesmo que seja 10 vezes mais lento do que a maioria dos utilizadores.

Resultados Esperados
  • Os passos 1 e 2 são verdadeiros.


G199: Fornecer uma resposta positiva quando os dados forem submetidos com êxito

Aplicabilidade

Conteúdo que aceite entrada de dados por parte do utilizador.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é reduzir o esforço exigido aos utilizadores para confirmarem se uma acção, tal como submeter um formulário da Web, foi concluída com êxito. Isto pode ser conseguido fornecendo regularmente uma mensagem a indicar explicitamente o êxito de uma acção, em vez de exigir que um utilizador navegue no conteúdo para descobrir se a acção foi concluída com êxito.

Os utilizadores que não conseguem pesquisar as informações para confirmar a sua acção (por ex., se os dados submetidos foram introduzidos com êxito numa base de dados, enviados a uma pessoa, ou adicionados a conteúdo que está a ser editado) podem despender de um esforço significativo.

Exemplos

  • Um utilizador inicia sessão num sistema e recebe uma mensagem a informar: "Iniciou sessão com êxito". Desta forma, o utilizador não necessita de navegar no ecrã para encontrar uma indicação de que tem sessão iniciada, tal como encontrar o seu nome de utilizador, ou talvez o link de iniciar sessão substituído por um link de terminar sessão. Encontrar estes sinais de aviso pode ser moroso.

  • Um utilizador preenche um questionário ou teste e submete-o. É apresentada uma mensagem a informar que o teste foi submetido com êxito, para que o utilizador não necessite de navegar nos dados, tal como uma lista de testes submetidos, para confirmar se o seu teste é indicado.

  • Um visitante cria uma conta num sítio da Web. Após a submissão do formulário, surge uma mensagem a informar: "O registo foi submetido com êxito...". Se o início de sessão do utilizador for efectuado automaticamente após o registo, a mensagem também informa: "... e a sessão foi iniciada". Se for necessária confirmação, a mensagem informa: "... foi-lhe enviado um e-mail ao qual terá de responder para confirmar o registo".

  • Um utilizador submete um formulário com informações dirigidas à equipa de suporte. É apresentada a mensagem "A mensagem foi enviada com êxito e deverá receber uma resposta nas próximas 48 horas".

Testes

Procedimento
  1. Preencha os campos do formulário sem erros.

  2. Submeta o formulário.

  3. Verifique se é apresentada uma mensagem no ecrã a confirmar que a submissão foi efectuada com êxito.

Resultados Esperados
  • O passo 3 é verdadeiro.


2. Técnicas HTML e XHTML


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.


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.


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>