SlideShare uma empresa Scribd logo
Web acessível
Sumário
• Introdução
o O que é acessibilidade?
o A quem se destina?
• Acessibilidade na Web
• WCAG
o Princípios
o Recomendações
› Níveis de prioridade
• Validação
• Bibliografia
O que é acessibilidade?
• Segundo a legislação brasileira:
Acessibilidade é condição para utilização, com segurança e autonomia,
total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das
edificações, dos serviços de transporte e dos dispositivos, sistemas e
meios de comunicação e informação, por pessoa com deficiência ou
com mobilidade reduzida.
DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004.
https://www.planalto.gov.br/ccivil_03/_Ato2004-
2006/2004/Decreto/D5296.htm
O que é acessibilidade?
• Segundo a WAI(Web Accessibility Initiative):
Acessibilidade na Web significa que pessoas com deficiências podem
perceber, entender, navegar e interagir além de poder contribuir para a web.
O que é acessibilidade?
Acessibilidade na web diz respeito à facilidade de acesso, por
qualquer pessoa, independente de condições físicas, técnicas ou
dispositivos.
A quem se destina?
Acessibilidade é
para todos
A quem se destina?
• Deficientes visuais
o Cegos: Pessoas que navegam com leitores de tela
o Daltônicos: Dificuldade em enxergar cores e contrastes
o Baixa visão: Necessidade de aumento de tela para ler
• Deficientes auditivos
o Pessoas que não conseguem acompanhar um vídeo na internet com áudio.
• Deficientes motores
o Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou
que tenham dificuldades com o uso do mouse.
A quem se destina?
• Displays reduzidos
o Acessando a internet por um telefone celular.
• Deficiência temporária
o Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas,
tendinite, etc.
• Início de aprendizado
o Pessoas que estão iniciando seu processo de informatização ou crianças
descobrindo o computador.
• Idade avançada
o Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.
A quem se destina?
Fazer um site acessível não é só se preocupar com um
determinado grupo de pessoas: É se preocupar com
todas as pessoas que acessam seu site.
Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados
tipos de informações;
• tenham dificuldade em ler ou compreender textos;
• não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los;
• possuam tela que apresenta apenas texto, ou com dimensões
reduzidas, ou ainda uma conexão lenta com a Internet;
Acessibilidade na Web
Os desenvolvedores de páginas Web devem levar em consideração
diferentes situações ao criar uma página. A Web pode ser utilizada por
pessoas que:
• não falem ou compreendam fluentemente o idioma em que o
documento foi escrito;
• estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em
um ambiente barulhento ou fora de casa ou do trabalho);
• possuam uma versão ultrapassada de navegador web, diferente dos
habituais, um navegador por voz, ou um sistema operacional pouco
convencional.
WCAG 1.0
Web Content Accessibility Guidelines
• É uma recomendação W3C de 5 de maio de 1999
• As recomendações explicam como tornar o conteúdo Web acessível a pessoas
com deficiências.
No entanto, faz também com que o conteúdo da Web se torne de mais fácil acesso
a todos os usuários:
• independentemente da ferramenta usada (computadores de mesa, laptops,
telefones celulares, ou navegador por voz) e das
• limitações associadas ao respectivo uso (ambientes barulhentos, salas mal
iluminadas ou com excesso de iluminação, utilização sem o uso das mãos).
WCAG 2.0
• É uma recomendação W3C de 11 Dezembro de 2008
• Os critérios de sucesso do WCAG 2.0 são escritos como declarações
testáveis, que não são especificamente tecnológicas.
• As WCAG 2.0 foram desenvolvidas através do processo W3C em
colaboração com pessoas e organizações em todo o mundo, com o
objetivo de elaborar um padrão compartilhado referente à acessibilidade
para o conteúdo da Web, que satisfaça as necessidades das pessoas, das
organizações e dos governos, a nível internacional.
Níveis de Abordagem das WCAG 2.0
• Princípios - os principais princípios que constituem a fundação da
acessibilidade da Web: perceptível, operável, compreensível e robusto.
• Recomendações - apresentam os objetivos básicos que os
desenvolvedores devem atingir para tornar o conteúdo mais acessível aos
usuários com diferentes incapacidades.
• Critérios de Sucesso - para satisfazer as necessidades dos diferentes
grupos e situações, são definidos três níveis de conformidade:
o A (o mais baixo), AA e AAA (o mais elevado).
Princípio 1: Perceptível
A informação e os componentes da interface do usuário têm de ser
apresentados aos usuários em formas que eles possam perceber
• Alternativas em Texto: Fornecer alternativas em texto.
o Atributo “alt”?
• Mídias com base no tempo: Fornecer alternativas para mídias com base
no tempo.
o Legendas e descrição do conteúdo sonoro
• Adaptável: Criar conteúdos que possam ser apresentados de diferentes
maneiras (por ex., um layout mais simples) sem perder informação ou
estrutura.
o CSS para impressão (print) e telas menores (handheld)
Princípio 2: Operável
Os componentes de interface de usuário e a navegação têm de ser
operáveis
• Acessível por Teclado: Fazer com que toda a funcionalidade fique
disponível a partir do teclado.
o Estruturação do conteúdo
• Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que
possa causar ataques epilépticos.
o Evitar piscar de telas
• Navegável: Fornecer formas de ajudar os usuários a navegar, localizar
conteúdos e determinar o local onde estão.
o Finalidade do link (contexto)
Princípio 3: Compreensível
A informação e a utilização da interface de utilizador têm de ser
compreensíveis.
• Legível: Tornar o conteúdo de texto legível e compreensível.
o Identificação do idioma, abreviaturas, etc.
• Previsível: Fazer com que as páginas Web surjam e funcionem de forma
previsível.
o Evitar que links abram novas janelas sem que o usuário saiba.
Princípio 4: Robusto
O conteúdo deve ser suficientemente robusto para ser interpretado de
forma fiável por uma ampla variedade de agentes de utilizador,
incluindo as tecnologias de apoio.
• Compatível: Maximizar a compatibilidade com atuais e futuros agentes de
usuário, incluindo tecnologias assistivas.
o Evitar elementos em desuso das tecnologias do W3C
Recomendações
As recomendações da W3C foram divididas em 3 prioridades:
• Prioridade 1 - O que os desenvolvedores web DEVEM satisfazer;
• Prioridade 2 - O que os desenvolvedores web DEVERIAM satisfazer;
• Prioridade 3 - O que os desenvolvedores web PODEM satisfazer;
Recomendação 1
• Fornecer alternativas ao conteúdo sonoro e visual
o Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer um
equivalente textual como parte do conteúdo dos elementos OBJECT e APPLET.
• Exemplos:
<img src=“imagem.jpg" alt="Foto do Arco do Triunfo">
<applet alt=“Descrição do aplicativo"></applet>
<input type="image" src=“enviar.png" value="Enviar" alt="Enviar dados">
Recomendação 1
<img src="logos.gif" alt="Logotipos" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="79,105,58" href="logo-01.htm" alt="Página do Logo 01">
<area shape="circle" coords="211,221,58" href="logo-02.htm" alt="Página do Logo 02">
</map>
Recomendação 2
• Não recorrer apenas à cor
o Clique no botão vermelho para continuar:
o Clique no número 3 para continuar:
• Indicar claramente qual o idioma utilizado
o Identificar claramente quaisquer mudanças de idioma no texto de um
documento, bem como nos equivalentes textuais (por ex., legendas).
HTML:
<html lang="pt-br">
XHTML:
<html xml:lang="pt-br“>
HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir
páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do
"casamento" dos padrões <span lang=“en”> HyTime</span> e SGML.
Recomendação 3
Recomendação 4
• Criar tabelas passíveis de transformação harmoniosa
o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou
de coluna, utilizar marcações para associar as células de dados às células de
cabeçalho.
Recomendação 5
• Assegurar que as páginas dotadas de novas tecnologias sejam transformadas
harmoniosamente
o Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de
estilo.
Recomendação 6
• Assegurar a clareza e a simplicidade dos documentos
○ Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do
site.
Um site com linguagem clara facilita a possibilidade de aprofundamento
do usuário em seu conteúdo.
o Complementar o texto com apresentações gráficas ou sonoras;
Validação
• A validação da acessibilidade deve ser feita por meio de ferramentas
automáticas e da revisão direta. Os métodos automáticos são
geralmente rápidos, mas não são capazes de identificar todas as
variantes da acessibilidade.
• A avaliação humana pode ajudar a garantir a clareza da linguagem e a
facilidade da navegação.
Validação
1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma
ferramenta de validação de navegadores.
2 - Validar a sintaxe (por ex., HTML, XML).
o http://validator.w3.org/
3 - Validar as folhas de estilo (por ex., CSS).
○http://jigsaw.w3.org/css-validator/
4 - Utilizar um navegador exclusivamente textual ou um emulador.
Validação
5 - Utilizar vários navegadores gráficos, com:
o som e gráficos ativos;
o sem gráficos;
o sem som;
o sem mouse;
o sem carregar frames, programas interpretáveis, folhas de estilo ou applets.
6 - Utilizar vários navegadores, antigos e recentes.
7 - Utilizar um navegador de emissão automática de fala, um leitor de tela,
software de ampliação, uma tela de pequenas dimensões.
Validação
8 - Utilizar corretores ortográficos e gramaticais. A eliminação de problemas
gramaticais aumenta o grau de compreensão.
9 - Rever o documento, verificando sua clareza e simplicidade.
10 - Peça a pessoas com deficiências que revejam os documentos.
Web acessível na prática
Bibliografia
• BARBOSA, S. J.; SILVA B. S. Interação Humano-Computador. Rio de Janeiro:
Elsevier, 2010.
• http://www.maujor.com/tutorial/acessibilidade/tentest.php
• http://www.w3c.br/palestras/2009/conip2009/slidy/template.html
• http://www.w3.org/WAI/
• http://www.w3.org/Translations/WCAG20-pt-PT/#guidelines

