SlideShare uma empresa Scribd logo
Maurício Samy Silva
“Maujor”®
maujor@maujor.com
https://maujor.com
Quem se importa com
acessibilidade na web?
Objetivo
Motivar e conscientizar
para a importância de se
projetar web com foco
em acessibilidade.
A acessibilidade é essencial
para desenvolvedores e
organizações que desejam criar
websites e aplicações web
de alta qualidade e não excluir
pessoas douso de seus produtos
e serviços.
Quem deveria se
importar com
acessibilidade na web?
Accessibility is about
equal treatment,
not
special treatment.
Acessibilidade
começa com ...
A
Acessibilidade
começa com ...
Agá Tê
Ême Ele
Acessibilidade
começa com
Agá Tê
Eme Ele
HTML5
semântica
Antes da HTML5
DIV
DIV
DIV
Com a HTML5
nav
SECTION
ASIDE
WAI-ARIA Authoring Practices 1.1
W3C Working Group Note 26 July 2018
https://www.w3.org/TR/wai-aria-practices/
Accessible Rich Internet Applications
(WAI-ARIA) 1.1
W3C Recommendation 14 December2017
https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/
,
contudo se tudo o que você tem
é um martelo ARIA, tudo
começa a parecer um prego.
ARIA é uma ferramenta
poderosa para preencher as
lacunas de acessibilidade para
usuários de leitores de tela
https://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
Acessibilidade
começa com HTML
e continua com ...
USABILIDADE
Aplicar técnicas de
acessibilidade em um site
com usabilidade ruim
https://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
é o mesmo que passar
batom em um porco.
Uma quantidade
astronômica de técnicas
de acessibilidade não será
suficiente para corrigir
algo que não seja
utilizável.
Partida para acessibilidade
HTML5 e USABILIDADE
Acessibilidade não
é uma "feature"...
https://ethanmarcotte.com/wrote/accessibility-is-not-a-feature/
e muito menos
um bônus.
É mandatório que se
planeje acessibilidade
desde o início do projeto.
Projetar acessibilidade
não significa projetar
somente para
leitor de tela
e
navegação pelo teclado.
necessidades
especiais
• visual
• auditiva
• motora
• cognitiva
web para todos
• hardware
• software
• idioma
• localização
• capacidade
build a POUR
web site - app
Percivable
Operable
Understandable
Robuste WCAG 2.1
O
https://www.w3.org/WAI/ER/tools
IC E LITC BSISA Y
Você sabia?
IC E LITC BSIS
A Y
Você sabia?
IC E LITC BSIS
A Y
Você sabia?
11
A Y
Você sabia?
11
A Y
Você sabia?
11
A Y
Você sabia?
11
https://www.w3.org/WAI/perspective-videos/
VÍDEO
Leitura recomendada
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://www.w3.org/standards/webdesign/accessibility
https://www.w3.org/WAI/standards-guidelines/
https://webaim.org/
Obrigado!

Mais conteúdo relacionado

Semelhante a Quem se importa com acessibilidade na web?

Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
Lucas Augusto Carvalho
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
iMasters
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Rennan Martini
 
Apresentação produtos
Apresentação produtosApresentação produtos
Apresentação produtos
actvix
 
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
 
Especialização em desenvolvimento web e aplicativos móveis - Univem
Especialização em desenvolvimento web e aplicativos móveis - UnivemEspecialização em desenvolvimento web e aplicativos móveis - Univem
Especialização em desenvolvimento web e aplicativos móveis - Univem
Ricardo Sabatine
 
Palestra Web 2.0 & RIA
Palestra Web 2.0 & RIAPalestra Web 2.0 & RIA
Palestra Web 2.0 & RIA
Erko Bridee de Almeida Cabrera
 
Responsive design
Responsive designResponsive design
Responsive design
Guilherme Serrano
 
Ai1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-aAi1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-a
Duarte Gomes
 
Enterprise Web 2.0
Enterprise Web 2.0Enterprise Web 2.0
Enterprise Web 2.0
Rafael Kiso
 
Desempenho do WordPress diante dos algoritmos de motores de busca e SEO
Desempenho do WordPress diante dos algoritmos de motores de busca e SEODesempenho do WordPress diante dos algoritmos de motores de busca e SEO
Desempenho do WordPress diante dos algoritmos de motores de busca e SEO
Rock Content
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
Felipe Caroé
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
Marcos César
 
WordPress para negócios
WordPress para negóciosWordPress para negócios
WordPress para negócios
Max Denvir
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
Leandro Borges
 
Soyuz - Open Web Platform & Business Intelligence
Soyuz - Open Web Platform & Business IntelligenceSoyuz - Open Web Platform & Business Intelligence
Soyuz - Open Web Platform & Business Intelligence
Soyuz Sistemas Ltda
 
Skalena - Overview de Soluções
Skalena - Overview de Soluções Skalena - Overview de Soluções
Skalena - Overview de Soluções
Edgar Silva
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
Marcio Mota
 
Slide tcc , desenvolvimento dr uma aplicação
Slide tcc , desenvolvimento dr uma aplicaçãoSlide tcc , desenvolvimento dr uma aplicação
Slide tcc , desenvolvimento dr uma aplicação
mrgv369
 
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Hudson Augusto
 

