Acessibilidade no SIEP (Sistema de Informa

1
Acessibilidade no SIEP (Sistema de Informações
da Educação Profissional e Tecnológica)

• Módulo de Acessibilidade Virtual
• CEFET Bento Gonçalves RS
• Maio 2008

2
TECNOLOGIA ASSISTIVA
3
Tecnologia Assistiva
CONCEITO conjunto de artefatos disponibilizados
às PNEs, que contribuem para proporcionar-lhes
uma vida mais independente, com mais qualidade e
possibilidades de inclusão social.
4
Focalizando aquelas utilizadas por deficientes
visuais
5
Leitores de Telas
Jaws
Virtual Vision
http//www.lerparaver.com/jaws/index.html
6
Leitores de Telas
NVDA

• Desenvolvido pela NV Access, (organização
  australiana sem fins lucrativos)
• Sw com código aberto, para Windows
• Síntese em diversos idiomas, incluindo o
  português-Brasil.
• Além da versão para instalação, possui também uma
  versão para viagem, que pode ser executada de um
  CD ou PenDrive
• Download gratuito em http//www.nvda.project.org

7
Leitores de Telas
Orca
Na versão 7.04 do Ubuntu, o Orca já é
inicializado automaticamente, aparecendo na área
de trabalho do usuário. Quando ativo, em sua
tela de abertura, são apresentados dois botões
que permitem editar as preferências do leitor ou
encerrá-lo. Outra funcionalidade do Orca são as
opções de ampliação de tela (lente de aumento) e
alto contraste
8
Dosvox
Interface Especializada Dosvox (http//intervox.nc
e.ufrj.br/dosvox)
9
Navegador Lynx

• Navegador web que exibe o conteúdo das páginas em
  modo texto.
• Criado por um grupo da Universidade de Kansas.
• Foi desenvolvido para o sistema Linux, mas
  apresenta versões também para Windows. A
  navegação no ambiente é realizada pelas teclas,
  especialmente as setas de movimentação.

http//pt.wikipedia.org/wiki/Lynx_(navegador).
10
Linha Braille
Equipamento eletrônico ligado ao computador por
cabo, que possui uma linha régua de células
Braille, cujos pinos se movem para cima e para
baixo e que representam uma linha de texto da
tela do computador. O número de células braille
da régua pode ir de 20 a 80. Os terminais de
acesso em Braille geralmente são encaixados a um
teclado comum de computador.
http//www.acesso.mct.pt/abc/Manualv1.doc
11
Pensando também nas demais limitações...
12
Teclados
Reduzido
De Conceitos
Ampliado
Para uma mão
Ergonômico
Fonte http//www.tecnum.net/teclados.htm
13
Mouse e Acionadores
Plug Mouse - AD (http//www.clik.com.br/clik_01.h
tmlacionador)
Switch Mouse - AD (http//www.clik.com.br/shs_01.h
tml)
Roller Mouse - AD http//www.clik.com.br/shs_01.ht
ml
Acionadores de Mouse TASH - AM (http//www.clik.co
m.br/clik_01.htmlacionador)
Acionador PuxeClik http//www.clik.com.br/clik_01
.html
Acionador de Pedal - AM http//www.ausilionline.it
/store/viewItem.asp?idProduct107
14
Adaptações Físicas (órteses) http//www.infoesp.n
et/
Pulseira e Teclado Fixado - AD
Pulseira c/ ponteira p/ digitação - AD
Haste fixada na cabeça - AD
Sopro pelo microfone - AM
15
Mouse Ocular
HeadDev
Manual do programa e Download freeware
http//www.ajudas.com/prdVer.asp?id188
Fundação Paulo Feitosa - http//www.fpf.br
16
Motrix
17
Agentes de Usuário

• Sw/Hw para ter acesso ao conteúdo web.
• Inclui navegadores, celulares, leitores de
  multimídia, suplementos para navegadores, como os
  leitores de tela e programas de reconhecimento de
  voz.
• TAs são exemplos de agentes de usuário.

18
MOTIVAÇÃO
19
Motivação

• Quantidade de PNEs (25,9 milhões de brasileiros)
• Indexação melhor posicionamento
• Projetista web maior conhecimento em linguagens
  hipertextuais
• Decreto 5296/04 (art. 47º)
• É a coisa certa a fazer (consciência da
  importância da acessibilidade)

20
CONCEITOS DE QUALIDADE DE USO DE SISTEMAS
ACESSIBILIDADE, USABILIDADE E COMUNICABILIDADE -
ELEMENTOS PARA TESTES
21
Elementos para os testes

• Acessibilidade possibilidade de leitura com o
  agente de usuário.
• Leitura inexistente ou perda do foco de leitura
• Perda do controle do usuário sobre a navegação

22
Elementos para os testes

• Usabilidade produtividade, eficiência de uso e
  funcionalidade do ambiente facilidade de acesso
  para TODOS
• Uso de cores para diferenciar recursos e eventos
• Poluição Sonora
• Atalhos
• Orientação e auxílio para navegação
• Legibilidade de Informações, Redimensionamento e
  Contraste

23
Elementos para os testes

• Comunicabilidade processo de comunicação
  desenvolvedor-usuário o usuário compreendeu cada
  evento contido na interface? Os dados/informações
  constantes na mesma foram transmitidos com
  clareza?
• Qualidade da etiquetagem de links, botões,
  frames, animações, imagens...
• Conteúdo geral do ambiente

24
ALGUNS EXEMPLOS
25
Acessibilidade
Leitura Incompleta ou perda do foco de leitura
Barra com botões para ativação/pausa do vídeo em
Libras
UsY Será que não teria como etiquetar esses
botões? O Play, o Pause... Porque o Virtual
Vision chega até eles mas não lê, aí eu não sei
em qual dos botões devo ativar. Eu vejo uma coisa
piscando porque enxergo um pouco, mas e quem não
enxerga nada?
26
Acessibilidade
Perda do Controle do Usuário
Caixa de Contexto
Eduquito Ferramenta Informações Urgentes
UsX Como faço para navegar com o teclado nessas
caixas? UsY Aqui nessas caixas não tem como a
gente navegar!
27
Usabilidade
Poluição Sonora
Eduquito Tela de Abertura
UsV Tem muita poluição sonora aqui... Ele repete
muito, fala muita coisa para o mesmo
conteúdo! UsZ Por que ele lê sempre "Link
gráfico" na frente dos links?
28
Usabilidade
Atalhos
Eduquito Tela de Abertura
UsV Mas não fez nada o atalho. P É que após
teclares "Alt M" no Internet Explorer, é preciso
acionar o "Enter" também. Já no Mozilla Firefox,
não há a necessidade de teclar o "Enter". UsV
Ah, mas isso teria que informar, eu, por exemplo
não sabia. UsZ A existência desses atalhos é
bem importante, pois reduz bastante o tempo de
leitura, mas é melhor explicar que é preciso
teclar "Enter" também para que funcionem no
Internet Explorer.
29
Usabilidade
Orientação e Auxílio para a navegação
Site Seesp Menu Principal
UsX O que é "Gráfico Áreas"? P É o início do
Menu referente às Áreas da Seesp. UsX Quando a
gente encontra uma descrição desse tipo a gente
desconsidera, senão não navega na página, mas se
isso se chamasse Menu Áreas ou Principal iria
facilitar muito!
30
Comunicabilidade
Qualidade da Etiquetagem de Links, Botões, Frames
e Imagens
Site Seesp Banner dos Programas desenvolvidos
pela secretaria
UsX "Gráfico Imagem de Divulgação", o que é? P
É a imagem do banner dos programas da
Seesp. UsX Podia descrever melhor, né?
31
QUE ASPECTOS SÃO CONSIDERADOS FUNDAMENTAIS PARA
QUE AMBIENTES VIRTUAIS ATENDAM À ACESSIBLIDADE,
USABILIDADE E COMUNICABILIDADE PARA COM
DEFICIENTES VISUAIS?
32
Respeito aos Web Standards

• Utilizar código de programação válido, acessível,
  semanticamente correto e amigável - utilizar o
  comando certo no lugar certo
• CSS conjunto de declarações que especificam a
  apresentação (estilização) do documento
• Utilizar corretamente folhas de estilo programar
  HTML e CSS sem erros, separar completamente
  layout (elementos de estilização) do conteúdo do
  ambiente

33
Respeito às Diretrizes, Validações

• Da WCAG WCAG 1.0, 2.0 e WCAG Samurai (Errata
  da WCAG 1.0)
• E-Gov (Modelo de Acessibilidade do Governo
  Eletrônico)
• Validações Automáticas e Manuais com usuários
  reais em conjunto com TAs

34
Validação automática - Validadores Web

• Ferramentas on line que ajudam a comprovar se um
  sítio é acessível ou não
• São geralmente rápidos, mas não são capazes de
  identificar todos os aspectos da acessibilidade
• Geram um relatório com erros e avisos encontrados
  no documento, após comparação do código HTML com
  as recomendações do W3C.

35
Validadores Automáticos

• WebXACT (antigo BOBBY) - (inglês)
• Cyntia (inglês) http//www.cynthiasays.com/
• Lift (inglês) http//www.usablenet.com
• W3C (inglês) http//validator.w3.org
• Valet (inglês) http//valet.webthing.com/page/
• Ocawa (inglês) http//www.ocawa.com/en/Test-your-W
  eb-Site.htm
• TAW (Test Accesibilidad Web) (espanhol)
   http//www.tawdis.net/taw3/cms/es
• Da SILVA (português)  http//www.dasilva.org.br/
• eXaminator (português) http//www.acesso.umic.pt/w
  ebax/examinator.php
• Hera (português) http//www.sidar.org/hera/index.p
  hp.pt

http//webxact.watchfire.com/
36
No que tange à Acessibilidade

• Descrição clara, simples, significativa e sem
  erros ortográficos de todos os elementos não
  textuais imagens, mapas de imagens, links,
  botões, caixas de listagem, frames, animações em
  Flash (etiquetando inclusive os controles
  internos) - oferecer alternativas para todo e
  qualquer conteúdo transmitido de forma visual
• Disponibilizar arquivos também em formatos DOC ou
  TXT, com todo o conteúdo não textual (tabelas,
  gráficos, imagens, organogramas,...) devidamente
  descritos/adaptados
• Separar completamente layout de conteúdo (permite
  a leitura em navegadores textuais e evita
  verborragia)
• Permitir a navegação via teclado em todos os
  elementos da página (inclusive JavaScript, Flash,
  caixas combinadas, caixas de contexto...)

37
No que tange à Usabilidade aplicada na
Acessibilidade

• Não recorrer apenas à cor para transmitir
  informações, bom contraste, opções de ampliação
• Fornecer atalhos do tipo Ir para Menu, Ir para
  conteúdo, Ir para a Página Principal, Voltar para
  a Página Anterior e âncoras para locais
  específicos da interface
• Fornecer feedback localização do usuário na
  página

38
No que tange à Usabilidade aplicada na
Acessibilidade

• Orientação por blocos onde cada um esteja
  devidamente identificado, referindo inclusive
  onde iniciam e findam
• Avisar o usuário (de forma acessível) quando da
  inserção de elementos novos na interface ou
  informações ainda não visitadas
• Fornecer Mapa do Site e Dicas de Navegação

39
No que tange à Comunicabilidade aplicada na
Acessibilidade

• Especificar por extenso cada abreviatura quando
  de sua primeira ocorrência
• Oferecer um título apropriado a cada frame
• Identificar claramente o destino de cada link
• Descrição com qualidade (clara, precisa,
  objetiva, sem erros ortográficos, com a pontuação
  correta e que realmente descreva o conteúdo que
  agrega) de quaisquer elementos não textuais
• Em todo o site/portal é preciso utilizar
  linguagem clara e simples, sem erros ortográficos
  e com a pontuação correta

40
Muito Obrigado!

• Módulo de Acessibilidade Virtual
• CEFET Bento Gonçalves RS
• Maio 2008