Acessibilidade na Web: Principais problemas e Soluções - FISL14

ACESSIBILIDADENA WEBPRINCIPAIS PROBLEMASE SOLUÇÕES

JULHO DE 2013

Quem eu sou?

@julianafrost

[email protected]

vivendoporai.com.br

Juliana Fernandes

Arquiteta da Informação na Alligo

O que veremos?Acessibilidade e...

Idioma

Imagens

Links

Fontes

Navegação rápida

Landmarks

Semântica

Formulários

Menus

Cores

Mas quem éque precisa deacessibilidade?

TODO MUNDO.

Alguns por um período,outros o tempo todo.

Foto:http://www.flickr.com/photos/santheo/2438840018/in/photostream/

Foto:http://www.flickr.com/photos/usembassyta/8147385353/in/photostream/

Foto:http://www.flickr.com/photos/ytueresburroyyomemonto/2848997619/in/photostream/

Foco da palestra:

Acessibilidade para quemutiliza leitor de tela.

Para construir sites acessíveis,temos que entender como as pessoas queprecisam de acessibilidade navegam na internet.

Antes de tudo

Principaisleitores de tela

NVDAwww.nvaccess.org/download/

JAWSwww.freedomscientific.com/products/fs/jaws-product-page.asp

Mas como os leitoresde tela funcionam?

?

Quais os principaisproblemas de acessibilidade?

Como resolvê-los?

#1

ACESSIBILIDADE EIDIOMA

Foto:http://www.flickr.com/photos/joshua/3318674106/in/photostream/

Problema: páginas sem a declaração do idioma

Certo

Declarar o idioma na estrutura do site.

Como fazer?

<html lang="pt-br">

1. Acessibilidade e idioma1. Acessibilidade e idioma

#2

ACESSIBILIDADE EIMAGENS

Foto:http://www.flickr.com/photos/danzen/1172367594/in/photostream/

Problema: imagens sem atributo alt

Errado

<img src="http://exemplo.com/psUakw12948001938.jpg">

Certo

<img src="http://exemplo.com/psUakw12948001938.jpg" alt= Dois ratos brancos, umem cima do outro, adormecendo numa rede >

""

2. Acessibilidade e imagens

Foto:http://www.flickr.com/photos/35597202@N02/4424721119/

Problema: imagens sem atributo alt

Errado

<img src="http://exemplo.com/psUakw12948001938.jpg">

Certo

<img src="http://exemplo.com/psUakw12948001938.jpg" alt= Dois ratos brancos, umem cima do outro, adormecendo numa rede >

""

2. Acessibilidade e imagens

Dica:

Se a existência da

imagem é apenas estética

e não complementa

o conteúdo, deixe o alt

vazio.Foto:http://www.flickr.com/photos/35597202@N02/4424721119/

ACESSIBILIDADE ELINKS

#3 Foto:http://www.flickr.com/photos/agentkramer/8164840482/in/photostream/

3. Acessibilidade e links

Problema: navegando pelos links através do tab (ou: que link é esse?)

Errado

Clique aqui

Saiba mais

Leia mais

Download

Certo

Veja fotos de ratos albinos

Leia mais sobre truques para ensinarao seu ratinho

Faça download do guia “Como cuidardo seu rato de estimação” em PDF (1mb)

Problema: navegando pelos links através do tab (ou: em que link eu tô?)

3. Acessibilidade e links

Como fazer?

a:focus {

outline:1px solid #000;

}

Certo

ACESSIBILIDADE EFONTE

#4 Foto:http://www.flickr.com/photos/revdancatt/5558653828/in/photostream/

4. Acessibilidade e fonte

Problema: texto ilegível

Errado

Fonte equivalente a 12px

Certo

Fonte equivalente a PELO MENOS 16px

4. Acessibilidade e fonte

Problema: texto ilegível

Errado

Fonte equivalente a 12px

Certo

Fonte equivalente a PELO MENOS 16px

Dica:

Se não puder aumentar

a fonte, coloque um

controlador de tamanho.

ACESSIBILIDADE ENAVEGAÇÃO RÁPIDA +LANDMARKS

#5 Foto:http://www.flickr.com/photos/shanepope/2375499336/

5. Acessibilidade e navegação rápida +landmarks

Problema: falta de atalho para ir direto ao conteúdoque interessa

Certo

Colocar um link “Pularpara o conteúdo principal”no começo da página


Problema: falta de atalho para ir direto ao conteúdoque interessa

Certo

Colocar um link “Pularpara o conteúdo principal”no começo da página

Dica:

Você pode deixar o link

invisível com CSS que o

leitor de tela o lerá

de qualquer forma.


Problema: falta de ladmarks

Landmarks são marcações adicionais no HTML que indicam que tipo de conteúdo existe numa determinada parte da página e ajudamo usuário a chegar rapidamente nela.


Problema: falta de ladmarks

Principais landmarks

banner

navigation

main

complementary

contentinfo

form

search

application


banner

navigationColeção de elementos navegacionais, geralmente links. Ex.: menus ou links

que permitem o usuário navegar pelo documento. Permitido + de 1 por pág.

main

Região que contém informações relacionadas ao site e não a página em si.

Ex.: marca, nome do site, caixa de pesquisa, etc. Somente 1 por página.

Principal conteúdo da página. Equivalente ao conteúdo que o link “pular para

o conteúdo principal” levaria. Somente 1 por página.


complementary

