Guia de desenvolvimento de aplicações acessíveis
-
Upload
felipe-de-albuquerque -
Category
Technology
-
view
320 -
download
0
Transcript of Guia de desenvolvimento de aplicações acessíveis
![Page 1: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/1.jpg)
Guia de desenvolvimento de aplicações acessíveis
Felipe de Albuquerque: [email protected] Samuel Jr: [email protected]
![Page 2: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/2.jpg)
O Guia
![Page 3: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/3.jpg)
Acessibilidade é
Criar ou tornar algo acessível ao maior número de usuários possível, principalmente, às pessoas com necessidades especiais.
![Page 4: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/4.jpg)
![Page 5: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/5.jpg)
![Page 6: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/6.jpg)
Leitores de Tela
![Page 7: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/7.jpg)
Text-to-Speech
![Page 8: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/8.jpg)
![Page 9: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/9.jpg)
![Page 10: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/10.jpg)
Braille
![Page 11: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/11.jpg)
![Page 12: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/12.jpg)
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
![Page 13: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/13.jpg)
![Page 14: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/14.jpg)
Escreva códigos de forma clara, que faça sentido para pessoas e para computadores
![Page 15: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/15.jpg)
Separar• Conteúdo
• Apresentação
• Interatividade
![Page 16: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/16.jpg)
![Page 17: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/17.jpg)
</Guidelines>
![Page 18: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/18.jpg)
http://www.w3.org/TR/WCAG20/
![Page 19: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/19.jpg)
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
![Page 20: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/20.jpg)
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
![Page 21: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/21.jpg)
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
![Page 22: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/22.jpg)
Testes e validadores
![Page 23: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/23.jpg)
Markup Validationhttp://validator.w3.org/
Cynthia Sayshttp://www.cynthiasays.com/
Herahttp://www.sidar.org/hera/
Dasilvahttp://www.dasilva.org.br/
![Page 24: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/24.jpg)
Diretrizes e técnicas de implementação
![Page 25: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/25.jpg)
É um dos fatores mais importantes para o desenvolvimento de uma web acessível
![Page 26: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/26.jpg)
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
![Page 27: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/27.jpg)
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>
![Page 28: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/28.jpg)
Não esqueça da Tag Title!!<title>Escreva algo que faça sentido e no contexto certo!
Não me menospreze<title>
![Page 29: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/29.jpg)
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>
![Page 30: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/30.jpg)
</Navegação>
![Page 31: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/31.jpg)
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>
![Page 32: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/32.jpg)
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>
![Page 33: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/33.jpg)
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>
![Page 34: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/34.jpg)
TECLAS DE ATALHO (ACCESSKEYS) <!-- ex: Se você apertar Shift + alt + “tecla” vai para a página -->
<a href="contato.html" accesskey="a">Contato</a>
![Page 35: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/35.jpg)
</Imagens>
![Page 36: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/36.jpg)
Imagens
<img src="na_sala.jpg" alt="mãe e filho brincado na sala com bloquinhos de letras” />
![Page 37: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/37.jpg)
Imagens
<img src="na_sala.jpg" longdesc=”http://example.com/descs#item3” />
![Page 38: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/38.jpg)
</Intervenções acessíveis>
![Page 39: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/39.jpg)
Menu de acessibilidadehttp://turismoacessivel.gov.br/ta/
![Page 40: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/40.jpg)
Ir ao conteúdo<a href="#content" title="pular para o conteúdo">ir direto ao conteúdo</a>
![Page 41: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/41.jpg)
Leva para uma página específicavisite o site para observar!http://www.saudeacessivel.com.br/
![Page 42: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/42.jpg)
Contraste
![Page 43: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/43.jpg)
</Tabelas>
![Page 44: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/44.jpg)
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>
![Page 45: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/45.jpg)
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
![Page 46: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/46.jpg)
Tabelas acessíveis<table summary="Os melhores do ano">
<th abbr="ameixa">Ameixa preta</th> <th abbr="pera">Pera d'água</th>
![Page 47: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/47.jpg)
W3C HTML5 tabular data http://www.w3.org/TR/html5/tabular-data.html
W3C Tables Recommendationhttp://www.w3.org/TR/html401/struct/tables.html
![Page 48: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/48.jpg)
</Formulários>
![Page 49: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/49.jpg)
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>
![Page 50: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/50.jpg)
Formulários com captchaNÃOOOOooooo!!
![Page 51: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/51.jpg)
![Page 52: Guia de desenvolvimento de aplicações acessíveis](https://reader034.fdocuments.net/reader034/viewer/2022052413/55a790411a28ab35478b4667/html5/thumbnails/52.jpg)