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/

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

WCAG 1.0 / 2.0

Estrutura e principais diferenças

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

Os princípios das WCAG1.0 / 2.0

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>

Tabelasdados Ensino Superior

75% das páginas usam o elemento <table> para efeitos de layout

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>

Legendar uma imagem?

• Técnica

<img alt=“...” />

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 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 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 jorge.fernandes@umic.pt