SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
Quando e como usar
WAI-ARIA
Web sem Barreiras
4 de agosto de 2018
Reinaldo Ferraz
• https://pt.slideshare.net/reinaldoferraz
• https://pt.slideshare.net/CentroWeb/
@reinaldoferraz
Ilustração por Iconicbestiary - Freepik.com
WCAG WAI-ARIA
WCAG
ARIA
Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
WCAG
Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG
WAI-ARIA (Accessible Rich Internet Applications)
define uma forma de tornar o conteúdo e
aplicativos web mais acessíveis a pessoas com
deficiências. Ele contribui especialmente com
conteúdo dinâmico e interface de controles de
usuário avançadas desenvolvidos com Ajax,
HTML, JavaScript e tecnologias relacionadas.
http://www.w3.org/WAI/intro/aria
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-flowto
aria-grabbed (state)
35 States and Properties (Estados e Propriedades)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
...
http://www.w3.org/TR/wai-aria/states_and_properties
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
1. As WCAG utilizam a semântica do HTML para tornar
o conteúdo acessível
2. ARIA são atributos que conseguem mudar a
semântica dos elementos para tornar o conteúdo
acessível
Quatro regras para o bom uso de
WAI-ARIA
Regra nº 1
Não use ARIA
(prefira os elementos semânticos do HTML)
<span>Enviar</span>
<span onclick=“Event(this)”>Enviar</span>
<span onclick=“Event(this)”
onmouseover=“Event(this)”
onmouseout=“Event(this)”>Enviar</span>
<span onclick=“Event(this)”>
onmouseover=“Event(this)”
onmouseout=“Event(this)”
onfocus=“Event(this)”
onblur=“Event(this)”>Enviar</span>
<span role=“button” onclick=“Event(this)”>
onmouseover=“Event(this)”
onmouseout=“Event(this)”
onfocus=“Event(this)”
onblur=“Event(this)”>Enviar</span>
<button>Enviar</button>
Regra nº 2
Não mude a semântica
dos elementos
(apenas se você realmente precisar)
Não faça isso:
<h1 role=button>heading button</h1>
Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Se não puder usar o elemento correto, faça isso:
<h1>
<span role=button>heading button</span>
</h1>
Regra nº 3
Todos os controles
interativos devem ser
acessíveis via teclado
Regra nº 4
Não use role="presentation" ou
aria-hidden="true“ em um
elemento de foco visível
<h1 role=presentation>
heading button
</h1>
<h1 aria-hidden=true>
heading button
</h1>
• Navegação
• Conteúdo escondido
• Falta de controle pelo usuário
• Confusão/desorientação
Ótimo artigo sobre esse tópico: http://webaim.org/techniques/javascript/
Javascript e leitores de tela
Javascript e leitores de tela
Web Aim Screen Reader Survey
Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript
Pesquisa feita com 1465 usuários de software
leitor de tela em Janeiro de 2014
Javascript e leitores de tela
Web Aim Screen Reader Survey
Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript
97.6% mantém o JavaScript habilitado
Javascript e leitores de tela
JAWS 16
- Suporte a MathML (FF e IE)
- Lê cores de fundo (FF)
- Maior suporte a ARIA
NVDA 2015.2
- Suporte aos principais landmarks de ARIA
ORCA / VoiceOver
- Suporte a Live Regions
Javascript e leitores de tela
Quando usar? ou não...
Descrever regiões do site
Descrever regiões do site
<div id="header" role="banner">
A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">
...a list of links here ... </div>
<div id="content" role="main">
... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">
....an advertisement here...</div>
<div id="footer" role="contentinfo">
c)The Freedom Company, 123 Freedom Way, Helpville,
USA</div>
Descrever regiões do site
<header>
A banner image and introductory title</header>
<input type=“search”>
<nav>
...a list of links here ... </nav>
<main>
... Ottawa is the capital of Canada ...</main>
<aside>
....an advertisement here...</aside>
<footer>
c)The Freedom Company, 123 Freedom Way, Helpville,
USA</footer>
Descrever regiões do site
header
nav aside
aside
article
section
https://caniuse.com/#feat=wai-aria
Descrição de conteúdos invisíveis
Descrição de conteúdos invisíveis
<div class="foto"
role=“img”
aria-label="Logo do W3C">
</div>
<label for=“pais” aria-label=“Este campo atualiza
automaticamente o próximo campo”>
Selecione o país</label>
<select id=“pais”>
<option>Argentina</option>
<option>Brasil</option>
<option>Bolívia</option>
<option>Chile</option>
<option>Equador</option>
<option>Peru</option>
</select>
Relacionar informações
<form>
<fieldset>
<legend>Casa de espetáculos</legend>
<label for=“valor">Valor do ingresso</label>
<input type=“valor" id=“valor"
aria-describedby="complementar">
<p id="complementar “>
O valor deve ser preenchido em reais</p>
</fieldset>
</form>
role=“application”
role=“tree”
role=“treeitem”
aria-expanded=“false"
aria-expanded="true"
role=“treeitem”
Definir status de elementos
Definir status de elementos
Definir status de elementos
<span role="checkbox" aria-checked="false" tabindex="0"
aria-labelledby=“unchecked"></span>
<span role="checkbox" aria-checked=“true" tabindex="0"
aria-labelledby=“checked"></span>
Definir status de elementos
<input type="radio" name="exemplo01" id="exemplo01">
<label for="exemplo01">Unchecked</label>
aria-live: Determina a prioridade da leitura pela TA (off, polite, assertive)
Conteúdo dinâmico
<span id="messages" aria-live="polite" >
Fulano adicionou você como amigo
</span>
Conteúdo dinâmico
Aplicar técnicas de acessibilidade em um site
com usabilidade ruim é como passar batom
em um porco. Não importa o quanto você
passe, ele continuará sendo um porco.
Não faça da ARIA o seu batom.
Fonte: http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
Mantenha sua aplicação simples
Obrigado
www.ceweb.br
reinaldo@nic.br @reinaldoferraz
08 de agosto de 2018

