Avaliação de acessibilidade de páginas web

MÓDULO 2
ACESSIBILIDADE WEB E TECNOLOGIAS DE
APOIO
RELATÓRIO FINAL
AVALIAÇÃO DE ACESSIBILIDADES
EM PÁGINAS WEB
GRUPO: PROFS DO OESTE
CONCEIÇÃO MONTEIRO
CRISTINA NETO
MAIO 2014

MOOC INCTEC 2014
Módulo 2
Profs do Oeste: Cristina Neto
Conceição Monteiro Página 2 de 27
AVALIAÇÃO DE ACESSIBILIDADE DE PÁGINAS WEB (ALTERNATIVA 3)
As WCAG (Web Content Accessibility Guidelines) 2.0
são diretrizes internacionais para a elaboração de
páginas de Internet de forma acessível a pessoas com
dificuldades/limitações cognitivas, motoras e/ou
sensoriais.
Foram delineadas pela W3C (World Wide Web
Consortium), comunidade internacional que
desenvolve normativas para assegurar o crescimento
da Web a longo prazo.
Na introdução do documento que estabelece as diretrizes conhecidas por WCAG 2.0, pode ler-
se:
“As Directrizes de Acessibilidade para o Conteúdo da Web (WCAG) 2.0 abrangem uma vasta
gama de recomendações para tornar o conteúdo da Web mais acessível. (…) O cumprimento
destas directrizes facilitará a utilização do conteúdo da Web pelos utilizadores em geral.
Os critérios de sucesso das WCAG 2.0 são apresentados como declarações testáveis que não
são de tecnologia específica. São apresentadas, em documentos distintos, orientações sobre
como satisfazer os critérios de sucesso em tecnologias específicas, bem como informações
gerais sobre como interpretar os critérios de sucesso.”
Estas diretrizes pretendem assegurar o cumprimento dos seguintes princípios:
1 - Perceptível: A informação e os componentes da interface de utilizador têm de ser
apresentados aos utilizadores em formas que eles possam percepcionar
2 - Operável: Os componentes da interface de utilizador e a navegação têm de ser operáveis.
3 – Compreensível: A informação e a operação da interface de utilizador têm de ser
compreensíveis.
4 – Robusto: O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma
fiável por diversos agentes de utilizador, incluindo tecnologias de apoio.
A avaliação da acessibilidade das páginas faz-se através da análise de três níveis de
conformidade: A, AA e AAA, sendo A aquele que determina as acessibilidades básicas.
A aplicação destas directrizes destina-se a ser operacionalizada por webdesigners ou
profissionais de informática e é demasiado complexa para o utilizador comum. No entanto, o
conhecimento, ainda que superficial, destas diretrizes proporciona uma nova perspetiva
1 - Logo da W3C

MOOC INCTEC 2014
Módulo 2
relativamente às implicações que a criação de uma página web suscita no que diz respeito às
acessibilidades, para a qual não estaríamos despertas.
Decidimos analisar páginas de caráter institucional por esperarmos que
obtivessem bons resultados na avaliação feita pelo AccessMonitor.
Selecionámos a página que se destina aos estudantes com Necessidades
Educativas Especiais da Universidade de Lisboa e a página do nosso
MOOC.
Os resultados obtidos demonstram-se nos relatórios em anexo.
Verificamos que ambas ficam muito aquém do que seria desejável,
nomeadamente, por serem páginas de conteúdo de interesse para pessoas
com NEE.
Para comparação, apresentamos abaixo a síntese do relatório obtido na análise da página da
Caixa Geral de Depósitos, que alcançou a pontuação máxima de 10. Também a página da
Agência para a Sociedade do Conhecimento, do Ministério da Educação e Ciência, separador
Inclusão e Acessibilidade, que obteve o resultado de 9.8, passando os níveis de conformidade
A e AA, apresentando um único erro no nível AAA. Estas duas páginas foram selecionadas
pelos resultados da avaliação e por, simultaneamente, apresentarem conteúdo de interesse
para pessoas com NEE.
3 - Síntese do relatório de avaliação de acessibilidades da página da Caixa Geral de Depósitos, realizada no
AccessMonitor
2 – Logo Access
Monitor

