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 [...]”
acessibilida.de/toolkit/wcag/
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:
Todo conteúdo “não textual” deve trazer uma alternativa em
texto para identificar o conteúdo.
Diretriz 1.4 Discernível:
Cores não devem ser utilizadas como única
maneira de transmitir conteúdo ou distinguir
elementos visuais.
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 e teste
WAVE Web Accessibility Tool
wave.webaim.org
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/
Fontes
http://acessibilida.de
https://codepen.io/collection/AVpOLr
@lucas_dejsilva
@lucasjs
Obrigado!

Mais conteúdo relacionado

Mais procurados

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDAFazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Reinaldo Ferraz
 
0 introducao padroes_web
0 introducao padroes_web0 introducao padroes_web
0 introducao padroes_web
Guilherme
 
CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
Sync Master
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
Know Solutions
 
Integração contínua
Integração contínuaIntegração contínua
Integração contínua
Gustavo Isensee
 
Ai1516 ad-tp1-g3-a
Ai1516 ad-tp1-g3-aAi1516 ad-tp1-g3-a
Ai1516 ad-tp1-g3-a
Maria_Tinoco
 
Publicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto IPublicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto I
Hudson Augusto
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
Rudá Almeida
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Nome Sobrenome
 
Wiki
WikiWiki
Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?
Mauricio Maujor
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
Marconi Pacheco
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias Sociais
Edney Souza
 
Palestra Web 2.0 - CCUEC
Palestra Web 2.0 - CCUECPalestra Web 2.0 - CCUEC
Palestra Web 2.0 - CCUEC
Fabio Santos
 
Web Standards
Web StandardsWeb Standards
Web Standards
George Mendonça
 
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
 

Mais procurados (16)

Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDAFazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
 
0 introducao padroes_web
0 introducao padroes_web0 introducao padroes_web
0 introducao padroes_web
 
CMS - Joomla
CMS - JoomlaCMS - Joomla
CMS - Joomla
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Integração contínua
Integração contínuaIntegração contínua
Integração contínua
 
Ai1516 ad-tp1-g3-a
Ai1516 ad-tp1-g3-aAi1516 ad-tp1-g3-a
Ai1516 ad-tp1-g3-a
 
Publicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto IPublicação de Dados em Formato Aberto I
Publicação de Dados em Formato Aberto I
 
Como manter o WordPress seguro
Como manter o WordPress seguroComo manter o WordPress seguro
Como manter o WordPress seguro
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Wiki
WikiWiki
Wiki
 
Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?Quem se importa com acessibilidade na web?
Quem se importa com acessibilidade na web?
 
Usabilidade para Websites
Usabilidade para WebsitesUsabilidade para Websites
Usabilidade para Websites
 
CMS e Midias Sociais
CMS e Midias SociaisCMS e Midias Sociais
CMS e Midias Sociais
 
Palestra Web 2.0 - CCUEC
Palestra Web 2.0 - CCUECPalestra Web 2.0 - CCUEC
Palestra Web 2.0 - CCUEC
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
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
 

Semelhante a Acessibilidade em CSS - ABC Dev

DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
Hudson Augusto
 
Web acessível
Web acessívelWeb acessível
Web acessível
Mailson Queiroz
 
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
 
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
 
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
 
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
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
Lucas Augusto Carvalho
 
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
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
aiadufmg
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
Humberto Lidio Antonelli
 
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
 
Oficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz RezendeOficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz Rezende
GovBR
 
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
Никита Алленов
 
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
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
Cristiano Pires Martins
 

Semelhante a Acessibilidade em CSS - ABC Dev (20)

DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011DaSilva_Tutorial_Inovaday_Setembro_2011
DaSilva_Tutorial_Inovaday_Setembro_2011
 
Web acessível
Web acessívelWeb acessível
Web acessível
 
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
 
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
 
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
 
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
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na 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
 
Delicious - parte 2
Delicious - parte 2Delicious - parte 2
Delicious - parte 2
 
Aula - Acessibilidade na Web
Aula - Acessibilidade na WebAula - Acessibilidade na Web
Aula - Acessibilidade na Web
 
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
 
Oficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz RezendeOficina Ases2.0 beta6.0 - André Luiz Rezende
Oficina Ases2.0 beta6.0 - André Luiz Rezende
 
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
 
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...
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 

Acessibilidade em CSS - ABC Dev