Webinar: Acessibilidade Web para desenvolvedores

Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

Quem mais sofre com
a falta de
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.

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

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.

Estatística: segundo IBGE no
Brasil (2000)

180 milhões de habitantes;

24,3 milhões de pessoas com deficiência;

15 milhões de pessoas com mais de 65 anos;

5,4 milhões de pessoas com mais de 65 anos e que já
possuem alguma deficiência.

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

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.

Como anda a acessibilidade
digital no Brasil?

Motivação pelo
decreto de lei 5296

Resultado: acessibilidade para
inglês ver.

Estatísticas do W3C

2,5% em 2010

5% em 2011

Sem erros de validação
automática de HTML, CSS e
acessibilidade.

Acessibilidade Web

E quais são os custos?

• Curva de aprendizagem
• Alto custo no redesign
• Baixo em novos projetos
• Diminui com tempo
• Validação
• Manutenção
• Melhoria contínua
• Mudança de cultura

Qual é o custo da
qualidade?

Possibilidade de
atingir 100% do
público alvo;

Atender melhor todas as pessoas

Fidelizar clientes

Homem de terno comemorando

Mais fácil de usar e aprender

Proteção contra
processos pela falta da
acessibilidade

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

Visualizar os benefícios
da acessibilidade

Valorização da
Diversidade e
Responsabilidade
Social.

Mãos entrelaçadas

Vantagem
competitiva

Mulher com notebook em sinal de ok

Melhoria da
qualidade.

Mãe e filha felizes na praia dando uma estrela

Um caminho para acessibilidade
vem da busca pelas melhores
IDADES

}
Acessibil
Usabil

IDADE

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

}
Acessibil
Usabil
Simplic

IDADE

10 princípios de UX do Google

Princípio 3. O simples é poderoso.

Em uma interface perfeita para as
pessoas, elas nunca deveriam errar,
principalmente no mundo mobile…

}
Acessibil
Usabil
Simplic
Interativ
IDADE

}
Acessibil
Usabil
Simplic
Interativ
Veloc IDADE


Princípio 2 - cada milisegundo importa.

Melhor definição de milisegundo?

}
Acessibil
Usabil
Simplic
Interativ
Veloc
IDADE
Encontrabil

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ


Princípio 8 – agrade aos olhos sem
distrair a mente

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util


Princípio 1 – foque nas pessoas: suas
vidas, trabalho, sonhos.

Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012

Observação e identificação de
um problema...

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util
Facil

}
Acessibil
Usabil
Simplic
Interativ
Veloc
Encontrabil
IDADE
Atrativ
Util
Facil
Portabil
…

A melhor idade vem da:

}
Investigação
Observação
Colaboração
Análise
Avaliação
Validação

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
Em português:
http://www.utad.pt/wai/wai-pageauth.html

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

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

W3C – WAI
Web Accessibility Initiative
1.WCAG (Web Content Accessibility
Guidelines) recomendações para
acessibilidade do conteúdo da Web.
2.UAAG
3.ATAG
4.ARIA

Imagem de bonecos representando pessoas de mãos dadas .

W3C – WAI
1.WCAG
2.UAAG (The User Agent Accessibility
Guidelines) diretrizes de
acessibilidade para navegadores e
tecnologias assistivas.
3.ATAG
4.ARIA

W3C – WAI
1.WCAG
2.UAAG
3.ATAG (Authoring Tool Accessibility
Guidelines) ferramentas de criação
de páginas/conteúdo Web.
4.ARIA

W3C – WAI
1.WCAG
2.UAAG
3.ATAG
4.ARIA (Accessible Rich Internet
Applications) Aplicações Internet
Ricas e Acessíveis.

Principais barreiras de
acessibilidade

Imagens

Recomendação 1.1 Alternativas em Texto
(Referências no WCAG 1.0 e WCAG 2.0) :
Fornecer alternativas em texto para qualquer
conteúdo não textual.

Imagens

Obs.: Deve ser fornecido um equivalente textual
para a imagens. A descrição deve ser a
melhor e menor possível.

Imagens e links

<a href=¨#¨> </a>

Imagens e links

<a href=¨#¨>
<img src='http://[…]xxx.jpg'

