Comunicação Visual para Web I AULA 8

Prévia do material em texto

Aula
08Comunicação Visual para Web - UNIGRAN
ACESSIBILIDADE
Caros(as) alunos(as) nessa aula veremos o conceito de 
acessibilidade, e as principais recomendações para construção de 
websites acessíveis a toda as pessoas com ou sem limitações fisicas. Se 
ao final desta aula tiverem dúvidas, vocês poderão saná-las através das 
ferramentas “fórum” ou “quadro de avisos” e “chat”.
Comecemos, então, analisando os objetivos e verificando as 
seções que serão desenvolvidas ao longo desta aula. Bom trabalho!
Objetivos de aprendizagem
Ao final desta aula, vocês serão capazes de:
• entender o conceito de acessibilidade;
• entender a importância de prover acessibilidade em website 
e softwares;
• conhecer quais são as deficiências mais comum que acometem 
a população brasileira;
• conhecer o que a legislação brasileira sobre acessibilidade;
• entender quais são os processos para desenvolver websites e 
softwares acessíveis;
• conhecer quais são as principais recomendações para adequar o 
projeto web para as normas de acessibilidade;
• identificar quais elementos comprometem a acessibilidade. 
129
Comunicação Visual para Web - UNIGRAN
Seções de estudo
• Seção 1 - Acessibilidade
• Seção 2 - Acessibilidade no Brasil – Legislação
• Seção 3 - Modelo de acessibilidade em Governo Eletrônico
• Seção 4 - Processos para desenvolver sites acessíveis 
• Seção 5 - Recomendações para adequar o projeto web as normas 
de acessibilidade
Seção 1 - Acessibilidade
Acessibilidade é um conceito multidisciplinar que visa promover o 
acesso as pessoas independente de suas limitações físico-motoras e cognitivas, 
dos meios técnicos ou dispositivos utilizados, visando sua adaptação e locomoção, 
eliminando as barreiras.
Acessibilidade x Usabilidade
Não confunda estes conceitos! Acessibilidade e usabilidade são conceitos 
complementares. A acessibilidade visa prover acesso a locais, produtos, serviços 
ou informações, já a usabilidade infere na facilidade de uso.
No âmbito computacional a acessibilidade não visa apenas prover acesso 
de produtos, serviços e informação aos portadores de deficiências, mas sim a 
todos os usuários independente do dispositivo que estiver realizando o acesso, 
de seus conhecimentos computacionais, da sua condição cultural e social. Por 
exemplo: usuários que possuem banda larga de baixa velocidade.
Há diversas ferramentas que permitem o acesso aos recursos 
computacionais, tais como: leitores de tela para deficientes visuais, teclados 
virtuais para portadores de deficiência motora ou com dificuldades de coordenação 
motora, e sintetizadores de voz para pessoas com problemas de fala.
Segundo o Comitê Brasileiro de Acessibilidade (ABNT/CB–40) “Acessibilidade é a 
possibilidade e condição de alcance, percepção e entendimento para a utilização 
com segurança e autonomia de edificações, espaço, mobiliário, equipamento 
urbano e elementos.”
CONCEITO
130
Comunicação Visual para Web - UNIGRAN
O uso de diretrizes de acessibilidade em ambientes digitais visa garantir 
condições de acesso, garantindo que pessoas com deficiências visual ou motora 
possam utilizar os sites de maneira satisfatória, assim como: acessar, navegar, 
interagir, dentre outras atividades, independentemente de suas limitações. 
Por que acessibilidade é tão importante?
Em um censo pelo IBGE contatou-se que no Brasil o número de pessoas 
que apresentam algum tipo de dificuldade de enxergar, ouvir, locomover-se ou 
deficiência física ou mental são de aproximadamente, 46 milhões de pessoas, ou 
24% da população brasileira. (Fonte: www.ibge.gov.br acessado em: 30/09/12)
Com números tão expressivos, devemos projetar softwares e sites que 
permitam que pessoas com deficiências acessem informações e serviços on-line 
de diferentes dispositivos, browsers e programas.
Deficiências mais comuns: 
Veja os tipos de deficiências físicas que devem ser consideradas ao 
elaborar um projeto de um site ou software, e quais recursos as pessoas portadoras 
desses tipos de deficiência usam para navegar na internet:
Cegueira: portadores deste tipo de deficiência utilizam programas 
leitores de tela , como o Jaws, para escutar a leitura de textos e teclado em Braille. 
A entrada de informações é feita somente através do teclado, sem o uso do mouse. 
Visão debilitada: portadores deste tipo de deficiência necessitam 
configurar o tamanho da fonte dos textos e cores. Podem utilizam leitores de telas 
ou programas que permitem a ampliação de imagens. A entrada de informações 
na maioria das vezes é feita através do teclado com ou sem uso do mouse.
Discromatopsia (dificuldade de distinção de gamas de cor): Para 
melhor visualização requerem interfaces com cores bem contrastadas, assim 
como necessitam configurar elementos como links e botões para escolher as cores 
que lhe são visualmente mais confortáveis. 
Dificuldades físicas e motoras: Utilizam hardware e teclados especiais, 
telas touch screen, comando de voz e programas para reconhecimento de voz.
Surdez: portadores deste tipo de deficiência ficam não podem acessar 
recursos de áudio.
 Leitores de tela: São 
