SlideShare uma empresa Scribd logo
1 de 26
Baixar para ler offline
AngularSP
Acessibilidade na prática
e a importância da
semântica na web
http://marcelosales.workhttp://acessibilida.de
No Itaú atuo na superintendência de UX com foco 100% em acessibilidade,
desenvolvendo ferramentas de apoio, manuais sobre o tema e o fomento
de uma cultura de acessibilidade para todas as áreas internas.
O que é
importante conhecer?
HTML
+
ACCESSIBILITY TREE
ARIA
“o trabalho feito pelos desenvolvedores
tem impacto direto na experiência do usuário,
para o bem ou para o mal”
Fabrício Teixeira, no livro “Introdução e boas práticas em UX Design”
ACCESSIBILITY TREE
https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree?hl=pt-br
A árvore de acessibilidade é um subconjunto da árvore DOM. Inclui objetos de interface do
“user agent” + os objetos do documento. Objetos acessíveis são criados na árvore de
acessibilidade para cada elemento DOM que deve ser exposto a uma tecnologia assistiva.
Accessibility Tree
ARIA
Modifica a apresentação do conteúdo para que ele seja mais
acessível a pessoas que utilizam tecnologias assistivas.
Especialmente útil em conteúdo dinâmico
e interfaces com controles customizados e avançados.
ARIA
(Accessible Rich Internet Applications)
WCAG ARIA
utiliza a própria
semântica
do HTML
X modifica / aplica
a semântica dos
elementos
Exemplo de implementação em um menu
(aria-expanded)
<ul>
<li>
<a class="dropdown-button" aria-expanded=”false">
Ferramentas (...)
“Aplicar técnicas de acessibilidade em um site
sem usabilidade é como passar batom em um porco.
Não importa o quanto você passe, ele sempre
será um porco.”
Jared Smith, consultor de Acessibilidade da WebAIM no artigo
“Accessibility Lipstick on a Usability Pig”
HTML
• Não existe “código para acessibilidade”, mas sim HTML semântico;
• Declarar idioma da página é importante;
• Hierarquia de conteúdo (H1 > H6) é fundamental;
• Rótulos (labels) em campos de formulários são fundamentais;
• Tabelas e Listas devem ser simples e funcionais;
• Lembrar do “hover” e também do “focus”.
HTML
https://www.html5accessibility.com
Importante
Um leitor de telas precisa informar essencialmente 4 informações:
• Função (semântica)
• Estado (ativado/desativado)
• Valor (o elemento em si)
• Nome
• rótulos visíveis (ou audíveis)
• textos alternativos ou complementares
E na prática,
como funciona isso?
Exemplo/Modelo MDN
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/Acessibilidade_problemas
Exemplo/Modelo MDN
https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/Acessibilidade_problemas
• Cores sem contraste (onde está verde, deve ficar branco);
• HTML deve ser ajustado (títulos definidos de forma hierárquica, menu de
navegação deve ser identificados como tal);
• Imagens devem ter texto alternativo;
• Formulários (busca e comentários) não estão devidamente ajustados e não
possuem seus relacionamentos entre rótulos e campos devidamente
definidos;
• Accordions precisam ser acessados por teclado e o leitor de telas deve
informar o seu estado (aberto/fechado);
• Tabelas não estão semanticamente adequadas;
HTML, CSS e JS precisam de ajustes diferentes... dependendo do que for aplicado...
Exemplo apresentado “ao vivo” - ANTES
Exemplo apresentado “ao vivo” - DEPOIS
qualquer usuário
consegue utilizar o seu
produto ou serviço?
reflexão...
https://youtu.be/trdoe4ZtLuA
Vídeo:
Sady Paulson: Apple Acessibilidade
adaptado de Mary P. Radabaugh, diretora do Centro Nacional de Suporte para Pessoas com Deficiência da IBM
“Para a maioria das pessoas,
a tecnologia torna a vida mais fácil.
Para uma pessoa com deficiência,
a tecnologia torna as coisas possíveis.”
Obrigado!
http://acessibilida.de
Dúvidas?
twitter | instagram | fb | medium | behance
@msales
e-mail
msales@acessibilida.de
linkedIn
@msales78
http://marcelosales.work
acessibilidadetoolkit.com
guia-wcag.com
é um PWA! J
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
https://webaim.org/techniques/semanticstructure/
Referências citadas na apresentação...
Extended Guidelines for Mobile Web Best Practices
https://www.w3.org/TR/mwbp-guidelines/
Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
https://www.w3.org/TR/mobile-accessibility-mapping/
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