contentinfoÁrea que contém informações sobre o documento pai. Ex.: copyright, sobre o

autor, etc.

form

Seção que complementa o role=”main”, mas que possui significado se isolado.

Ex.: posts relacionados, sidebar, etc. Permitido + de 1 por página.

Somente 1 por página.

Área com um conjunto de itens que compõe um formulário. Permitido + de 1

por página.


search

applicationRegião que contém alguma aplicação que interage com o teclado, onde o

leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,

alguns webmails, etc.

Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.

Permitido + de 1 por página.


search

applicationRegião que contém alguma aplicação que interage com o teclado, onde o

leitor de telas deve devolver o controle do teclado à aplicação. Ex.: jogos,

alguns webmails, etc.

Área que contém alguma ferramenta que auxilia a pesquisa dentro do site.

Permitido + de 1 por página. Dica:

Pesquise sobre landmarks

na documentação oficial

do W3C.

http://www.w3.org/TR/wai-

aria

ACESSIBILIDADE ESEMÂNTICA

#7 Foto:http://www.flickr.com/photos/nolanus/5848333881/in/photostream/

7. Acessibilidade e semântica

Problema: falta de cabeçalhos e parágrafo

Errado

<div class="titulo-primario">Como Cuidar de Ratos</div>

<div class="texto">Os ratos têm requisitos nutricionais...</div>

<div class="titulo-secundario">Alimentação</div>

Certo

<h1>Como Cuidar de Ratos</h1>

<h2>Alimentação</h2>

<p>Os ratos têm requisitos nutricionais...<p>

7. Acessibilidade e semântica

Problema: falta de listas

Errado

<a href="#link">Item 1</a>

<a href="#link"> </a>

<a href="#link"> </a>

Item 2

Item 3

Certo

<ul>

<li><a href="#link">Item 1</li>

<li><a href="#link">Item 2</a></li>

<li><a href="#link">Item 3</a></li>

</ul>

#8

ACESSIBILIDADE EFORMULÁRIOS

8. Acessibilidade e formulários

Problema: campos sem identificação

Errado

<p>Nome</p>

<input type="text" name="nome">

Certo

<label for="nome">Nome</label>

<input type="text" name="nome" id="nome">



Errado

<input type="checkbox" name="rato"/>Ratos albinos

Certo

<input type="checkbox" name="rato" id="rato"/>

<label for="rato">Ratos albinos</label>



Errado

<input type="radio" name="ubuntu"/>Ubuntu

Certo

<input type="radio" name="ubuntu" id="ubuntu"/>

<label for="ubuntu">Ubuntu</label>


Problema: campos genéricos

Errado

<label for="mail">E-mail</label>

<input type="text" name="mail" id="mail"/>

Certo

<label for="mail">E-mail</label>

<input type="email" name="mail" id="mail"/>


Problema: preenchimento obrigatório mal indicado

Errado

<p>Os campos com asterisco são obrigatórios</p>

<label for="nome">Nome*</label>

<input type="text" name="nome" id="nome">

Certo

<p>Os campos com asterisco são obrigatórios</p>

<label for="nome">Nome*</label>

<input type="text" name="nome" id="nome" aria-required="true">


Problema: usabilidade ruim no feedback

Certo

Feedback que direcione o usuário para o campo a ser corrigido, atravésde um link

Como fazer?

Foram encontrados 2 erros

no formulário preenchido:

1.

2.

Informe seu nome

Informe um e-mail válido

Nome


Problema: usabilidade ruim no feedback

Certo

Feedback que direcioneo usuário para o campoa ser corrigido, atravésde um link

Como fazer?

Foram encontrados 2 erros

no formulário preenchido:

1.

2.

Informe seu nome

Informe um e-mail válido

Nome

Dica:

Utilize tabindex="-1" no

<p> que contém o

feedback da validação,

para que o usuário vá

direto a ele após o envio

do formulário.

#9

ACESSIBILIDADE EMENUS

9. Acessibilidade e menus

Problema: submenus invisíveis

Certo

Os menus devem se abrir após o tab, deixando os submenus visíveis e navegáveis via teclado

Como fazer?

Utilizando CSS + JavaScript. Exemplo para estudo em: http://tinyurl.com/menuacessivel

#9

ACESSIBILIDADE ECORES

Foto:http://www.flickr.com/photos/ngdx/9103091527/in/photostream/

9. Acessibilidade e cores

Problema: constraste ruim


Problema: constraste ruim

Diferença de cor:

Diferença de brilho:

deveria ser maior que 500 e é 114



Problema: contraste ruim



Diferença de cor:

Diferença de brilho:




http://www.snook.ca/technical/colour_contrast/colour.htmlColour Contrast Check

Ferramenta para verificar contraste de cores.



Problema: cores e daltonismo

Problema: cores e daltonismo

http://colororacle.org/Color Oracle

Ferramenta para simular tipos de daltonismo.


Bônus!

http://wave.webaim.org/WAVE Web Accessibility Tool

Ferramenta para avaliar a acessibilidade do site com basenos padrões WCAG 2.0.

Validador de acessibilidade

Obrigada!

@julianafrost

[email protected]

www.vivendoporai.com.br

www.slideshare.com/julianafrost

Foto

: htt

p:/

/theberr

y.c

om

/

Acessibilidade na Web: Principais problemas e Soluções - FISL14

Technology

Transcript of Acessibilidade na Web: Principais problemas e Soluções - FISL14