Tutorial de Formulários e Tabelas Acessíveis

Reinaldo Ferraz - W3C Brasil

Utilize a seta para esquerda avançar e seta para direita para voltar.

Apresentação desenvolvida com HTML5 e CSS3

Versão em XHTML - Download da versão em PDF.

Acessibilidade para quem?

Porque fazer websites acessíveis?

Acessibilidade para quem?

Acessibilidade para quem?

Foto de um homem fazendo testes de visão

Acessibilidade para quem?

Web para todos

Ícones para simbolizar pessoas com deficiências

Acessibilidade para quem?

Todos mesmo

Imagens de diversas pessoas, representando os diversos tipos de usuários de internet

Acessibilidade para quem?

Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável!

Foto de uma criança abraçando um globo terrestre

Formulários e tabelas acessíveis

Tabelas acessíveis

Tabelas para Layout

Tabelas acessíveis

Pare de utilizar tabelas para Layout

Tabelas acessíveis

"As tabelas não devem ser utilizadas como auxiliares de layout. Historicamente, alguns autores têm abusado das tabelas em HTML, como forma de controlar o seu layout de página. Esse uso não é recomendado, porque as ferramentas que tentam extrair os dados tabulares de tais documentos obtém resultados confusos. Em particular, os usuários de ferramentas de acessibilidade, como leitores de tela podem achar muito difícil de navegar em páginas com tabelas usadas para layout."

http://www.w3.org/TR/html5/tabular-data.html#the-table-element

Tabelas acessíveis

Atalhos de teclado para navegação em tabelas – JAWS

Tabelas acessíveis

Exemplo de um site desenvolvido sem tabelas

Use CSS!

Deixa a página mais leve
Modifica diversas páginas fazendo alterações em um único arquivo
Separa apresentação do conteúdo

Estrutura básica de uma tabela

<table>
<tr>
<td> Minha tabela </td>
</tr>
</table>

Minha tabela

Estrutura básica de uma tabela

<table>
<tr>
<th> Minha tabela </th>
</tr>
<tr>
<td> Simples </td>
</tr>
</table>

Minha tabela
Simples

Estrutura básica de uma tabela

<table> - Tabela
<th> - Table Header
<tr> - Table Rows
<td> - Table Data

Estrutura básica de uma tabela

<table>
<tr>
<td> </td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<th>8:00-9:00</th>
<td>Meet w/ Sam</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>9:00-10:00</th>
<td> </td>
<td> </td>
<td>Doctor Williams</td>
</tr>
</table>

	Monday	Tuesday	Wednesday
8:00-9:00	Meet w/ Sam
9:00-10:00			Doctor Williams

Tabelas acessíveis

Informações sobre a tabela

Tabelas acessíveis

