frontend com acessibilidade - frontinsampa - nov. 2012

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

sou um ninja

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

Eu sou o Bernard De Luna

Então por que

preciso me preocupar com acessibilidade?

1o

leis de 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.

proteção contra processos

2o servir um público que não é atendido e que é maior

do que se espera…

Censo 2010

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?

parece, mas não é…

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.

3o atender melhor todas as

pessoas…

acessibilidade pra quem cara pálida ?

Para pessoas com diferentes deficiências…

Marta e suas amigas…

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:

além desses 5 grupos?

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”

“design for mobile people,...

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

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

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

4o os benefícios…

Possibilidade de atingir 100% do

público alvo;

atender melhor todas as pessoas

Comercial Mercado Livre

2011

“Eu compro o

que quiser, senão quiser, não compro”

Comercial do Mercado

Livre 2011

fidelizar clientes

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

Mulher com notebook em sinal de ok

vantagem competitiva

melhoria da qualidade.

Mãe e filha felizes na praia dando uma estrela

erros que devem ser evitados pelos ninjas…

mitos = verdades

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

mitos

V

derrubando mitos sobre acessibilidade web

acessibilidade Web não é difícil

nem caro…

muito menos limita a criatividade

ou torna seu site feio

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.

performance

291 Kb

274 Kb

semântica

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

baixo contraste.

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

form sem LABEL

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

modal inacessível via teclado

um exemplo de modal acessível

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

uso landmarks WAI/ARIA

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

S

Links

Link no 9tulo da chamada com cara de link.

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 Faça download da legislação


Sem surpresas e poluição

Faça download da legislação


Formato DOC - 1.32 Mb

Sem surpresas e poluição Faça download da legislação


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

Outros erros

•  erros de Web Standards

•  iframe sem acessibilidade

•  tabela para layout

bases para o

desenvolvimento de

páginas acessíveis

diretrizes de acessibilidade

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

à 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 Monitorhttp://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.

Horácio Soares @horaciosoares

21 9925-5404

Outubro de 2012 – São Paulo!

Obrigado!

Clécio Bachini @cbachini

11 2528-1521

frontend com acessibilidade - frontinsampa - nov. 2012

Technology