Acessibilidade na Web
Departamento de Computação - UFS
Tópicos Especiais em Sistemas de Informação
Lucas Augusto Carvalho
lucasamcc@dcomp.ufs.br
Prof. Rogério

Vídeo
Custo ou Benefício?
http://acessodigital.net/video.html
Créditos:

Agenda
 Introdução
 Diretrizes de acessibilidade
 Ferramentas
 Conselhos para ter um site mais acessível
 Estudo de Caso
 Custos X Benefícios
 Site Acessíveis
 Sites Úteis

Introdução
 Conceito de acessibilidade
 Tipos de necessidades especiais
 Lei Federal de Acessibilidade no Brasil
 World Wide Web Consortium – W3C

Introdução
 Conceito de acessibilidade
 É mais amplo que o acesso à pessoas com
deficiência.
 Três noções:
 \"Utilizadores\"
 \"Situação\"
 \"Ambiente\".
Símbolo de acessibilidade na web.

Introdução
 Tipos de necessidades especiais
 Cegueira
 Daltonismo
 Baixa visão
 Deficiência mental
 Deficiência física
 Deficiência auditiva
 Dislexia
 Desordem por Déficit de Atenção
 etc...

Introdução
 Lei Federal de Acessibilidade no Brasil
 Decreto 5296/04, regulamentou a lei 10.098,
de 19 de dezembro de 2000, que estabelece
normas gerais e critérios básicos para a
promoção da acessibilidade.

Introdução
 World Wide Web Consortium – W3C
 consórcio internacional formado por mais de
500 empresas.
 produz padrões (Web standards), diretrizes
(guidelines), recomendações e protocolos
para a criação de conteúdos para web com o
objetivo de garantir a sua interoperabilidade.
 Alguns dos seus padrões:
 HTML, XHTML, CSS, XML, PNG e etc.

Introdução
 World Wide Web Consortium – W3C
 A Web Accessibility Initiative (WAI) desenvolve
diretrizes para acessibilidade de Web sites,
navegadores, e ferramentas de criação de
conteúdo, a fim de tornar mais fácil para pessoas
portadoras de necessidades o usa da Web.

Diretrizes de acessibilidade
 Diretrizes de acessibilidade ao conteúdo da
Web (WCAG)
 Prioridade 1 (nível A)
 Pontos que os criadores de conteúdo Web
devem satisfazer inteiramente.
 Prioridade 2 (nível AA)
 Pontos que os criadores de conteúdos na Web
deveriam satisfazer.
 Prioridade 3 (nível AAA)
 Pontos que os criadores de conteúdos na Web
podem satisfazer.

Diretrizes de acessibilidade
 Modelo de Acessibilidade em Governo
Eletrônico – e-MAG
 Foi publicada no Diário Oficial da União do dia 08
de maio de 2007, a Portaria de N ° 3 que determina
a sua adoção pelos órgãos e entidades da
Administração Pública Federal direta, autárquica e
fundacional.

Ferramentas
 Ferramentas Assistivas
 Leitor de Tela
 Navegador textual
 Ampliador de tela
 Sintetizador de voz
 Reconhecedor de voz
 Navegador com voz
 Teclado alternativo

Ferramentas
 Ferramentas Assistivas
 Player Rybená
 Funciona como um tradutor, auxiliando na
compreensão do conteúdo de textos em
português. É capaz de converter qualquer
página da Internet ou texto escrito em português
para a Língua Brasileira de Sinais - LIBRAS.
 É disponibilizado em um sítio, onde os usuários
poderão selecionar com o mouse qualquer parte
do texto do portal e ver a tradução em LIBRAS
por intermédio de um simpático desenho
animado.
 Utilizado pela UFPE.

Ferramentas
 Ferramentas Assistivas
 Dosvox
 Núcleo de Computação Eletrônica da Universidade
Federal do Rio de Janeiro (UFRJ)
 é um sistema destinado a auxiliar o deficiente visual a
fazer uso de microcomputadores da linha PC, através do
uso de sintetizador de voz.
 implementado por programadores deficientes visuais,
que fazem uso do próprio sistema DOSVOX, sem
necessitar de ajuda de pessoas videntes.

Ferramentas
 Ferramentas Assistivas
 Dosvox (continuação)

Ferramentas
 Ferramentas Assistivas
 ReadSpeaker
 permite uma síntese vocal quase natural, que lê o
conteúdo das páginas para o visitante.
 todo o serviço fica localizado no site da ReadSpeaker.
 o visitante não precisa fazer o download de nenhum
programa.
 ajuda aquelas pessoas que têm dificuldade em ler, ou
apenas porque preferem ouvir.

Ferramentas
 Ferramentas de Validação de Acessibilidade
 DaSilva
 Primeiro validador de língua portuguesa.
 Diretrizes
 WCAG 1.0
 E-Gov