MOOC INCTEC 2014
Módulo 2
4 - Síntese do relatório de avaliação de acessibilidades da página da Agência para a Sociedade do Conhecimento,
realizada no AccessMonitor

MOOC INCTEC 2014
Módulo 2
Relatório AccessMonitor WCAG 2.0
Página testada Universidade de Lisboa
Link http://www.ulisboa.pt/home-page/estudar/necessidades-educativas-especiais/
Resultado 4.6 - Esta página não passa a bateria de testes do AccessMonitor de nível "A"

MOOC INCTEC 2014
Módulo 2
Detalhes dos testes
NÍVEIS DE CONFORMIDADE/ERROS DETETADOS
A AA
AAA
(1)
Marcação de links, menus e textos dos links
 Repete-se 4 vezes a palavra “legislação”
 Repete-se 2 vezes a palavra “contactos”
Esta ocorrência está relacionada com uma falha
comum em que links como "clique aqui" ou "ver
mais" precisam da informação que os rodeia para
contextualizar a sua finalidade. Só pelo contexto é
possível aos utilizadores distinguir os links e
determinar o seu propósito.
Critério WCAG 2.0 não cumprido:
F84: Falha do Critério de Sucesso 2.4.9
devido à utilização de um link não
específico, tal como "clique aqui" ou
"mais" sem um mecanismo para alterar o
texto do link para texto específico
 Critério de Sucesso 2.4.9 (Finalidade do
Link (Apenas o Link))

MOOC INCTEC 2014
Módulo 2
o Como Cumprir o 2.4.9 (Finalidade
do Link (Apenas o Link))
o Noções sobre o Critério de
Sucesso 2.4.9 (Finalidade do Link
(Apenas o Link))
Links para contornar blocos de informação
A
(2)
AA AAA
 Constatou-se que o primeiro link da
página não nos conduz até à área do
conteúdo principal.
O objetivo é disponibilizar um mecanismo que
permita contornar blocos de material que se
repetem em múltiplas páginas Web, passando
directamente para o conteúdo principal. O primeiro
item interactivo da página Web deve ser um link que
nos conduza ao início do conteúdo principal.
G1: Adicionar um link no topo de cada
página para aceder directamente à
área do conteúdo principal
Esta técnica WCAG 2.0 está relacionada com:
 Critério de Sucesso 2.4.1 (Nível A) Noções
sobre CS 2.4.1

MOOC INCTEC 2014
Módulo 2
 Constatou-se que não existem links para
contornar blocos de texto
permita contornar blocos de material, saltando para
o fim desses mesmos blocos.
G123: Adicionar um link no início de
um bloco de conteúdo repetido para
aceder directamente ao fim do bloco
 Critério de Sucesso 2.4.1 (Nível A) Noções
sobre CS 2.4.1
Marcação de formulários
A
(2)
AA AAA
 Foram identificados 2 formulários sem
botão de envio
permita aos utilizadores efectuar explicitamente um
pedido de mudança de contexto. Para cada

MOOC INCTEC 2014
Módulo 2
formulário, verifique que o mesmo dispõe de um
botão de envio
H32: Fornecer botões Submit
 Critério de Sucesso 3.2.2 (Nível A) Noções
sobre CS 3.2.2
 Foram identificados 3 controlos de
formulário sem etiquetas associadas e
sem o atributo title
Os elementos label, associados aos elementos input,
asseguram que a informação relacionada com os
campos é lida pelos leitores de ecrã sempre que os
campos de edição recebem o foco. O atributo title
pode ser usado sempre que seja difícil, em termos de
design, acomodar a label ou quando a mesma possa
causar confusão.
H65: Utilizar o atributo title para
identificar controlos de formulário
quando o elemento label não puder ser
utilizado

MOOC INCTEC 2014
Módulo 2
sobre CS 1.1.1
sobre CS 1.3.1
sobre CS 3.3.2
sobre CS 4.1.2
Standards W3C: ( X ) HTLM + CSS
A
(1)
AA AAA
 Foram encontrados 21 erros de validação
na linguagem de marcação
O objectivo é eliminar ambiguidades nas páginas
Web derivadas de código que não está em
conformidade para com as especificações formais
em vigor. Os resultados deste teste foram obtidos
através do Serviço de Validação da Marcação
do W3C.
G134: Validar páginas Web

