Nesse caso, é recomendável informar no texto do link que ele abrirá em uma nova janela, por exemplo: <a href="http://..." target="_blank">Nome do link <span>(abre em nova janela)</span></a> Desta forma o usuário saberá que será redirecionado para fora do site atual.

1. Clécio Bachini Horácio Soares
@cbachini @horaciosoares
11 2528-1521 21 9925-5404
frontend com
acessibilidade

2. sou um frontend...

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

4. Eu sou o
Bernard
De Luna

5. Então por que
preciso me
preocupar com
acessibilidade?

7. 1 o
leis de acessibilidade

8. Decreto Lei
nº 5.296 (dez/04)

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

10. proteção contra processos

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

12. Censo 2010

13. 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%).

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

15. parece, mas não é…

21. acessibilidade
para inglês ver.

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

23. 3 o
atender melhor todas as
pessoas…

24. acessibilidade pra quem cara pálida ?

25. Para pessoas com diferentes deficiências…

26. Marta e suas amigas…

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

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

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

30. além desses 5 grupos?

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

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

34. Como o Luli disse no Digitalks no Rio em 2012:
“Nesse mundo Mobile, somos
todos daltónicos e sofremos
do Mal de Parkinson”

38. “design for mobile people,...
...not for mobile device” Foto: Rosenfield Media

39. Todos nós na primeira experiência.
Um criança com camisa social e gravata em frente a um notebook

40. E finalmente,
o bilionário
cego!!!
Cifrão desenhado com
moedas douradas

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

42. 4 o
os benefícios…

43. Possibilidade de
atingir 100% do
público alvo;

44. atender melhor todas as pessoas

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

48. fidelizar clientes

49. mais fácil de usar e aprender

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

51. valorização da diversidade e
responsabilidade social.
http://pedagogiando.blogspot.com.br/2011/05/aprender-na-diversidade-e-conviver-com.html

52. vantagem
competitiva
Mulher com notebook em sinal de ok

53. melhoria da
qualidade.
Mãe e filha felizes na praia dando uma estrela

54. erros que devem ser
evitados pelos ninjas…

55. mitos = verdades

56. Comer chocolote a noite engorda

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

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

59. mitos
V

60. derrubando mitos sobre
acessibilidade web

61. acessibilidade Web não é difícil

62. nem caro…

63. muito menos limita a criatividade

64. ou torna seu site feio

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

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

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

70. performance

71. 291 Kb

72. 274 Kb

75. semântica

76. 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).

80. estrutura de cabeçalhos
exemplo da página interna
“Cartões”

82. H1

83. H1

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

85. H1
H2 H2 H2 H2
H2 H2
H2 H2 H2

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

87. navegação via teclado

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

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

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

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

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

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

96. navegação via teclado
• acesso rápido não funciona
corretamente nos tablets

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

98. navegação
Exemplo de salto visível com foco : http://webstanderds.org

99. navegação
Exemplo de salto visível com foco : http://webstanderds.org

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

101. textos com tamanho fixo e reduzido

102. links na home para
própria home

104. menu com imagens
semelhantes a banners

109. baixo contraste.

110. links e imagens sem descrição

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

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

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

117. Home do Itaú com as imagens desabilitadas

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

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

122. O atributo TITLE
serve mesmo para?
Em 99% das vezes apenas para
aumentar a verbosidade e
redundância...
Mestre SEO,
vc sabe?

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

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

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

127. form sem LABEL

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

130. modal inacessível via teclado

132. um exemplo de modal acessível
http://webhipster.com/testing/
accessibility/modal-dialog-latest/

133. uso landmarks
WAI/ARIA

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

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

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

138. role="navigation"
role="navigation"

139. Links

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

141. Links

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

144. Links
Saída
acessível

145. Links
Link
no
9tulo
da
chamada
com
cara
de
link.
S

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

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

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

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

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

151. Quando não se tem ideia:
Clique aqui
Saiba mais
Continue lendo
Veja mais

152. Quando somos
surpreendidos:
Conheça a legislação
Leia o manual do produto

153. Quando falta informação:
Faça download da legislação
Baixe aqui o manual do produto

154. Sem surpresas!
Faça download da legislação (formato doc, 1.32 mb)
Baixe aqui o manual do produto (formato pdf, 2.47 mb)

155. Sem surpresas e poluição
Faça download da legislação
Baixe aqui o manual do produto

156. Sem surpresas e poluição
Faça download da legislação
Formato DOC - 1.32 Mb
Baixe aqui o manual do produto

157. Sem surpresas e poluição
Faça download da legislação
Baixe aqui o manual do produto
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.

158. 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)

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

160. Outros erros
• erros de Web Standards
• iframe sem acessibilidade
• tabela para layout

162. bases para o
desenvolvimento de
páginas acessíveis

163. diretrizes de acessibilidade

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

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

166. Validação de
Acessibilidade

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

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

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

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

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

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

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

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

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