Mais conteúdo relacionado

Mais procurados

E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
Leo Serrao
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
aiadufmg
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
aiadufmg
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Ubirajara Pelli
 
Inclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na webInclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na web
Bruno Borges
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
aiadufmg
 
Web Standards
Web StandardsWeb Standards
Web Standards
George Mendonça
 
Webwriting
Webwriting Webwriting
Webwriting
DricaSantiago
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
Lucas J Silva
 
AvaliaçãO Para Webdesigner
AvaliaçãO Para WebdesignerAvaliaçãO Para Webdesigner
AvaliaçãO Para Webdesigner
mtmarinho27
 
O que é um blog
O que é um blogO que é um blog
O que é um blog
zoraionaria
 
Perspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para WebPerspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para Web
Leandro Costa
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Juliana Fernandes
 
Acessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias AssistivasAcessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias Assistivas
Lisandro Rogério Modesto
 
O que exatamente é a internet slides
O que exatamente é a internet slidesO que exatamente é a internet slides
O que exatamente é a internet slides
soniabiaggi
 
cartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-Icartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-I
Luca Toledo
 
1 manualformacao internet_segura
1 manualformacao internet_segura1 manualformacao internet_segura
1 manualformacao internet_segura
Projeto Criança em Rede
 
Ferramentas da WEB 2.0
Ferramentas da WEB 2.0Ferramentas da WEB 2.0
Ferramentas da WEB 2.0
Robson Valente
 
