Acessibilidade na web - Computer on the Beach 2015

Acessibilidade na Web

Computer on the Beach

Março - 2015

Reinaldo Ferraz W3C Brasil

http://premio.w3c.br/

http://www.w3c.br/GT/GrupoAcessibilidade

Acessibilidade na Web: A quem se destina?

Cegos - daltônicos - baixa visão

Deficiência auditiva

Deficiência motora

Estatísticas Pessoas com deficiências no Brasil

24% 45.623.910 pessoas

Fonte: Censo 2010

Você acha que sabe tudo do seu usuário?

NÃO

Você não tem controle sobre o seu usuário

Acessibilidade na web

Porque não desenvolvemos

web sites acessíveis?

Algumas hipóteses:

Desconhecimento

http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/



http://random.irb.hr/signup.php




Acessibilidade na web

Preconceito

Público alvo

Acessibilidade na web Beneficia pessoas com deficiência

Acessibilidade na web: A quem se destina?

Acessibilidade é para todos !

É muito caro!

O prazo é curto!

Dá muito trabalho!

Não sei fazer!

Acessibilidade deve fazer parte da rotina

Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/

Diretrizes de Acessibilidade para Conteúdo Web http://www.w3.org/Translations/WCAG20-pt-br/

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

ARIA e HTML5 Implementação por leitores de tela:

Landmark roles são suportadas em

• JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.

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

Situação 1:

Uma galeria de imagens

<img src=“starwars.jpg”

alt=“Foto de Luke Skywalker no filme Star

Wars – O império contra ataca”>

<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">

reinaldoferraz.com.br

Situação 2:

Uma página cheia de destaques

<a href=“#contents”>Saltar</a>

<elemento id=“contents”>

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h2>...<h2>

<h3>...</h3>

<h4>...</h4>

<h2>...</h2>

<h3>...</h3>

html5accessibility.com

Situação 3:

Menu e Submenus

CSS:

a:hover

a:focus

JavaScript:

onmouseover="#"

onfocus="#"

onmouseout="#"

onblur="#"

Situação 4:

Formulários

<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>

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>



<p id="comp">

Preencha seu nome


</fieldset>

<fieldset>

<legend>

Identifique-se!

</legend>

<label for="text">

Nome</label>



<p id="comp">

Preencha seu nome


</fieldset>

Slider



Situação 5:

Utilização de cores

Contraste Ishihara Test

Visão normal

Protanopia (Deficiências em vermelho)

Deuteranopia (Deficiências em verde)

Tritanopia (Deficiências em azul)

Acromatopsia (Deficiências todas as cores)

Situação 4:

Múltiplos idiomas

<html lang=“pt-br”>

...

Esse texto está em

português

<span lang=“en”>and in

english</span>

Situação 5:

Elementos dinâmicos

<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>

<span aria-live=“off">Mensagem dinâmica</span>

<span aria-live=“polite"> Mensagem dinâmica</span>

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

“Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.”

Adaptado da arq. Thais Frota

Tks [email protected] @reinaldoferraz

[email protected] @w3cbrasil Facebook.com/W3CBrasil