MOOC INCTEC 2014
Módulo 2
sobre CS 4.1.1
Elementos e atributos de apresentação /obsoletos
A
(1)
AA
(1)
AAA
 Foram localizados 34 atributos para
controlar a apresentação visual
Separar as camadas de estrutura, funcionalidade e
apresentação permite induzir a semântica através de
um formato que pode ser programaticamente
determinável através da camada estrutural.
G140: Separar a informação e a
estrutura da apresentação para
permitir diferentes apresentações
sobre CS 1.3.1
 Critério de Sucesso 1.4.5 (Nível
 Foram localizados 24 elementos ou
atributos de HTML que estão a ser
usados para controlo da apresentação
visual do texto
As CSS devem ser usadas para controlar a
apresentação visual do texto. Pela separação do
estilo da marcação do conteúdo, os editores podem
simplificar e limpar a forma de marcação do
conteúdo, tornando-o, ao mesmo tempo, mais
acessível.
C22: Utilizar CSS para controlar a
apresentação visual do texto

MOOC INCTEC 2014
Módulo 2
AA) Noções sobre CS 1.4.5
AAA) Noções sobre CS 1.4.9
sobre CS 1.3.1
Uso de unidades absolutas
A
AA
(1)
AAA
 Foi identificado 1 caso em que se usa
unidades de medida expressas em
valores absolutos no tamanho de letra
Quando os tamanhos de letra estão definidos em
unidades absolutas, tais como pontos ou pixéis, os
comandos do menu Tamanho de Letra existentes no
Internet Explorer 7 ou superior não terão quaisquer
efeitos sobre os tamanhos de letra da página.
C12: Utilizar percentagem para
tamanhos de letra
Esta técnica está relacionada com:

MOOC INCTEC 2014
Módulo 2

MOOC INCTEC 2014
Módulo 2
Relatório AccessMonitor WCAG 2.0
Página testada MOOC Inclusão e Acesso às Tecnologias 2014
Link http://inctec2014.blogspot.pt/
Resultado 3. 4 - Esta página não passa a bateria de testes do AccessMonitor de nível "A"

MOOC INCTEC 2014
Módulo 2
1
Atributos: elementos de linguagem HTML e XHTML
Detalhes dos testes
NÍVEIS DE CONFORMIDADE/ERROS DETETADOS
A
(1)
AA AAA
Texto alternativo em imagens
 Foram encontradas 9 imagens que não
têm legenda
Todas as imagens têm de ter uma legenda - i.e. um
equivalente alternativo textual colocado no
atributo alt1
. A existência de textos alternativos para
as imagens permite que a informação possa ser
apresentada de várias formas a uma variedade de
agentes de utilizador. Se o atributo alt não existir, as
tecnologias de apoio serão incapazes de identificar a
imagem e de passar o seu significado ao utilizador.
devido à omissão do atributo alt em
elementos img, elementos area e
elementos input do tipo "imagem"
Esta falha está relacionada com:

MOOC INCTEC 2014
Módulo 2
 Critério de Sucesso 1.1.1 (Conteúdo Não
Textual)
o Como Cumprir o 1.1.1 (Conteúdo
Não Textual)
Sucesso 1.1.1 (Conteúdo Não
Textual)
Inserção de Multimedia (embed, object, iframe, applet)

MOOC INCTEC 2014
Módulo 2
A
(1)
AA AAA
 Foi encontrado 1 elemento sem título
O objetivo é usar o atributo title do elemento frame
(moldura) ou iframe para legendar os conteúdos de
cada frame. O uso deste atributo permite etiquetar
cada um dos frames, permitindo aos utilizadores a
sua identificação, descriminação e exploração.
H64: Utilizar o atributo title da frame e
dos elementos iframe
 Critério de Sucesso 2.4.1 (Ignorar Blocos)
o Como Cumprir o 2.4.1 (Ignorar
Blocos)
Sucesso 2.4.1 (Ignorar Blocos)
 Critério de Sucesso 4.1.2 (Nome, Função,
Valor)
o Como Cumprir o 4.1.2 (Nome,
Função, Valor)
Sucesso 4.1.2 (Nome, Função,
Valor)
Marcação de Links, menus e texto dos links

