A saga dos 12 tópicos de acessibilidade na Web
-
Upload
reinaldo-ferraz -
Category
Internet
-
view
2.572 -
download
2
Transcript of A saga dos 12 tópicos de acessibilidade na Web
![Page 1: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/1.jpg)
A saga dos
12 tópicos de acessibilidade
reinaldoferraz
![Page 2: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/2.jpg)
Razões
![Page 3: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/3.jpg)
24% 45.623.910 pessoas
Censo 2010
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
![Page 4: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/4.jpg)
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
![Page 5: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/5.jpg)
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
![Page 6: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/6.jpg)
A Web foi feita para as pessoas
![Page 7: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/7.jpg)
Andy Walker
![Page 8: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/8.jpg)
Leonardo Gleisson
![Page 9: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/9.jpg)
Ivy Bean
![Page 10: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/10.jpg)
Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0
![Page 11: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/11.jpg)
Leitores de tela e JavaScript
![Page 12: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/12.jpg)
• 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/
![Page 13: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/13.jpg)
![Page 14: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/14.jpg)
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
![Page 15: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/15.jpg)
Web Aim Screen Reader Survey
Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript
97.6% mantém o JavaScript habilitado
![Page 16: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/16.jpg)
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
![Page 17: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/17.jpg)
WCAG e WAI-ARIA
![Page 18: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/18.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 19: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/19.jpg)
Ativar links
![Page 20: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/20.jpg)
Nem todo mundo
usa mouse
![Page 21: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/21.jpg)
![Page 22: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/22.jpg)
![Page 23: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/23.jpg)
![Page 24: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/24.jpg)
![Page 25: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/25.jpg)
<a href="menu.php"
onmouseover="swapImageOn('menu')"
onfocus="swapImageOn('menu')"
onmouseout="swapImageOff('menu')"
onblur="swapImageOff('menu')">
<img id="menu" src="menu_off.gif" alt="Menu" />
</a>
a:hover a:focus
![Page 26: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/26.jpg)
Canvas e Acessibilidade
![Page 27: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/27.jpg)
<canvas id="x" width="300" height="300"></canvas>
![Page 28: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/28.jpg)
<canvas id="x" width="300" height="300">
<a href="#“>
Desenho de uma estrela amarela feita ao pressionar o botão
</a>
</canvas>
![Page 29: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/29.jpg)
<canvas id="x" width="300" height="300">
<h2>Keyboard controls</h2>
<a href=“#” id=“up”>Up</a>
< a href=“#” id=“down”>Down</a>
< a href=“#” id=“left”>Left</a>
< a href=“#” id=“right”>Right</a>
</canvas>
![Page 30: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/30.jpg)
<canvas id="x" width="300" height="300">
<h2>Keyboard controls</h2>
<a href=“#” id=“up”>Up</a>
< a href=“#” id=“down”>Down</a>
< a href=“#” id=“left”>Left</a>
< a href=“#” id=“right”>Right</a>
</canvas>
<p aria-live="polite">Status:
<span id=“move">moving</span></p>
![Page 31: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/31.jpg)
Quatro regras de WAI-ARIA
![Page 32: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/32.jpg)
Regra nº 1
Não use ARIA (prefira os elementos semânticos do HTML)
![Page 33: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/33.jpg)
Regra nº 2
Não mude a semântica dos elementos (apenas se você realmente precisar)
![Page 34: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/34.jpg)
Não faça isso: <h1 role=button>heading button</h1>
![Page 35: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/35.jpg)
Não faça isso: <h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
![Page 36: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/36.jpg)
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>
![Page 37: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/37.jpg)
Regra nº 3
Todos os controles interativos devem ser acessíveis via teclado
![Page 38: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/38.jpg)
Regra nº 4
Não use role="presentation" ou aria-hidden="true“ em um
elemento de foco visível
![Page 39: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/39.jpg)
Web components acessível
![Page 40: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/40.jpg)
<toolbar >
<toolbar-button>
Cólera do Dragão
</toolbar-button>
</toolbar>
![Page 41: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/41.jpg)
<toolbar >
<button>
Cólera do Dragão
</button>
</toolbar>
![Page 42: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/42.jpg)
• Widget Roles alert, button, checkbox, menuitem, progressbar, tab, tabpanel...
• Document Structure img, list, listitem, presentation, region
• Landmark Roles application, banner, complementary, contentinfo, form, main, navigation, search
Fonte: http://www.w3.org/TR/wai-aria/roles
![Page 43: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/43.jpg)
<toolbar role=“toolbar”>
<toolbar-button
role=“button” tabindex="0“ >
Cólera do Dragão Ativado!
</toolbar-button>
</toolbar>
![Page 44: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/44.jpg)
• Widget Attributes aria-checked, aria-disabled, aria-pressed, aria-valuemax, aria-valuenow...
Fonte: http://www.w3.org/TR/wai-aria/states_and_properties
![Page 45: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/45.jpg)
<toolbar role=“toolbar”>
<toolbar-button
role=“button” tabindex="0“
aria-pressed=“true”>
Cólera do Dragão Ativado!
</toolbar-button>
</toolbar>
![Page 46: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/46.jpg)
https://www.polymer-project.org/0.5/articles/accessible-web-components.html
![Page 47: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/47.jpg)
Drag and Drop
![Page 48: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/48.jpg)
http://www.sitepoint.com/accessibility-in-modern-interfaces/ https://github.com/jsprodotcom/source/blob/master/accessibility-in-modern-interfaces.zip
![Page 49: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/49.jpg)
aria-dropeffect
copy
move
link
execute
popup
none
aria-grabbed
true
false
undefined
http://www.w3.org/WAI/PF/aria-practices/#dragdrop
![Page 50: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/50.jpg)
Conteúdo dinâmico
![Page 51: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/51.jpg)
• aria-atomic: Indica que a TA apresentará toda área (ou partes pré definidas) que mudou
• aria-live: Determina a prioridade da leitura pela TA (off, polite, assertive)
• aria-busy: Qualquer mudança em um elemento com aria-busy=“true” não será lido até que o atributo mude para “false”
![Page 52: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/52.jpg)
http://accessibility.athena-ict.com/aria/examples/live3.shtml
![Page 53: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/53.jpg)
<p id="clock" aria-live="off">16:03:14</p>
<div class="alerts" aria-hidden="false" id="myAlert" aria-live="polite"> Get back to work</div>
http://accessibility.athena-ict.com/aria/examples/live3.shtml
Para os outros alertas aria-atomic="false"
![Page 54: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/54.jpg)
![Page 55: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/55.jpg)
<span id="messages" aria-live="polite" > Fulano adicionou você como amigo </span>
![Page 56: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/56.jpg)
Widgets
![Page 57: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/57.jpg)
Widget Roles
alert, alertdialog, button, checkbox, dialog, gridcell, link, log, marquee, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, slider, spinbutton, status, tab, tabpanel, textbox, timer, tooltip, treeitem
combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid
![Page 58: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/58.jpg)
Fonte: http://oaa-accessibility.org/example/42/
role=“application”
role=“tree”
role=“treeitem”
aria-expanded=“false"
aria-expanded="true"
role=“treeitem”
![Page 59: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/59.jpg)
<a href="#“
id="handle_zoomSlider“
role="slider“
aria-orientation="vertical“
aria-valuemin="0“
aria-valuemax="17“
aria-valuetext="14“
aria-valuenow="14" >
<span>11</span>
</a>
![Page 60: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/60.jpg)
SVG e acessibilidade
![Page 61: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/61.jpg)
<svg xmlns="http://www.w3.org/2000/svg>
<path id="svg_1" d="m149.255,218.57251l119.008,0l36.77844,-113.06026l36.77902,113.06026l119.00964,0l-96.28226,69.87662l36.77859,113.06311l-96.285,-69.88104l-96.28284,69.88104l36.77907,-113.06311l-96.28267,-69.87662l0,0z" stroke-width="5" stroke="#000000" fill="yellow"/>
</svg>
![Page 62: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/62.jpg)
<svg xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Estrela em ARIA">
<title>Estrela com título</title>
<desc>Teste do elemento de descrição</desc>
<path id="svg_1" d="m149.255,218.57251l119.008,0l36.77844,-113.06026l36.77902,113.06026l119.00964,0l-96.28226,69.87662l36.77859,113.06311l-96.285,-69.88104l-96.28284,69.88104l36.77907,-113.06311l-96.28267,-69.87662l0,0z" stroke-width="5" stroke="#000000" fill="yellow"/>
</svg>
![Page 63: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/63.jpg)
Browser / Leitor de
tela
Aria-label: Sim Title: Não Desc: Sim
Aria-label: Sim Title: Não Desc: Não
Aria-label: Sim Title: Não Desc: Sim
Aria-label: Sim Title: Não Desc: Não
Aria-label: Sim Title: Não Desc: Não
Aria-label: Sim Title: Não Desc: Não
Aria-label: Sim Title: Não Desc: Não
Aria-label: Não Title: Sim Desc: Sim
Aria-label: Sim Title: Não Desc: Não
![Page 64: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/64.jpg)
Além do código
![Page 65: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/65.jpg)
- 1.4.1 Utilização de Cores: A cor não é utilizada como o único meio visual de transmitir informações, indicar uma ação, pedir uma resposta ou distinguir um elemento visual.
- 1.4.3 Contraste (Mínimo): A apresentação visual de texto e imagens de texto tem uma relação de contraste de, no mínimo, 4.5:1
- 1.4.4 Redimensionar texto: Exceto para legendas e imagens de texto, o texto pode ser redimensionado sem tecnologia assistiva até 200 por cento sem perder conteúdo ou funcionalidade.
- 2.3.2 Três Flashes: As páginas web não incluem qualquer conteúdo que pisca mais de três vezes no período de um segundo.
![Page 66: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/66.jpg)
Documentação importante
![Page 67: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/67.jpg)
WCAG 2.0
http://www.w3.org/TR/WCAG20/
http://www.w3.org/Translations/WCAG20-pt-br/
WAI-ARIA 1.0
http://www.w3.org/TR/wai-aria/
http://www.w3.org/TR/wai-aria/roles
http://www.w3.org/TR/wai-aria/states_and_properties
http://www.w3.org/TR/aria-in-html/
WebAim - Accessible /JavaScript
http://webaim.org/techniques/javascript/
http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
![Page 68: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/68.jpg)
Não adianta maquiar o porco
![Page 69: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/69.jpg)
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.
Fonte: http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
![Page 70: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/70.jpg)
Aplicar técnicas de acessibilidade em um site com usabilidade ruim é como passar batom em
um porco. Não importa o quanto voce 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/
![Page 71: A saga dos 12 tópicos de acessibilidade na Web](https://reader036.fdocumentos.tips/reader036/viewer/2022062523/58ea2b461a28abf9018b6339/html5/thumbnails/71.jpg)
Cupom de desconto BrazilJS
CDW1375001
http://conferenciaweb.w3c.br