W3C Acessibilidade
W3C AcessibilidadeW3C Acessibilidade
W3C Acessibilidade
Ana Laura Gomes
 

Mais procurados (19)

E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Inclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na webInclusão Digital através da acessibilidade na web
Inclusão Digital através da acessibilidade na web
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Webwriting
Webwriting Webwriting
Webwriting
 
Acessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC DevAcessibilidade em CSS - ABC Dev
Acessibilidade em CSS - ABC Dev
 
AvaliaçãO Para Webdesigner
AvaliaçãO Para WebdesignerAvaliaçãO Para Webdesigner
AvaliaçãO Para Webdesigner
 
O que é um blog
O que é um blogO que é um blog
O que é um blog
 
Perspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para WebPerspectivas De Desenvolvimento Para Web
Perspectivas De Desenvolvimento Para Web
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
 
Acessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias AssistivasAcessibilidade e Tecnologias Assistivas
Acessibilidade e Tecnologias Assistivas
 
O que exatamente é a internet slides
O que exatamente é a internet slidesO que exatamente é a internet slides
O que exatamente é a internet slides
 
cartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-Icartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-I
 
1 manualformacao internet_segura
1 manualformacao internet_segura1 manualformacao internet_segura
1 manualformacao internet_segura
 
Ferramentas da WEB 2.0
Ferramentas da WEB 2.0Ferramentas da WEB 2.0
Ferramentas da WEB 2.0
 
