fazendo a web falar: html5, wai-aria e nvda - qconsp.com · acessibilidade na web: a quem se...
TRANSCRIPT
![Page 1: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/1.jpg)
Fazendo a Web falar:
HTML5, WAI-ARIA e NVDA
Reinaldo Ferraz W3C Brasil
![Page 2: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/2.jpg)
Em breve
![Page 3: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/3.jpg)
![Page 4: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/4.jpg)
![Page 5: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/5.jpg)
Acessibilidade na Web: A quem se destina?
![Page 6: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/6.jpg)
Cegos - daltônicos - baixa visão
![Page 7: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/7.jpg)
Deficiência auditiva
![Page 8: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/8.jpg)
Deficiência motora
![Page 9: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/9.jpg)
Estatísticas
Pessoas com deficiências no Brasil
24% 45.623.910 pessoas
Fonte: Censo 2010
![Page 10: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/10.jpg)
Estatísticas
No mundo, esse número é
aproximadamente
1 bilhão de pessoas
Fonte: ONU
![Page 11: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/11.jpg)
![Page 12: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/12.jpg)
![Page 13: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/13.jpg)
Você acha que sabe tudo do seu usuário?
![Page 14: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/14.jpg)
NÃO
![Page 15: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/15.jpg)
Você não tem controle sobre o seu usuário
![Page 16: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/16.jpg)
Acessibilidade deve fazer parte da rotina
![Page 17: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/17.jpg)
![Page 18: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/18.jpg)
Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
![Page 19: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/19.jpg)
Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG
![Page 20: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/20.jpg)
ARIA e HTML5
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
![Page 21: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/21.jpg)
ARIA e HTML5
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
![Page 22: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/22.jpg)
ARIA e HTML5
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
![Page 23: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/23.jpg)
ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
![Page 24: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/24.jpg)
![Page 25: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/25.jpg)
![Page 26: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/26.jpg)
• As WCAG utilizam a semântica do HTML
para tornar o conteúdo acessível
• ARIA são atributos que conseguem mudar
a semântica dos elementos para tornar o
conteúdo acessível
![Page 27: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/27.jpg)
![Page 28: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/28.jpg)
Situação 1:
Uma galeria de imagens
![Page 29: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/29.jpg)
<img src=“starwars.jpg”
alt=“Foto com a capa do filme Star Wars –
O império contra ataca”>
![Page 30: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/30.jpg)
<div class="foto" role="img"
aria-label="Logo do W3C que está dentro do
CSS"></div>
<img src="img-slides/w3clogo.png"
alt="Logo do W3C dentro do HTML">
![Page 31: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/31.jpg)
Exemplos
![Page 32: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/32.jpg)
Situação 2:
Uma página cheia de
destaques
![Page 33: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/33.jpg)
![Page 34: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/34.jpg)
![Page 35: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/35.jpg)
<a href=“#contents”>Saltar</a>
<elemento id=“contents”>
![Page 36: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/36.jpg)
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>
![Page 37: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/37.jpg)
Exemplos
![Page 38: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/38.jpg)
Situação 3:
Menu e Submenus
![Page 39: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/39.jpg)
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
![Page 40: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/40.jpg)
Exemplos
![Page 41: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/41.jpg)
Situação 4:
Formulários
![Page 42: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/42.jpg)
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
![Page 43: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/43.jpg)
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
![Page 44: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/44.jpg)
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
![Page 45: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/45.jpg)
CAPTCHA
![Page 46: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/46.jpg)
Exemplos
![Page 47: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/47.jpg)
Slider
![Page 48: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/48.jpg)
![Page 49: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/49.jpg)
Exemplos
![Page 50: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/50.jpg)
Não dá para usar o
input type=“range”?
![Page 51: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/51.jpg)
SIM!
![Page 52: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/52.jpg)
html5accessibility.com
![Page 53: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/53.jpg)
html5accessibility.com
![Page 54: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/54.jpg)
Exemplos
![Page 55: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/55.jpg)
Situação 5:
Utilização de cores
![Page 56: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/56.jpg)
![Page 57: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/57.jpg)
Situação 4:
Múltiplos idiomas
![Page 58: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/58.jpg)
Exemplos
![Page 59: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/59.jpg)
Situação 5:
Elementos dinâmicos
![Page 60: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/60.jpg)
<button role=“button” aria-pressed=“false”>
<img src=“off.png” alt=“Status Desligado”>
</button>
<button role=“button” aria-pressed=“true”>
<img src=“on.png” alt=“Status Ligado”>
</button>
![Page 61: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/61.jpg)
Tablist
![Page 62: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/62.jpg)
<ul role="tablist">
<li
role="tab“
id="tab1"
aria-controls="panel1"
aria-selected="false">
Preços</li>
</ul>
<div
id="panel1"
aria-labelledby="tab1"
role="tabpanel"
aria-hidden="true">
![Page 63: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/63.jpg)
Exemplos
![Page 64: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/64.jpg)
Live Regions
![Page 65: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/65.jpg)
Exemplos
![Page 66: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/66.jpg)
Dicas importantes para melhorar a acessibilidade
• Validação de Markup
• Siga as diretrizes de
acessibilidade (WCAG e ARIA)
• Validação automática de
acessibilidade
• Verificação de avisos
• Teste com tecnologias assistivas
• Coloque a acessibilidade na rotina
do desenvolvimento
![Page 67: Fazendo a Web falar: HTML5, WAI-ARIA e NVDA - qconsp.com · Acessibilidade na Web: A quem se destina? Cegos - daltônicos - baixa visão . Deficiência auditiva . Deficiência motora](https://reader031.vdocuments.pub/reader031/viewer/2022022707/5be56ed609d3f2c44d8c111c/html5/thumbnails/67.jpg)
Obrigado!
@reinaldoferraz
“Se o seu site não está pronto para receber
TODAS as pessoas, o site é deficiente.”
Adaptado da arq. Thais Frota