DICAS PARA DESENVOLVER SITE ACESSÍVEL

Transcrição

1 DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário ter conhecimentos com as linguagens HTML e CSS. 1. IMAGENS A imagem deve ser etiquetada, ou seja, receber uma descrição em modo texto, para que os deficientes visuais possam compreender seu uso no site. Esta descrição deve ser referente ao seu conteúdo e ambiente onde se encontra. Para etiquetar uma imagem basta usar o atributo alt na tag img. Veja o exemplo: <img src= cavalinho.jpg alt= cavalo recém nascido deitado na terra, sendo acariciado pela mãe /> 2. TÍTULOS E SUBTÍTULOS Conceitualmente existe 6 níveis de títulos, sendo o h1 o mais alto de todos, ou seja, ele deve ser usado para indicar o título principal da página. Para melhor compreender como usar os níveis de títulos, comparamos um site com um livro: O nome do livro é o h1, os capítulos são h2, os sub-capítulos são h3, e assim sucessivamente. Exemplo: <h1>nome da empresa</h1> <h2>sejam bem vindos ao nosso site</h2> Núcleo de Acessibilidade SIEP/RENAPI 1

2 DICAS DE USO: O título h1 poderá ser substituído por uma imagem (logo da empresa), mas deverá permanecer com seu conteúdo, mesmo que não visivelmente, para que o leitor de telas possa ler. Cada página deverá ter apenas uma tag h1, já que se pressupõe que cada página tenha um único título principal. Não é necessário fazer o uso de todos os 6 níveis, exceto quando o texto for classificado em muitas seções, exigindo assim uma documentação muito rígida. Os níveis do h2 ao h6 poderão ser usados mais de uma vez na página, mas sem excesso e com lógica textual. 3. TABELAS: As principais tags de tabelas são: <table> - Determina um elemento de dados tabulares, uma tabela. - Agrupa as células montando uma linha <td> - Insere células normal na tabela <th> - Insere células cabeçalhos na tabela <table> </table> <th>cabeçalho 1</td> <td>cabeçalho 2</td> <td>dado 1</td> <td>dado 2</td> Com isso temos duas linhas com a tag e dentro dessas linhas temos duas células com a tag <td> ou <th>. VISUALIZAÇÃO: Cabeçalho 1 Cabeçalho 2 Dado 1 Dado 2 4. QUESITOS IMPORTANTES PARA UMA TABELA ACESSÍVEL: Utilização do atributo summary, pois ele é um resumo da tabela, coloque em tabelas que valham a pena ter um resumo. Usar o elemento <caption> para título da tabela, esse elemento é o título principal da tabela Para tabelas simples, o uso apropriado do elemento <th> é essencial para tornar a tabela acessível. Contudo com um pouco mais de esforço, podemos incrementar a acessibilidade aos dados da tabela. <thead> e <tfoot> são usados para agrupar uma linha de cabeçalhos no topo e outra no final da tabela. Se <thead> e <tfoot> forem usados, você deverá usar também <tbody> para definir o corpo da tabela, que é a parte da tabela que contém as células de dados. Na verdade uma tabela poderá conter mais de um <tbody>. Núcleo de Acessibilidade SIEP/RENAPI 2

3 Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho. [Prioridade 1] Por exemplo, em HTML, utilizar THEAD, TFOOT e TBODY para agrupar linhas, COL e COLGROUP para agrupar colunas, e os atributos "axis", "scope" e "headers" para descrever relações mais complexas entre os dados." Colocar o atributo abbr para abreviar um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela passe por ele. Em alguns casos os desenvolvedores usam colunas vazias em cabeçalhos ou dados, para obter um espaçamento entre as colunas de uma tabela. JAWS, por exemplo lê "blank" toda vez que encontra uma célula vazia e isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados para usuários com leitores de tela. CSS deve ser usado no lugar de células vazias para fins de controlar a apresentação de uma tabela de dados. EXEMPLO 1: <table> <caption>nome da tabela</caption> <thead> <th abbr="ameixa">ameixa preta</th> <th abbr="pera">pera d'água</th> </thead> <tbody> </tbody> <tfoot> </tfoot> </table> <td>dados 1</td> <td>dados 2</td> <td>dados 3</td> <td>dados 4</td> <th>rodapé 1</th> <th>rodapé 2</th> VISUALIZAÇÃO: Nome da tabela Coluna 1 Coluna 2 Dados 1 Dados 2 Dados 3 Dados 4 Rodapé 1 Rodapé 2 Núcleo de Acessibilidade SIEP/RENAPI 3