W3C Acessibilidade
W3C AcessibilidadeW3C Acessibilidade
W3C Acessibilidade
 

Destaque

Jen CV nestačí. Profesionálem na síti LinkedIn
Jen CV nestačí. Profesionálem na síti LinkedInJen CV nestačí. Profesionálem na síti LinkedIn
Jen CV nestačí. Profesionálem na síti LinkedIn
Jakub Fiala
 
Presentación angelica britez
Presentación angelica britezPresentación angelica britez
Presentación angelica britez
Angelicauaa
 
ROBÓTICA EN LOS NIÑOS Y JÓVENES
ROBÓTICA EN LOS NIÑOS Y JÓVENES ROBÓTICA EN LOS NIÑOS Y JÓVENES
Presentación Matias Cristaldo
Presentación Matias CristaldoPresentación Matias Cristaldo
Presentación Matias Cristaldo
UAA
 
Disengagement at workplace
Disengagement at workplaceDisengagement at workplace
Disengagement at workplace
Hallwaze Inc.
 
Curso de J2ME - Parte 04 - Otimização
Curso de J2ME - Parte 04 - OtimizaçãoCurso de J2ME - Parte 04 - Otimização
Curso de J2ME - Parte 04 - Otimização
Leonardo Melo Santos
 
Global interferon market &amp; pipeline analysis 2015
Global interferon market &amp; pipeline analysis 2015Global interferon market &amp; pipeline analysis 2015
Global interferon market &amp; pipeline analysis 2015
KuicK Research
 
Naturaleza de mi nación
Naturaleza de mi naciónNaturaleza de mi nación
Naturaleza de mi nación
Alexfleitas
 
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
KuicK Research
 
How to Manage your Instagram on a PC Using Gramblr
How to Manage your Instagram on a PC Using GramblrHow to Manage your Instagram on a PC Using Gramblr
How to Manage your Instagram on a PC Using Gramblr
Jorina Banes
 
Multimediální projekty 2016
Multimediální projekty 2016Multimediální projekty 2016
Multimediální projekty 2016
Studia nových médii, FF UK, Praha
 
Aprendendo a programar - Programação Procedural vs OOP
Aprendendo a programar - Programação Procedural vs OOPAprendendo a programar - Programação Procedural vs OOP
Aprendendo a programar - Programação Procedural vs OOP
Leonardo Bastos
 
Robótica educativa
Robótica educativaRobótica educativa
Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#
Leonardo Melo Santos
 
Redes comunicação
Redes comunicaçãoRedes comunicação
Redes comunicação
Cristina Castro
 
Report sul recruiting trend italia 2016 di linkedin
Report sul recruiting trend italia 2016 di linkedinReport sul recruiting trend italia 2016 di linkedin
Report sul recruiting trend italia 2016 di linkedin
Patrizio Gallovich
 
Tiempos y Holguras en redes PERT
Tiempos y Holguras en redes PERTTiempos y Holguras en redes PERT
Tiempos y Holguras en redes PERT
Aula Tecnica online
 
Supporting Software Evolution Using Adaptive Change Propagation
Supporting Software Evolution Using Adaptive Change PropagationSupporting Software Evolution Using Adaptive Change Propagation
Supporting Software Evolution Using Adaptive Change Propagation
SAIL_QU
 