alt=“70 Anos de Pelé – fotos e vídeos”
width='XXX' height='XXX' />

</a>

Imagem com descrição ineficiente

Banner do MCA - Módulo Criança e Adolescente
onde a descrição da imagem é apenas a sigla
“MCA”.

Elementos sem descrição textual
adequada (imagens, flash, etc.)

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 título da chamada
com cara de link.

S

Links

Title aplicado ao 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. Essa recomendação não é válida para
MOBILE.
●
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
Para baixar:

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

HTML – tamanho 0.7 Mb
TXT – tamanho 0.5 Mb

Links dependentes de script

Recomendação 6.3 (Referência no WCAG 1.0
) : Certifique-se que as páginas são acessíveis
e usáveis mesmo quando as tecnologias
utilizadas não são suportadas ou se
encontram desligadas.
Recomendação 4.1 (Referência no WCAG 2.0
) : Maximizar a compatibilidade com atuais e
futuros agentes de usuário, incluindo

Visão do inferno
<a href=“javascript:meuFruFruFavorito();”
style=“color:#900;”>
Clique aqui!!!
</a>

E esse exemplo não é dos piores...

Mundo (quase) ideal
HTML
<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>
CSS
#frufru{
color:#900;
}
JavaScript
var frufru = document.getElementById(‘frufru’);
function meuFruFruFavorito() {
[codigo]
}
frufru.onclick = meuFruFruFavorito;
frufru.onkeypress = meuFruFruFavorito;

Links e campos de formulários que não
se parecem como tal.

Design pesado e com poucos espaços
entre elementos.

Uso de tecnologias em desuso e pouco
acessívels

Idioma
Identificar claramente quaisquer
mudanças na linguagem natural do
texto ou equivalentes textuais.
Recomendação 4.1 (Referência no WCAG 1.0) :
Identifique claramente alterações ocorridas no
idioma do texto do documento e em qualquer
equivalente textual.
Legível: Tornar o conteúdo de texto legível e
compreensível - 3.1.2 Linguagem das Partes.

Idioma
<ul class="topo_idioma">
<li><a href="http://www.xyz.com/en/">
<span Lang="en"> English </span>
</a></li>
<li>
<li><a href="http://www.xyz.com/es/">
<span Lang="es"> Español </span>
</a></li>
<li>...
</ul>

- Uso de aspectos de
apresentação para veicular
informação (cores, disposição
na página, etc.)

Baixo contraste e informações com foco
em cores

CAPTCHA

caPTcHa
Imagem: http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wilder

Captcha http://sam.zoy.org/pwntcha/

Captcha
(solução inacessível e insegura)

(http://www.webvisum.com/en/main/download)

CAPTCHA and BBC iD
http://www.bbc.co.uk/blogs/bbcinternet/2010/10/captcha_and_bbc_id.html

CAPTCHA, herói ou vilão?

http://acessodigital.net/art_captcha-heroi-ou-vilao.html

Semântica
Validação automática não
garante uma boa semântica

Navegação
1) Semântica:
Headers: <H1>...<H6>
Parágrafos: <p>texto</p>
Listas: <ul><ol><dl>
Tabelas: <table>...</table>
Formulários: <form>...</form>

Navegação
WCAG 2.0): Fornecer formas de ajudar os
usuários a navegar, localizar conteúdos e
determinar o local onde estão. - 2.4.1 Ignorar
Blocos: Disponibilizar um mecanismo para ignorar
blocos de conteúdo que são repetidos.

Navegação
O primeiro elemento ativo da página deve ser
um link (salto) que nos permita alcançar
diretamente o conteúdo principal.

<a href=”#conteudo” class=”salto”>
Salto para conteúdo
</a>

<h2><a name=”conteudo” id=”conteudo”>
Título do H2
</a>
</h2>
<a name=”conteudo” id=”conteudo”></a>

Navegação
2)Salto visível com foco
http://webstanderds.org

Navegação
Atalhos para principais áreas do site

Recomendação 9.5 (Referência no WCAG 1.0):
Providencie teclas de atalho para links
importantes.
determinar o local onde estão. - 2.4.1 Ignorar
Blocos: Disponibilizar um mecanismo para
ignorar blocos de conteúdo que são repetidos.

