Seu site pode estar em concordância com padrões, mas ainda estar inacessível

Vale lembrar que...

Seu site pode estar tecnicamente acessível, mas ainda funcionalmente inacessível

Vale lembrar que...

Acessibilidade > Compatibilidade

Vale lembrar que...

Diversidade de habilidades

• Deficiência visual, auditiva, motora/física, de fala, cognitiva ou neuronal
• Deficiências relacionadas com a idade
• Deficiências múltiplas
• Condições de saúde
• Alteração de habilidades
• Deficiências temporárias
• Limitações situacionais

Diversidade de habilidades

Entender estas diferenças permite compreender melhor como aplicar as técnicas.

Exemplos de barreiras e soluções

Barreira

Conteúdo em áudio, como vídeos, sem legendas ou transcrições.

Solução

Transcrição ou legenda de conteúdo audível; controles de execução de mídia com legenda e opções de ajustar tamanho e cores da legenda.

Deficiência auditiva

Fonte: http://www.w3.org/WAI/intro/people-use-web/diversity

Exemplos de barreiras e soluções

Barreira

Navegação complexa e layout difícil de entender.

Longas passagens de texto sem imagens ou gráficos.

Solução

Diferentes formas de navegação, seja através de um menu hierárquico ou opções de busca.

Texto simples complementado com imagens, gráficos e ilustrações.

Deficiência cognitiva ou neuronal

Fonte: http://www.w3.org/WAI/intro/people-use-web/diversity

Exemplos de barreiras e soluções

Barreira

Imagens, controles e outros elementos estruturais que não possuem equivalente textual.

Falta de pistas visuais e não-visuais de orientação, estrutura da página e outros auxílios à navegação.

Solução

Deficiência visual

Fonte: http://www.w3.org/WAI/intro/people-use-web/diversity

Relembrando os 4 princípios e as 12 recomendações

1 Perceptível

1.1 Alternativas em Texto: Fornecer alternativas textuais para qualquer conteúdo não textual, para que possa ser transformado em outras formas de acordo com as necessidades dos usuários, tais como impressão com tamanho de fontes maiores, braille, fala, símbolos ou linguagem mais simples.

1.2 Fornecer alternativas para mídias baseadas em tempo

1.3 Criar conteúdo que pode ser apresentado de diferentes maneiras (por exemplo, um layout simplificado) sem perder informação ou estrutura

1.4 Facilitar a audição e a visualização de conteúdo aos usuários, incluindo a separação entre o primeiro plano e o plano de fundo

2 Operável

2.1 Fazer com que toda funcionalidade fique disponível a partir de um teclado

2.2 Fornecer aos usuários tempo suficiente para ler e utilizar o conteúdo

2.3 Não criar conteúdo de uma forma conhecida por causar convulsões

2.4 Fornecer maneiras de ajudar os usuários a navegar, localizar conteúdos e determinar onde se encontram

3 Compreensível

3.1 Tornar o conteúdo de texto legível e compreensível

3.2 Fazer com que as páginas web apareçam e funcionem de modo previsível

3.3 Ajudar os usuários a evitar e corrigir erros

4 Robusto

4.1 Maximizar a compatibilidade entre os atuais e futuros agentes de usuário, incluindo tecnologias assistivas

Trabalhando contraste

Alto Contraste  

≠

Cores invertidas ou esquema preto e branco

Site: http://emag.governoeletronico.gov.br/

Alt vs. longdesc

• Alt é sempre necessário
  • Descrever a imagem de forma relevante
  • Alt pode ser vazio (ex.: " "), nunca nulo
  • Imagens decorativas: CSS
  • A descrição depende do contexto

• Use longdesc quando
  • Tiver uma tabela ou infográfico que não pode ser descrito no alt

Texto alternativo

• O texto alternativo deve:
  • Apresentar o conteúdo e a função da imagem;
  • Ser sucinto.

• O texto alternativo não deve:
  • Ser redundante;
  • Usar expressões como "Foto de…", "imagem de…", “Link para...” ou “Clique aqui...”.

Texto alternativo

• O botão de busca com o desenho de uma lupa

• O texto alternativo deve ser "Buscar" e não "Lupa"

<img src="lupa.jpg“ alt="Buscar">

Como descrever animações?

• Animações simples podem ter uma descrição na própria página, antes ou depois da animação;

• Animações complexas poderão precisar de uma página auxiliar para descrever a animação.

Links

• Identificar claramente o destino de cada link;