programas que leem 
em voz alta todo 
conteúdo das páginas e 
disponibilizam recursos 
que auxiliam na 
navegação e realização 
de tarefas.
Veja os principais 
leitores de tela:
• Nitrous Voice Flux - 
Controla o computador 
por voz e é 100% 
gratuito. 
• IBM Via Voice - 
Controla o computador 
por voz. 
• NVDA - Software 
livre para ler tela em 
ambiente Windows, 
com suporte a vários 
idiomas.
• Yeosoft Text - Leitor 
de Tela em inglês e 
português. 
• Jaws for windows 
- leitor de tela em 
diversos idiomas. 
• Virtual vision - leitor 
de telas em português 
do Brasil 
• Dosvox - sistema para 
deficientes visuais. 
131
Comunicação Visual para Web - UNIGRAN
Problemas de cognição, neurológicos e de aprendizagem: Interfaces 
e textos simples de fácil entendimento auxiliam portadores destas deficiências. 
Seção 2 - Acessibilidade no Brasil – Legislação
A legislação brasileira aprovou um decreto federal, nº 5.296, de 2 de 
dezembro de 2004, onde tornou obrigatório a construção de Web sites, portais e canais 
eletrônicos da administração pública que atendam a requisitos de acessibilidade. 
“Capitulo III – Das condições gerais da acessibilidade. Art. 8o 
Para os fi ns de acessibilidade, considera-se:
 I - acessibilidade: condição para utilização, com segurança 
e autonomia, total ou assistida, dos espaços, mobiliários 
e equipamentos urbanos, das edifi cações, dos serviços de 
transporte e dos dispositivos, sistemas e meios de comunicação 
e informação, por pessoa portadora de defi ciência ou com 
mobilidade reduzida;[...]
V - ajuda técnica: os produtos, instrumentos, equipamentos ou 
tecnologia adaptados ou especialmente projetados para melhorar 
a funcionalidade da pessoa portadora de defi ciência ou com 
mobilidade reduzida, favorecendo a autonomia pessoal, total ou 
assistida;[...]
 IX - desenho universal: concepção de espaços, artefatos e 
produtos que visam atender simultaneamente todas as pessoas, 
com diferentes características antropométricas e sensoriais, 
de forma autônoma, segura e confortável, constituindo-se nos 
elementos ou soluções que compõem a acessibilidade.”
A Convenção dos Direitos das Pessoa com Deficiência da ONU, assinada 
pelo Brasil em 30/03/2007 e ratificada como emenda constitucional brasileira através 
do decreto legislativo Nº 186/2008, autoaplicável desde junho de 2008, amplia a 
acessibilidade, restrita às pessoas com deficiência visual e a portais do governo pelo 
decreto 5296/04, a todas as deficiências e às empresas privadas. 
Para saber mais sobre acessibilidade leia o arƟ go na integra 
que está disponível em:
<hƩ p://www.acessibilidade.net/convencao.php>.
132
Comunicação Visual para Web- UNIGRAN
Seção 3 - Processos para desenvolver sites
 acessíveis E-mag 