Navegação
São três os tipos de teclas de atalho na Web:

- teclas de atalho dos navegadores: como não há uma
padronização entre eles, cada browser tem seu
próprio grupo de atalhos.

- teclas de atalho próprias aos leitores de tela e outras

- teclas de atalhos próprias ao site.

Navegação
<a href="pesquisa.html" title="tecla de
atalho [1] para pesquisa"
ACCESSKEY="1">
Pesquisa [1]
</a>

Navegação
Navegação e orientação:
determinar o local onde estão.

Para facilitar a navegação pelas diferentes áreas do site, é
recomendada a divisão da página em regiões navegáveis
diretamente com leitores de tela. Para tal sugerimos a
utilização de ARIA Landmark Roles:
http://www.w3.org/TR/wai-aria/roles#landmark_roles ,
- É um recurso já implementado em 2 leitores de tela usados no
Brasil - Jaws (muito usado) e NVDA (aberto e gratuito).

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 com conteúdo centrado
no assunto/tema da página Web.
navigation – área de navegação do site.

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
principal] </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

Navegação pelo teclado - barreiras:
dropdown

Keyboard Accessibility for Web Applications
http://snook.ca/archives/accessibility_and_usability/keyboard-accessibility-for-web-apps

Menu DropDown
O Professor Maurício Samy Silva, em seu livro
Construindo sites com CSS e (X)HTML, propõe
uma solução para um menu em cascata acessível
via teclado:

http://livrocss.com.br/cap_09/arquivo_9.24-a.html

Menu expansível

Tutorial - Accessible expanding and collapsing menu
http://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/

Erro ao utilizar REFRESH

Recarregar a página automáticamente:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh"
content="300" />
...

Utilizar o evento onChange em combos (menus
de seleção)

Recomendação 8.1 (Referência no WCAG 1.0) : Criar
elementos de programação, tais como programas
interpretáveis e applets, diretamente acessíveis pelas
tecnologias de apoio ou com elas compatíveis.
Acessível por Teclado: Fazer com que toda a
funcionalidade fique disponível a partir do teclado.
Previsível: 3.2.1 Em Foco: Quando um componente
recebe o foco, ele não inicia uma alteração de contexto.

de seleção)

Quando um usuário com deficiência visual ou motora
(que usa o teclado para navegar) utiliza o evento
onchange num menu select (combo box), a primeira
opção é selecionada automaticamente sem que o
usuário a tenha escolhido, antes que o usuário possa
conhecer as opções disponíveis.

de seleção)

Eevento onChange em combos
Solução 1: Retirar o evento onchange, permitindo assim a
navegação via teclado pelas opções da combo box. Para
confirmar a seleção do item, deve ser disponibilizado um
submit (botão de Ok).

Formulários  Fieldset

- <form action="blabla.htm">
- <fieldset>
- Nome <input type="text"><br>
- Endereço <input type="text">
- </fieldset>
- </form>

Formulários  legend

- <fieldset>
<legend>Dados Pessoais</legend>
- Nome <input type="text"><br>
- Endereço <input type="text">
- </fieldset>
- </form>

Formulários  label

- <fieldset>
<legend>Dados Pessoais</legend>
- <label for=“non">
Nome <input type="text" id=“non">
- </label>
- <label for=“end">
Endereço <input type="text“id=“end">
- </label>
- </fieldset>
- </form>

<form action="blabla.htm">
- <fieldset>
- <legend>Dados Pessoais</legend>
- <label for="non">
- Nome <input type="text" id="non">
- </label>
- <label for="end">
- Endereço <input type="text" id="end">
- </label>
- <fieldset><legend>Sexo</legend>
- <label for="m"><input type="radio" name="g" id="m">Masculino</label>
- <label for="f">
- <input type="radio" name="g” id="f">Feminino</label>
- </fieldset>
- </fieldset>
- </form>

