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
Jorge Fernandes. (Junho 2011).UMIC - Agência para a Sociedade do Conhecimento, IP
Superar Barreiras com TIC: Políticas, Ideias e PráticasUniversidade de Aveiro, 17-18 de Junho 2011
Í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
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
ConcepçãoInformação
AjudasTécnicas
Serviços de Apoio
Visão Estratégica 3 domínios do conhecimento
acesso à informação
acesso àinformação
InternetTelevisãoTelecomsRádioAcervos
Visão EstratégicaLinha 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
Visão EstratégicaResultados 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
Visão EstratégicaOs próximos 5 anos
Repositórios Digitais
RCAAP b-on
BAESwww.rcaap.pt www.b-on.pt
baes.up.pt/
Níveis de Abordagem das WCAGDirectrizes de Acessibilidade para o Conteúdo da Web
• versão 1.0(de 5 Maio 1999)
– 1 princípio implícito– 14 directrizes– 65 pontos de verificação
• Arrumados por 3 níveis de prioridade
• 3 níveis conformidade
– A = P1– AA = P1+P2– AAA = P1+P2+P3
• versão 2.0(11 Dezembro 2008)
– 4 princípios explícitos
– 12 directrizes
– 61 critérios de sucesso
– Técnicas (379):
• tipo suficiente;
• tipo aconselhada.
– Falhas comuns
– Idem a WCAG1.0 em termos de níveis de prioridade e conformidade
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
Principio WCAG1.0Transformação harmoniosa
Visão
Audição
Tacto
InformaçãoMultimédia
Texto
Imagem
Som
(Def. Visão)
(Def. Audição)
Transformação Harmoniosa
TRANSFORMAR:
• texto -> som = sintetizador de fala
• texto -> imagem = LG / Linguagem pictográfica
• som -> texto = legendagem
• imagem -> som = áudiodescrição
• imagem -> texto = descrição de imagens
AVATARESConversão Texto e/ou
voz para LG
Rádio On-Line em LGP
LEGENDAGEM de peças de vídeo
Braille
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)
O Conteúdo é composto por uma junção de elementos
• HTML/CSS (estrutura, estilo)
• Javascript
• Cabeçalhos
• Tabelas
• Formulários
• Imagens
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” ...
HTML/CSSdados Ensino Superior
69% das páginas não usam
elementos obsoletos
48% das páginas tem
> 10 atributos obsoletos
89% das páginas tem
< 10 erros de HTML
80% das páginas têm
erros de CSS
79% das páginas usam
tecnologias XHTML
Método: GooglePageRank 100+Páginas HTML com doctype: 10710Páginas CSS: 10883Sítios web: 203Fonte: UMIC, Junho 2011.
• 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
JavaScripthttp://www.acesso.umic.pt/tutor/
O que dizem as directrizes:
Javascriptdados Ensino Superior
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
Atenção aosMenus
principaisdos Sítios!
• H1 identifica geralmente o título da página.– H2 as secções da página.
• H3 as subsecções;
• (....)
Recorra a cabeçalhos (H1...H6) para estruturar a informação
VER EXEMPLO NO PRÓXIMO DIAPOSITIVO =>
Exemplo de uma estrutura de cabeçalhosGerada pela opção Outline do Validator de HTML do W3C (http://validator.w3.org).
Uso correcto de cabeçalhos (cont.)
Cabeçalhosdados Ensino Superior
83% das páginas usam incorrectamentea marcação de cabeçalhos
Fonte: UMIC, Junho 2011.
Tabelas de Dados
Identifique os Cabeçalhos de uma tabela de dados
Nome NotaJoão C
Maria B<table>
<tr><th>Nome</th><th>Nota</th></tr><tr><td>João</td><td>C</td></tr>(...)</table>
Formulárioshttp://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>
Formuláriosdados Ensino Superior
70% dos controlos de formulário não têm uma etiqueta (elemento <label>
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 XX”
alt=“exemplo de uma foto do início do século XXI”
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).” />
Se fosse uma página alusiva a História
Como legendar imagens- fotografia (mensagem/função)?
Imagensdados Ensino Superior
55% 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 legenda
74% 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 legenda
51% das páginas têm TODAS as áreas do mapa de imagem legendadas
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)
• 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
Validação automática
O Presente documento encontra-se em:www.acesso.umic.pt/2011/aveiro.zip
Contacto:UMIC – Agència para a Sociedade do Conhecimento
Jorge Fernandes [email protected]
Top Related