4 EXEMPLO 2: <table summary="tabela Contendo Notas Por Grupo Em Relação A Alunos E Matérias."> <caption>notas</caption> <th id="grupo">grupo</th> <th id="alunos">alunos</th> <th id="portugues">português</th> <th id="matematica">matemática</th> <th id="a" rowspan="2">a</th> <th id="paulo">paulo</th> <td headers="a paulo portugues">7</td> <td headers="a paulo matematica">8</td> <th id="marcos">marcos</th> <td headers="a marcos portugues">6</td> <td headers="a marcos matematica">9</td> <th id="b">b</th> <th id="rosa">rosa</th> <td headers="b rosa portugues">10</td> <td headers="b rosa matematica">7</td> </table> VISUALIZAÇÃO: Notas Grupos Alunos Português Matemática A Paulo 7 8 Marcos 6 9 B Rosa 10 7 Núcleo de Acessibilidade SIEP/RENAPI 4

5 EXEMPLO 3 <table border="1" summary="preços em reais no varejo e no atacado para laranjas e maçãs importadas e nacionais nas cidades do Rio de Janeiro e de São Paulo. Existem dois níveis de cabeçalhos de colunas."> <caption> Preços em reais para laranjas e maçãs importadas e nacionais nas cidades do Rio de Janeiro e de São Paulo </caption> <thead> </thead> <tbody> <td></td> <th colspan="2" id="importada">importada</th> <th colspan="2" id="nacional">nacional</th> <td></td> <th id="laranjas-imp">laranjas</th> <th id="macas-imp">maçãs</th> <th id="laranjas-dom">laranjas</th> <th id="macas-dom">maçãs</th> <th id="rio" colspan="5">rio de Janeiro</th> <th headers="rio" id="atacado-rio">atacado</th> <td headers="importada laranjas-imp rio atacado-rio">1,00</td> <td headers="importada macas-imp rio atacado-rio">1,25</td> <td headers="nacional laranjas-dom rio atacado-rio">1,20</td> <td headers="nacional macas-dom rio atacado-rio">1,00</td> <th headers="rio" id="varejo-rio">varejo</th>... O RESTANTE DO CÓDIGO DA TABELA... VISUALIZAÇÃO Preços em reais para laranjas e maçãs importadas e nacionais nas cidades do Rio de Janeiro e de São Paulo Importada Nacional Laranjas Maçãs Laranjas Maçãs Rio de Janeiro Atacado 1,00 1,25 1,20 1,00 Varejo 2,00 3,00 1,80 1,60 São Paulo Atacado 1,20 1,30 1,00 0,80 Varejo 1,60 2,00 2,00 1,50 Núcleo de Acessibilidade SIEP/RENAPI 5

6 5. FORMULÁRIOS O uso de Formulários é a forma mais simples, e a mais comum, para a prestação de serviços interativos. Também costuma ser o primeiro obstáculo sério na implementação da acessibilidade. Se acessar conteúdos informacionais de um sítio é uma atitude passiva do visitante, o acesso de um formulário exige que o usuário interaja com este. Formulários costumam ser a principal dificuldade de desenvolvimento na formatação do código HTML, pois são ao mesmo tempo formatação e programação. Os usuários devem ter acesso às suas informações e poder interagir com elas, fornecendo as informações pertinentes para que a execução do serviço tenha sucesso. Para tanto o formulário deve ser compreensível, não só visualmente, mas também na sua formatação. A ESTRUTURA CORRETA DO FORMULÁRIO O primeiro passo para tornar o formulário acessível é organizá-lo de forma a ser compreensível, tanto na sua formatação quanto visualmente. Lembrando que o formulário deve ser acessível não só pelos programas leitores de tela, mas pelas pessoas que utilizam navegadores gráficos. OS ELEMENTOS: Os elementos básicos para a construção de um formulário são: <form> :: o contêiner do formulário; <input> :: que expecifica vários tipos de campos como text, submit, button, radiobutton e checkbox; <textarea> :: campo de texto multi-linha, como observações e comentários; <select> :: Utilizado para listas selecionáveis (como um menu); <button> :: Utilizado para botões. <label> :: Indica o rótulo do elemento do formulário <legend> :: Indica o título para o grupo de elemento dentro do <fieldset> <fieldset> :: Separa os elementos em grupos para melhorar a compreensão. O elemento label é utilizado, em conjunto com o atributo for para relacionar de forma clara o elemento ao seu rótulo. O elemento label pode ser usado em conjunto com todos os elementos de formulário, exceto o elemento button. O elemento fieldset é utilizado para agrupar os itens de formulários com características em comum, usamos o elemento legend para descrever esse grupo de itens que estão dentro do fieldset <form action= action.php 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="chk1" id="chk1_1" value="verde"> <label for="chk1_1">verde</label> <input type="checkbox" name="chk2" id="chk2_2" value=" azul"> <label for="chk2_2">azul</label> <input type="checkbox" name="chk3" id="chk3_3" value="amarelo"> <label for="chk3_3">amarelo</label> Núcleo de Acessibilidade SIEP/RENAPI 6

