SlideShare uma empresa Scribd logo
Achou que não tinha
Acessibilidade em
CSS?
Lucas Silva
@lucas_dejsilva
Quem sou eu?
@lucas_dejsilva
@lucasjs
O que é
Acessibilidade
(a11y)?
“Acessibilidade é fazer site pra cego”
Acessibilidade
“Condição para utilização, com segurança e autonomia, total
ou assistida [...] dos dispositivos, sistemas e meios de
comunicação e informação, por pessoa portadora de
deficiência ou com mobilidade reduzida.”
Dados
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)
“[...] 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 [...]”
4 princípios da Acessibilidade Web
1° Princípio: Perceptível
2° Princípio: Operável
3° Princípio: Compreensível
4° Princípio: Robusto
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.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.
Diretriz 2.1 Acessível por Teclado:
Fazer com que toda funcionalidade fique
disponível a partir de um teclado.
Diretriz 3.2 Previsível:
Fazer com que as páginas web apareçam e
funcionem de modo previsível.
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 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
Ferramentas para
teste
Google Chrome 65+
developers.google.com/web/updates/2018/01/devtools
Elements > Styles
Elements > Accessibility
Audits
NVDA
nvaccess.org/download
NoCoffe Vision Simulator
Extensão para o Google Chrome
Color Safe
colorsafe.co
Contrast Ratio
leaverou.github.io/contrast-ratio
Photoshop
leaverou.Photoshop CC 2015
Photoshop CC 2015
Photoshop CC 2015
iOS & Android
apple.com/accessibility support.google.com/accessibility/
android/?hl=pt-BR
Empathic Modelling
Empathic Modelling
“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.”
Todas os dados precisam estar
disponíveis sem CSS
Não sei CSS avançado, e está tudo bem!
Fontes
https://www.w3.org/Translations/WCAG20-pt-PT/
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch
http://www.pessoacomdeficiencia.gov.br/app/sites/default/files/publicacoes/cartilhac
enso-2010-pessoas-com-deficienciareduzido.pdf
https://www.slideshare.net/govbr/acessibilidade-na-web-padres-na-web-e-wcag-20-
reinaldo-ferraz
http://wearecolorblind.com/
Fontes
https://www.slideshare.net/cinteractionlab/empathic-modelling-a-handson-workshop
http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/UFTempathic.pdf
https://www.slideshare.net/uxpasaopaulo/global-accessibility-awareness-day-2016
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467
b9
https://lucasjs.github.io/talks/
@lucas_dejsilva
@lucasjs
Obrigado!

Mais conteúdo relacionado

Mais procurados

CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
Sync Master
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
Rudá Almeida
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
Hudson Augusto
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
Marconi Pacheco
 
Apresentação Cg Web 2.0
Apresentação Cg Web 2.0Apresentação Cg Web 2.0
Apresentação Cg Web 2.0
lucasbas
 
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
 
Wiki
WikiWiki
Blogger susana raquel
Blogger   susana raquelBlogger   susana raquel
Blogger susana raquel
susana Araujo
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
Know Solutions
 
Panorama da internet
Panorama da internetPanorama da internet
Panorama da internet
Professores Cedaspy
 
Tutorial de acessibilidade na Web - 2009
Tutorial de acessibilidade na Web - 2009Tutorial de acessibilidade na Web - 2009
Tutorial de acessibilidade na Web - 2009
Reinaldo Ferraz
 
O que e web 2.0
O que e web 2.0O que e web 2.0
T A P Web20
T A P Web20T A P Web20
T A P Web20
miguel ribeiro
 
Trabalhos Web2
Trabalhos Web2Trabalhos Web2
Trabalhos Web2
guest1f99cb
 
TCC - WordPress
TCC - WordPressTCC - WordPress
T@rget trust desenvolvendo aplicações com flex
T@rget trust   desenvolvendo aplicações com flexT@rget trust   desenvolvendo aplicações com flex
T@rget trust desenvolvendo aplicações com flex
Targettrust
 
Web 2 0 Nas Organizacoes
Web 2 0 Nas OrganizacoesWeb 2 0 Nas Organizacoes
Web 2 0 Nas Organizacoes
google_docs
 
Blogging Estático com Hugo e FreeBSD
Blogging Estático com Hugo e FreeBSDBlogging Estático com Hugo e FreeBSD
Blogging Estático com Hugo e FreeBSD
Régis Tomkiel
 
