Frontend com Acessibilidade - FrontInSampa - Nov. 2012

Clécio Bachini Horácio Soares
@cbachini @horaciosoares
11 2528-1521 21 9925-5404

frontend com
acessibilidade

http://www.slideshare.net/fullscreen/bernarddeluna/quero-ser-um-ninja-em-xhtml-html5-e-css3/3

sou um ninja

Então por que
preciso me
preocupar com
acessibilidade?

Decreto Lei
nº 5.296 (dez/04)

Decreto Lei nº 6.949 (ago/09),
onde a convenção da ONU
ganhou força de lei.

2 o
servir um público que não
é atendido e que é maior
do que se espera…

Dos cerca de 190 milhões de
brasileiros, aqueles com pelo menos
uma deficiência, seja visual,
auditiva, motora ou mental, somam
45 milhões (23,9%).

apesar das estatísticas,
como anda a acessibilidade
digital no Brasil?

acessibilidade
para inglês ver.

estatísticas do W3C

2,5% em 2010

5% em 2011

páginas governamentais sem erros
de validação automática de HTML,
CSS e acessibilidade.

3 o
atender melhor todas as
pessoas…

acessibilidade pra quem cara pálida ?

Para pessoas com diferentes deficiências…

Analfabeto
funcional

Um em cada cinco
brasileiros (20,3%) é
analfabeto funcional,
de acordo com a Pnad
(Pesquisa Nacional por
Amostra de Domicílios)
2009, divulgada pelo
IBGE.
Homem de costas, sentado de frente para um quadro branco sem nada escrito.

Calvin, pouca
experiência e
medo do
computador
Homem com muito medo olhando por
cima de um notebook.

The Web is not fully accessible to
perhaps 2 billion, including people with …

Five groups of people for whom Web accessibility can be challenging:

Challenges due to aging Literate in poorly-supported
Disabilities languages

Low literacy Little experience with technology

29

Gabriel compenetrado, olhando para o Agora ele está olhando e
monitor e clicando com o mouse. brincando como teclado.

Gabriel, linguagem em
desenvolvimento...

Max, com
tendinite,
usando o
mouse
com a mão
trocada.

Homem com expressão de desespero, usando o mouse com a mão esquerda

Como o Luli disse no Digitalks no Rio em 2012:

“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”

“design for mobile people,...

...not for mobile device” Foto: Rosenfield Media

Todos nós na primeira experiência.

Um criança com camisa social e gravata em frente a um notebook

E finalmente,
o bilionário
cego!!!

Cifrão desenhado com
moedas douradas

Dilbert fazendo parte do logotipo do Google e falando eu não posso ver .

Google, o bilionário cego!!! É apenas um
robô que indexa conteúdo em texto.

Possibilidade de
atingir 100% do
público alvo;

atender melhor todas as pessoas

Comercial
Mercado Livre
“Eu compro o
que quiser, 2011
senão quiser,
não compro”
Comercial do Mercado
Livre 2011

mais fácil de usar e aprender

manutenção
mais rápida e
barata, melhor
performance…

valorização da diversidade e
responsabilidade social.

http://pedagogiando.blogspot.com.br/2011/05/aprender-na-diversidade-e-conviver-com.html

vantagem
competitiva

Mulher com notebook em sinal de ok

melhoria da
qualidade.

Mãe e filha felizes na praia dando uma estrela

erros que devem ser
evitados pelos ninjas…

Comer chocolote a noite engorda

X
Comer muito é que engorda,
independente do horário…

mitos

O excesso de testosterora que
provoca a queda dos cabelos,
torna os carecas mais sexy

derrubando mitos sobre
acessibilidade web

acessibilidade Web não é difícil

muito menos limita a criatividade

construir sites acessíveis não é
complicado e demorado

o público beneficiado com acessibilidade
é muito maior do que se espera...

estudo de caso
acessibilidade
(não foram realizados testes
abrangentes, nem com usuários)

novo site
Itaú
outubro/novembro 2012
obs: o objetivo da análise não foi avaliar as mudanças
no design, taxonomia, arquitetura, etc., mas sim apontar
as evidentes barreiras de acessibilidade Web no novo site.

estrutura de cabeçalhos
A página inicial não apresenta
Headers e, nas páginas internas,
apenas um cabeçalho de nível 1 (H1).

exemplo da página interna
“Cartões”

uma proposta de cabeçalhos para
uma página Cartões:

H1

H2 H2 H2 H2
H2 H2

H2 H2 H2


Assim, utilizando leitores de telas (ex.:
NVDA, Jaws, etc.), os usuários com
deficiência visual podem navegar
diretamente pelo índice (cabeçalhos) da
página utilizando a tecla “h”.

navegação via teclado

•  Utilizando a tecla TAB para navegar
diretamente pelos links e campos de
formulário, tanto o menu principal,
quanto nos links no corpo da páginas
do site, não apresentam nenum
feedback visual.

obs: esse tipo de navegação através de TAB
diretamente pelos links e campos de
formulário é muito utilizada por pessoas com
deficiência motora e visual, mas também é
utilizado por usuários sem deficiências.