Mais conteúdo relacionado

Mais procurados

Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web AccessibilitySteven Swafford
 
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 - FISL14Juliana Fernandes
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website AccessibilityNishan Bose
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it mattersMargarida Sousa
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POURAlena Huang
 
UX and Accessibility
UX and Accessibility UX and Accessibility
UX and Accessibility Frank Cervone
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeWhitney Quesenbery
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web AccessibilityAndrea Dubravsky
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsMedia Access Australia
 
Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité OCTO Technology
 

Mais procurados (20)

Introduction To Web Accessibility
Introduction To Web AccessibilityIntroduction To Web Accessibility
Introduction To Web Accessibility
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
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
 
Accessibilitytesting public
Accessibilitytesting publicAccessibilitytesting public
Accessibilitytesting public
 
Website Accessibility
Website AccessibilityWebsite Accessibility
Website Accessibility
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
WCAG 2.1 and POUR
WCAG 2.1 and POURWCAG 2.1 and POUR
WCAG 2.1 and POUR
 
Aria interview questions
Aria interview questionsAria interview questions
Aria interview questions
 
UX and Accessibility
UX and Accessibility UX and Accessibility
UX and Accessibility
 
A Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challengeA Web for Everyone: Accessibility as a design challenge
A Web for Everyone: Accessibility as a design challenge
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Introduction To WCAG 2.0
Introduction To WCAG 2.0Introduction To WCAG 2.0
Introduction To WCAG 2.0
 
Card Sorting
Card SortingCard Sorting
Card Sorting
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Digital Accessibility - The Quick Wins
Digital Accessibility - The Quick WinsDigital Accessibility - The Quick Wins
Digital Accessibility - The Quick Wins
 
Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité
 

Semelhante a Acessibilidade na prática e a importância da semântica na web

Flex e acessibilidade. Sim, é possível!
Flex e acessibilidade. Sim, é possível!Flex e acessibilidade. Sim, é possível!
Flex e acessibilidade. Sim, é possível!Odair Seixas
 
HTML5.pptx
HTML5.pptxHTML5.pptx
HTML5.pptxLuanDev1
 
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?Marcelo Sales
 
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...tdc-globalcode
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos CentraisJose Claudio Terra
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos CentraisCarlos Franco
 
Palestra Dariva Portais Corporativos
Palestra Dariva Portais CorporativosPalestra Dariva Portais Corporativos
Palestra Dariva Portais CorporativosRoberto Dariva
 
Programacao acessibilidade
Programacao acessibilidadeProgramacao acessibilidade
Programacao acessibilidadeThalita Oliveira
 
Desmistificando a IHC para programadores
Desmistificando a IHC para programadoresDesmistificando a IHC para programadores
Desmistificando a IHC para programadoresTalita Pagani
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobileVlamir Carneiro Jr
 
Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5EAD Amazon
 
Tutorial e Curso de Moodle: Parte 3 de 5
Tutorial e Curso de Moodle: Parte 3 de 5Tutorial e Curso de Moodle: Parte 3 de 5
Tutorial e Curso de Moodle: Parte 3 de 5EAD Amazon
 
Ihc Aula8 M I Avaliacao Heuristica
Ihc Aula8 M I Avaliacao HeuristicaIhc Aula8 M I Avaliacao Heuristica
Ihc Aula8 M I Avaliacao HeuristicaFabiano Damiati
 
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no SoftwareJoão Júnior
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao WordpressAline Corso
 

