Upload
horacio-soares
View
7.367
Download
4
Embed Size (px)
DESCRIPTION
Apresentação realizada em parceria com Clécio Bachini, no FrontinSampa, dia 3 de novembro de 2012. Utilizamos o novo site do Itaú como estudo de caso de acessibilidade.
Citation preview
Outubro de 2012 – São Paulo!
frontend com
acessibilidade
Horácio Soares @horaciosoares
21 9925-5404
Clécio Bachini @cbachini
11 2528-1521
sou um ninja
http://www.slideshare.net/fullscreen/bernarddeluna/quero-ser-um-ninja-em-xhtml-html5-e-css3/3
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%).
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.
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.
Copyright © 2009. World Wide Web Foundation. All rights reserved 29
Disabilities
Low literacy
Literate in poorly-supported languages
The Web is not fully accessible to perhaps 2 billion, including people with …
Little experience with technology
Challenges due to aging
Five groups of people for whom Web accessibility can be challenging:
Gabriel, linguagem em desenvolvimento...
Gabriel compenetrado, olhando para o monitor e clicando com o mouse.
Agora ele está olhando e brincando como teclado.
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”
Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto.
Dilbert fazendo parte do logotipo do Google e falando “eu não posso ver”.
Comercial Mercado Livre
2011
“Eu compro o
que quiser, senão quiser, não compro”
Comercial do Mercado
Livre 2011
valorização da diversidade e
responsabilidade social.
http://pedagogiando.blogspot.com.br/2011/05/aprender-na-diversidade-e-conviver-com.html
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).
estrutura de cabeçalhos
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.
navegação via teclado
• as subopções do menu principal não estão disponíveis via
teclado, pois são dependentes de mouse para aparecerem.
navegação via teclado
• 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.
navegação via teclado
• elementos somem ao navegar via teclado
obs: inicialmente, a página inicial tinha seu design desconfigurado
quando acessada apenas via teclado.
navegação 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.
navegação via teclado
• o menu no rodapé e o botão com “acesso rápido” podem passar desapercebidos dos usuários.
navegação via teclado
• 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.
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
<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>"
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?
<div class="loginBtn”>" <span class="btnSubmit">" <img src=”icon-cadeado-btn.png” alt=“” />" Acessar" </span>"</div>"
<div class="loginBtn”>"<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>"</div>""
<div class="loginBtn”>"<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" />"..."
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
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.
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.
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
Faça download da legislação
Baixe aqui o manual do produto
Formato DOC - 1.32 Mb
Sem surpresas e poluição Faça download da legislação
Baixe aqui o manual do produto
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.
Formato PDF - 2.47 Mb
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
Baixar o Manual
PDF – tamanho 1.5 Mb
HTML – tamanho 0.7 Mb TXT – tamanho 0.5 Mb
Selecione um formato q
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/
Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3C
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
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.