•  as subopções do menu principal
não estão disponíveis via
teclado, pois são dependentes
de mouse para aparecerem.


•  como não é um botão ou link de
fato, o botão “Acessar” não
ganha o foco dos usuários que
utilizam a tecla TAB.


•  elementos somem ao
navegar via teclado

obs: inicialmente, a página inicial
tinha seu design desconfigurado
quando acessada apenas via
teclado.


•  elementos somem ao
navegar via teclado

•  os elementos deixaram de sumir
quando a página inicial é
acessada via teclado, mas a
navegação passou a fica em loop
dos campos agência e conta.


•  o menu no rodapé e o botão com
“acesso rápido” podem passar
desapercebidos dos usuários.


•  acesso rápido não funciona
corretamente nos tablets


•  falta um salto para o conteúdo

obs: a falta de um link com “salto para o conteúdo”,
faz com que os usuários de teclado tenham que
passar por todos os elementos apresentados no
topo de uma página até chegarem ao conteúdo
principal das páginas. O uso desse tipo de salto é
importante na avaliação automática de
acessibilidade.

navegação

Exemplo de salto visível com foco : http://webstanderds.org

Demonstração:

vídeo – acessibilidade web:
custo ou benefício?

http://www.videolog.tv/video.php?id=230205

http://acessodigital.net/video-html5/
video-acessibilidade-br.html

textos com tamanho fixo e reduzido

links na home para
própria home

menu com imagens
semelhantes a banners

links e imagens sem descrição

<a href="/"> 
<img src="/…/img/logo-itau.png" class="logoItau"/> 
</a>"

<a href="/voce-mais-digital/"> 
<img src="/.../Banner-Home-voce-mais-digital.jpg"
class="imgCampanhaHome" alt=""/> 
</a>"

<a href="/videos/tutorial-novo-portal-itau.html"> 
<img src="/.../itau-doodle-novo-site.jpg"
class="imgCampanhaHome" alt=""/>"
</a>"

Home do Itaú com as imagens desabilitadas

imagens com descrições que
fazem referências ao termo
“imagem” e com conteúdo
redundante
( ALT e TITLE )

Obs: não é necessário descrever objetos
como imagens e links, pois eles são
identificados pelos softwares leitores de
telas.

<img src="/.../conta-corrente-home.jpg"
alt="imagem - O seu primeiro passo em direção às
facilidades que o Itaú oferece."  
title="imagem - O seu primeiro passo em direção
às facilidades que o Itaú oferece.">"

O atributo TITLE
serve mesmo para?

Em 99% das vezes apenas para
aumentar a verbosidade e
redundância...

Mestre SEO,
vc sabe?

simular elementos como
botões, links, menus do tipo select,
etc.

<div class="loginBtn”>"
<span class="btnSubmit">"
<img src=”icon-cadeado-btn.png” alt=“” />"
Acessar"
</span>"
</div>"

<div class="formLogin”>"
<div class="btnGroup btnPosLeft”>"
<span class="arrows"></span>"
<a class="btnSelect dropdownSelect clearfix"
id="linkfirst" href="#">Agência e Conta</a>"
<ul class="dropdownMenu”>"
<li><a href="#" id="agconta">Agência e Conta</
a></li>"
<li><a href="#" id="cartcred">Cartão de Crédito</
a></li>"
<li><a href="#" id="codop">Código Operador</a></
li>"
<li class="divider"></li>"
<li><a href="https://www.itau.com.br/mais-
acessos/" id="maisacessos">Mais acessos</a></li>"
</ul>"

<form name="banklineAgConta" method="POST"
action=”…”>"
<fieldset class="agencia_conta opened">"
..."
<input type="text" id="campo_agencia"
name="agencia" class="loginItau wAg" onFocus="if
(this.value=='Agência')this.value='';" onBlur="if
(this.value=='')this.value='Agência';"
value="Agência" />"
"
<input type="text" id="campo_conta"
class="loginItau wCc" onFocus="if
(this.value=='Conta')this.value='';" onBlur="if
(this.value=='')this.value='Conta';"
value="Conta" />"
..."

modal inacessível via teclado

um exemplo de modal acessível

http://webhipster.com/testing/
accessibility/modal-dialog-latest/

navegação

Algumas regiões navegáveis com Landmark ARIA:

•  banner – normalmente é utilizado como a região do cabeçalho do site,
onde são incluídos o logotipo, slogan, etc.

•  complementary – área complementar ao conteúdo principal da página,
por exemplo, a coluna a direita da página onde podem ser incluídos outros
conteúdos.

•  contentinfo - área que contém as informações sobre o site como, por
exemplo, copyright, privacidade, endereço e outras informações comuns
ao rodapé da página.

•  main – Conteúdo principal da página. Área coma conteúdo centrado no
assunto/tema da página Web.

•  navigation – área de navegação do site.

•  search – área com uma busca.

Navegação

Landmark ARIA:

<div role="banner"> [Conteúdo do cabeçalho] </div>
<div role="navigation"> [Navegação] </div>
<div role="search"> [Busca] </div>

