Acessibilidade Web

Mrcio Bortolini dos Santos Ricardo Moro

O que acessibilidade?

Conceitos

Desenho Universal. Acessibilidade Fsica. Acessibilidade Virtual. Remover barreiras e obstculos. Desempenhar atividades do cotidiano. Uso de servios, produtos e informao. Incluso.

E na Web?

Acessibilidade Virtual

"Pginas disponveis e acessveis a qualquer hora, local, ambiente, dispositivo de acesso e por qualquer tipo de usurio." Foco no desenvolvimento. Uso de tcnicas e padres. Decreto 5.296 de 02 de dezembro de 2004, artigo 47.

Torna obrigatria a acessibilidade nos portais da administrao pblica.

Por que acessibilizar?

Motivao

14,5% da populao brasileira possui algum tipo de deficincia. Facilidade de uso. indexado mais facilmente por mecanismos de busca. Atinge mais visitantes. Padronizao. Cumprimento de medidas legais: Lei 10.048/00 e 10.098/00.

Mitos da acessibilidade

Mitos

Acessibilidade Web s para deficientes. O nmero de usurios beneficiados com a acessibilidade relativamente muito pequeno. Fazer um site acessvel demora e custa caro. Um site acessvel a deficientes visuais no bonito. Primeiro fazemos o site, depois fazemos acessibilidade. A gente sabe o que bom para o usurio.

Diretrizes e Padres

Diretrizes e Padres

HTML e CSS:

W3C WCAG 1.0 WCAG Samurai WCAG 2.0 e-MAG 2.0 e-MAG 3.0

Acessibilidade:

Validao

Validao

Validao Manual:

Checklists. Testes com PNEs. Validadores Online:

Validao Automtica:

Hera. Examinator. DaSilva. ASES.

Validadores Desktop (All-in-one):

Tcnicas de Desenvolvimento

Separao das camadas

Camada de estrutura HTML Camada de apresentao CSS Camada de comportamento JavaScript

Tableless e Estrutura

No usar tabelas para layout. Dividir partes da pgina usando <div>. Preferencialmente colocar a div do contedo principal antes da div do menu. Manter uma estrutura uniforme em todas as pginas.

Usar ncoras adequadamente

ncoras so links internos. Servem para pular para posies especficas dentro da mesma pgina.
Topo: <a href="#inicioMenu">Incio do Menu</a> Incio do Menu: <a href="#inicioMenu" id="inicioMenu" class="oculto">Inicio do Menu</a>

Mapa do Site

Contm a estrutura hierrquica de todas as pginas que compem o site. Normalmente em formato de lista de links. Pode ser comparado a um sumrio ou ndice. Facilita o entendimento da estrutura do site.

Breadcrumb

usado para localizar o usurio dentro da estrutura do site. Normalmente colocado antes do contedo principal.
Exemplo: Voc est em: Pgina Inicial > Notcias

Oferece segurana na navegao e a opo de retorno a nveis anteriores.

Imagens

Toda imagem relevante ao contedo deve receber uma descio textual. Imagens decorativas devem ser inseridas por CSS.
<img src="imagem.jpg" alt="Uma imagem legal." />

A descrio deve ser clara e simples referente ao contedo da imagem.

Listas

Listas so muito utilizadas por terem um bom nvel de acessibilidade.

<ul>
<li> Item 1 </li> <li> Item 2 </li>

</ul>

No necessitam de descrio ou tags adicionais.

Links

Devem ter descio pequena e objetiva.

<a href="#" id="voltar">Voltar</a>

obrigatrio o uso do atributo href para que o link seja acionvel. Links de menu normalmente so inseridos em listas.
<ul id="menu"> <li><a href="/inicial">Pgina Inicial</a></li> ... </ul>

Links

Caso a descrio do link deva ser mais completa, usar o atributo title.
<a href="#" title="Adicionar os produtos selecionados ao seu carrinho de compras">Adicionar ao carrinho</a>

Evitar usar descries como: "Clique aqui", "Veja mais", etc.

Ttulos

Uma pgina como um livro:

h1 o ttulo do livro; h2 so os captulos; h3 subcaptulos e assim por diante.

Cada pgina dever ter apenas um ttulo de nvel 1. Os nveis 2 a 6 podem ser utilizados mais de uma vez. No necessrio usar todos os nveis em uma pgina.

Arquivos para download

Para documentos, utilizar preferencialmente o formato PDF:

No bloquear o arquivo.

Sugere-se informar o formato e tamanho do arquivo na descrio do link.

<a href="manual.pdf">Manual do desenvolvedor em PDF (Tamanho: 200KB)</a>

Tabelas

Utilizar tabelas para dados tabulares! :-) O atributo summary deve ser utilizado para resumir a tabela:
<table summary="Tabela contendo notas de ... </table>

todos os alunos da disciplina de Biologia.">

Tabelas

O elemento caption deve ser utilizado para o ttulo da tabela.

<table summary="Tabela contendo notas de todos os alunos da disciplina de Biologia."> <caption> Notas dos Alunos </caption> </table>

Para tabelas simples, utilizar o elemento th para os cabealhos.

<tr> <th> Aluno </th> <th> Nota </th> </tr>

Tabelas

Para tabelas complexas deve-se utilizar os elementos: thead, tbody e tfoot.

<thead> <tr> <th> Aluno </th> <th> Nota </th> </tr> </thead> <tbody> <tr> <td>Aluno 1</td> <td> 9 </td> </tr> </tbody>

Formulrios

O primeiro passo organiz-lo de forma compreensvel. Sempre usar a tag form, mesmo que o formulrio seja pequeno. Elementos input, select e textarea devem ser associados a um label:
<label for="nome">Nome:</label> <input type="text" id="nome" name="primeiro_nome" />

Formulrios

Botes e demais elementos no precisam de label. Todos formulrios devem ter um boto para submisso, mesmo que contenham somente um select. Para um melhor entendimento do formulrio possvel agrupar campos afins com o elemento fieldset. Ao se utilizar fieldset deve-se utilizar o elemento legend para descrever esse grupo.

Formulrios
<form action="/action" method="post"> <fieldset> <legend> Dados Pessoais </legend> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" /> <label for="sobrenome">Sobrenome:</label> <input type="text" id="sobrenome" name="sbrnome" /> </fieldset> <fieldset> <legend> Contato </legend> <label for="email">Email:</label> <input type="text" id="email" name="email" /> </fieldset> <input type="submit" name="submit" value="Enviar" /> <form>

Formulrios

Para agrupar opes de um select usa-se o elemento optgroup.

<label for="lista">Escolha um item:</label> <select id="lista" name="lista"> <optgroup label="Laticnios"> <option>Leite desnatado</option> <option>Requeijo</option> </optgroup> <optgroup label="Vegetais"> <option>Alface</option> <option>Pimento</option> </optgroup> </select>

Scripts e Objetos

A pgina deve funcionar sem a necessidade de scripts. Preferencialmente devem ser diretamente acessveis. No devem depender de dispositivos de entrada. Devem conter uma descrio caso no sejam suportados.

Scripts e Objetos
<noscript> Seu navegador no suporta JavaScript ou ele est desabilitado. Algumas funes podero no estar disponveis. </noscript> <object data="hello.swf"> Vdeo de saudaes. </object>

Flash

No possvel garantir a acessibilidade. Somente aplicaes simples, como alguns players. Sem animaes. Muito esforo para acessibilizar.

Obrigado pela ateno!

Mrcio Bortolini dos Santos

marcio.bortolini@bento.ifrs.edu.br

Ricardo Moro
ricardo.moro@bento.ifrs.edu.br