Destaque (18)

Jen CV nestačí. Profesionálem na síti LinkedIn
Jen CV nestačí. Profesionálem na síti LinkedInJen CV nestačí. Profesionálem na síti LinkedIn
Jen CV nestačí. Profesionálem na síti LinkedIn
 
Presentación angelica britez
Presentación angelica britezPresentación angelica britez
Presentación angelica britez
 
ROBÓTICA EN LOS NIÑOS Y JÓVENES
ROBÓTICA EN LOS NIÑOS Y JÓVENES ROBÓTICA EN LOS NIÑOS Y JÓVENES
ROBÓTICA EN LOS NIÑOS Y JÓVENES
 
Presentación Matias Cristaldo
Presentación Matias CristaldoPresentación Matias Cristaldo
Presentación Matias Cristaldo
 
Disengagement at workplace
Disengagement at workplaceDisengagement at workplace
Disengagement at workplace
 
Curso de J2ME - Parte 04 - Otimização
Curso de J2ME - Parte 04 - OtimizaçãoCurso de J2ME - Parte 04 - Otimização
Curso de J2ME - Parte 04 - Otimização
 
Global interferon market &amp; pipeline analysis 2015
Global interferon market &amp; pipeline analysis 2015Global interferon market &amp; pipeline analysis 2015
Global interferon market &amp; pipeline analysis 2015
 
Naturaleza de mi nación
Naturaleza de mi naciónNaturaleza de mi nación
Naturaleza de mi nación
 
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
Global cancer tyrosine kinase inhibitors market &amp; clinical pipeline outlo...
 
How to Manage your Instagram on a PC Using Gramblr
How to Manage your Instagram on a PC Using GramblrHow to Manage your Instagram on a PC Using Gramblr
How to Manage your Instagram on a PC Using Gramblr
 
Multimediální projekty 2016
Multimediální projekty 2016Multimediální projekty 2016
Multimediální projekty 2016
 
Aprendendo a programar - Programação Procedural vs OOP
Aprendendo a programar - Programação Procedural vs OOPAprendendo a programar - Programação Procedural vs OOP
Aprendendo a programar - Programação Procedural vs OOP
 
Robótica educativa
Robótica educativaRobótica educativa
Robótica educativa
 
Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#Curso de OO com C# - Parte 02 - Introdução ao C#
Curso de OO com C# - Parte 02 - Introdução ao C#
 
Redes comunicação
Redes comunicaçãoRedes comunicação
Redes comunicação
 
Report sul recruiting trend italia 2016 di linkedin
Report sul recruiting trend italia 2016 di linkedinReport sul recruiting trend italia 2016 di linkedin
Report sul recruiting trend italia 2016 di linkedin
 
Tiempos y Holguras en redes PERT
Tiempos y Holguras en redes PERTTiempos y Holguras en redes PERT
Tiempos y Holguras en redes PERT
 
Supporting Software Evolution Using Adaptive Change Propagation
Supporting Software Evolution Using Adaptive Change PropagationSupporting Software Evolution Using Adaptive Change Propagation
Supporting Software Evolution Using Adaptive Change Propagation
 

Semelhante a Web acessível

Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisa
Ruan Aragão
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
Никита Алленов
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
Rogério Chiavegatti
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
aiadufmg
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
aiadufmg
 
Sites Acessíveis
Sites AcessíveisSites Acessíveis
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
aiadufmg
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
Leandro Borges
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
ailton bsj
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
José Marques
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
Maurício Pereiro
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
Andréa Zambrana
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
COTIC-PROEG (UFPA)
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
Sandra Margarida
 
W3 C E Usabilidade
W3 C E UsabilidadeW3 C E Usabilidade
W3 C E Usabilidade
jeffersonmorelli
 
Acessibilidade na Web - Salomão Alcolumbre
Acessibilidade na Web - Salomão AlcolumbreAcessibilidade na Web - Salomão Alcolumbre
Acessibilidade na Web - Salomão Alcolumbre
SalomãoeIasmyne Alcolumbre
 
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
Ruan Aragão
 