7 </fieldset> <fieldset> <ledend>lista de Mercado</legend> <select name="lista de mercado"> <optgroup label="laticínios"> <option>leite desnatado</option> <option>queijo ralado</option> <option>queijo prato</option> <option>requeijão</option> </optgroup> <optgroup label="vegetais"> <option>alface</option> <option>alho</option> <option>berinjela</option> <option>cenoura</option> <option>pimentão</option> </optgroup> <optgroup label="frutas"> <option>abacaxi</option> <option>banana</option> <option>manga</option> </optgroup> </select> </fieldset> <input type= submit value= Enviar /> </form> 6. LISTAS Lista são muito usadas na programação Web por sua boa acessibilidade, não necessita de descrições ou tags adicionais. HTML define listas que podem ser do tipo com marcadores (bullets - listas não numeradas) <ul>...</ul> ou listas ordenadas <ol>...</ol> com numeração no início de cada item da lista. usa-se <li>...</li> para separar os elementos da lista 7. LINKS Um link deve ter sua descrição pequena e objetiva para facilitar o entendimento do usuário. Possui uma fácil leitura sem necessitar de elementos adicionais e é um focalizador para o leitor de telas. É obrigatório o uso do elemento href para o leitor lê como um link. Se o link não tem um destino colocar o valor #. <a href="#" id="voltar">voltar</a> 8. TECLAS DE ATALHO (ACCESSKEYS) O uso de teclas de atalho através do atributo accesskey, permite escolher um atalho de teclado para cada um dos campos do formulário, possibilitando o acesso rápido. O atributo pode ser aplicado tanto ao elemento LABEL como ao elemento INPUT. Núcleo de Acessibilidade SIEP/RENAPI 7

8 Ex: tecla de atalho para a busca <input type="text" name="txtbusca" accesskey="s" /> No exemplo, se o usuário pressionar as teclas alt e S ele irá diretamente para o campo de busca. No entanto, deve-se tomar cuidado com a escolha das teclas de atalho, pois diversos navegadores utilizam-se delas para sua própria navegação, variando do navegador, versão e língua. Em caso de conflito, a preferência é do navegador. <ul id="atalhos"> <li><a href="#iniciodomenu">menu [alt + 1]</a></li> <li><a href="#iniciodoconteudo">conteúdo [alt + 2]</a></li> <li><a href="/ept/index.php">página Inicial [alt + 3]</a></li> <li><a href="#palavra">pesquisar [alt + 4]</a></li> </ul>... <a href="#iniciodoconteudo" id="iniciodoconteudo" accesskey="2" class="alt">início do conteúdo</a> 9. USO DE SCRIPTS Um formulário deve funcionar independentemente dos scripts estarem habilitados no navegador ou no leitor de tela. Valide sempre a manipulação de dados no lado do servidor. Isso possibilita o funcionamento de formulários independentemente de scripts no lado do usuário. PREFIRA: Validação pelo servidor DO QUE: Validação por script MENU JAVASCRIPT (MENUS DROP-DOWN) Menus estilo drop-down, que utilizam o elemento SELECT com javascript, costumam ser inacessíveis a usuários que utilizam leitores de tela ou apenas o teclado para navegar. Nesses casos é preferível usar a lista (elemento SELECT) junto a um botão de ação, que permita o usuário ativar sua seleção. MENSAGENS DE ERRO AMIGÁVEIS Muitas vezes o usuário desiste de preencher um formulário por não conseguir entender as mensagens de erro. Salvo algumas exceções, a culpa é, em geral, do mau uso e formatação das mensagens de erro em formulários. <input type="submit" value="comprar"/> <input type="button" value=" comprar" onclick="document.forms('main'.submit();" /> Existem vários scripts do lado do usuário que detectam e tratam erros de preenchimento, mas, como visto anteriormente, o uso de scripts do lado do usuário é muitas vezes inacessível e não recomendado. Núcleo de Acessibilidade SIEP/RENAPI 8

9 MENSAGENS DE ERROS NO LADO DO SERVIDOR Uma vez enviado o formulário e encontrado erros de preenchimento, a forma usual é apresentar no topo da página um sumário dos erros encontrados, destacando os locais onde encontrados os erros. Esse método costuma ser eficaz visualmente, mas costuma causar confusão nos leitores de tela, pois geralmente o nome da página de retorno é o mesmo. O problema se resolve colocando um alerta no elemento TITLE da página, repetindo o mesmo alerta no cabeçalho de conteúdo da página. <title> Alguns dados estão incorretos ou faltando no formulário. Por favor, corrija. </title> Outra forma, mais amigável é capturar os dados preenchidos corretamente e retornar ao usuário somente os campos com erros para correção. Núcleo de Acessibilidade SIEP/RENAPI 9

10 LEITURA RECOMENDADA ACCESSIBLE HTML/XHTML FORMS: BEGINNER LEVEL CONSTRUINDO FORMULÁRIOS HTML/XHTML ACESSÍVEIS - 1A. PARTE (tradução do link anterior) HTML 4.01 SPECIFICATION - FORMS FONTES: Núcleo de Acessibilidade SIEP/RENAPI 10