Wikis
WikisWikis
Wikis
Sofia Jose
 

Mais procurados (19)

CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
 
DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
 
Apresentação Cg Web 2.0
Apresentação Cg Web 2.0Apresentação Cg Web 2.0
Apresentação Cg Web 2.0
 
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
 
Wiki
WikiWiki
Wiki
 
Blogger susana raquel
Blogger   susana raquelBlogger   susana raquel
Blogger susana raquel
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Panorama da internet
Panorama da internetPanorama da internet
Panorama da internet
 
Tutorial de acessibilidade na Web - 2009
Tutorial de acessibilidade na Web - 2009Tutorial de acessibilidade na Web - 2009
Tutorial de acessibilidade na Web - 2009
 
O que e web 2.0
O que e web 2.0O que e web 2.0
O que e web 2.0
 
T A P Web20
T A P Web20T A P Web20
T A P Web20
 
Trabalhos Web2
Trabalhos Web2Trabalhos Web2
Trabalhos Web2
 
TCC - WordPress
TCC - WordPressTCC - WordPress
TCC - WordPress
 
T@rget trust desenvolvendo aplicações com flex
T@rget trust   desenvolvendo aplicações com flexT@rget trust   desenvolvendo aplicações com flex
T@rget trust desenvolvendo aplicações com flex
 
Web 2 0 Nas Organizacoes
Web 2 0 Nas OrganizacoesWeb 2 0 Nas Organizacoes
Web 2 0 Nas Organizacoes
 
Blogging Estático com Hugo e FreeBSD
Blogging Estático com Hugo e FreeBSDBlogging Estático com Hugo e FreeBSD
Blogging Estático com Hugo e FreeBSD
 
Wikis
WikisWikis
Wikis
 

Semelhante a Acessibilidade em CSS - Front in Sampa

Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SPAcessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
Lucas J Silva
 
Web acessível
Web acessívelWeb acessível
Web acessível
Mailson Queiroz
 
Acessibilidade no design e desenvolvimento web - R design 2017
Acessibilidade no design e desenvolvimento web - R design 2017Acessibilidade no design e desenvolvimento web - R design 2017
Acessibilidade no design e desenvolvimento web - R design 2017
Lucas J Silva
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
Ubirajara Pelli
 
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
 
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
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
Leo Serrao
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
Logan Web
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
aiadufmg
 
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
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
Sofia Costa
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
Никита Алленов
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
Humberto Lidio Antonelli
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
Lucas Augusto Carvalho
 
Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0
Paula Ferreira
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDC
Lucas J Silva
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
aiadufmg
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
aiadufmg
 

Semelhante a Acessibilidade em CSS - Front in Sampa (20)

Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SPAcessibilidade no design e desenvolvimento web - Meetup Front-End SP
Acessibilidade no design e desenvolvimento web - Meetup Front-End SP
 
Web acessível
Web acessívelWeb acessível
Web acessível
 
Acessibilidade no design e desenvolvimento web - R design 2017
Acessibilidade no design e desenvolvimento web - R design 2017Acessibilidade no design e desenvolvimento web - R design 2017
Acessibilidade no design e desenvolvimento web - R design 2017
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
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
 
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
 
E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2E mag desenvolvedor_mod_2
E mag desenvolvedor_mod_2
 
Acessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes VisuaisAcessibilidade em Sistemas Web para Deficientes Visuais
Acessibilidade em Sistemas Web para Deficientes Visuais
 
Delicious parte 2
Delicious   parte 2Delicious   parte 2
Delicious parte 2
 
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
 
Acessibilidade em Aplicações Web
Acessibilidade em Aplicações WebAcessibilidade em Aplicações Web
Acessibilidade em Aplicações Web
 
Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01Sofiatdc2011 111030182133-phpapp01
Sofiatdc2011 111030182133-phpapp01
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
 
Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0Analise de websites_face_as_wcag2.0
Analise de websites_face_as_wcag2.0
 
Acessibilidade em CSS - TDC
Acessibilidade em CSS - TDCAcessibilidade em CSS - TDC
Acessibilidade em CSS - TDC
 
Livemocha - parte 2
Livemocha - parte 2Livemocha - parte 2
Livemocha - parte 2
 
Livemocha parte 2
Livemocha   parte 2Livemocha   parte 2
Livemocha parte 2
 

Acessibilidade em CSS - Front in Sampa