1. O papel da UMIC na concepção da
informação digital acessível em Portugal
contém dados sobre as WCAG do W3C e a sua
implementação em 203 Portais de instituições de
Ensino Superior
Superar Barreiras com TIC: Políticas, Ideias e Práticas
Universidade de Aveiro, 17-18 de Junho 2011
Jorge Fernandes. (Junho 2011).
UMIC - Agência para a Sociedade do Conhecimento, IP

2. Índice
• Uma visão estratégica
– do livro verde para a SI (1997) até à apresentação de
resultados da linha de financiamento iD
• Uma visão técnico-formativa na área dos conteúdos web
– A estrutura das WCAG 1.0 / 2.0
– Principais diferenças entre as WCAG 1.0 e 2.0
– Técnicas para melhorar a acessibilidade e dados do Ensino
Superior (fonte: monitorização UMIC)
– Avaliação Web
• ferramentas e técnicas para avaliação manual pericial
• Ferramentas para avaliação automática

3. Visão estratégica
• 1997 - Livro Verde para a SI
– “A SI representa uma grande oportunidade para a
inclusão de pessoas com deficiência”
• 1999 - INCNESI
• 1999 - Acessibilidade dos sítios da AP na Internet pelos
Cidadãos com Necessidades Especiais
• 2000 - é criada a Unidade ACESSO no seio do MCT
• 2003 - PNPCNESI (uma INCNESI renovada)
• 2004 - é criada a linha de financiamento iD (Inclusão Digital)
• 2007 - apresentação dos resultados de cerca de 50 projectos
iD

4. Visão Estratégica
3 domínios do conhecimento Internet
acesso à informação
Televisão
acesso à Telecoms
informação
Rádio
Serviços Acervos
de Apoio
Concepção Ajudas
Informação Técnicas

5. Visão Estratégica
Linha de financiamento ID
• Pacote inicial: 5M €
• Projectos de 1 ano:
– €30 000 para projectos baseados em apetrechamento de
equipamento, formação, redes de conhecimento ou
produção de conteúdos;
– €150 000 para projectos de desenvolvimento de produtos
ou serviços.
• Recepcionadas 147 candidaturas
• Aprovados: 50 projectos
• Profissionais envolvidos: 250
• Projectos consórcio: utilizadores, investigadores, mercado

6. Visão Estratégica
Resultados iD
• Apetrechou 8 centros de recursos para a inclusão digital em
instituições do ensino superior, escolas do ensino básico e secundário
e associações
– CRID IPLeiria
• Apoiou 8 projectos na área de conteúdos/aplicações para a Internet
– LerparaVer
• Apoiou 10 projectos de Produção de informação acessível
– BAES
– Centro Recursos ME: DAISY, Braille Fácil
• Apoiou 6 Instrumentos para uma aprendizagem inclusiva
– Gestuário em suporte electrónico (publicado em 2010 em
colaboração com o INR)
• Apoiou 6 projectos de apoio à literacia e à leitura: bibliotecas digitais
– Apetrechar salas de leitura e produção de acervos em
bibliotecas

7. Visão Estratégica
Os próximos 5 anos
Repositórios Digitais
RCAAP b-on
www.rcaap.pt BAES
www.b-on.pt
baes.up.pt/

8. Uma visão técnico-formativa na
área dos conteúdos web

9. WCAG 1.0 / 2.0
Estrutura e principais diferenças

10. Níveis de Abordagem das WCAG
Directrizes de Acessibilidade para o Conteúdo da Web
• versão 1.0 • versão 2.0
(de 5 Maio 1999) (11 Dezembro 2008)
– 1 princípio implícito – 4 princípios explícitos
– 14 directrizes – 12 directrizes
– 65 pontos de verificação – 61 critérios de sucesso
• Arrumados por 3 – Técnicas (379):
níveis de prioridade • tipo suficiente;
• 3 níveis • tipo aconselhada.
conformidade – Falhas comuns
– A = P1 – Idem a WCAG1.0 em
– AA = P1+P2 termos de níveis de
– AAA = P1+P2+P3 prioridade e conformidade

