SlideShare uma empresa Scribd logo
1 de 44
Baixar para ler offline
Acessibilidade no Design
e Desenvolvimento Web
Desmitificando os termos e como aplicá-los.
Lucas Silva
Quem sou eu?
lucasjsilva.com
O que é
Acessibilidade?
Acessibilidade
“sf (lat accessibilitate) 1 Facilidade de
acesso, de obtenção.”
“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 portadora de deficiência ou com
mobilidade reduzida.”
O que é Design
Universal?
Design Universal
“...o propósito do Design Universal é
gerar ambientes, produtos, serviços,
programas e tecnologias acessíveis
de forma a atender o maior número
de pessoas, na maior extensão
possível, sem a necessidade de
adaptação ou design especializado.”
Design Universal
Dados
Dados
Em 2010, 8,3% da população brasileira apresentava pelo menos um tipo de deficiência
severa, sendo:
Dados
Em 2010, 8,3% da população brasileira apresentava pelo menos um tipo de deficiência
severa, sendo:
Diretrizes de
Acessibilidade
para Conteúdo
Web (WCAG)
Diretrizes de Acessibilidade para Conteúdo
Web (WCAG)
“As Diretrizes de Acessibilidade para Conteúdo
Web (WCAG) 2.0 abrangem diversas
recomendações com a finalidade de tornar o
conteúdo da Web mais acessível. Seguir estas
diretrizes irá tornar o conteúdo acessível a um
maior número de pessoas com deficiência,
incluindo cegueira e baixa visão, surdez e baixa
audição, dificuldades de aprendizagem, limitações
cognitivas, limitações de movimentos, incapacidade
de fala, fotossensibilidade e combinações destas
características.”
Diretrizes de Acessibilidade para Conteúdo
Web (WCAG)
4 princípios da Acessibilidade Web
1° Princípio: 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.
2° Princípio: Operável - Os componentes de interface de usuário e a navegação têm de ser
operáveis.
3° Princípio: Compreensível - A informação e a operação da interface de usuário têm de ser
compreensíveis.
4° Princípio: Robusto - O conteúdo tem de ser robusto o suficiente para poder ser
interpretado de forma concisa por diversos agentes do usuário, incluindo recursos de
tecnologia assistiva.
Princípio 1:
Perceptível
Diretriz 1.1 Alternativas em Texto:
Fornecer alternativas textuais para qualquer conteúdo não textual, para que possa ser
transformado em outras formas de acordo com as necessidades dos usuários, tais como
impressão com tamanho de fontes maiores, braille, fala, símbolos ou linguagem mais simples.
Diretriz 1.2 Mídias com base em tempo:
Fornecer alternativas para mídias baseadas em tempo.
Diretriz 1.3 Adaptável:
Criar conteúdo que pode ser apresentado de diferentes maneiras (por exemplo um layout
simplificado) sem perder informação ou estrutura.
Diretriz 1.4 Discernível:
Facilitar a audição e a visualização de conteúdo aos usuários, incluindo a separação entre o
primeiro plano e o plano de fundo.
Princípio 2:
Operável
Diretriz 2.1 Acessível por Teclado:
Fazer com que toda funcionalidade fique disponível a partir de um teclado.
Diretriz 2.2 Tempo Suficiente:
Fornecer aos usuários tempo suficiente para ler e utilizar o conteúdo.
Diretriz 2.3 Convulsões:
Não criar conteúdo de uma forma conhecida por causar convulsões.
Diretriz 2.4 Navegável:
Fornecer maneiras de ajudar os usuários a navegar, localizar conteúdos e determinar onde se
encontram.
Princípio 3:
Compreensível
Diretriz 3.1 Legível:
Tornar o conteúdo do texto legível e compreensível.
Diretriz 3.2 Previsível:
Fazer com que as páginas web apareçam e funcionem de modo previsível.
Diretriz 3.3 Assistência de Entrada:
Ajudar os usuários a evitar e corrigir erros.
Princípio 4:
Robusto
Diretriz 4.1 Compatível:
Maximizar a compatibilidade entre os atuais e futuros agentes de usuário, incluindo
tecnologias assistivas.
Ferramentas de
validação
WAVE Web Accessibility Tool
wave.webaim.org
AccessMonitor
www.acessibilidade.gov.pt/accessmonitor
Colour Contrast Analyser
www.paciellogroup.com/resources/contrastanalyser/
Ferramentas para
teste
NVDA
www.nvaccess.org/download
NoCoffe Vision Simulator
Extensão para o Google Chrome
Voiceover & TalkBack
www.apple.com/accessibility/iphone/vision
support.google.com/accessibility/android/?
hl=en#topic=6007234
Empathic
Modelling
Empathic Modelling
“Empathic modelling é uma técnica que pode ser
utilizada para auxiliar designers e demais
stakeholders de um projeto a vivenciar as
dificuldades de uma pessoa com deficiências
físicas, auditivas, visuais e cognitivas. Ela não
substitui a pesquisa com usuários.”
Fontes
http://michaelis.uol.com.br/moderno/portugues/index.php?lingua=portuguesportugues&pal
avra=acessibilidade
http://www.dicionarioinformal.com.br/acessibilidade/
http://www.revistacliche.com.br/2013/04/o-design-universal/
http://www.pessoacomdeficiencia.gov.br/app/sites/default/files/publicacoes/cartilhacenso-
2010-pessoas-com-deficienciareduzido.pdf
http://www.seomarketing.com.br/heading-tags-h1-h2-h3-seo.php
https://www.w3.org/Translations/WCAG20-pt-br/
Fontes
http://emag.governoeletronico.gov.br/cursoconteudista/desenvolvimentoweb/recomendaco
es-de-acessibilidade-wcag2.html
http://brasilmedia.com/Daltonismo.html
http://wearecolorblind.com/
https://www.slideshare.net/govbr/acessibilidade-na-web-padres-na-web-e-wcag-20-reinaldo
-ferraz
https://www.slideshare.net/cinteractionlab/empathic-modelling-a-handson-workshop
https://www.slideshare.net/uxpasaopaulo/global-accessibility-awareness-day-2016
http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/UFTempathic.pdf
Obrigado!
!
bit.ly/acessibilidade-rdesign
lucasjsilva.com