Semelhante a Acessibilidade na prática e a importância da semântica na web (20)

Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
Flex e acessibilidade. Sim, é possível!
Flex e acessibilidade. Sim, é possível!Flex e acessibilidade. Sim, é possível!
Flex e acessibilidade. Sim, é possível!
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
HTML5.pptx
HTML5.pptxHTML5.pptx
HTML5.pptx
 
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?
Até quando você vai culpar o desenvolvedor por seu site/app não ser acessível?
 
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...
TDC2017 | POA Trilha Acessibilidade Digital - Ate quando voce vai culpar o de...
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Palestra Dariva Portais Corporativos
Palestra Dariva Portais CorporativosPalestra Dariva Portais Corporativos
Palestra Dariva Portais Corporativos
 
Programacao acessibilidade
Programacao acessibilidadeProgramacao acessibilidade
Programacao acessibilidade
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
Desmistificando a IHC para programadores
Desmistificando a IHC para programadoresDesmistificando a IHC para programadores
Desmistificando a IHC para programadores
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces Mobile
 
Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5Curso de Moodle Tutorial Moodle Parte 3 de 5
Curso de Moodle Tutorial Moodle Parte 3 de 5
 
Tutorial e Curso de Moodle: Parte 3 de 5
Tutorial e Curso de Moodle: Parte 3 de 5Tutorial e Curso de Moodle: Parte 3 de 5
Tutorial e Curso de Moodle: Parte 3 de 5
 
Análise de sistemas oo 1
Análise de sistemas oo   1Análise de sistemas oo   1
Análise de sistemas oo 1
 
Ihc Aula8 M I Avaliacao Heuristica
Ihc Aula8 M I Avaliacao HeuristicaIhc Aula8 M I Avaliacao Heuristica
Ihc Aula8 M I Avaliacao Heuristica
 
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software
2° Workshop de Testes em Uberlândia - Palestra Usabilidade no Software
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Introdução ao Wordpress
Introdução ao WordpressIntrodução ao Wordpress
Introdução ao Wordpress
 

Mais de Marcelo Sales

Mitos e Verdades sobre testes de acessibilidade
Mitos e Verdades sobre testes de acessibilidadeMitos e Verdades sobre testes de acessibilidade
Mitos e Verdades sobre testes de acessibilidadeMarcelo Sales
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaMarcelo Sales
 
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"Acessibilidade pensada para a experiência muito além de "7 dicas básicas"
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"Marcelo Sales
 
Wiad 2019 - Criando barreiras, mesmo removendo-as
Wiad 2019 - Criando barreiras, mesmo removendo-asWiad 2019 - Criando barreiras, mesmo removendo-as
Wiad 2019 - Criando barreiras, mesmo removendo-asMarcelo Sales
 
Aplicando a WCAG em projetos de inteligência artificial
Aplicando a WCAG em projetos de inteligência artificialAplicando a WCAG em projetos de inteligência artificial
Aplicando a WCAG em projetos de inteligência artificialMarcelo Sales
 
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!Marcelo Sales
 

Mais de Marcelo Sales (6)

Mitos e Verdades sobre testes de acessibilidade
Mitos e Verdades sobre testes de acessibilidadeMitos e Verdades sobre testes de acessibilidade
Mitos e Verdades sobre testes de acessibilidade
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a Experiência
 
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"Acessibilidade pensada para a experiência muito além de "7 dicas básicas"
Acessibilidade pensada para a experiência muito além de "7 dicas básicas"
 
Wiad 2019 - Criando barreiras, mesmo removendo-as
Wiad 2019 - Criando barreiras, mesmo removendo-asWiad 2019 - Criando barreiras, mesmo removendo-as
Wiad 2019 - Criando barreiras, mesmo removendo-as
 
Aplicando a WCAG em projetos de inteligência artificial
Aplicando a WCAG em projetos de inteligência artificialAplicando a WCAG em projetos de inteligência artificial
Aplicando a WCAG em projetos de inteligência artificial
 
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG!
 

Acessibilidade na prática e a importância da semântica na web