O Departamento de Governo Eletrônico brasileiro em parceria com a ONG 
Acessibilidade Brasil elaborou o Modelo de Acessibilidade de Governo Eletrônico, 
o E-MAG, com intuito de prover inclusão digital facilitar e o acesso para todas as 
pessoas às informações e serviços disponibilizados nos sites e portais do governo. 
Os principais documentos da legislação brasileira sobre o processo de 
promoção da acessibilidade e a implementação do e-MAG são: 
1. Decreto número 5296, de 2 de dezembro de 2004, que 
regulamenta as leis n° 10.048, de 8 de novembro de 2000, que dá 
prioridade de atendimento às pessoas que especifi ca, e 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 
com defi ciência, e dá outras providências;
2. Comitê CB-40 da ABNT, que se dedica à normatização no 
campo de acessibilidade, atendendo aos preceitos de desenho 
universal. O Comitê possui diversas comissões, defi nindo 
normas de acessibilidade em todos os níveis, desde o espaço 
físico até o virtual;
3. Decreto n° 6949, de 25 de agosto de 2009, que promulga a 
Convenção Internacional sobre os Direitos das Pessoas com 
Defi ciência elaborada pelas Nações Unidas em 30 de março 
de 2007, defi nindo, em seu artigo 9°, a obrigatoriedade de 
promoção do acesso de pessoas com defi ciência a novos sistemas 
e tecnologias da informação e comunicação, inclusive à Internet. 
4. Portaria nº 3, de 7 de maio de 2007, que institucionalizou o 
e-MAG no âmbito do sistema de Administração dos Recursos 
de Informação e Informática – SISP, tornando sua observância 
obrigatória nos sítios e portais do governo brasileiro.
Segundo o Modelo de Acessibilidade em Governo Eletrônico e-MAG, 
no âmbito computacional as quatro principais situações vivenciadas durante a 
manipulação de dispositivos digitais por usuários com deficiência são:
“ - Acesso ao computador sem mouse: no caso de pessoas com 
deficiência visual, dificuldade de controle dos movimentos, 
paralisia ou amputação de um membro superior;
- Acesso ao computador sem teclado: no caso de pessoas 
com amputações, grandes limitações de movimentos ou falta 
de força nos membros superiores;
- Acesso ao computador sem monitor: no caso de pessoas 
com cegueira;
- Acesso ao computador sem áudio: no caso de pessoas com 
deficiência auditiva. “
133
Comunicação Visual para Web - UNIGRAN
No entanto as deficiências relacionadas a cognição, como limitações 
relacionadas a memória, resoluções de problemas, compreensão matemática e visual, 
dentre outros também devem ser considerados. 
A fim de prover inclusão social para que portadores de deficiências possam 
realizar tarefas de forma autônoma, melhorando assim sua qualidade de vida estão os 
recursos de tecnologia assistiva, tais como mouses especiais, ampliadores e leitores 
de telas, dentre outros que auxiliam na realização de tarefas. 
Somente os recursos de tecnologia assistiva não são suficientes para garantir 
o acesso ao conteúdo de uma página web. Para garantir acessibilidade o website deve 
ser projetado e desenvolvido de acordo com os padrões Web (Web Standards) e as 
recomendações de acessibilidade.
Modelo de Acessibilidade em Governo Eletrônico e-MAG que visa 
padronizar o processo de acessibilidade em sites e portais do governo brasileiro, em 
conformidade com os padrões internacionais. 
Seção 4 - Processos para desenvolver sites acessíveis
Segundo o e-MAG para desenvolver um site acessível é preciso realizar os 
seguintes passos: Seguir os padrões Web; Seguir as diretrizes ou recomendações de 
acessibilidade; Realizar a avaliação de acessibilidade.
1° PASSO - Seguir os padrões Web: 
O projeto deve estar de acordo com os padrões Web internacionais definidos 
pelo W3C e com as normas HTML, XML, XHTML e CSS, seguindo as regras de 
formatação sintática.
Para conhecer as boas práƟ cas para escrever códigos para 
desenvolvimento de sites de acordo com os padrões, ver 
CarƟ lha de Codifi cação dos Padrões Brasil e-GOV, disponível 
em:<http://www.governoeletronico.gov.br/acoes-e-
projetos/padroes-brasil-e-gov> 
134
Comunicação Visual para Web - UNIGRAN
2° PASSO - Seguir as diretrizes ou recomendações de acessibilidade:
As diretrizes ou recomendações de acessibilidade contém normas e regras 
que visam explicar aos desenvolvedores como tornar o conteúdo Web acessível a 
todas as pessoas. 
Tais diretrizes podem ser encontradas em dois documentos, o WCAG que 
traz os padrões internacionais de diretrizes e o nacional, o e-MAG. 
3° PASSO - Realizar a avaliação de acessibilidade:
Após a criação do website é necessário valida-lo para verificar se o projeto 
está de acordo com os padrões de acessibilidade, gerando um relatório de erros. A 
validação pode ser feita de forma automática por meio de ferramentas (ver ferramentas 
em anexo) e/ ou manualmente. Recomenda-se para melhor performance sejam feitos 
os dois tipos de avaliação. 
Assim, os passos sugeridos para a avaliação de acessibilidade em um sítio 
são os seguintes:
1.Validar os códigos do conteúdo HTML e das folhas de estilo;
2.Verifi car o fl uxo de leitura da página – para tal, utilizar 
um navegador textual, como o Lynx, ou um leitor de tela 
(recomendamos o NVDA ou ORCA). Para maiores detalhes, 
ver documento Descrição dos Leitores de Tela, disponível em: 
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/
material-de-apoio.
3.Verifi car o fl uxo de leitura da página sem estilos, sem script e 
sem as imagens;
4.Verifi car as funcionalidades da barra de acessibilidade, 
aumentando e diminuindo a letra, modifi cando o contraste, etc.;
5.Realizar a validação automática de acessibilidade utilizando o 
ASES e outros avaliadores automáticos sugeridos no Capítulo 4;
6.Realizar a validação manual, utilizando os checklists de 
validação humana disponíveis em http://www.governoeletronico.
gov.br/acoes-e-projetos/e-MAG/material-de-apoio. 
Padrões de acessibilidade na Web
Na Web o termo acessibilidade também se refere a recomendações do W3C - 
World Wide Web Consortium , com intuito viabilizar a inclusão digital, independente 
das pessoas terem ou não alguma deficiência, possam acessar os sites.
Os padrões Web, estabelecidos pelos W3C, são como um código de ética, 
tanto na área de desenvolvimento, design ou conteúdo. Sites que foram desenvolvidos 
segundo esses padrões podem ser acessados e visualizados por qualquer pessoa, 
independente da tecnologia empregada. 
Dentre todos princípios do W3C, destaco o “Acesso Universal”, que define 
a Web como um universo de informações acessível em rede, por isso é fundamental 
conhecer os princípios de acessibilidade para o desenvolvimento de sites. 
O World Wide Web 
Consortium – W3C 
é um consórcio de 
empresas de tecnologia, 
atualmente com cerca 
de 500 membros. 
O W3C desenvolve 
padrões para a criação 
e a interpretação dos 
conteúdos para a Web. 
Sites desenvolvidos 
segundo esses padrões 
podem ser acessados 
e visualizados por 
qualquer pessoa 
ou tecnologia, 
independente de 
hardware ou software 
utilizados, como 
celulares (em Portugal, 
telemóvel), PDAs, 
de maneira rápida 
e compatível com 
os novos padrões e 
tecnologias que possam 
surgir com a evolução 
da internet. Disponível 
em http://pt.wikipedia.
org/wiki/W3C#Padr.
C3.B5es_W3C, 
acessado em: 20/05/09.
135
Comunicação Visual para Web - UNIGRAN
Seção 5 - Recomendações para adequar o projeto web as 
normas de acessibilidade
Nesta sessão será apresentada uma síntese das recomendações extraídas 
da cartilha Modelo de Acessibilidade em Governo Eletrônico, do governo federal e 
serão explanadas nas seguintes seções: 
• Marcação
• Comportamento (DOM)
• Conteúdo/Informação
• Apresentação/Design• Multimídia
• Formulário
Marcação
1. Declarar o DOCTYPE: o DOCTYPE é utilizado para identificar qual 
versão do (X)HTML o documento está usando. Também é através do DOCTYPE que 
as ferramentas de validação fazem a análise do código e quando necessário indicam 
as correções que devem ser feitas na falhas apuradas. 
Exemplo de DOCTYPE em HTML 4.0 Strict
2. Organizar o código de forma lógica e semântica: os elementos 
(textos, images, sessões, etc) devem ser organizados e apresentados de forma 
lógica, sequencial e correspondente ao conteúdo. Por exemplo: utilize as tag 
(h1,h2,h3) para designar cabeçalhos, Strong para textos enfatizados, table para 
dados tabulares, menus em listas, dentre outros.
3. Utilizar corretamente os níveis de cabeçalho: os níveis de cabeçalhos 
varia do h1 ao h6 e devem ser organizados e empregados de forma lógica e 
conceitual. O cabeçalho nível 1 pode ser utilizado uma única vez na página já os 
Obs: As recomendações deste documento são baseadas em HTML 4.0 e XHTML 1.1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "hƩ p://www.w3.org/TR/
html4/strict.dtd">
<html lang="pt-BR">
<head> 
<Ɵ tle>Exemplo de DOCTYPE em HTML 4.01</Ɵ tle> 
<meta hƩ p-equiv="content-type" content="text/html; charset=uƞ -8" />
</head>
Tag: Código usado 
para marcar o 
início e o fi m de 
um elemento (X)
HTML.
136
Comunicação Visual para Web - UNIGRAN
outros níveis podem ser utilizados mais vezes, desde que estejam estruturados 
corretamente. O correto emprego dos níveis de cabeçalho são importantes para 
que os usuários que utilizam leitores de tela navegam na página através dos 
cabeçalhos, assim os programas leitores de tela interpretam o relacionamento 
entre os assuntos e compreendem melhor a estrutura da página para a sequência 
de leitura, permitindo ao usuários fazer uma varredura na tela e ler os assuntos de 
seu interesse.
4. Ordenar de forma lógica e intuitiva a leitura e tabulação: O código 
HTML deve ser organizado com uma sequência lógica de navegação para que 
o usuário consiga percorrer com facilidade os links, controles de formulários 
e objetos. O tabindex deve ser usado quando for realmente necessário, pois a 
correta organização do código já é suficiente para uma boa navegação. 
5. Disponibilizar todas as funções da página via teclado: disponibilize 
também o acesso via teclado para as funções que são criadas por linguagens de 
scrit (javascript). Por exemplo: ao utilizar o evento do mouse onclick use também 
o evento onKeypress para que o evento também seja acionado via teclado.
6. Fornecer âncoras para ir direto a um bloco de conteúdo: coloque 
ancoras que conduza para os links mais relevantes. Os links devem ser posicionados 
em locais estratégicos como no final e início do menu, do conteúdo, etc.
7. Não utilizar tabelas para diagramação: a utilização de tabelas é 
indicada e correta somente para exibir dados tabulares. Jamais utilize tabelas para 
diagramar interfaces. Os usuários que utilizam programas leitores de tela a leitura 
podem ficar confusos, quando o leiaute está estruturado por tabelas, pois elas 
serão lidas. Uma sugestão para amenizar o problema é utilizar a tag “summary” 
para indicar que a tabela elementos do layout e não dados tabulares.
8. Não abrir novas instâncias sem a solicitação do usuário: A abertura 
de novas janelas ou abas não solicitados pelo usuário ferem as regras de usabilidade. 
Comportamento (DOM)
9. Garantir que os objetos programáveis sejam acessíveis: todos o 
conteúdo e funcionalidades, incluído conteúdos dinâmicos, scripts e Flash devem 
ser acessíveis aos recursos de tecnologia assistiva. 
137
Comunicação Visual para Web - UNIGRAN
10. Não criar páginas com redimensionamento e/ou atualização 
automática: as ações de redimensionamento e atualização através da meta tag 
refresh podem confundir o usuário durante a navegação, principalmente aqueles 
que utilizam leitores de tela. 
11. Não incluir situações com intermitência de tela: não deve 
ser utilizado na página web ou em propagandas de terceiros elementos com 
efeitos visuais piscantes, intermitentes ou cintilantes, pois estes efeitos podem 
desencadear ataques epiléticos em pessoas com epilepsia fotosensitiva, o cintilar 
ou piscar.
12. Assegurar o controle do usuário sobre as alterações temporais 
do conteúdo: do usuários deve ter controle dos movimentos e do tempo sob 
conteúdos dinâmicos que movimentam pela tela. 
Conteúdo / Informação
13. Identificar o idioma principal da página: o idioma principal do 
documento deve ser identificado através do atributo lang do HTML. 
14. Oferecer títulos e links descritivos e informativo à página: a primeira 
informação a ser lida pelos leitores de tela é o título informado pela tag title. Os 
títulos e links devem ser claros e condizente com o conteúdo que será apresentado. 
15. Fornecer alternativa em texto para as imagens do sítio: A maioria 
dos desenvolvedores não coloca descrição na tag alt para imagens, fotos, vídeos, 
legendas de links, etc. No entanto essa é uma boa prática de programação e de 
estrema importância para pessoas que não enxergam pois no lugar da imagem 
pode ouvir sua descrição. 
16. Disponibilizar documentos em formatos acessíveis: disponibilize os 
documentos em HTML, já os arquivos para download devem ser disponibilizados 
em ODF . A extensão e o tamanho do arquivo também devem ser informados no 
texto do link. Ex: <a href=”aula.odt”> Aula Inaugural UNIGRANET (formato 
.odt, tamanho 150Kb) </a>
17. Em tabelas, utilizar títulos e resumos de forma apropriada: 
Defina o título da tabela utilizando o elemento caption. Em tabelas extensas 
utilize o atribute summary para fornecer um resumo. Ex:
O ODF (Open 
Document 
Format) é um 
formato aberto 
de documento 
adotado 
pela e-PING 
(Arquitetura de 
Interoperabilidade 
em Governo 
Eletrônico) 
que pode ser 
implementado 
em qualquer 
sistema. O ODF 
engloba formatos 
como: ODT para 
documentos 
de texto, ODS 
para planilhas 
eletrônicas, 
ODP para 
apresentações 
de slides, entre 
outros.
138
Comunicação Visual para Web - UNIGRAN
18. Associar células de dados às células de cabeçalho em uma tabela: 
estruture os dados da tabela de forma semântica. Utilize o elemento td para as 
células de dados e o elemento th para cabeçalho.
19. Separar a forma do conteúdo: o conteúdo do site é composto por 
imagens, textos, tabelas, animações, etc. Esses elementos reunidos compõem 
o layout, e quando separamos forma de conteúdos, criamos páginas compostas 
apenas por textos e imagens via CSS sem uma estrutura de layout. Esse modelo 
estrutural permite que usuários com deficiências utilizem a interface e visualizem 
em diferentes dispositivos. 
Apresentação/Design
20. Oferecer contraste mínimo entre plano de fundo e primeiro plano: 
o contraste entre o plano de fundo e o primeiro plano devem ser suficientes para 
que pessoas com baixa visão, com cromodeficiências ou que utilizam monitores 
de vídeo monocromático, possam visualizar os elementos sem dificuldade. Em 
anexo a esta aula são disponibilizados links de ferramentas online que verificam 
o contraste de cores. 
21. Não utilizar apenas cor ou outras características sensoriais para 
diferenciar elementos: o uso das cores, formas e sons não devem ser o único 
meio para sinalizar, distinguir, transmitir informações ou indicar ações. 
22. Permitir redimensionamento de texto sem perda de funcionalidade: 
as interfaces e textos devem ser flexíveis e redimensionáveis, sem que ocorra 
sobreposição de textos ou barra de rolagem, de forma que a página continue 
legível e funcional quando redimensionada para até 200%. 
23. Dividir as áreas de informação: as informações devem ser dispostas 
de forma clara e funcional. As divisões mais comuns são “topo”, “conteúdo”, 
“menu” e “rodapé”. 
24. Possibilitar queo elemento com foco seja visualmente evidente: o 
elemento que recebe o foco deve ser destacado de forma clara e passível de ser clicada. 
<table summary="Esta tabela exibe o horário de aula do curso de análise de sistemas 
da UNIGRANET"> <capƟ on> Horário de Aula</capƟ on>
139
Comunicação Visual para Web - UNIGRAN
Multimídia
25. Fornecer alternativa para vídeo: em arquivos de vídeo com áudio 
recomenda-se que seja disponibilizado opções para que os usuários possam 
visualizá-lo com ou sem legenda, ou em Língua Brasileira de Sinais (Libras). 
Uma transcrição descritiva, também é recomendada para arquivos de áudio. 
26. Fornecer controle de áudio para som: para controlar arquivos de 
reprodução sonoras devem ser disponibilizados mecanismo para parar, pausar, 
silenciar ou ajustar o volume.
27. Fornecer controle de animação: mecanismos de controle de 
animações devem ser disponibilizados para que os usuários possam possa pausar, 
parar ou ocultar a animação. 
Formulários
28. Fornecer alternativa em texto para os botões de imagem de 
formulários: botões do tipo imagem (input type=”image”) devem oferecer uma 
descrição textual através do atributo alt. 
29. Estabelecer uma ordem lógica de navegação: os elementos do 
formulário devem ser dispostos em uma sequência lógica de navegação. O 
elemento fielset poderá ser utilizado para agrupar itens relacionados. 
30. Fornecer instruções para entrada de dados: quando a entrada 
de dados por parte do usuário requer uma formatação especifica, deve-se 
disponibilizar informações para que o usuário o faça corretamente. Ex: 
31. Identificar e descrever erros de entrada de dados: o usuário 
deve ser informado claramente quando os dados fornecidos apresentam algum 
tipo de erro, como por exemplo em situações em que determinados campos são 
obrigatórios, o alerta indicando a obrigatoriedade do preenchimento do campo 
deverá ser indicado de forma clara e descritiva.
<label for="data">Data (dd-mm-aaaa)</label> 
<input type="text" id="data" name="data" />
140
Comunicação Visual para Web - UNIGRAN
Para concluir não utilize os seguintes elementos:
• Tabelas para fins de diagramação;
• Atualizações automáticas periódicas;
• Situações com intermitência de tela;
• Elementos como: frame, applet, blink, marquee, basefont, center, dir, 
align, font, isindex, menu, strike, u, etc, pois estes são desaprovados pela W3C.
Retomando a conversa inicial
• Seção 1 - Acessibilidade
Acessibilidade é um conceito multidisciplinar que visa promover o 
acesso as pessoas independente de suas limitações físico-motoras e cognitivas, 
dos meios técnicos ou dispositivos utilizados, visando sua adaptação e locomoção, 
eliminando as barreiras.
Prover acessibilidade é de suma importância, pois segundo o IBGE 
contatou-se que no Brasil o número de pessoas que apresentam algum tipo de 
dificuldade de enxergar, ouvir, locomover-se ou deficiência física ou mental são 
de aproximadamente, 46 milhões de pessoas, ou 24% da população brasileira.
As deficiências mais comuns são: 
• Cegueira
• Visão debilitada 
• Discromatopsia 
• Dificuldades físicas e motoras
• Surdez 
• Problemas de cognição, neurológicos e de aprendizagem 
Para mais detalhes sobre o desenvolvimento de formulários 
acessíveis, veja o tutorial Formulários Acessíveis disponível 
em Material de Aula.
Parece que estamos indo bem. Então, para encerrar esse tópico, 
vamos recordar:
141
Comunicação Visual para Web - UNIGRAN
• Seção 2 – Acessibilidade no Brasil – Legislação
A legislação brasileira aprovou um decreto federal, nº 5.296, de 2 de 
dezembro de 2004, onde tornou obrigatório a construção de Web sites, portais e canais 
eletrônicos da administração pública que atendam a requisitos de acessibilidade. 
• Seção 3 – Modelo de acessibilidade em Governo Eletrônico
O Departamento de Governo Eletrônico brasileiro em parceria com a 
ONG Acessibilidade Brasil elaborou o Modelo de Acessibilidade em Governo 
Eletrônico e-MAG que visa padronizar o processo de acessibilidade em sites e 
portais do governo brasileiro, em conformidade com os padrões internacionais. 
• Seção 4 – Processos para desenvolver sites acessíveis 
Segundo o e-MAG para desenvolver um site acessível é preciso realizar 
os seguintes passos: Seguir os padrões Web; Seguir as diretrizes ou recomendações 
de acessibilidade; Realizar a avaliação de acessibilidade.
• Seção 5 – Recomendações para adequar o projeto web as 
normas de acessibilidade
1. Declarar DOCTYPE
2. Organize o código de forma lógica e semântica
3. Utilizar corretamente os níveis de cabeçalho
4. Ordenar de forma lógica e intuitiva a leitura e tabulação
5. Disponibilizar todas as funções da página via teclado
6. Fornecer âncoras para ir direto a um bloco de conteúdo
7. Não utilizar tabelas para diagramação
8. Não abrir novas instâncias sem a solicitação do usuário
9. Garantir que os objetos programáveis sejam acessíveis
10. Não criar páginas com redimensionamento e/ou atualização automática
11. Não incluir situações com intermitência de tela
12. Assegurar o controle do usuário sobre as alterações temporais do conteúdo
13. Identificar o idioma principal da página
14. Oferecer títulos e links descritivos e informativo à página
15. Fornecer alternativa em texto para as imagens do sítio
16. Disponibilizar documentos em formatos acessíveis
17. Em tabelas, utilizar títulos e resumos de forma apropriada
18. Associar células de dados às células de cabeçalho em uma tabela
19. Separar a forma do conteúdo
20. Oferecer contraste mínimo entre plano de fundo e primeiro plano
21. Não utilizar apenas cor ou outras características sensoriais para 
diferenciar elementos
142
Comunicação Visual para Web - UNIGRAN
Sugestões de leituras
• O uso correto do texto alternativo 
<http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio>.
• Tabelas Acessíveis 
<http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio>.
• Formulários Acessíveis 
<http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/material-de-apoio>.
• Padrões Brasil e-Gov 
<http://www.governoeletronico.gov.br/acoes-e-projetos/padroes-brasil-e-gov>.
• WCAG 2.0 
<http://www.ilearn.com.br/TR/WCAG20>.
• Técnicas para as WCAG 2.0 
<http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS>.
• CSS e Web Standards 
<http://maujor.com/>. 
• RENAPI – Projeto de Acessibilidade Virtual
<http://bento.ifrs.edu.br/acessibilidade/>.
22. Permitir redimensionamento de texto sem perda de funcionalidade
23. Dividir as áreas de informação
24. Possibilitar que o elemento com foco seja visualmente evidente
25. Fornecer alternativa para vídeo
26. Fornecer controle de áudio para som
27. Fornecer controle de animação
28. Fornecer alternativa em texto para os botões de imagem de formulários: 
29. Estabelecer uma ordem lógica de navegação
30. Fornecer instruções para entrada de dados
31. Identificar e descrever erros de entrada de dados
143
Comunicação Visual para Web - UNIGRAN
• Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos 
<http://www.acessibilidadelegal.com/>. 
• Acesso Digital 
<http://www.acessodigital.net>. 
• Web Accessibility in Mind 
<http://webaim.org>. 
• W3C Brasil 
<http://w3c.br >.
• CLF Standards (Canadá)
<http://www.tbs-sct.gc.ca/clf2-nsi2/index-eng.asp>. 
• Section 508 (Estados Unidos)
<http://www.section508.gov/>. 
• NDA (Irlanda) 
<http://www.nda.ie/cntmgmtnew.nsf>. 
144