Web Share
Web ShareWeb Share
Web Share
agenciatrilha
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
Marcio Mota
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
Claudio Diniz - Designer Gráfico
 

Semelhante a Web acessível (20)

Acessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisaAcessibilidade - o mundo virtual também precisa
Acessibilidade - o mundo virtual também precisa
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
A Web para todos - Acessibilidade na web
A Web para todos  - Acessibilidade na webA Web para todos  - Acessibilidade na web
A Web para todos - Acessibilidade na web
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
Sites Acessíveis
Sites AcessíveisSites Acessíveis
Sites Acessíveis
 
Sites acessíveis
Sites acessíveisSites acessíveis
Sites acessíveis
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]A usabilidade e_acessibilidade_nos_web_sites[1]
A usabilidade e_acessibilidade_nos_web_sites[1]
 
Existe teste de acessibilidade digital tdc sp - 2019
Existe teste de acessibilidade digital   tdc sp - 2019Existe teste de acessibilidade digital   tdc sp - 2019
Existe teste de acessibilidade digital tdc sp - 2019
 
Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?Acessibilidade web, perda de tempo?
Acessibilidade web, perda de tempo?
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
 
W3 C E Usabilidade
W3 C E UsabilidadeW3 C E Usabilidade
W3 C E Usabilidade
 
Acessibilidade na Web - Salomão Alcolumbre
Acessibilidade na Web - Salomão AlcolumbreAcessibilidade na Web - Salomão Alcolumbre
Acessibilidade na Web - Salomão Alcolumbre
 
Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016Acessibilidade - o mundo virtual também precisa | SDF 2016
Acessibilidade - o mundo virtual também precisa | SDF 2016
 
Web Share
Web ShareWeb Share
Web Share
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 

