O papel da UMIC na concepção dainformação digital acessível em Portugal    contém dados sobre as WCAG do W3C e a sua   imp...
Índice•   Uma visão estratégica     – do livro verde para a SI (1997) até à apresentação de       resultados da linha de f...
Visão estratégica•   1997 - Livro Verde para a SI     – “A SI representa uma grande oportunidade para a       inclusão de ...
Visão Estratégica3 domínios do conhecimento                          Internet             acesso à informação             ...
Visão Estratégica     Linha de financiamento ID•   Pacote inicial: 5M €•   Projectos de 1 ano:     – €30 000 para projecto...
Visão Estratégica                   Resultados iD•   Apetrechou 8 centros de recursos para a inclusão digital em    instit...
Visão Estratégica     Os próximos 5 anos               Repositórios Digitais   RCAAP              b-onwww.rcaap.pt        ...
Uma visão técnico-formativa na  área dos conteúdos web
WCAG 1.0 / 2.0Estrutura e principais diferenças
Níveis de Abordagem das WCAG    Directrizes de Acessibilidade para o Conteúdo da Web• versão 1.0                      • ve...
WCAG 2.0        (http://www.acesso.umic.pt/w3/TR/WCAG20/)• novo:  – aplica-se a todas as tecnologias de    produção de con...
Os princípios das WCAG1.0 / 2.0
Principio WCAG1.0  Transformação harmoniosa                         (Def. Visão)                      VisãoTexto          ...
Transformação HarmoniosaTRANSFORMAR:•  texto -> som = sintetizador   Braille   de fala•  texto -> imagem = LG /   Linguage...
Uma visão técnico-formativana área dos conteúdos Web   Técnicas para melhorar a acessibilidade e           dados do Ensino...
O Conteúdo é composto por     uma junção de elementos•   HTML/CSS (estrutura, estilo)•   Javascript•   Cabeçalhos•   Tabel...
HTML/CSS• O que dizem as WCAG:  – HTML sem erros  – CSS sem erros  – Uso das linguagens de marcação mais    recentes  – Se...
HTML/CSS                              dados Ensino Superior69% das páginas não usam                                       ...
JavaScript                http://www.acesso.umic.pt/tutor/O que dizem as directrizes:•   Usando apenas o TECLADO certifiqu...
Javascript             dados Ensino Superior                                          Atenção aos                         ...
Recorra a cabeçalhos (H1...H6) para          estruturar a informação•    H1 identifica geralmente o título da página.     ...
Uso correcto de cabeçalhos (cont.)Exemplo de uma estrutura de cabeçalhosGerada pela opção Outline do Validator de HTML doW...
Cabeçalhos dados Ensino Superior  83%  das páginas usam incorrectamente  a marcação de cabeçalhos  Fonte: UMIC, Junho 2011.
Tabelas de DadosIdentifique os Cabeçalhos de            Nome   Nota      uma tabela de dados                              ...
Tabelas             dados Ensino Superior75%das páginas usam o elemento <table> para efeitos de layout
Formulários        http://www.acesso.umic.pt/tutor/• Identificar as etiquetas• Associar explicitamente a etiqueta ao  camp...
Formulários             dados Ensino Superior70%dos controlos de formulário não têm uma etiqueta (elemento <label>
Legendar uma imagem?• Técnica       <img alt=“...” />
Como legendar imagens  - fotografia (mensagem/função)?         Se fosse uma página alusiva a fotografiaLegendar com função...
Como legendar imagens- fotografia (mensagem/função)?    Se fosse uma página alusiva a História          Legenda: Manuel de...
Imagens              dados Ensino Superior55%das páginas têm TODAS as imagens legendadas11% das páginas têm uma imagem sem...
Validação da conformidade    para com as WCAG      Validação manual     Validação automática
Validação manual• Navegador OPERA   – (www.opera.com);• Barras de Ferramentas de Acessibilidade   – Web Accessibility Tool...
Validação automática•   WCAG1.0     – Utilize o HERA e o eXaminator:        • Site ACESSO: www.acesso.umic.pt     – Recorr...
O Presente documento encontra-se em:     www.acesso.umic.pt/2011/aveiro.zip                   Contacto:UMIC – Agència para...
Próximos SlideShares
Carregando em…5
×

As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior

665 visualizações

Publicada em

Publicada em: Educação, Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
665
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior

  1. 1. O papel da UMIC na concepção dainformaçã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. 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. 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. 4. Visão Estratégica3 domínios do conhecimento Internet acesso à informação Televisão acesso à Telecoms informação Rádio Serviços Acervos de ApoioConcepção AjudasInformação Técnicas
  5. 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. 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. 7. Visão Estratégica Os próximos 5 anos Repositórios Digitais RCAAP b-onwww.rcaap.pt BAES www.b-on.pt baes.up.pt/
  8. 8. Uma visão técnico-formativa na área dos conteúdos web
  9. 9. WCAG 1.0 / 2.0Estrutura e principais diferenças
  10. 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. 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. 12. Os princípios das WCAG1.0 / 2.0
  13. 13. Principio WCAG1.0 Transformação harmoniosa (Def. Visão) VisãoTexto (Def. Audição)Imagem Informação Audição MultimédiaSom Tacto
  14. 14. Transformação HarmoniosaTRANSFORMAR:• 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. 15. Uma visão técnico-formativana área dos conteúdos Web Técnicas para melhorar a acessibilidade e dados do Ensino Superior (fonte: monitorização UMIC, Junho 2011)
  16. 16. O Conteúdo é composto por uma junção de elementos• HTML/CSS (estrutura, estilo)• Javascript• Cabeçalhos• Tabelas• Formulários• Imagens
  17. 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. 18. HTML/CSS dados Ensino Superior69% das páginas não usam 89% das páginas temelementos obsoletos 79% das páginas usam < 10 erros de HTML tecnologias XHTML48% 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. 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. 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 eventosdependentes do RATO
  21. 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. 22. Uso correcto de cabeçalhos (cont.)Exemplo de uma estrutura de cabeçalhosGerada pela opção Outline do Validator de HTML doW3C (http://validator.w3.org).
  23. 23. Cabeçalhos dados Ensino Superior 83% das páginas usam incorrectamente a marcação de cabeçalhos Fonte: UMIC, Junho 2011.
  24. 24. Tabelas de DadosIdentifique 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. 25. Tabelas dados Ensino Superior75%das páginas usam o elemento <table> para efeitos de layout
  26. 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. 27. Formulários dados Ensino Superior70%dos controlos de formulário não têm uma etiqueta (elemento <label>
  28. 28. Legendar uma imagem?• Técnica <img alt=“...” />
  29. 29. Como legendar imagens - fotografia (mensagem/função)? Se fosse uma página alusiva a fotografiaLegendar 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. 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. 31. Imagens dados Ensino Superior55%das páginas têm TODAS as imagens legendadas11% das páginas têm uma imagem sem legenda34% das páginas têm VÁRIAS imagens sem legenda74%das páginas têm TODOS os botões gráficos legendados19% 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 legenda51%das páginas têm TODAS as áreas do mapa de imagem legendadas
  32. 32. Validação da conformidade para com as WCAG Validação manual Validação automática
  33. 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. 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. 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

×