Post on 16-Jul-2015
Guia de desenvolvimento de aplicações acessíveis
Felipe de Albuquerque: fa@cesar.org.brEdson Samuel Jr: esgsj@cesar.org.br
O Guia
Acessibilidade é
Criar ou tornar algo acessível ao maior número de usuários possível, principalmente, às pessoas com necessidades especiais.
Leitores de Tela
Text-to-Speech
Braille
Leis e decretos ● Decreto nº 5.296 de 02 de dezembro de 2004 (link externo)
● Decreto nº 6.949, de 25 de agosto de 2009 (link externo) - Promulga a Convenção Internacional
sobre os Direitos das Pessoas com Deficiência e seu Protocolo Facultativo, assinados em Nova
York, em 30 de março de 2007
● Decreto nº 7.724, de 16 de Maio de 2012 (link externo) - Regulamenta a Lei No 12.527, que dispõe
sobre o acesso a informações
● Modelo de Acessibilidade de Governo Eletrônico (link externo)
● Portaria nº 03, de 07 de Maio de 2007 (link externo) - formato .pdf (35,5Kb) - Institucionaliza o
Modelo de Acessibilidade em Governo Eletrônico – e-MAG
Escreva códigos de forma clara, que faça sentido para pessoas e para computadores
Separar• Conteúdo
• Apresentação
• Interatividade
</Guidelines>
http://www.w3.org/TR/WCAG20/
Princípios
Guidelines
Perceptível Operável Compreensível Robusto
Alternativas em texto
Mídias baseadas em tempo
Conteúdo adaptável a layout
Informação discernível
Acessível por teclado
Tempo para utilização
Evitar conteúdo que possa causar convulsões
Navegabilidade
Legibilidade
Previsibilidade
Assistência à entrada de dados
Compatível com diversos agentes de usuário
Guidelines
O governo brasileiro, seguindo o exemplo de outros países, desenvolveu suas próprias diretrizes, reunidas no documento
chamado de eMAG
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
Outros guidelines de acessibilidade
• UAAG (User Agent Accessibility Guidelines): Descreve como fazer os browsers e media players acessíveishttp://www.w3.org/TR/UAAG20/
• ATAG (Authoring Tool Accessibility Guidelines): Descreve como fazer software que produz conteúdo)http://www.w3.org/WAI/intro/atag.php
Testes e validadores
Markup Validationhttp://validator.w3.org/
Cynthia Sayshttp://www.cynthiasays.com/
Herahttp://www.sidar.org/hera/
Dasilvahttp://www.dasilva.org.br/
Diretrizes e técnicas de implementação
É um dos fatores mais importantes para o desenvolvimento de uma web acessível
Código HTML5 SemânticoCódigo Ruim<div class="topo-pagina">
Título da página</div><div class="texto-paragrafo">
Texto "conteúdo da página" </div><a class="menu-item" href="#">
Menu item 1</a><a class="menu-item" href="#">
Menu item 2</a>...
<header><h1>Título da página</h1>
</header><section>
<article><p>Conteúdo da página </p>
</article></section><nav> <ul> <li><a href="#">Item1</a></li> <li><a href="#">Item2</a></li>
</ul></nav>
Código Melhor
Definir o idioma padrão da página<html lang="pt-br">
ou em um trecho específico<p lang="en">Simple text</p>
DocType HTML5<!DOCTYPE HTML>
Não esqueça da Tag Title!!<title>Escreva algo que faça sentido e no contexto certo!
Não me menospreze<title>
Títulos e subtítulosUsar as TAGs de título para os textos que são títulos (cabeçalhos), e respeitar a hierarquia deles
<h1> Título da página </h1><h2> Subtítulo = Seja bem vindo ao nosso site</h2>
<h3> ...</h3>
</Navegação>
Usar a Tag nav e listasEscreva menus com as tags certas
<nav> <ul> <li><a href=”#”>home</a></li> <li><a href=”#”>About</a></li> </ul></nav>
Colocar descrição nos linksEscreva os textos de forma que façam sentido, o conduza!
<a href=”#” title="Ir para a página home">home</a>
Navegação por TabUsuários que não podem ou não querem usar o mouse, podem usar o teclado pra percorrer os links,
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
<nav> <ul> <li>
<a href=”#” tabindex="3">Link 1</a></li>
<li><a href=”#” tabindex="1">Link 2</a>
</li> <li> <a href=”#” tabindex="2">Link 3</a> </li>
</ul></nav>
TECLAS DE ATALHO (ACCESSKEYS) <!-- ex: Se você apertar Shift + alt + “tecla” vai para a página -->
<a href="contato.html" accesskey="a">Contato</a>
</Imagens>
Imagens
<img src="na_sala.jpg" alt="mãe e filho brincado na sala com bloquinhos de letras” />
Imagens
<img src="na_sala.jpg" longdesc=”http://example.com/descs#item3” />
</Intervenções acessíveis>
Menu de acessibilidadehttp://turismoacessivel.gov.br/ta/
Ir ao conteúdo<a href="#content" title="pular para o conteúdo">ir direto ao conteúdo</a>
Leva para uma página específicavisite o site para observar!http://www.saudeacessivel.com.br/
Contraste
</Tabelas>
Tabelas acessíveis
<table> <tr> <td>Nome</td> <td>Posição</td> </tr> <tr> <td> Fábio </td> <td> 12 </td> </tr></table>
<table> <tr> <th>Nome</th> <th>Posição</th> </tr> <tr> <td> Fábio </td> <td> 12 </td> </tr></table>
Tabelas acessíveis<table> <caption>Os melhores do ano</caption> <thead> <tr> <th>Nome</th> <th>Posição</th> </tr> </thead> <tbody> <tr> <td> Fábio </td> <td> 12 </td> </tr> </tbody></table>
<table> <caption>Os melhores do ano</caption> <thead> <tr> <th>Nome</th> <th>Posição</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td> Fábio </td> <td> 12 </td> </tr> </tbody></table>
TFOOT deve estar antes de TBODY em uma definição de TABLE para que os user agents possam renderizar o rodapé de tabela antes de receber todas as possíveis linhas (numerosas) de dados
Tabelas acessíveis<table summary="Os melhores do ano">
<th abbr="ameixa">Ameixa preta</th> <th abbr="pera">Pera d'água</th>
W3C HTML5 tabular data http://www.w3.org/TR/html5/tabular-data.html
W3C Tables Recommendationhttp://www.w3.org/TR/html401/struct/tables.html
</Formulários>
Formulários<form action=”/action” method="post" id=”formulario”>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" />
<fieldset>
<legend>Quais suas cores preferidas?</legend>
<input type="checkbox" name="chk0" id="chk0_0" value="vermelho" />
<label for="chk0_0">Vermelho</label>
<input type="checkbox" name="chk2" id="chk2_2" value="azul" />
<label for="chk2_2">Azul</label>
</fieldset>
</form>
Formulários com captchaNÃOOOOooooo!!