• Links que remetem a destinos diferentes devem ter descrições diferentes;

• Em links de arquivos para download, é necessário informar a extensão e o tamanho do arquivo no próprio texto do link.

Links

Não use: “clique aqui”, “leia mais”, “mais”, “saiba mais”, “veja mais”, “acesse a lista”

Muitos usuários de leitores de tela navegam por links, tornando descrições como “Clique aqui”, “Veja mais” insuficientes para o usuário saber o destino do link, ou localizá-lo na página.

Exemplo incorreto:

Clique aqui para saber mais a respeito de acessibilidade. 

Exemplo correto:

Saiba mais a respeito de acessibilidade.

Exemplo incorreto:

Exemplo correto:

<a href="portfolio.html" title="Portfólio">Portfólio</a>

<a href=" portfolio.html" title="Alguns de meus trabalhos">Portfólio</a>

Scripts

• Observe sempre se aquilo que você consegue fazer com o mouse também consegue fazer usando apenas o teclado

• As ações de eventos devem acontecer independente do dispositivo

• As páginas devem ser acessíveis, mesmo que o JavaScript esteja desabilitado

Eventos

• onMouseOver - onFocus
• onMouseOut - onBlur
• OnKeyDown – onMouseDown
• OnKeyUp – onMouseUp
• OnKeyPress - onClick

• Não use double click!

A função do WAI-ARIA

Estender a semântica de elementos HTML para fornecer informações adicionais sobre o estado e as propriedades destes elementos.

A função do WAI-ARIA

Permite que o usuário que usa leitor de tela consiga saber o que estes elementos significam e como interagir com eles.

A função do WAI-ARIA

Acessible Rich Internet Application

RIA: elementos com interação rica e dinâmica

Quais elementos?

• Abas

• Sliders

• Menus

• Árvores

• Accordion

• Elementos de arrasta e solta

• Carousel

aria-invalid

• Use este estado para marcar quando um campo possui uma entrada válida ou inválida de dados;

• Pode inserir dinamicamente via JavaScript usando em conjunto com o aria-live em caso de validação em tempo real;

• Ainda pode ajudar na estilização dos campos.

aria-invalid

input[aria-invalid=true] {
    border: 2px solid #F00;
    color: #F00;
}

Use aria-labelledby para identificar regiões da página

<p role="complementary" aria-labelledby="hdr1">
 <h1 id="hdr1">
   Últimas Notícias
 </h1>
</p>

Use aria-labelledby também para rótulos de formulários

<label id="labelNome">Nome:</label>
// Grupo de inputs que podem usar o mesmo rótulo
<input type="text" id="primeiroNome" aria-labelledby="labelNome" />
<input type="text" id="sobrenome" aria-labelledby="labelNome" />

O <label for=”id do controle”> permite somente uma associação 1:1, enquanto o aria-labelledby aplicado no input permite uma associação n:m, onde n é a quantidade de rótulos e m de inputs

Use aria-labelledby também para rótulos de formulários

Text

Text

Text

Text

Text

Text

<label id="labelNome">Nome</label>
// Grupo de inputs que podem usar o mesmo rótulo
<input type="text" id="nome1" aria-labelledby="labelNome" />
<input type="text" id="nome2" aria-labelledby="labelNome" />

Use aria-labelledby também para rótulos de formulários

Maria (id="labelMaria")

Text

Text

<input type="text" id="fone1" aria-labelledby="labelMaria labelFone" />
<input type="text" id="fone2" aria-labelledby="labeJoao labelFone" />

Joao (id="labelJoao")

Outros exemplos de aria-labelledby

<p id="pergunta">A Web.br é a conferência mais legal do Brasil?</p>
<div role="radiogroup" aria-labelledby="pergunta">
    <p role="radio" aria-checked="false">Falso</p>
    <p role="radio" aria-checked="true">Verdadeiro</p>
</div>

Popups e Janelas Modais

aria-haspopup="true"

label

descrição

Pode usar o "Close" como aria-describedby

Controle via JS para foco no diálogo e não permitir sair até fechar

Popups e Janelas Modais

<div role="alertdialog" aria-labelledby="alertHeading" 
        aria-describedby="alertText" tabindex="0">
        <div id="firstElement" tabindex="0"></div>
        <h1 id="alertHeading">Minha popup</h1>
        <div id="alertText">Texto da popup</div>
        <button>Fechar</button>
    <div id="lastElement" tabindex="0"></div>
</div>