Formulários  optgroup
<form id="form" method="post" action=""><p>
<label for="lista-de-mercado">
Lista de Mercado:<br />
<select name="select" id="lista-de-mercado">
<option selected="selected" value="1">
Escolha um item</option>
<optgroup label="Laticíneos">
<option value="2">Leite desnatado</option>
<option value="3">Queijo ralado</option>
<option value="4">Queijo prato</option>
</optgroup>
<optgroup label="Verduras">
<option value="6">Alface</option>
<option value="7">Alho</option>
</optgroup>
</select>
</label>
</form>

Tabelas
Uso errado dos elementos HTML como
tabelas e DIVs.
Recomendação 5.3. (Referência no WCAG 1.0):
Não use tabelas para layout (disposição de páginas)
a não ser que a tabela faça sentido quando
linearizada.
Recomendação 1.3 Adaptável (Referência no
WCAG 2.0 – critério 1.3.2 Sequência com
Significado): Criar conteúdos que possam ser
apresentados de diferentes maneiras sem perder
informação ou estrutura.

Tabelas
<table>
<tr>
<td>Janeiro</td>
<td>Fevereiro</td>
<td>Março</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>25</td>
</tr>
</table>

Tabelas - summary
<table summary="Vendas de bananas no primeiro
trimestre 2011 - tabela com 2 linhas e 3 colunas">
<tr>
<td>Janeiro</td>
<td>Fevereiro</td>
<td>Março</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>25</td>
</tr>
</table>

Tabelas - caption
<caption>Vendas de bananas - 1o. semestre</caption>
<tr>
<td>Janeiro</td>
<td>Fevereiro</td>
<td>Março</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>25</td>
</tr>
</table>

Tabelas – id/headers
<tr>
<th id=“jan">Janeiro</th>
<th id=“fev">Fevereiro</th>
<th id=“mar">Março</th>
</tr>
<tr>
<td headers=“jan">10</td>
<td headers=“fev">15</td>
<td headers=“mar">25</td>
</tr>
</table>

Tabelas – scope/col/row
<tr>
<th scope=“col”>Janeiro</th>
<th scope=“col”>Fevereiro</th>
<th scope=“col”>Março</th>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>25</td>
</tr>
</table>

http://www.websiteoptimization.com/services/analyze/

Portal Brasil  GTMETRIX: http://gtmetrix.com

Mudança de foco
(lightbox e lightwindows)

 Mudanças de foco causam desorientação e problemas
de navegação.
 Usuários não tem a menor idéia de como achar o novo
conteúdo atualizado.
 As mudanças de foco impedem que usuários tenham
uma visão completa da página.

- Building a Better Lightbox
(recomendações de usabilidade)
http://www.habdas.org/2009/03/29/building-a-better-lightbox/

Modal acessível
(prática)

http://webhipster.com/testing/accessibi
lity/modal-dialog-latest/

Principais barreiras de acessibilidade em vídeo:
• Os controles do player de vídeo são
inacessíveis pelo teclado.
• Os controles do player de vídeo podem ser
acessados pelo teclado, mas não
apresentam rótulos adequados.
• Os vídeos incluídos diretamente na página,
com o uso de um player externo, começam a
tocar assim que a página é carregada.
• ramente sobre esta função..

• Os vídeos não possuem audiodescrição.
• Os vídeos não possuem legendas.
• Os vídeos não possuem legenda oculta
("closed caption").
• Os vídeos não possuem transcrição.
• Quando um vídeo é disponibilizado para
download, o respectivo link não informa
claramente sobre esta função..

Validação de
Acessibilidade

Globo em ambiente futurista.

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 automática de contraste.

Teste de contraste
http://www.vischeck.com/vischeck/ (teste de imagens e sites)

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.

Para onde caminha a
acessibilidade

HTML5
WAI ARIA
Multimídia
Mobile
Touch

Obrigado!

Horácio Soares
horacio@digitalacesso.com
horacio.soares@internativa.com.br
facebook.com/internativabrasil
(21) 9925-5404 - @horaciosoares

Webinar: Acessibilidade Web para desenvolvedores

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Webinar: Acessibilidade Web para desenvolvedores

Similar to Webinar: Acessibilidade Web para desenvolvedores (20)

More from Horácio Soares

More from Horácio Soares (19)

Webinar: Acessibilidade Web para desenvolvedores