Embed Size (px)
DESCRIPTION
Apresentação utilizada no Webinar do iMastersPRO dia 23 de agosto de 2012
Citation preview
Agosto 2012
[email protected]@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
Horácio Soares
Acessibilidade me lembra?
Acessibilidade para quem?
Todos nós...
Quem mais sofre com a falta de
acessibilidade?
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 11
Disabilities
Low literacy
Literate in poorly-supported languages
The Web is not fully accessible toperhaps 2 billion, including people with …
Little experience with technology
Challenges due to aging
Five groups of people for whom Web accessibility can be challenging:
E 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, somostodos 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”.
Estatísticas no Brasil
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.
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%).
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.
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?
E os benefícios?
Possibilidade de atingir 100% do
público alvo;
Atender melhor todas as pessoas
Homem de terno comemorando
Fidelizar clientes
Mais fácil de usar e aprender
Proteção contra processos pela falta da
acessibilidade
Visualizar os benefícios da acessibilidade
Manutenção mais
rápida e barata,
melhor
performance…
Valorização da
Diversidade e
Responsabilidade Social.
Mãos entrelaçadas
Mulher com notebook em sinal de ok
Vantagemcompetitiva
Melhoria daqualidade.
Mãe e filha felizes na praia dando uma estrela
Um caminho para acessibilidade vem da busca pelas melhores
IDADES
IDADES?
Acessibil
IDADE}
Acessibil
Usabil
IDADE}
Comercial Mercado Livre
2011“Eu compro o
que quiser, senão quiser, não compro”
Comercial do Mercado Livre 2011
AcessibilUsabil
Simplic
IDADE}
ESPN Brasil– abril 2010
ESPN Brasil– abril 2010
X
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…
AcessibilUsabil
Simplic
InterativIDADE}
AcessibilUsabil
SimplicInterativ
Veloc IDADE}
X
XX
10 princípios de UX do Google
Princípio 2 - cada milisegundo importa.
Melhor definição de milisegundo?
AcessibilUsabil
SimplicInterativ
Veloc
EncontrabilIDADE}
AcessibilUsabil
SimplicInterativ
VelocEncontrabil
Atrativ
IDADE}
10 princípios de UX do Google
Princípio 8 – agrade aos olhos sem distrair a mente
AcessibilUsabil
SimplicInterativ
VelocEncontrabil
Atrativ
Util
IDADE}
10 princípios de UX do Google
Princípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação e identificação de um problema...
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
AcessibilUsabil
SimplicInterativ
VelocEncontrabil
AtrativUtil
Facil
IDADE}
AcessibilUsabil
Simplic
AcessibilUsabil
SimplicInterativ
VelocEncontrabil
AtrativUtil
Facil
Portabil…
IDADE}
InvestigaçãoObservaçãoColaboração
AnáliseAvaliaçãoValidação
A melhor idade vem da: }
By Erico Fileno
Diretrizes de acessibilidade
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 2008http://www.ilearn.com.br/TR/WCAG20/
Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3C
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
EMAG 3.0
Iniciativas de
Acessibilidade
Imagem de bonecos representando pessoas de mãos dadas .
W3C – WAIWeb Accessibility Initiative
1.WCAG (Web Content Accessibility Guidelines) recomendações para acessibilidade do conteúdo da Web.
2.UAAG3.ATAG 4.ARIA
W3C – WAIWeb Accessibility Initiative
1.WCAG2.UAAG (The User Agent Accessibility
Guidelines) diretrizes de acessibilidade para navegadores e tecnologias assistivas.
3.ATAG 4.ARIA
W3C – WAIWeb Accessibility Initiative
1.WCAG2.UAAG3.ATAG (Authoring Tool Accessibility
Guidelines) ferramentas de criação de páginas/conteúdo Web.
4.ARIA
W3C – WAIWeb Accessibility Initiative
1.WCAG2.UAAG3.ATAG4.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.
Obs.: Deve ser fornecido um equivalente textual para a imagens. A descrição deve ser a
melhor e menor possível.
Imagens
<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>
Imagens e links
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
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.
Links
“Clique aqui”, “Saiba mais”, “vejaMais”… 41.700.000 respostaspara “clique aqui” no Google.
Links
Saída acessível
S
Links
Link no título da chamada com cara de link.
S
Links
Title aplicado ao 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çãoFaça download da legislação
Baixe aqui o manual do produto
Sem surpresas e poluiçãoFaça download da legislação
Baixe aqui o manual do produto
Formato DOC - 1.32 Mb
Sem surpresas e poluiçãoFaç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. Essa recomendação não é válida para MOBILE.
● 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 produtoPara baixar:
Baixar o Manual
PDF – tamanho 1.5 Mb
HTML – tamanho 0.7 Mb
TXT – tamanho 0.5 Mb
Selecione um formato
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 tecnologias assistivas.
Visão do inferno
<a href=“javascript:meuFruFruFavorito();” style=“color:#900;”>Clique aqui!!!</a>
E esse exemplo não é dos piores...
Mundo (quase) idealHTML<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>CSS#frufru{
color:#900;}JavaScriptvar 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
IdiomaIdentificar 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. Recomendação 3.1 (Referência no WCAG 2.0) : 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.)
- Contraste insuficiente
Baixo contraste.
Baixo contraste e informações com foco em cores
CAPTCHA
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
Semântica
Validação automática não garante uma boa semântica
Navegação
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
Recomendação 2.4 Navegável (Referência no 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
1)Salto visível
NavegaçãoAtalhos para principais áreas do site
Recomendação 9.5 (Referência no WCAG 1.0): Providencie teclas de atalho para links importantes.
Recomendação 2.4 Navegável (Referência no 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
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 tecnologias assistivas.
- 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:
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).
Recomendação 2.4 Navegável (Referência no WCAG 2.0): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão.
NavegaçãoAlgumas 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.
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 principal] </div>
<div role="contentinfo"> [Rodapé] </div>
Accessible Rich Internet Applications
ARIA NOWHTML 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 menuhttp://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" />...
Erro ao utilizar REFRESH
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.
Recomendação 2.1 (Referência no WCAG 2.0) : Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado.
Recomendação 3.2 (Referência no WCAG 2.0) : Previsível: 3.2.1 Em Foco: Quando um componente recebe o foco, ele não inicia uma alteração de contexto.
Utilizar o evento onChange em combos (menus 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.
Utilizar o evento onChange em combos (menus 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
Formulários Fieldset
-<form action="blabla.htm">-<fieldset>
-Nome <input type="text"><br>-Endereço <input type="text">
-</fieldset>-</form>
Formulários legend
-<form action="blabla.htm">-<fieldset> <legend>Dados Pessoais</legend>
-Nome <input type="text"><br>-Endereço <input type="text">
-</fieldset>-</form>
Formulários label
- <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>- </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>
Formulários optgroup
TabelasUso 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<table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"><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<table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>Vendas de bananas - 1o. semestre</caption><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<table summary="Vendas de bananas no primeiro trimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>Vendas de bananas - 1o. semestre</caption><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>
Performance
http://www.websiteoptimization.com/services/analyze/
Portal Brasil GTMETRIX: http://gtmetrix.com
MODALinacessível…
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/accessibility/modal-dialog-latest/
Players de vídeo e áudio.
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.
Validação de Acessibilidade
Validação automática e semi-automática de acessibilidade.
Access Monitorhttp://www.acessibilidade.gov.pt/accessmonitor/
Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
Validação de Acessibilidade
Avaliação automática de contraste.
Teste de contraste http://www.vischeck.com/vischeck/ (teste de imagens e sites)
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.
Para onde caminha a
acessibilidade
HTML5WAI ARIA
MultimídiaMobileTouch
[email protected]@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
Horácio Soares
Obrigado!