Semelhante a Quem se importa com acessibilidade na web? (20)

Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
 
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana ChahoudDesenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
Desenvolvimento Mobile Híbrido, Nativo ou Web: Quando usá-los - Juliana Chahoud
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Apresentação produtos
Apresentação produtosApresentação produtos
Apresentação produtos
 
cartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-Icartilha-w3cbr-acessibilidade-web-fasciculo-I
cartilha-w3cbr-acessibilidade-web-fasciculo-I
 
Especialização em desenvolvimento web e aplicativos móveis - Univem
Especialização em desenvolvimento web e aplicativos móveis - UnivemEspecialização em desenvolvimento web e aplicativos móveis - Univem
Especialização em desenvolvimento web e aplicativos móveis - Univem
 
Palestra Web 2.0 & RIA
Palestra Web 2.0 & RIAPalestra Web 2.0 & RIA
Palestra Web 2.0 & RIA
 
Responsive design
Responsive designResponsive design
Responsive design
 
Ai1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-aAi1516 ad-tp2-g2-a
Ai1516 ad-tp2-g2-a
 
Enterprise Web 2.0
Enterprise Web 2.0Enterprise Web 2.0
Enterprise Web 2.0
 
Desempenho do WordPress diante dos algoritmos de motores de busca e SEO
Desempenho do WordPress diante dos algoritmos de motores de busca e SEODesempenho do WordPress diante dos algoritmos de motores de busca e SEO
Desempenho do WordPress diante dos algoritmos de motores de busca e SEO
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
WordPress para negócios
WordPress para negóciosWordPress para negócios
WordPress para negócios
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Soyuz - Open Web Platform & Business Intelligence
Soyuz - Open Web Platform & Business IntelligenceSoyuz - Open Web Platform & Business Intelligence
Soyuz - Open Web Platform & Business Intelligence
 
Skalena - Overview de Soluções
Skalena - Overview de Soluções Skalena - Overview de Soluções
Skalena - Overview de Soluções
 
Introducao desenvolvimento-web
Introducao desenvolvimento-webIntroducao desenvolvimento-web
Introducao desenvolvimento-web
 
Slide tcc , desenvolvimento dr uma aplicação
Slide tcc , desenvolvimento dr uma aplicaçãoSlide tcc , desenvolvimento dr uma aplicação
Slide tcc , desenvolvimento dr uma aplicação
 
Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013Cartilha de Acessibilidade na Web - Fascículo I - 2013
Cartilha de Acessibilidade na Web - Fascículo I - 2013
 

Mais de Mauricio Maujor

O que o Maujor viu no Vue
O que o Maujor viu no VueO que o Maujor viu no Vue
O que o Maujor viu no Vue
Mauricio Maujor
 
CSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evoluçãoCSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evolução
Mauricio Maujor
 
FlexBox - Uma visão geral
FlexBox - Uma visão geralFlexBox - Uma visão geral
FlexBox - Uma visão geral
Mauricio Maujor
 
O elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivasO elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivas
Mauricio Maujor
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Mauricio Maujor
 
Papo de Dinossauro
Papo de DinossauroPapo de Dinossauro
Papo de Dinossauro
Mauricio Maujor
 
FrontinFortaleza 2015
FrontinFortaleza 2015FrontinFortaleza 2015
FrontinFortaleza 2015
Mauricio Maujor
 
Meetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SPMeetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SP
Mauricio Maujor
 
SVG - De volta e para o futuro
SVG - De volta e para o futuroSVG - De volta e para o futuro
SVG - De volta e para o futuro
Mauricio Maujor
 
Front in sampa2014
Front in sampa2014Front in sampa2014
Front in sampa2014
Mauricio Maujor
 
Regra @font-face das CSS 3
Regra @font-face das CSS 3Regra @font-face das CSS 3
Regra @font-face das CSS 3
Mauricio Maujor
 

Mais de Mauricio Maujor (11)

O que o Maujor viu no Vue
O que o Maujor viu no VueO que o Maujor viu no Vue
O que o Maujor viu no Vue
 
CSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evoluçãoCSS - Uma tecnologia em constante evolução
CSS - Uma tecnologia em constante evolução
 
FlexBox - Uma visão geral
FlexBox - Uma visão geralFlexBox - Uma visão geral
FlexBox - Uma visão geral
 
O elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivasO elemento PICTURE para imagens responsivas
O elemento PICTURE para imagens responsivas
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Papo de Dinossauro
Papo de DinossauroPapo de Dinossauro
Papo de Dinossauro
 
FrontinFortaleza 2015
FrontinFortaleza 2015FrontinFortaleza 2015
FrontinFortaleza 2015
 
Meetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SPMeetup CSS #7 no CTNovatec, SP
Meetup CSS #7 no CTNovatec, SP
 
SVG - De volta e para o futuro
SVG - De volta e para o futuroSVG - De volta e para o futuro
SVG - De volta e para o futuro
 
Front in sampa2014
Front in sampa2014Front in sampa2014
Front in sampa2014
 
Regra @font-face das CSS 3
Regra @font-face das CSS 3Regra @font-face das CSS 3
Regra @font-face das CSS 3
 

Último

Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
Ian Oliveira
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
EliakimArajo2
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 

Último (7)

Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 

Quem se importa com acessibilidade na web?