<div role="main"> [Conteúdo principal] </div>
<div role="complementary"> [Conteúdo complementar]
</div>
<div role="contentinfo"> [Rodapé] </div>

Accessible Rich Internet Applications
ARIA NOW
HTML
4
+
ARIA
HTML5
+
ARIA

http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt

role="navigation"

role="navigation"

Links: identificação de destino
Recomendação 13.1 (Referência no WCAG 1.0):
Identifique claramente o alvo de cada link.
Recomendação 2.4 Navegável (Referência no
WCAG 2.0 – critério 2.4.4 Finalidade do link):
Fornecer formas de ajudar os usuários a navegar,
localizar conteúdos e determinar o local onde
estão.

“Clique aqui”, “Saiba mais”, “veja
Mais”… 41.700.000 respostas
para “clique aqui” no Google.

Links

Saída

acessível

Links

Link
no
9tulo
da
chamada

com
cara
de
link.

S

Se ao entrar no link o usuário for
desligado do site corrente.
- Links que abrem novos sites sem que o
usuário note que foi levado para outro site.

... <li>
<a href="http://.../serialization/">
<span lang="en">Building Accessible Websites</
span>.
<img src="novo_site.gif" alt="abre novo
site">
</a><br>
Excelente livro em inglês - versão digital.
</li> ...

Se ao entrar no link o usuário for
desligado do site corrente em
uma nova janela.
- Essa prática não é recomendada pelo
W3C.
Links que abrem em nova janela sem que o
usuário seja avisado.

... <li>
<a href="http://.../serialization/">
<span lang="en">Building Accessible Websites</
span>.
<img src="novo_site.gif" alt="novo site em
nova janela">
</a><br>
Excelente livro em inglês - versão digital.
</li> ...

Links para formatos diferentes
do HTML.
- Links para arquivos em PDF, DOC, XLS,
PNG, entre outros, sem a devida descrição
do tipo de arquivo que será baixado e seu
tamanho.

Quando não se tem ideia:
Clique aqui

Saiba mais

Continue lendo

Veja mais

Quando somos
surpreendidos:
Conheça a legislação

Leia o manual do produto

Quando falta informação:
Faça download da legislação

Baixe aqui o manual do produto

Sem surpresas!
Faça download da legislação (formato doc, 1.32 mb)

Baixe aqui o manual do produto (formato pdf, 2.47 mb)

Sem surpresas e poluição


Formato DOC - 1.32 Mb



Formato PDF - 2.47 Mb

Recomendações:
●  A informação pode estar escondida, mas deve aparecer quando
o elemento ganhar foco com o mouse ou teclado.
●  Informações relevantes não devem ser incluídas via atribulo
TITLE.

O Mundo ideal!
Baixe aqui o manual do produto (formato pdf, 2.47 mb)

Baixe aqui o manual do produto (formato doc, 2.84 mb)

Baixe aqui o manual do produto (formato html, 1.24 mb)

Baixe aqui o manual do produto (formato txt, 705 kb)

Mundo ideal sem poluição

Manual do produto

Selecione um formato q Baixar o Manual
PDF – tamanho 1.5 Mb

HTML – tamanho 0.7 Mb

TXT – tamanho 0.5 Mb

Outros erros

•  erros de Web Standards
•  iframe sem acessibilidade
•  tabela para layout

bases para o
desenvolvimento de
páginas acessíveis

Recomendações para acessibilidade
do conteúdo da Web 1.0 e 2.0 do W3C
WCAG Web Content Accessibility Guidelines

à WCAG 1.0 – 05 de maio de 1999
http://www.utad.pt/wai/wai-pageauth.html

à WCAG 2.0 – 11 de dezembro de 2008
http://www.ilearn.com.br/TR/WCAG20/

e-mag 3.0
Conteúdo baseado no WCAG 2.0,
entretanto mais simples, didático e
de fácil compreensão.

http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG

Validação de
Acessibilidade

Validação de Acessibilidade

à  Validação automática dos Padrões Web:
XHTML e CSS.

Validador W3C – HTML/XHTML
http://validator.w3.org/

Validador W3C – CSS
http://jigsaw.w3.org/css-validator/


à  Validação automática e semi-automática
de acessibilidade.

Da Silva
http://www.dasilva.org.br/

Access Monitor
http://www.acessibilidade.gov.pt/accessmonitor/

Lista de validadores indicados pelo WAI:
http://www.w3.org/WAI/ER/tools/complete

Avaliação humana por especialistas e usuários:
à  Aplicação de lista de verificação do WCAG por
um especialista.
à  Avaliação por usuários deficientes, experts em
acessibilidade.
à  Teste de acesso em diferentes ambientes,
condições, navegadores, sistemas.
à  Testes com dispositivos móveis e de
impressão.
à  Teste de usabilidade e acessibilidade com
usuários.

Clécio Bachini Horácio Soares
@cbachini @horaciosoares
11 2528-1521 21 9925-5404

Obrigado!

Frontend com Acessibilidade - FrontInSampa - Nov. 2012

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Frontend com Acessibilidade - FrontInSampa - Nov. 2012

Mais de Horácio Soares

Frontend com Acessibilidade - FrontInSampa - Nov. 2012