acessibilidade na web - googlei/o sp

Acessibilidade na web

Google I/O - SP

26 de junho de 2014

Reinaldo Ferraz

@reinaldoferraz

http://premio.w3c.br/

Acessibilidade na Web: A quem se destina?

Cegos – Daltônicos - Baixa visão

Foto: everystockphoto.com - namida-k

Surdos

Foto: everystockphoto.com - jessicafm

Mobilidade reduzida

Estatísticas

Pessoas com deficiências no Brasil

24% 45.623.910 pessoas

Fonte: Censo 2010

Estatísticas

No mundo, esse número é

aproximadamente

1 bilhão de pessoas

Fonte: ONU


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/


Preconceito

Público alvo

É muito caro!

O prazo é curto!

Dá muito trabalho!

Não sei fazer!

Já testou seu site?

Foto: Flickr.com - Baddog_

Já testou o seu site?

Acessível via teclado



Vídeos com legendas


Sem CSS

e imagens


Ou mesmo sem monitor


Beneficia pessoas com deficiência

Acessibilidade na web: A quem se destina?

Acessibilidade é para todos !

Você acha que tem controle sobre o seu

usuário?

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

Acessibilidade deve fazer parte da rotina

Web Content Accessibility Guidelines

http://www.w3.org/TR/WCAG/

Princípio 1: Perceptível

Princípio 2: Operável

Princípio 3: Compreensível

Princípio 4: Robusto

Princípios do WCAG

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

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

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

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

reinaldoferraz.com.br

Situação 2:

Uma página cheia de

destaques

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

<elemento id=“contents”>

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>

Slider

Não dá para usar o

input type=“range”?

html5accessibility.com

Situação 5:

Utilização de cores

Neil Harbisson

http://www.youtube.com/watch?v=CvPOh0p9cf0

http://www.youtube.com/watch?v=CvPOh0p9cf0

Daltonismo

Daltonismo

Uma menina com cabelos loiros, olhos

azuis vestida de rosa

Daltonismo

Visão normal

Daltonismo

Protanopia (Deficiências em vermelho)

Daltonismo

Deuteranopia (Deficiências em verde)

Daltonismo

Tritanopia (Deficiências em azul)

Daltonismo

Acromatopsia (Deficiências todas as cores)

Daltonismo

Nunca utilize somente cor para

transmitir uma informação na Web

Daltonismo

Situação 4:

Múltiplos idiomas

<html lang=“pt-br”>

...

Esse texto está em português

<html lang=“pt-br”>

...

Esse texto está em português <span

lang=“en”>and this one in english</span>

Situação 5:

Elementos dinâmicos

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

Obrigado!

@reinaldoferraz

“Se o seu site não está pronto para receber

TODAS as pessoas, o site é deficiente.”

Adaptado da arq. Thais Frota