Guia de desenvolvimento de aplicações acessíveis

Guia de desenvolvimento
de aplicações acessíveis
Felipe de Albuquerque: fa@cesar.org.br
Edson Samuel Jr: esgsj@cesar.org.br

Acessibilidade é
Criar ou tornar algo acessível ao maior
número de usuários possível,
principalmente, às pessoas com
necessidades especiais.

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

Princípios
Guideline
s
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 comofazer os browsers e media players acessíveis
http://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

Markup Validation
http://validator.w3.org/
Cynthia Says
http://www.cynthiasays.com/
Hera
http://www.sidar.org/hera/
Dasilva
http://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ântico
Có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ítulos
Usar 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>

Usar a Tag nav e listas
Escreva 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 links
Escreva os textos de forma que façam sentido, o conduza!
<a href=”#” title="Ir para a página home">home</a>

Navegação por Tab
Usuá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>
<nav>
<ul>
<li>
<a href=”#” tabindex="3">Link 1</a>
</li>
<li>
</li>
<li>
</li>
</ul>
</nav>

TECLAS DE ATALHO (ACCESSKEYS)

<a href="contato.html" accesskey="a">Contato</a>

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” />

Menu de acessibilidade
http://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ífica
visite o site para observar!
http://www.saudeacessivel.com.br/

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 Recommendation
http://www.w3.org/TR/html401/struct/tables.html

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

Guia de desenvolvimento de aplicações acessíveis

Guia de desenvolvimento de aplicações acessíveis

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Guia de desenvolvimento de aplicações acessíveis

Ähnlich wie Guia de desenvolvimento de aplicações acessíveis (20)

Guia de desenvolvimento de aplicações acessíveis