WAI-ARIA: acessibilidade em tempo real

Vanessa Me Tonini

WAIARIA:
acessibilidade em tempo real

Vanessa Me Tonini

Eu...


Logotipo Marialab

Hackerspace Feminista
marialab.org

Logo Lambda3

Agile Coach

Estamos contratando! :D

WAIARIA

WAI-ARIA


Em 2008, o WAI criou a especificação para extender os recursos de acessibilidade na Web, especialmente do HTML5.

Accessible Rich Internet Applications (ARIA)

conteúdo dinâmico semântica web components Javascript HTML5

Diferença entre o WCAG e o ARIA

WCAG:
utilizam a semântica do HTML

WAI-ARIA:
atributos adicionam semântica

Eu já posso utilizar?

http://caniuse.com/#search=aria

Como utilizar o WAI-ARIA?


O WAI-ARIA funciona como uma extensão do HTML5, trabalhando apenas com adição e manipulação dos seus atributos nas tags do HTML.

1º regra de uso


Utilizar elementos ou atributos nativos do HTML5 que já propõem a semântica ou comportamento que você necessita, ao invés de já usar ARIA para fazer isto.

2º regra de uso


Não mude a semântica nativa.


A não ser que você realmente necessite.

http://w3c.github.io/aria-in-html/

Escopo, estado e propriedade.

roles categorization
Categorização dos escopos

Atributo

o atributo role faz parte do HTML, e seus valores são especificados pelo WAI-ARIA.

role=""

Roles categorization

Os valores para este atributo estão categorizados como:


Abstract roles


Abstract roles (12)


• command • composite • input
• landmark • range • roletype
• section • sectionhead • select
• structure • widget • window

Widget roles


Widget roles: componentes de compostos (9)


Esses papéis tipicamente atuam como recipientes que gerenciam outros componentes de interfaces contidos

• combobox • grid • listbox • menu
• menubar • radiogroup • tablist
• tree • treegrid

Widget roles: componentes de interface (25)

• 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

Document structure roles


Document structure roles (18)


• article • columnheader
• definition • directory • document
• group • heading • img • list
• listitem • math • note
• presentation • region • row
• rowheader • separator • toolbar

Landmark roles


Landmark roles (8)


• application • banner
• complementary • contentinfo • form
• main • navigation • search

states & properties
estados e propriedades

States & Properties


States & Properties


Atributos de Widget


Atributos de Widget (21)

• aria-autocomplete • aria-checked (state) • aria-disabled (state) * • aria-expanded (state) • aria-haspopup * • aria-hidden (state) * • aria-invalid (state) * • aria-label * • aria-level • aria-multiline • aria-multiselectable • aria-orientation • aria-pressed (state) • aria-readonly • aria-required • aria-selected (state) • aria-sort • aria-valuemax • aria-valuemin • aria-valuenow • aria-valuetext

Atributos de live region


Atributos de live region (4)


• aria-atomic * • aria-busy (state) * • aria-live * • aria-relevant *

Atributos de drag and drop (2)


Indicam informações sobre o estado dos elementos de interface que são do tipo arrastar e soltar.


• aria-dropeffect *
• aria-grabbed (state) *

Atributos de relationship


Indicam relações ou associações entre elementos que não podem ser facilmente determinados a partir da estrutura do documento.

Atributos de relationship (8)


• aria-activedescendant
• aria-controls * • aria-describedby * • aria-flowto * • aria-labelledby * • aria-owns * • aria-posinset
• aria-setsize

code snippet


 <form role="search">
	<label for="busca">Buscar:</label>
	<input type="search" id="busca"
		aria-autocomplete="list" aria-owns="select-autocomplete">
	<ul id="select-autocomplete" aria-hidden="true">
		<li aria-selected="true">Internet</li>
		<li aria-selected="false">Web</li>
		<li aria-selected="false">Network</li>
	</ul>
	<button>Buscar</button>
 </form>

Ferramentas, frameworks, bibliotecas, testes etc

https://docs.angularjs.org/guide/accessibility http://angularjs.blogspot.com.br/2014/11/using-ngaria.html http://pt.slideshare.net/ginader/angularjs-accessibilty http://simplyaccessible.com/article/spangular-accessibility/
https://github.com/paypal/bootstrap-accessibility-plugin
http://words.steveklabnik.com/emberjs-and-accessibility
https://github.com/trentmwillis/ember-a11y-testing
http://hanshillen.github.io/jqtest/#goto_slider
https://github.com/rackt/react-a11y/
https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/?src=search

Validador de HTML W3C

http://validator.w3.org/

Cartilha de Acessibilidade na Web do W3C Brasil

Awesome A11y

Por quê acessibilidade na Web?

1 bilhão de pessoas...

45.623.910 de pessoas



Mais de 500 mil, não conseguem exergar de modo algum, no Brasil.


Fonte: Censo 2010.

Qualquer pessoa
em algum momento da vida
vai precisar de acessibilidade.

Tornar o mundo acessível é um compromisso de todos.

Referências

Ferramentas

Obrigada!

@vanessametonini

goo.gl/5aAdvV