MOOC INCTEC 2014
Módulo 2
A
(1)
AA
AAA
(1)
 Foram encontrados 31 links em que o
conteúdo é composto apenas por uma
imagem não legendada
Esta falha ocorre quando um link é composto apenas
por conteúdo não textual, tal como uma imagem, e
o conteúdo não textual se encontra implementado
de tal forma que poderá ser ignorado pela
tecnologia de apoio. Quando a imagem é o único
conteúdo existente no link, é absolutamente
indispensável que essa imagem tenha uma legenda
(i.e. um equivalente alternativo textual).
F89: Falha dos Critérios de Sucesso 2.4.4,
2.4.9 e 4.1.2 devido à utilização de alt
nulo numa imagem em que a imagem é o
único conteúdo num link
Link (Em Contexto))
do Link (Em Contexto))
(Em Contexto))
 Foram localizados 60 links com o mesmo
texto que apontam destinos diferentes
Esta ocorrência está relacionada com uma falha
comum em que links como "clique aqui" ou "ver
mais" precisam da informação que os rodeia para
contextualizar a sua finalidade. Só pelo contexto é
possível aos utilizadores distinguir os links e
determinar o seu propósito.
devido à utilização de um link não
específico, tal como "clique aqui" ou
"mais" sem um mecanismo para alterar o
texto do link para texto específico
(Apenas o Link))

MOOC INCTEC 2014
Módulo 2
(Apenas o Link))
Valor)
Função, Valor)
Valor)
Links para contornar blocos de informação
A
(2)
AA AAA
 Constatou-se que o primeiro link da
página não nos conduz até à área do
conteúdo principal.
permita contornar blocos de material que se
repetem em múltiplas páginas Web, passando
diretamente para o conteúdo principal. O primeiro
item interativo da página Web deve ser um link que
nos conduza ao início do conteúdo principal.
G1: Adicionar um link no topo de cada

MOOC INCTEC 2014
Módulo 2
página para aceder directamente à área
do conteúdo principal
 Critério de Sucesso 2.4.1 (Saltar Blocos)
o Como Cumprir o 2.4.1 (Saltar
Blocos)
Sucesso 2.4.1 (Saltar Blocos)
 Constatou-se que não existem links para
contornar blocos de texto
permita contornar blocos de material, saltando para
o fim desses mesmos blocos.
G123: Adicionar um link no início de um
bloco de conteúdo repetido para aceder
directamente ao fim do bloco
 Critério de Sucesso 2.4.1 (Ignorar Blocos)
o Como Cumprir o 2.4.1 (Ignorar
Blocos)
Sucesso 2.4.1 (Ignorar Blocos)
Marcação de formulários

MOOC INCTEC 2014
Módulo 2
A
(1)
AA AAA
 Foram identificados 2 controlos de
formulário sem etiquetas associadas e
sem o atributo title
Os elementos label, associados aos elementos input,
asseguram que a informação relacionada com os
campos é lida pelos leitores de ecrã sempre que os
campos de edição recebem o foco. O atributo title
pode ser usado sempre que seja difícil, em termos de
design, acomodar a label ou quando a mesma possa
causar confusão.
H65: Utilizar o atributo title para
identificar controlos de formulário quando
o elemento label não puder ser utilizado
 Critério de Sucesso 1.1.1 (Conteúdo Não
Textual)
o Como Cumprir o 1.1.1 (Conteúdo
Não Textual)
Sucesso 1.1.1 (Conteúdo Não
Textual)
 Critério de Sucesso 1.3.1 (Informações e
Relações)
o Como Cumprir o 1.3.1
(Informações e Relações)

MOOC INCTEC 2014
Módulo 2
Sucesso 1.3.1 (Informações e
Relações)
 Critério de Sucesso 3.3.2 (Etiquetas ou
Instruções)
o Como Cumprir o 3.3.2 (Etiquetas
ou Instruções)
Sucesso 3.3.2 (Etiquetas ou
Instruções)
Valor)
Função, Valor)
Valor)
Standards W3C: (X)HTML + CSS
A
(1)
AA AAA
 Foram encontrados 167 erros de
