Acessibilidade na Web - Salomão Alcolumbre

ACESSIBILIDADE NA WEB
Prof. Esp. Salomão Alcolumbre

Dezembro 2013

CURRÍCULO DO PALESTRANTE
Amapaense da cidade de Macapá, trabalha com Informática há
11 anos e com programação web há 10 anos. Formado em
Sistema de Informação(2005) e Especialista em Análise da
Tecnologia da Informação(2009).
É Assessor Técnico da Promoção do Desenvolvimento desde
Jan/2009 – Agência de Desenvolvimento do Amapá e Super
administrador do WebSite da Mesma. (www.adap.ap.gov.br);
Professor de Informática para Internet(Web Design) no CEPA Centro de Ensino Profissional do Amapá desde 2012.

Acessibilidade é um termo muito mais amplo do que
apenas "acesso a algo". Uma minoria da sociedade não
tem os mesmos direitos de acessibilidade às tecnologias
de informação e comunicação.
Ex.: Cegos e amblíopes

OBJETIVO
Objetivo dessa Palestra é criar acessibilidade na internet
especificamente para os deficientes visuais por meio da
conscientização dos desenvolvedores web (webmasters,
webdesigners, projetistas, consultores, empresários),
empresas públicas/privadas e todas as pessoas com
disposição para aprender e concretizar esta ideia.
É dever de todos citados acima que assegurem a
disponibilização acessível da informação na INTERNET
para todos com necessidades especiais.
sendo assim é necessário o entendimento das soluções
técnicas para que este objetivo seja alcançado

ACESSIBILIDADE WEB É IMPORTANTE?
A web é um recurso cada vez mais importante em
vários aspectos da vida: educação, emprego, governo,
comércio, cuidados de saúde, entretenimento, entre
outros. É essencial que a web seja acessível para
fornecer igual acesso e iguais oportunidades a
pessoas com necessidades especiais. Uma Web
acessível também pode ajudar as pessoas com
necessidades especiais a participarem mais
ativamente da sociedade.

DEFINIÇÕES
Acessibilidade significa tornar possível o acesso a
alguma coisa para o maior número de pessoas
possível.
Acessibility. Na linguagem da Web, a acessibilidade
de uma página permite que seja lida e navegada por
uma pessoa inapta.

deficiente motor
utiliza o mouse com dificuldade.

Luciana,
tetraplégica

Vítima de bala perdida na Estácio de Sá foi beneficiada com o projeto DOS VOX

Então
acessibilidade é
somente para
pessoas com
deficiências,
certo?

idosos, eles têm pouca experiência, baixa visão
e dificuldades motoras.

Dispositivos móveis com acesso a Internet.

Gabriel, linguagem em desenvolvimento...

Gabriel compenetrado, olhando para o
monitor e clicando com o mouse.

Agora ele está olhando e
brincando com o teclado.

medo do
computador

Homem com muito medo correndo de um
computador.

E todos nós, primeira experiência.

Um criança em frente a um notebook

E finalmente,
o bilionário
cego!!!
Cifrão desenhado com
moedas douradas

RELEMBRANDO...
Antes de começarmos a tratar das técnicas de
acessibilidade, vamos relembrar os conceitos
básicos que precisamos saber para criar um
documento HTML

A ANATOMIA BÁSICA DE UM DOCUMENTO
HTML
A declaração DOCTYPE não é uma tag
(elemento) da marcação XHTML. Por isso, não há
necessidade de fechamento e deve ser escrita em
letras maiúsculas.
Para que serve o DOCTYPE?
Sua declaração DOCTYPE informa aos serviços
de validação e aos navegadores modernos qual
DTD foi utilizada para elaborar a marcação, essa
informação instrui os serviços de validação e os
navegadores de como tratar sua página.

DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EM""http://www.w3.org/TR/xhtml1/DTD/xh
tml1-transitional.dtd">

