Guia de desenvolvimento de aplicações acessíveis

Guia de desenvolvimento de aplicações acessíveis

Felipe de Albuquerque: [email protected] Samuel Jr: [email protected]

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>



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

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

Guia de desenvolvimento de aplicações acessíveis

Technology

Transcript of Guia de desenvolvimento de aplicações acessíveis