Webinar: Acessibilidade Web para desenvolvedores

Agosto 2012

horacio@digitalacesso.comhoracio.soares@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ção2)Salto visível com foco http://webstanderds.org

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.

Validador W3C – HTML/XHTMLhttp://validator.w3.org/

Validador W3C – CSShttp://jigsaw.w3.org/css-validator/

Validação de Acessibilidade

Validação automática e semi-automática de acessibilidade.

Da Silvahttp://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

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

horacio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares

Horácio Soares

Obrigado!