A DECLARAÇÃO NAMESPACE
Logo após o DOCTYPE vem a tag de abertura do elemento HTML
É nesta tag que declaramos o idioma usado no documento. Isso é
importante para acessibilidade.
Um namespace em XML é uma coleção de tipos de elementos e
nomes de atributos associados a um DTD. Indicando sua
localização. No exemplo abaixo aparece a indicada a localização
namespace em XHTML (http://www.w3.org/1999/xhtml). Os dois
atributos adicionais especificam que versão do xml este em
Português-Brasileiro e que o documento está escrito em
Português-Brasileiro
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br"
lang="pt-br">

DECLARANDO O TIPO DE CONTEÚDO
Para
serem
interpretados
corretamente
em
navegadores e aprovados nos teste de validação de
marcação, todos os documentos XHTML, devem
declarar o tipo de codificação de caractere que foi
usada em sua criação.
Existem duas formas, sendo a segunda mais usada.
<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
Obs: Declaramos esta TAG dentro do elemento HEAD

ELEMENTO HEAD E SEUS ELEMENTOSFILHOS
O conteúdo da HEAD não é exibido para o
usuário (com exceção do TITLE), mas é
extremamente importante pois define metainformações que podem ser importantes para
determinados webbrowsers.
Os
elementos
mais
importantes
para
acessibilidade que o compõem são o title e LINK
Elemento title - o título do documento
Elemento LINK - navegação para páginas
importantes e chamadas a arquivos externos.

ELEMENTO BODY
É dentro do elemento BODY que estará todo o
conteúdo que será exibido para o usuário.
<body>

</body>

ESTRUTURA COMPLETA DE UM
DOCUMENTO XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ptbr" lang="pt-br">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8" />
<title>Acessibilidade</title>
</head>
<body>

</body>
</html>

ACESSIBILIDADE É PARA TODO MUNDO
Lei Federal 10.098/00 e Decreto Federal 5296/04 Uma
empresa deve estar atenta aos recursos de Informática e
Internet que visam garantir acessibilidade às pessoas que
possuem certas deficiências, por exemplo, visuais.
Quando mencionamos a palavra acessibilidade, a primeira
coisa que vem à cabeça são os deficientes. No caso da Web,
principalmente deficientes visuais completos(cegos). Porém
não são só eles que necessitam e se beneficiam de sites mais
acessíveis.
Há outros diversos grupos de pessoas que têm a
necessidades especiais e podem passar a ter acesso a sites
dos quais eram excluídos

GRUPO DE PESSOAS QUE TEM
NECESSIDADES ESPECIAIS
Cegos
Os usuários cegos são o caso clássico, que sempre vem
a mente quando se fala em acessibilidade. Esses
usuários tem imensas dificuldades em acessar sites na
web.
LEITOR DE TELA
É um software que lê o texto que está na tela do
computador e saída desta informação é através de um
sintetizador de voz ou um display braile - o leitor de
tela "fala" o texto para o usuário ou dispôe o texto em
braile através de um dispositivo onde os pontos são
salientados ou rebaixados para permitir a leitura.

NAVEGADOR TEXTUAL
É um navegador baseado em texto, diferente dos
navegadores com interface gráfica onde as imagens são
carregadas. O navegador textual pode ser usado com o
leitor de tela por pessoas cegas e também por pessoas
que acessam a internet com conexão lenta
NAVEGADOR COM VOZ
É um sistema que permite a navegação orientada pela
voz. Alguns possibilitam o reconhecimento da voz e a
apresentação do conteúdo com sons, outros permitem
acesso baseado em telefone (através de comando de voz
pelo telefone e/ou por teclas do telefone)

Baixa Visão
AMPLIADOR DE TELA
É um software que amplia o conteúdo da página para facilitar a
leitura
Deficiência física
A deficiência física ou motora pode envolver fraqueza, limitação no
controle muscular (movimentos involuntários, ausência de
coordenaçõ ou paralisia), limitações de sensação, problemas nas
juntas ou perda de membros
TECLADO ALTERNATIVO
É um dispositivo de hardware ou software que pode ser usados por
pessoas com deficiência física que fornece um modo alternativo de
dipor as teclas como por exemplo, teclado com espaçamento maiores
ou menores entre as teclas

Daltônicos
O daltonimos é uma deficiência visual que faz com que a pessoa tenha
dificuldade em reconhecer uma ou mais cores.
Pessoas Idosas
A partir de uma certa idade, passamos apresentar deficências em diversos dos
nossos sentidos, principalmente visão, audição e coordenação motora. Pessoas
idosas tem enormes dificuldades para aprender a lidar com computadores
Outros tipos de deficiências
Paralisia cerebral, amputação de membros superiores, surdez, e outros diversos
podem dificultar o acesso a informação.
Usuários de dispositivos móveis
Dispositivos móveis como smartphones possuem telas pequenas, conexões
lentas, além de caras, browsers sem suporte a diversas tecnologias e por isso são
caso de necessidade especial de acesso.Com acesso a padrões web e técnicas de
estilização podem garantir acesso a usuários destes dispositivos

DIRETRIZES

INTERNACIONAIS PARA

ACESSIBILIDADE
O padrão internacional de diretrizes para
promoção de acessibilidade mais importante e
aceito hoje em dia é o WCAG (Web Content
Acessibility Guidelines, ou Diretrizes de
Acessibilidade para Conteúdo na Web), criado
pelo W3C
As diretrizes do WCAG são divididos em três
níveis de prioridades.

VALIDAÇÃO E SELOS
Existem basicamente dois tipos de validação a
que um determinado conteúdo na web pode ser
submetido: validação de XHTML e validação de
acessibilidade
Validação XHTML
O mais conceituado validador de XHTML que
existe é da W3C.
http://validator.w3.org

TESTES
Teste de acessibilidade em 10 sites do Governo
e o olha o que apareceu, fiz questão de incluir o da ADAP que sou o criador.
Nenhum deles passou nos testes !!
http://validator.w3.org
http://www.sead.ap.gov.br/ - 39 Errors, 1 warning(s)
http://www.seed.ap.gov.br/ - 90 Errors, 5 warning(s)
http://www.adap.ap.gov.br/site/ - 13 Errors, 9 warning(s)
http://www.caesa.ap.gov.br/ - 38 Errors
http://www.ueap.ap.gov.br/ - 51 Errors, 31 warning(s)
http://www.cbm.ap.gov.br/ - 38 Errors, 23 warning(s)
http://www.jucap.ap.gov.br/ - 43 Errors
http://www.saude.ap.gov.br/ - 86 Errors, 125 warning(s)
http://www.setur.ap.gov.br - 37 Errors, 22 warning(s)
http://www.prodap.ap.gov.br/site/index.php - 43 Errors, 1 warning(s)

OUTROS VALIDADORES DE
ACESSIBILIDADE
Da Silva
http://www.dasilva.org.br
Cynthia Says
http://www.contentquality.com/
eXaminator
http://www.acesso.umic.pt/webax/examinator.php
Hera
http://www.slidar.org/hera/index.php.pt

SELOS
os validadores de acessibilidade, ao fim de uma
checagem, quando há sucesso na validação de alguns
dos níveis de prioridade, oferecem um "selo". Este selo
é uma imagem que mostra que determinado site foi
submetido ao teste e teve sucesso.

FERRAMENTAS DE AUXÍLIO AO
DESENVOLVEDOR

PRIORIDADE 1 (A)
Os pontos de checagem ocorridos na Prioridade 1 são absolutamente
indispensáveis para se garantir o mínimo de acessibilidade em uma
página.
1 - Fornecer um texto equivalente...
Fornecer um texto equivalente para cada elemento não textual.
São Elementos não textuais
- imagens
- Mapas de imagem(image maps)
- Animações em flash
- Applets em Java
- Vídeo
- Arte Ascii
- Frames
- Áudio
- Scripts

PRIORIDADE 1 (A)
Na tag "img" devemos incluir o atributo ALT, pois ele é
suficiente para descrever o conteúdo de um elemento
não textual.
Quando for necessária uma explicação mais detalhada
usar o atributo LONGDESC
exemplo:
<img src="logo_site.png" alt="Logo do Site">

BOTÕES DE IMAGEM
Botões de imagem em formulários também devem
conter o atributo ALT.
Todo elemento INPUT cujo atributo seja "image"
deve conter um atributo ALT que descreva a ação
que será executada ao ser pressionado. Caso
contrário o arquivo de imagem será exibido
<input type="image" src="botao.png" alt="Validar
Documento">

ATRIBUTO "LONGDESC"
Quando o atributo ALT for insuficiente para
descrever de maneira adequada um recurso,
devemos utlizar o atributo LONGDESC, que deve
conter a URL de uma página que contém a
descrição do recurso
<input type="image" src="botao.png" alt="Validar
Documento">

IMAGENS QUE NÃO PRECISAM DE
DESCRIÇÃO
Toda imagem que não faz parte do conteúdo de
um site, ou seja, imagens meramente
decorativas, devem ser inseridas como imagem de
fundo, com uso de CSS. Neste caso o atributo
ALT deve ser vazio
Exemplo:
<img src="img.jpg" alt="" />

SCRIPTS
Devem seguir as seguintes regras
- Incluir o elemento "noscript" para fornecer um
texto alternativo que descreva a ação ou substitua
a funcionalidade do script
- Fornece equivalente textual para scripts
- Assegurar que programas interpretáveis
funcionem mesmo quando estes tiverem sido
desativados ou não forem suportados pelo browser
do usuário

SONS, ÁUDIOS E VÍDEOS
Fornecer equivalentes para sons, áudios e vídeos.
Para sons e áudios, fornecer descrição textual, Para
imagens de vídeo, fornecer descrição sonora ou
textual.
Levar em consideração que imagens, vídeos e
áudio, podem facilitar a compreensão do conteúdo,
como por exemplo, uma sequência de imagens para
explicar algo, um vídeo de uma pessoa traduzindo o
conteúdo para linguagem de sinais.

CORES EM FUNDOS
Não recorrer apenas à cor.
Assegurar que todas as informações veiculas com cor
estejam também disponíveis sem cor. Se a cor for o
único meio para transmitir informações, as pessoas
que não diferenciam cores, bem como os usuários de
monitores monocromáticos e dispositivos não
coloridos, não receberão essa informação
Ex: Incorreto
Criar uma página onde o item verde se destaque
"O ítem verde é de grande importância para o ambiente"
Árvore
Lápis
Borraca

CORES EM FUNDOS
Exemplo Correto:
A descrição da cor faz parte da palavra árvore
"O item verde é de grande importância para o ambiente"
Árvore verde
Lápis Preto
Borracha Branca

CORES
Assegurar que a combinação de cores entre o fundo e o primeiro plano
seja suficiente contrastantes para poder ser vista por pessoas com cromo
deficiências, bem como pelas que utilizam monitores de vídeo
monocromáticos

IDIOMAS
Identificar a língua estrangeira em documento e
equivalentes textuais, através de marcações que
facilitem a pronúncia e a interpretação de texto
atribuir o atributo lang
Exemplo de idioms: inglês-en; francês-fr;
espanhol-es; italiano-it; português-pt; alemão-de
Ex:
<p>e os Alunos disseram
<span
lang="en">very
Web</span>

Good,

Acessibility

TABELAS
Se utilizar tabelas, use marcação correta para as
mesmas.
Recomendações:
Evitar o uso de tabelas para criação de layouts de
páginas. É altamente recomendável utilizar
(CSS) e a correta marcação para construir layout
sem tabelas (De acordo com os Padrões WEB WebStandards )

FORMULÁRIOS
Posicionar corretamente os rótulos e os controles
do formulário para que a navegação seja coerente
Associar o controle do formulário com o
respectivo rótulo
Agrupar informações de forma apropriada
Associar cada controle do formulário o rótulo
incluindo "label for" para os rótulos e "id" para os
controles. Em "input" do tipo botão, não é
necessário a associação, pois o leitor de tela fala o
texto contido no botão que são imagens, usando o
atributo alt.
Criar a navegação ordenada através do atributo
“tabindex”.

LINKS
O texto do link deve ser significativo e claro
O texto do link deve fazer sentido se lido separadamente. Os
usuário de leitores de tela podem navegar em links de uma
página utilizando a tecla "tab". Para cada "tab" é pronunciado
um texto do link. Devido isso, nõ utilizar texto do link
generalizado como "Clique Aqui"
Para tomar ainda mais claro o destino do link, utiliza título
de link informativo (elemento "title")
Para navegação dos links via teclado, pode-se organizar a
sequência dos links e/ou determinar teclas de atalho.
Title: se há mais de um link na página com diferentes textos
dos links apontando para o mesmo endereço, diferenciar os
links utilizando o atributo "title."

LINKS
TABINDEX: para definir a ordem da navegação via
tecla "tab", incluir o atributo "tabindex" com
valores 1, 2, 3...no elemento do link. Além de link, o
"tabindex" é válido para formulários e objetivos.
("a", "area", "button", "input", "label", "legend",
"textarea", "input", "object", "select", "textarea").

ACCESSKEY: para definir quais as teclas de
atalho dos links, incluir o atributo "accesskey" no
elemento do link. Além de link, o "accesskey" é
válido para formulários e objetos.

FRAMES
Frames devem ser sempre evitados. Porém, em
algumas situações seu uso pode ser necessário ou
até mesmo desejado.
Nesse caso, é necessário fornecer títulos a cada
frame, através do atributo TITLE. Títulos esses
que devem descrever o conteúdo do frame de forma
clara e objetiva. Frames aceitam o atributo
LONGDESC.
<frame src="pagina.html" title="navegação
principal do site">

APPLETS / SCRIPTS
Assegure-se de que applets, quando a única fonte
de determinada funcionalidade, sejam diretamente
acessíveis ou compatíveis com tecnologias
assistivas.
Em ponto de checagem é de prioridade 1 caso
funcionalidade seja importante e não esteja
disponível de nenhuma outra forma na página.
Caso contrário, é de prioridade 2.
Assegure-se de que suas páginas sejam usáveis
mesmo sem o suporte a scripts/applets e outros
objetos programáticos.

USE UNIDADES DE MEDIDA RELATIVAS AO
INVÉS DE ABSOLUTAS
Não use unidades de medida absolutas para definir larguras
de elementos e tamanhos de fonte.
Usar unidades de medida absolutas para definir larguras de
elementos (ex: definir a largura do site 780px), pode causar
problemas quando a página for exibida em um dispositivo
cuja tela uma resolução menor que o necessário para exibir
toda a extensão do elemento.
Tamanhos de fontes devem ser definidos com unidades de
medida relativas, pois, dessa forma, os usuários podem
utilizar meios providos pelo próprio browser ou dispositivo
para aumentar ou diminuir esse tamanho.
Recomenda-se o uso de unidades de porcentagem para
definição de larguras de elementos

USE UNIDADES DE MEDIDA RELATIVAS AO
INVÉS DE ABSOLUTAS

FRAMES -> NOFRAMES
o conteúdo do elemento NOFRAMES é usado por, e
apenas por, user-agents que não têm suporte a
frames, e pode ser usado da seguinte maneira

7 MITOS DA ACESSIBILIDADE
Acessibilidade na Web é só para deficientes
visuais;
Na prática, o número de usuários beneficiados
com a acessibilidade é relativamente muito
pequeno;
Fazer um site acessível demora muito e custa
caro;
É melhor fazer uma página especial para
deficientes visuais;
Um site acessível a deficientes visuais não é
bonito;
Vamos por partes: primeiro fazemos o site, depois
fazemos a acessibilidade;
A gente não sabe o que é bom para o usuário.

VANTAGENS DE UM WEBSITE ACESSÍVEL
Seu website estará adaptado a diferentes tipos de
conexão como, por exemplo, navegadores mais
antigos, computadores menos potentes, ou sem
mouse, e outros casos;
Seu website estará dentro dos princípios de
acessibilidade preconizados pela lei federal de
acessibilidade (Lei no. 10 098, de 19 de dezembro de
2000), que estabelece normas gerais e critérios básicos
para a promoção da acessibilidade das pessoas
portadoras de deficiência ou com mobilidade reduzida
e dá outras providências;
Você pode ter mais pessoas acessando suas
informações ou serviços;
Ao ter mais acessos, seu website garantirá a adesão
dessa comunidade e simpatizantes, e atrairá mais
anunciantes.

CONSIDERAÇÕES FINAIS
A política de acessibilidade deve ser implantada não só
visando os sítios públicos, que é obrigação legal do estado,
mas como incentivo à sua aderência pelo terceiro setor e
iniciativa privada, não somente pelo entendimento em
relação às diferenças, mas principalmente como um
importante fator sócio-econômico-cultural
gerado pela
inclusão desse grande grupo de cidadãos nesse novo e
emergente mercado de consumo.

Obrigado!

Salomão Alcolumbre
salomao@webcenterna.com

Acessibilidade na Web - Salomão Alcolumbre

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (16)

Semelhante a Acessibilidade na Web - Salomão Alcolumbre

Semelhante a Acessibilidade na Web - Salomão Alcolumbre (20)

Acessibilidade na Web - Salomão Alcolumbre