11. WCAG 2.0
(http://www.acesso.umic.pt/w3/TR/WCAG20/)
• novo:
– aplica-se a todas as tecnologias de
produção de conteúdos:
• (X)HTML;
• PDF;
• Flash;
• JavaScript; etc
– Maior precisão em termos de requisitos

12. Os princípios das
WCAG1.0 / 2.0

13. Principio WCAG1.0
Transformação harmoniosa
(Def. Visão)
Visão
Texto (Def. Audição)
Imagem Informação
Audição
Multimédia
Som
Tacto

14. Transformação Harmoniosa
TRANSFORMAR:
• texto -> som = sintetizador Braille
de fala
• texto -> imagem = LG /
Linguagem pictográfica
• som -> texto =
Rádio On-Line
legendagem
em LGP
• imagem -> som =
áudiodescrição
• imagem -> texto =
descrição de imagens
LEGENDAGEM de AVATARES
peças de vídeo Conversão Texto e/ou
voz para LG

15. Uma visão técnico-formativa
na área dos conteúdos Web
Técnicas para melhorar a acessibilidade e
dados do Ensino Superior
(fonte: monitorização UMIC, Junho 2011)

16. O Conteúdo é composto por
uma junção de elementos
• HTML/CSS (estrutura, estilo)
• Javascript
• Cabeçalhos
• Tabelas
• Formulários
• Imagens

17. HTML/CSS
• O que dizem as WCAG:
– HTML sem erros
– CSS sem erros
– Uso das linguagens de marcação mais
recentes
– Separação clara entre estilo (CSS) e
estrutura (HTML)
– Pelo que os elementos e os atributos de estilos
inseridos no HTML sejam considerados obsoletos
É obsoleto:
<center>...</center>
... color=“blue” ...

18. HTML/CSS
dados Ensino Superior
69% das páginas não usam 89% das páginas tem
elementos obsoletos 79% das páginas usam < 10 erros de HTML
tecnologias XHTML
48% das páginas tem 80% das páginas têm
> 10 atributos obsoletos erros de CSS
Método: GooglePageRank 100+
Páginas HTML com doctype: 10710
Páginas CSS: 10883
Fonte: UMIC, Junho 2011. Sítios web: 203

19. JavaScript
http://www.acesso.umic.pt/tutor/
O que dizem as directrizes:
• Usando apenas o TECLADO certifique que consegue executar todas
as funções proporcionadas pelos elementos feitos em
JavaScript/Flash.
• Tenha particular atenção ao menus feitos com esta tecnologia e aos
links activados apenas com javascript. Sempre que possível elimine
estes últimos.
• Exemplo Boa Prática: menu do www.gridcomputing.pt

20. Javascript
dados Ensino Superior
Atenção aos
Menus
principais
dos Sítios!
92%
das páginas têm elementos <script> sem um equivalente alternativo
- em 41% das páginas apenas se usam manipuladores de eventos
dependentes do RATO

21. Recorra a cabeçalhos (H1...H6) para
estruturar a informação
• H1 identifica geralmente o título da página.
– H2 as secções da página.
• H3 as subsecções;
• (....)
VER EXEMPLO NO PRÓXIMO DIAPOSITIVO =>

22. Uso correcto de cabeçalhos (cont.)
Exemplo de uma estrutura de cabeçalhos
Gerada pela opção Outline do Validator de HTML do
W3C (http://validator.w3.org).

23. Cabeçalhos
dados Ensino Superior
83%
das páginas usam incorrectamente
a marcação de cabeçalhos
Fonte: UMIC, Junho 2011.

24. Tabelas de Dados
Identifique os Cabeçalhos de Nome Nota
uma tabela de dados
João C
<table> Maria B
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
<tr>
<td>João</td>
<td>C</td>
</tr>
(...)
</table>

25. Tabelas
dados Ensino Superior
75%
das páginas usam o elemento <table> para efeitos de layout

26. Formulários
http://www.acesso.umic.pt/tutor/
• Identificar as etiquetas
• Associar explicitamente a etiqueta ao
campo de edição
<label for="nome">
<input type id="nome"
alt=“Introduza o nome” />
</label>

27. Formulários
dados Ensino Superior
70%
dos controlos de formulário não têm uma etiqueta (elemento <label>

28. Legendar uma imagem?
• Técnica
<img alt=“...” />

29. Como legendar imagens
- fotografia (mensagem/função)?
Se fosse uma página alusiva a fotografia
Legendar com função/mensagem que a imagem cumpre na página.
alt=“exemplo de uma foto
do início do século XXI”
alt=“exemplo de uma foto
do início do século XX”

30. Como legendar imagens
- fotografia (mensagem/função)?
Se fosse uma página alusiva a História
Legenda: Manuel de Arriaga Brum da
Silveira (1º Presidente da República
Portuguesa).
<img (…)
alt=“Manuel de Arriaga Brum da Silveira
(1º Presidente da República Portuguesa).” />

31. Imagens
dados Ensino Superior
55%
das páginas têm TODAS as imagens legendadas
11% das páginas têm uma imagem sem legenda
34% das páginas têm VÁRIAS imagens sem legenda
74%
das páginas têm TODOS os botões gráficos legendados
19% das páginas têm um botão gráfico sem legenda
7% das páginas têm VÁRIOS botões gráficos sem legenda
51%
das páginas têm TODAS as áreas do mapa de imagem legendadas

32. Validação da conformidade
para com as WCAG
Validação manual
Validação automática

33. Validação manual
• Navegador OPERA
– (www.opera.com);
• Barras de Ferramentas de Acessibilidade
– Web Accessibility Tools Consortium para IE
(http://www.snapfiles.com/get/AccessibilityToolbar.html)
– Barra para Firefox da Universidade de Illinois
(firefox.cita.uiuc.edu)
• Leitor de ecrã
– NVDA (http://www.nvda-project.org)

34. Validação automática
• WCAG1.0
– Utilize o HERA e o eXaminator:
• Site ACESSO: www.acesso.umic.pt
– Recorra ao TAW para testar várias páginas em simultâneo:
• www.tawdis.net
• WCAG2.0
– accessMonitor (=== NOVO ===)
www.acesso.umic.pt/accessmonitor

35. O Presente documento encontra-se em:
www.acesso.umic.pt/2011/aveiro.zip
Contacto:
UMIC – Agència para a Sociedade do Conhecimento
Jorge Fernandes
jorge.fernandes@umic.pt