validação na linguagem de marcação
O objetivo é eliminar ambiguidades nas páginas Web
derivadas de código que não está em conformidade
para com as especificações formais em vigor.

MOOC INCTEC 2014
Módulo 2
G134: Validar páginas Web
 Critério de Sucesso 4.1.1 (Análise)
o Como Cumprir o 4.1.1 (Análise)
Sucesso 4.1.1 (Análise)
Elementos e atributos de apresentação/obsoletos
A
(1)
AA
(1)
AAA
 Foram encontrados 3 elementos usados
para controlar a apresentação visual
Enquanto que as características visuais de
apresentação induzem a estrutura, essas
características não devem tornar a estrutura
ambígua que torne difícil a interação para quem use
tecnologia de apoio.
 Foram localizados 16 elementos ou
atributos de HTML que estão a ser
usados para controlo da apresentação
visual do texto
As CSS devem ser usadas para controlar a
apresentação visual do texto. Pela separação do
estilo da marcação do conteúdo, os editores podem
simplificar e limpar a forma de marcação do
conteúdo, tornando-o, ao mesmo tempo, mais

MOOC INCTEC 2014
Módulo 2
G115: Utilizar elementos semanticos para
marcar a estrutura
 Critério de Sucesso 1.3.1 (Informações e
Relações)
(Informações e Relações)
Sucesso 1.3.1 (Informações e
Relações)
acessível.
C22: Utilizar CSS para controlar a
apresentação visual do texto
A) Noções sobre CS 1.3.1
Uso de unidades absolutas
A AA
(2)
AAA
 Foram identificados 6 casos em que se
usam unidades de medida expressas em
valores absolutos no tamanho de letra
Quando os tamanhos de letra estão definidos em
unidades absolutas, tais como pontos ou pixéis, os
comandos do menu Tamanho de Letra existentes no
Internet Explorer 7 ou superior não terão quaisquer
efeitos sobre os tamanhos de letra da página.
C12: Utilizar percentagem para tamanhos

MOOC INCTEC 2014
Módulo 2
de letra
 Critério de Sucesso 1.4.4 (Redimensionar
texto)
(Redimensionar texto)
Sucesso 1.4.4 (Redimensionar
texto)
 Constatou-se que em 2 casos, se faz uso
de unidades de medida absolutas
O objetivo é ser capaz de apresentar o conteúdo sem
a necessidade de introduzir barras de varrimento
horizontais, usando técnicas de layout que permitem
adaptar os conteúdos ao espaço disponível.
G146: Utilizar disposições líquidas
 Critério de Sucesso 1.4.4 (Redimensionar
texto)
(Redimensionar texto)
Sucesso 1.4.4 (Redimensionar
texto)

MOOC INCTEC 2014
Módulo 2
Marcação do idioma principal da página
A
(1)
AA AAA
 Constatou-se que o atributo lang se
encontra em falta
O objetivo é identificar o idioma predefinido de um
documento através dos atributos lang e/ou xml:lang
do elemento HTML.
H57: Utilizar atributos language no
elemento html
 Critério de Sucesso 3.1.1 (Idioma da
Página)
o Como Cumprir o 3.1.1 (Idioma da
Página)
Sucesso 3.1.1 (Idioma da Página)
Formatação do texto (espaçamento entre linhas e texto justificado)
A
AA
AAA
(1)

MOOC INCTEC 2014
Módulo 2
 Foram identificados 25 casos em que se
faz justificação de texto via CSS
Muitas pessoas com incapacidades cognitivas têm
grande dificuldade em lidar com blocos de texto que
se encontram justificados.
C19: Especificar o alinhamento à esquerda
OU à direita em CSS
 Critério de Sucesso 1.4.8 (Apresentação
Visual)
(Apresentação Visual)
Sucesso 1.4.8 (Apresentação
Visual)

Avaliação de acessibilidade de páginas web

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Avaliação de acessibilidade de páginas web

Semelhante a Avaliação de acessibilidade de páginas web (20)

Mais de Agrupamento de Escolas da Guia-Pombal

Mais de Agrupamento de Escolas da Guia-Pombal (20)

Último

Último (20)

Avaliação de acessibilidade de páginas web