A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO Percentual sobre o total de domicílios com acesso à Internet 1 Percentual (%) Modem Tradicional (acesso discado linha telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefônica (tecnologia DSL) Modem via cabo Conexão via rádio Conexão via satélite TOTAL BRASIL 20 66 23 25 14 3 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8 16 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR Até R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29

Tabelas acessíveis

Tabelas acessíveis

Tabelas acessíveis

<caption>A1 - PROPORÇÃO DE DOMICÍLIOS COM COMPUTADOR</caption>

…

</table>

Tabelas acessíveis

Todo o visual pode ser modificado via CSS

Tabelas acessíveis

Imagem de uma lista de páginas com tabelas

Tabelas acessíveis

Blocos de conteúdo

Tabelas acessíveis

<TABLE>

<THEAD> <TR> ...header information..</THEAD>

<TFOOT> <TR> ...footer information…</TFOOT>

<TBODY>

<TR> ...first row of block one data...

<TR> ...second row of block one data...

</TBODY>

</TABLE>

Tabelas acessíveis

<TABLE>

<THEAD> <TR> ...header information..</THEAD>

<TFOOT> <TR> ...footer information…</TFOOT>

<TBODY>

<TR> ...first row of block one data...

<TR> ...second row of block one data...

</TBODY>

</TABLE>

Tabelas acessíveis

TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.

http://www.w3.org/TR/html401/struct/tables.html#edef-THEAD

Tabelas acessíveis

<table>
<thead>
<tr><th>Minha tabela</th>
<th>Percentuais</th></tr>
</thead>
<tfoot>
<tr><th>Total</th>
<td>10%</td></tr>
</tfoot>
<tbody>
…
</tbody>
</table>

Minha tabela	Percentuais
Total	10%
Colunas	10%
Linhas	20%
Dados	30%
Elementos	40%

Tabelas acessíveis

Referências entre células

Tabelas acessíveis

Imagem de uma tabela de dados com destaque para o cruzamento entre dados

Tabelas acessíveis

Utilizar o atributo scope para associar células de cabeçalho e células de dados em tabelas de dados.

Tabelas acessíveis

<table border="1">
<caption>
Contact Information
</caption>
<tr>
<td></td>
<th scope="col">Name</th>
<td scope="col">Phone#</td>
<th scope="col">City</th>
</tr><tr>
<td>1.</td>
<th scope="row">Joel Garner</th>
<td>412-212-5421</td>
<td>Pittsburgh</td>
</tr><tr>
<td>2.</td>
<td scope="row">Clive Lloyd</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
</table>

Contact Information
	Name	Phone#	City
1.	Joel Garner	412-212-5421	Pittsburgh
2.	Clive Lloyd	410-306-5400	Baltimore

Tabelas acessíveis

Utilizar os atributos ID e headers para associar células de dados com células de cabeçalhos em tabelas de dados.

Tabelas acessíveis

<table>
   <tr>
     <th rowspan="2" id="h">Homework</th>
     <th colspan="3" id="e">Exams</th>
     <th colspan="3" id="p">Projects</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">Final</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">Final</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
</table>

Homework	Exams			Projects
Homework	1	2	Final	1	2	Final
15%	15%	15%	20%	10%	10%	15%

Tabelas acessíveis

Imagem do codigo fonte de uma tabela com IDs e Headers declarados

Tabelas acessíveis

Atributos obsoletos no HTML5

align
bgcolor
border
cellpadding
cellspacing
frame
rules
width
background

Atributos obsoletos no HTML5

Atributo summary - Elemento details

<table>
<caption> <strong>Characteristics with positive and negative sides.</strong>
<details> <summary>Help</summary> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p>
</details>
</caption>

Atributos obsoletos no HTML5

align nos elementos td e th
bgcolor nos elementos td e th
char nos elementos td e th
charoff nos elementos td e th
height nos elementos td e th
nowrap nos elementos td e th
valign nos elementos td e th
width no elementos td e th
align no elemento tr
bgcolor no elemento tr
char no elemento tr
charoff no elemento tr
valign no elemento tr

Tabelas acessíveis

Imagem com telas dos leitores de tela Jaws, NVDA, DosVox e o validador do W3C

Tabelas acessíveis

Utilize o atributo summary para uma breve explicação sobre a leitura da tabela;
Utilize o elemento CAPTION para o título da tabela;
Utilize elementos THEAD, TFOOT e TBODY para separar blocos de conteúdo das tabelas;
Utilize o atributo scope para associar colunas e linhas de uma tabela simples;

Tabelas acessíveis

Para tabelas mais complexas, utilize os atributos headers e IDs para associar colunas e linhas;
Utilize CSS para formatação visual da tabela;
Teste o resultado em diversos navegadores e tecnologias assistivas (como leitores de tela)
Valide seu código pelo W3C;
E finalmente…

Tabelas acessíveis

Não utilize tabelas para layout

Foto do Darth Vader tentando usar uma lampada como espada

Elas não foram feitas para isso.

Formulários e tabelas acessíveis

Formulários acessíveis

Tipos de campos de formulário

<input>
- Text
- Password
- Hidden
- Checkbox
- Radio
- File
- Submit
- Reset
- Button
- Image

<textarea>
<select>
<option>

Além da tag
<FORM>

Formulários acessíveis

Outros elementos do formulário

<label>
<fieldset>
<legend>
<optgroup>
<button>

Formulários acessíveis

Relacionando elementos

Formulários acessíveis

Nome <input type="text" name="nome" />

Nome

Formulários acessíveis

Atalhos de teclado para navegação em formulários – JAWS

Teclas de atalho do software JAWS para navegação por formulários

Formulários acessíveis

Utilizar o elemento label para associar rótulos de textos em controles de formulários.

Formulários acessíveis

Em um campo de entrada de texto:

<label for="firstname">First name:</label>

First name:

Em um campo checkbox:

HTML

Formulários acessíveis

Quando não puder utilizar o elemento "label" Utilizar o atributo "title"

Exemplo: Campos de texto para números de telefone

<fieldset>
<legend>Phone number</legend>
<input id="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" title="First three digits of phone number" type="text" value="" >
<input id="lastDigits" title="Last four digits of phone number" type="text" value="" > </fieldset>

Phone number

Formulários acessíveis

Acessibilidade e usabilidade

Formulários acessíveis

<label for="opcao2" >Almoço</label>

Selecione uma opção:

Café da manhã

Almoço

Jantar

Formulários acessíveis

<label for="firstname">First name:</label>

First name:

Formulários acessíveis

Formatação visual

Formulários acessíveis

Nome

E-mail

Telefone

Comentários

Formulários acessíveis

Agrupando elementos

Formulários acessíveis

Nome

E-mail

Telefone

E-mail

Telefone

Formulários acessíveis

Nome

Contatos pessoais

E-mail

Telefone

Contatos comerciais

E-mail

Telefone

Formulários acessíveis

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>Residential Address</legend>
     <label for="raddress">Address: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">Postal/Zip Code: </label>
     <input type="text" id="rzip" name="rzip" />
     ...more residential address information...
   </fieldset>
   <fieldset>
     <legend>Postal Address</legend>
     <label for="paddress">Address: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">Postal/Zip Code: </label>
     <input type="text" id="pzip" name="pzip" />
     ...more postal address information...
   </fieldset>
</form>

Formulários acessíveis

<form action=“#" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
<optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
</optgroup>
<optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
</optgroup>
<optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
</optgroup>
   </select>
</form>

Formulários acessíveis

Informações adicionais

Formulários acessíveis

Campos em vermelho são de preenchimento obrigatório

Formulários acessíveis

Campos em vermelho são de preenchimento obrigatório

Formulários acessíveis

Campos marcados com * são de preenchimento obrigatório

Formulários acessíveis

Verifique se o formulário está acessível somente via teclado

Formulários acessíveis

foto com diversas pessoas com deficiências utilizando um computador

Formulários acessíveis

Validar e testar

Formulários acessíveis

Keyword	State	Data type
`hidden`	Hidden	An arbitrary string
`text`	Text	Text with no line breaks
`search`	Search	Text with no line breaks
`tel`	Telephone	Text with no line breaks
`url`	URL	An absolute IRI
`email`	E-mail	An e-mail address or list of e-mail addresses
`password`	Password	Text with no line breaks (sensitive information)
`datetime`	Date and Time	A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC
`date`	Date	A date (year, month, day) with no time zone
`month`	Month	A date consisting of a year and a month with no time zone
`week`	Week	A date consisting of a week-year number and a week number with no time zone
`time`	Time	A time (hour, minute, seconds, fractional seconds) with no time zone
`datetime-local`	Local Date and Time	A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone
`number`	Number	A numerical value
`range`	Range	A numerical value, with the extra semantic that the exact value is not important
`color`	Color	An sRGB color with 8-bit red, green, and blue components
`checkbox`	Checkbox	A set of zero or more values from a predefined list
`radio`	Radio Button	An enumerated value
`file`	File Upload	Zero or more files each with a MIME type and optionally a file name
`submit`	Submit Button	An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
`image`	Image Button	A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission
`reset`	Reset Button	n/a
`button`	Button	n/a

Formulários acessíveis

Ilustração de como o navegador Opera exibe um formulário em HTML5

Formulários acessíveis

Formulários acessíveis

Ilustração de como o navegador Chrome exibe um formulário em HTML5

Formulários acessíveis

Ilustração de como o navegador Internet Explorer exibe um formulário em HTML5

Formulários acessíveis

Certifique-se que todo o formulário possa ser acessado via teclado
Relacione elementos de formulário utilizando o elemento LABEL e o atributo ID
Se não for possível utilizar o elemento LABEL, utilize o atributo TITLE em campos de formulário.
Utilize o atributo ALT para adicionar texto alternativo a imagens em botões.
Cuidado com a formatação visual dos formulários. Caso as faça, utilize CSS

Formulários acessíveis

Agrupe elementos de formulário utilizando o atributo FIELDSET e OPTGROUP
Forneça informações relevantes para auxiliar o usuário e nunca utilize apenas cor para transmitir informações no formulário.
Teste o resultado em diversos navegadores e tecnologias assistivas (como leitores de tela)
Valide seu código pelo W3C;

Nerdcast

http://jovemnerd.ig.com.br/nerdcast/nerdcast-256-cegos-nerds-e-loucos/

Obrigado

Reinaldo Ferraz

W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil

reinaldo@nic.br
Twitter: @reinaldoferraz