Mais conteúdo relacionado

Semelhante a WAI-ARIA: Como e quando usar atributos de acessibilidade

HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011Reinaldo Ferraz
 
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 NVDAReinaldo Ferraz
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebDiego Pessoa
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi MasterAcessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi MasterReinaldo Ferraz
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015Reinaldo Ferraz
 
Nobody leaves this place without coding an accessible projetc
Nobody leaves this place without coding an accessible projetcNobody leaves this place without coding an accessible projetc
Nobody leaves this place without coding an accessible projetcReinaldo Ferraz
 
Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Reinaldo Ferraz
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
Ruby on Rails 100% na cloud com heroku e outros serviços
Ruby on Rails 100% na cloud com heroku e outros serviçosRuby on Rails 100% na cloud com heroku e outros serviços
Ruby on Rails 100% na cloud com heroku e outros serviçosBruno Ghisi
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosVanessa Me Tonini
 

Semelhante a WAI-ARIA: Como e quando usar atributos de acessibilidade (20)

HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
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
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi MasterAcessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
 
Android Libs - AndroidDevConf
Android Libs - AndroidDevConfAndroid Libs - AndroidDevConf
Android Libs - AndroidDevConf
 
Nobody leaves this place without coding an accessible projetc
Nobody leaves this place without coding an accessible projetcNobody leaves this place without coding an accessible projetc
Nobody leaves this place without coding an accessible projetc
 
Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015Acessibilidade na web - Computer on the Beach 2015
Acessibilidade na web - Computer on the Beach 2015
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Acessibilidade na Prática
Acessibilidade na PráticaAcessibilidade na Prática
Acessibilidade na Prática
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Ruby on Rails 100% na cloud com heroku e outros serviços
Ruby on Rails 100% na cloud com heroku e outros serviçosRuby on Rails 100% na cloud com heroku e outros serviços
Ruby on Rails 100% na cloud com heroku e outros serviços
 
Html 5
Html 5Html 5
Html 5
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passos
 

Mais de Centro Web

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaCentro Web
 
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Centro Web
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0Centro Web
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na WebCentro Web
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webCentro Web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEOCentro Web
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a WebCentro Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisasCentro Web
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIACentro Web
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosCentro Web
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e InclusãoCentro Web
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebCentro Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaCentro Web
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake NewsCentro Web
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoCentro Web
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websitesCentro Web
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web PlatformCentro Web
 

Mais de Centro Web (20)

Acessibilidade e Realidade Estendida
Acessibilidade e Realidade EstendidaAcessibilidade e Realidade Estendida
Acessibilidade e Realidade Estendida
 
Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na Por dentro do W3C e as novidades nos padrões de acessibilidade na
Por dentro do W3C e as novidades nos padrões de acessibilidade na
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Re descentralizar a Web
Re descentralizar a WebRe descentralizar a Web
Re descentralizar a Web
 
Web das coisas
Web das coisasWeb das coisas
Web das coisas
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Boas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e BenefíciosBoas Práticas para Dados na Web: Desafios e Benefícios
Boas Práticas para Dados na Web: Desafios e Benefícios
 
Interação, Imersão e Inclusão
Interação, Imersão e InclusãoInteração, Imersão e Inclusão
Interação, Imersão e Inclusão
 
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na WebEmpatia e respeito para garantir os direitos da pessoa com deficiência na Web
Empatia e respeito para garantir os direitos da pessoa com deficiência na Web
 
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa RicaBuenas Prácticas para Datos en la Web y el Caso de Costa Rica
Buenas Prácticas para Datos en la Web y el Caso de Costa Rica
 
Encontros com a Web: Fake News
Encontros com a Web: Fake NewsEncontros com a Web: Fake News
Encontros com a Web: Fake News
 
Mixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivoMixed Reality e o seu impacto cognitivo
Mixed Reality e o seu impacto cognitivo
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
EPUB and the Open Web Platform
EPUB and the Open Web PlatformEPUB and the Open Web Platform
EPUB and the Open Web Platform
 

WAI-ARIA: Como e quando usar atributos de acessibilidade