Avaliações desde 18/12/2003: 55.306 (WCAG) / 144.825 (E-GOV)

Ferramentas
 Ferramentas de Validação de Acessibilidade
 Valida Web
 Diretriz
 WCAG 1.0

Acessibilidade na Web
Conselhos para tornar
seu site mais acessível

Conselhos
 1 - Garanta que todas as imagens se
encontram legendadas ou descritas com texto

Conselhos
2 - Garanta que o tamanho do texto pode ser
aumentado com as opções do seu navegador

Conselhos
3 - Garanta que o comprimento do texto na
página se ajusta ao tamanho da Janela
Nota: Esta característica facilita a utilização de software de ampliação.

Conselhos
4 - Garanta a identificação do campos dos
formulários

Conselhos
5 - Permita a ativação dos elementos da página
através do teclado

Conselhos
6 - Garanta que os textos dos links sejam
compreensíveis fora do contexto

Conselhos
7 - Forneça uma forma simples para contactar o
responsável

Conselhos
8 - Utilize ferramentas e serviços automáticos de
análise da acessibilidade

Importante
 Utilizar validadores e obter um selo de
acessibilidade, não garante a acessibilidade.
 Os validadores não verificam todas as
recomendações, apenas algumas.
 É preciso assegurar a Usabilidade do site.
 Ex.:
 não é possível verificar o grau de contraste entre a
cor de fundo e a cor fonte da letra.

Importante
 A tecnologia Flash é uma ferramenta poderosa
para desenvolvimento de páginas WEB, porém,
infelizmente, páginas desenvolvidas em Flash
com versões anteriores a MX são impossíveis
de serem lidas pelos Leitores de telas atuais,
tornando-as inacessíveis.

Estudo de Caso
 Utilizaremos a ferramenta de validação DaSilva
para verificarmos a validação da acessibilidade do
Portal da Universidade Federal de Sergipe.
 Após a verificação, usaremos o navegador textual
Lynx para acessar o portal e verificar o grau de
dificuldade em navegar por ele.

Estudo de Caso
 Resultados:
 DaSilva

Estudo de Caso
 Resultados:
 DosVox
 Ao fim da navegação, verificamos o quanto difícil é
para os portadores de necessidades especiais
navegarem pelo portal da UFS.
 Nenhuma imagem com texto alternativo.
 Menu do topo totalmente confuso! (tabs fora de ordem).
 Menu com subItens sem possibilidade de navegação
pelo teclado.
 Acesso ao conteúdo do site após vários tabs.
 Campos e botão do formulário sem texto explicativo.
 Agenda do Portal utilizando JavaScript para rotatividade
e para exibição.

Mito
não é porque um Website é acessível, que ele
deve ter uma interface feia, pobre, sem
imagens e com limitações no design. Isso não
existe, acessibilidade não é sinônimo de baixa
qualidade gráfica, pelo contrário, deve ser
associada a uma interface que propicie uma
melhor experiência para o usuário. Já o
acabamento do site fica por conta do gosto e
habilidade do designer.

Vantagens X Desvantagens
 Benefícios
 Seu site visível a todos
 navegadores antigos, pessoas com dificuldades visuais,
auditivas, idosos e etc...
 Seu site visível em qualquer dispositivo
 leitor de tela, celular, PDA, SmartPhone, etc...
 Seu site navegável em qualquer situação
 usuário falando ao telefone, placa de som do usuário
sem funciona, mouse com defeito, etc...
 Seu site gerando mais receita
 conteúdo mais amigável aos robores dos buscadores,
gerando mais visitas; maior número de visitantes devido
ao aumento do público alvo.

Custos X Benefícios
 Custos
 Requer mais tempo para desenvolvimento
 Falta de pessoal qualificado
 Maior investimento

Sítios Acessíveis
 Ministério da Ciência e Tecnologia
http://acessibilidade.mct.gov.br
 Deputado Chico Leite - DF
www.websis.com.br/chicoleite/
 Lista de Sítios (386 até 27/11/2007)
 www.dasilva.org.br/?blogid=1&catid=1

Sítios Úteis
 DaSilva - www.dasilva.org.br
 Rybená - www.rybena.org.br
 Valida Web - www.rybenamobile.com.br/wai
 Projeto Dosvox - http://caec.nce.ufrj.br/dosvox
 Maujor - www.maujor.com
 W3C - www.w3c.org/WAI
 Acessibilidade Brasil - www.acessobrasil.org.br
 Tecnologia Assistiva - www.assistiva.org.br

Sítios Úteis
 Acesso Digital - www.acessodigital.net
 Tableless - www.tableless.com.br
 ReadSpeaker - www.readspeaker.com
 Bengala Legal - www.bengalalegal.com

Acessibilidade
“... a solução para um site ótimo é um site muito bem testado...”
FIM.