Web acessível

  • 2. Sumário • Introdução o O que é acessibilidade? o A quem se destina? • Acessibilidade na Web • WCAG o Princípios o Recomendações › Níveis de prioridade • Validação • Bibliografia
  • 3. O que é acessibilidade? • Segundo a legislação brasileira: Acessibilidade é condição para utilização, com segurança e autonomia, total ou assistida, dos espaços, mobiliários e equipamentos urbanos, das edificações, dos serviços de transporte e dos dispositivos, sistemas e meios de comunicação e informação, por pessoa com deficiência ou com mobilidade reduzida. DECRETO Nº 5.296 DE 2 DE DEZEMBRO DE 2004. https://www.planalto.gov.br/ccivil_03/_Ato2004- 2006/2004/Decreto/D5296.htm
  • 4. O que é acessibilidade? • Segundo a WAI(Web Accessibility Initiative): Acessibilidade na Web significa que pessoas com deficiências podem perceber, entender, navegar e interagir além de poder contribuir para a web.
  • 5. O que é acessibilidade? Acessibilidade na web diz respeito à facilidade de acesso, por qualquer pessoa, independente de condições físicas, técnicas ou dispositivos.
  • 6. A quem se destina? Acessibilidade é para todos
  • 7. A quem se destina? • Deficientes visuais o Cegos: Pessoas que navegam com leitores de tela o Daltônicos: Dificuldade em enxergar cores e contrastes o Baixa visão: Necessidade de aumento de tela para ler • Deficientes auditivos o Pessoas que não conseguem acompanhar um vídeo na internet com áudio. • Deficientes motores o Pessoas que utilizam o computador com apenas um dedo (ou nem isso) ou que tenham dificuldades com o uso do mouse.
  • 8. A quem se destina? • Displays reduzidos o Acessando a internet por um telefone celular. • Deficiência temporária o Pessoas obrigadas a usar o computador com sua outra mão devido a fraturas, tendinite, etc. • Início de aprendizado o Pessoas que estão iniciando seu processo de informatização ou crianças descobrindo o computador. • Idade avançada o Pessoas mais velhas, com dificuldades para ler letras pequenas e usar do mouse.
  • 9. A quem se destina? Fazer um site acessível não é só se preocupar com um determinado grupo de pessoas: É se preocupar com todas as pessoas que acessam seu site.
  • 10. Acessibilidade na Web Os desenvolvedores de páginas Web devem levar em consideração diferentes situações ao criar uma página. A Web pode ser utilizada por pessoas que: • sejam incapazes de ver, ouvir, se deslocar, ou interpretar determinados tipos de informações; • tenham dificuldade em ler ou compreender textos; • não tenham um teclado ou mouse, ou não sejam capazes de utilizá-los; • possuam tela que apresenta apenas texto, ou com dimensões reduzidas, ou ainda uma conexão lenta com a Internet;
  • 11. Acessibilidade na Web Os desenvolvedores de páginas Web devem levar em consideração diferentes situações ao criar uma página. A Web pode ser utilizada por pessoas que: • não falem ou compreendam fluentemente o idioma em que o documento foi escrito; • estejam com seus olhos, mãos ou ouvidos ocupados (por exemplo em um ambiente barulhento ou fora de casa ou do trabalho); • possuam uma versão ultrapassada de navegador web, diferente dos habituais, um navegador por voz, ou um sistema operacional pouco convencional.
  • 12. WCAG 1.0 Web Content Accessibility Guidelines • É uma recomendação W3C de 5 de maio de 1999 • As recomendações explicam como tornar o conteúdo Web acessível a pessoas com deficiências. No entanto, faz também com que o conteúdo da Web se torne de mais fácil acesso a todos os usuários: • independentemente da ferramenta usada (computadores de mesa, laptops, telefones celulares, ou navegador por voz) e das • limitações associadas ao respectivo uso (ambientes barulhentos, salas mal iluminadas ou com excesso de iluminação, utilização sem o uso das mãos).
  • 13. WCAG 2.0 • É uma recomendação W3C de 11 Dezembro de 2008 • Os critérios de sucesso do WCAG 2.0 são escritos como declarações testáveis, que não são especificamente tecnológicas. • As WCAG 2.0 foram desenvolvidas através do processo W3C em colaboração com pessoas e organizações em todo o mundo, com o objetivo de elaborar um padrão compartilhado referente à acessibilidade para o conteúdo da Web, que satisfaça as necessidades das pessoas, das organizações e dos governos, a nível internacional.
  • 14. Níveis de Abordagem das WCAG 2.0 • Princípios - os principais princípios que constituem a fundação da acessibilidade da Web: perceptível, operável, compreensível e robusto. • Recomendações - apresentam os objetivos básicos que os desenvolvedores devem atingir para tornar o conteúdo mais acessível aos usuários com diferentes incapacidades. • Critérios de Sucesso - para satisfazer as necessidades dos diferentes grupos e situações, são definidos três níveis de conformidade: o A (o mais baixo), AA e AAA (o mais elevado).
  • 15. Princípio 1: Perceptível A informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber • Alternativas em Texto: Fornecer alternativas em texto. o Atributo “alt”? • Mídias com base no tempo: Fornecer alternativas para mídias com base no tempo. o Legendas e descrição do conteúdo sonoro • Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por ex., um layout mais simples) sem perder informação ou estrutura. o CSS para impressão (print) e telas menores (handheld)
  • 16. Princípio 2: Operável Os componentes de interface de usuário e a navegação têm de ser operáveis • Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado. o Estruturação do conteúdo • Ataques Epilépticos: Não criar conteúdo de uma forma conhecida que possa causar ataques epilépticos. o Evitar piscar de telas • Navegável: Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão. o Finalidade do link (contexto)
  • 17. Princípio 3: Compreensível A informação e a utilização da interface de utilizador têm de ser compreensíveis. • Legível: Tornar o conteúdo de texto legível e compreensível. o Identificação do idioma, abreviaturas, etc. • Previsível: Fazer com que as páginas Web surjam e funcionem de forma previsível. o Evitar que links abram novas janelas sem que o usuário saiba.
  • 18. Princípio 4: Robusto O conteúdo deve ser suficientemente robusto para ser interpretado de forma fiável por uma ampla variedade de agentes de utilizador, incluindo as tecnologias de apoio. • Compatível: Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas. o Evitar elementos em desuso das tecnologias do W3C
  • 19. Recomendações As recomendações da W3C foram divididas em 3 prioridades: • Prioridade 1 - O que os desenvolvedores web DEVEM satisfazer; • Prioridade 2 - O que os desenvolvedores web DEVERIAM satisfazer; • Prioridade 3 - O que os desenvolvedores web PODEM satisfazer;
  • 20. Recomendação 1 • Fornecer alternativas ao conteúdo sonoro e visual o Utilizar "alt" para os elementos IMG, INPUT e APPLET ou fornecer um equivalente textual como parte do conteúdo dos elementos OBJECT e APPLET. • Exemplos: <img src=“imagem.jpg" alt="Foto do Arco do Triunfo"> <applet alt=“Descrição do aplicativo"></applet> <input type="image" src=“enviar.png" value="Enviar" alt="Enviar dados">
  • 21. Recomendação 1 <img src="logos.gif" alt="Logotipos" border="0" usemap="#Map"> <map name="Map"> <area shape="circle" coords="79,105,58" href="logo-01.htm" alt="Página do Logo 01"> <area shape="circle" coords="211,221,58" href="logo-02.htm" alt="Página do Logo 02"> </map>
  • 22. Recomendação 2 • Não recorrer apenas à cor o Clique no botão vermelho para continuar: o Clique no número 3 para continuar:
  • 23. • Indicar claramente qual o idioma utilizado o Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem como nos equivalentes textuais (por ex., legendas). HTML: <html lang="pt-br"> XHTML: <html xml:lang="pt-br“> HTML (acrônimo para a expressão inglesa <span lang=“en”>HyperText Markup Language</span>, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do "casamento" dos padrões <span lang=“en”> HyTime</span> e SGML. Recomendação 3
  • 24. Recomendação 4 • Criar tabelas passíveis de transformação harmoniosa o Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho.
  • 25. Recomendação 5 • Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente o Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de estilo.
  • 26. Recomendação 6 • Assegurar a clareza e a simplicidade dos documentos ○ Utilizar linguagem mais clara e simples possível, adequada ao conteúdo do site. Um site com linguagem clara facilita a possibilidade de aprofundamento do usuário em seu conteúdo. o Complementar o texto com apresentações gráficas ou sonoras;
  • 27. Validação • A validação da acessibilidade deve ser feita por meio de ferramentas automáticas e da revisão direta. Os métodos automáticos são geralmente rápidos, mas não são capazes de identificar todas as variantes da acessibilidade. • A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação.
  • 28. Validação 1 - Utilizar uma ferramenta de acessibilidade automatizada, e uma ferramenta de validação de navegadores. 2 - Validar a sintaxe (por ex., HTML, XML). o http://validator.w3.org/ 3 - Validar as folhas de estilo (por ex., CSS). ○http://jigsaw.w3.org/css-validator/ 4 - Utilizar um navegador exclusivamente textual ou um emulador.
  • 29. Validação 5 - Utilizar vários navegadores gráficos, com: o som e gráficos ativos; o sem gráficos; o sem som; o sem mouse; o sem carregar frames, programas interpretáveis, folhas de estilo ou applets. 6 - Utilizar vários navegadores, antigos e recentes. 7 - Utilizar um navegador de emissão automática de fala, um leitor de tela, software de ampliação, uma tela de pequenas dimensões.
  • 30. Validação 8 - Utilizar corretores ortográficos e gramaticais. A eliminação de problemas gramaticais aumenta o grau de compreensão. 9 - Rever o documento, verificando sua clareza e simplicidade. 10 - Peça a pessoas com deficiências que revejam os documentos.
  • 31. Web acessível na prática
  • 32. Bibliografia • BARBOSA, S. J.; SILVA B. S. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2010. • http://www.maujor.com/tutorial/acessibilidade/tentest.php • http://www.w3c.br/palestras/2009/conip2009/slidy/template.html • http://www.w3.org/WAI/ • http://www.w3.org/Translations/WCAG20-pt-PT/#guidelines