Trabalhando com WCAG e WAI-ARIA de forma correta

Text

@talitapagani

Tutorial

Talita Pagani

Quem sou

Bacharel e mestranda em Ciência da Computação

 

Pesquisadora em Interação Humano-Computador (IHC) e Acessibilidade Web.

 

Professora.

 

Membro do Grupo de Especialistas em Acessibilidade Web do W3C.

"If accessibility is core..."

WCAG

Web Content Accessibility Guidelines

 

Diretrizes de Acessibilidade para Conteúdo Web

WAI-ARIA

Accessible Rich Internet Applications

 

Aplicações Ricar de Internet Acessíveis

WCAG

WAI-ARIA

Critérios testáveis para produção de conteúdos e elementos estáticos acessíveis

Técnicas para elementos interativos e seus comportamentos e estados

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

Texto alternativo

Estrutura hierárquica de texto

Conteúdo em listas

Link relevante

Por que ainda falhamos?

  • Falta compreensão sobre como diferentes públicos usam a web
  • As especificações são completas, mas longas e com muitos desdobramentos
  • Falta entender o contexto sobre aplicabilidade
  • Faltam exemplos práticos para compreender melhor a utilização

Estrutura do WCAG

4 Princípios

12 Recomedações

Critérios de sucesso

Técnicas suficientes e aconselhadas

Entendendo as recomendações

Como cumprir os critérios de sucesso

Entendendo os critérios de sucesso

Estrutura do ARIA

4 Tipos de Roles

Relacionamento de subclasse e superclasse

73 Roles, sendo 12 abstratas

35 estados e propriedades divididos e 4 grupos

Estrutura do ARIA

Entendendo a diversidade de usuários

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

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

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

Entendendo melhor o WCAG

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

Níveis de Conformidade

A

AA

AAA

Essencial

Importante

Desejável

Requisitos mínimos

Requisitos avançados, recursos assistivos

WCAG é sobre

  • Organização e layout de informações
  • Linguagem adequada do conteúdo
  • Navegabilidade
  • Alternativas para o fornecimento das informações
  • Controle do usuário

 

  • Não é somente sobre código e sua semântica

Trabalhando contraste

Alto Contraste  

Cores invertidas ou esquema preto e branco

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!

Cuidado ao usar certos componentes

Consulte as técnicas

  • 206 técnicas gerais
  • 97 técnicas de HTML
  • 30 técnicas de CSS
  • 37 técnicas de server-side script
  • 21 técnicas para WAI-ARIA
  • 93 falhas comuns documentadas e como evitá-las

Entendendo melhor a ARIA

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

Usando bem ARIA

[Roles | Atributos | Estados] + manipulação adequada via JS

Alteração/inclusão dinâmica de atributos e estados
Manipulação do comportamento dos elementos

O básico de landmark roles

<nav> - role="navigation”
<header> - role="banner"
<main> role="main"
<footer> - role="contentinfo"
<article> - role="article"
<aside> - role="complementary"

Erros comuns e recomendações

Não use ARIA se não for necessário

// Desnecessário
<span role=”button”>Enviar</span>

// Melhor
<button>Enviar</button> 

Cuidado com redundância ao usar aria-label

Ruim:

<a href="arquivo.pdf" aria-label="Baixe o arquivo">Baixe o arquivo</>

 

Melhor:

<a href="arquivo.pdf" aria-label="Arquivo PDF">Baixe o arquivo</>

Evite a role="application"

Isso pode fazer com que os elementos com esta role sejam desconsiderados pelo leitor de telas.

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

Nome (id="labelNome") Idade Cidade

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

Nome Telefone (id="labelFone")

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>

Use aria-describedby para texto de ajuda

******

Senha:

A senha deve ter entre 4 e 8 caracteres com letras e números

<label for="senha">Senha:</label>
<input type="password" id="senha" aria-describedby="senhaHelper">
<p id="senhaHelper">A senha deve ter entre 4 e 8 caracteres com letras e números</p>

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>

Menu retrátil/hambúrguer

<nav class="navigation" role="navigation">
    <button aria-expanded="false" 
        aria-controls="js-navigation-list" 
        aria-label="Abrir o menu de navegação">
	<span>menu</span>
    </button>
    <ul id="js-navigation-list">
        <li><a href="http://conferenciaweb.w3c.br/#news">Últimas notícias</a></li>
	<li><a href="http://conferenciaweb.w3c.br/#speakers">Palestrantes</a></li>
	<li><a href="http://conferenciaweb.w3c.br/#tracks">Trilhas</a></li>
    </ul>
</nav>

Use role="region" para definir uma região de conteúdo

<div role="region" aria-labelledby="enquete">
<h3 id="enquete">Enquete da semana</h3>
<form method="post" action="#">
  <fieldset>
    <legend>O que você achou da Web.br 2015?</legend>
    <input type="radio" id="r1" name="poll" />
    <label for="r1">Melhor de todas!</label>
    <input type="radio" id="r2" name="poll" />
    <label for="r2">Muito boa!</label>
    <input type="radio" id="r3" name="poll" />
    <label for="r3">Boa :)</label>
    <input type="radio" id="r4" name="poll" />
    <label for="r4">Algumas coisas podem melhorar</label>
  </fieldset>
</form>
<a href="results.php">Ver resultados da enquete</a>
</div>

Pra fechar

  • aria-busy
  • aria-live

Cuidado para não deixar o conteúdo verboso demais

Por fim...

  • Atender os critérios do WCAG e usar adequadamente o WAI-ARIA depende muito mais de contexto do conteúdo e das funcionalidades

 

  • O uso de estados e propriedades do ARIA depende da funcionalidade que você está desenvolvendo

 

  • Nunca bloqueie a interação/navegação via teclado

Referências

Web Content Accessibility Guidelines (WCAG) 2.0 (em português), http://traducoes.w3c.br/TR/WCAG/

 

Accessible Rich Internet Applications (WAI-ARIA) 1.0 (em inglês), http://www.w3.org/TR/wai-aria/

 

Web Accessibility, Governo de Hong Kong, http://www.edb.gov.hk/attachment/tc/edu-system/special/sen-training/Whatassesswebpage.pdf

 

W3C, ARIA Practices, http://www.w3.org/WAI/PF/aria-practices/

 

 Técnicas para acessibilidade Web, Lívia Gabos (material offline)

 

WebAIM (Presentations), http://www.webaim.org

 

eMAG - Modelo de Acessibilidade em Governo Eletrônico, http://emag.governoeletronico.gov.br/

Obrigada!

 

Perguntas?

@talitapagani

talita.cpb@gmail.com

 

slides.com/talitapagani/wcag-aria-webbr2015

Trabalhando com WCAG e WAI-ARIA de forma correta

By Talita Pagani

Trabalhando com WCAG e WAI-ARIA de forma correta

WCAG e WAI-ARIA são especificações que se complementam para permitir o desenvolvimento de conteúdos e aplicações web ricas acessíveis. Nem sempre os desenvolvedores conseguem compreender qual a maneira correta de aplicá-las dada a complexidade da especificação, portanto, neste tutorial veremos boas práticas de utilização das recomendações do WCAG e dos recursos do WAI-ARIA dentro dos cenários mais comuns de uso para esclarecer como utilizá-los de forma correta.

  • 3,111
Loading comments...

More from Talita Pagani