Mais conteúdo relacionado

Semelhante a Acessibilidade Web

Apresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para InternetApresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para Internetfmota2
 
Design Universal
Design UniversalDesign Universal
Design Universalaiadufmg
 
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 precisaRuan Aragão
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011Hudson Augusto
 
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasModulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasThais Campas
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDCLucas J Silva
 
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
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações WebSofia Costa
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a InternetMarcio Duarte
 
Ai ad aula 1_parte2
Ai ad aula 1_parte2Ai ad aula 1_parte2
Ai ad aula 1_parte2aiadufmg
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidadeaiadufmg
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Gustavo Fischer
 
Razões para tornar um web site acessível
Razões para tornar um web site acessívelRazões para tornar um web site acessível
Razões para tornar um web site acessívelMDesign Estúdio
 

Semelhante a Acessibilidade Web (20)

Web acessível
Web acessívelWeb acessível
Web acessível
 
Apresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para InternetApresentação de LINGUAGEM DE Programação para Internet
Apresentação de LINGUAGEM DE Programação para Internet
 
Design Universal
Design UniversalDesign Universal
Design Universal
 
Design Universal.
Design Universal.Design Universal.
Design Universal.
 
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
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
 
Modulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampasModulo iii arquiteturainformacaousabilidade_thaiscampas
Modulo iii arquiteturainformacaousabilidade_thaiscampas
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDC
 
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...
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
Introdução a Internet
Introdução a InternetIntrodução a Internet
Introdução a Internet
 
Artigo ihc1
Artigo ihc1Artigo ihc1
Artigo ihc1
 
Ai ad aula 1_parte2
Ai ad aula 1_parte2Ai ad aula 1_parte2
Ai ad aula 1_parte2
 
10 razoes para_usar_pdf
10 razoes para_usar_pdf10 razoes para_usar_pdf
10 razoes para_usar_pdf
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2
 
Razões para tornar um web site acessível
Razões para tornar um web site acessívelRazões para tornar um web site acessível
Razões para tornar um web site acessível
 

Acessibilidade Web