Informática Aplicada · HTML & Acessibilidade
Aprenda a estruturar tabelas de dados, criar formulários acessíveis e aplicar os atributos WAI-ARIA para tornar suas páginas utilizáveis por todos.
Elemento HTML usado para organizar dados em linhas e colunas. Ideal para comparações, horários, listas de notas, etc.
Use tabelas apenas para dados tabulares. Nunca utilize tabelas para criar layouts de página — use CSS para isso.
Tags como <thead>, <tbody>, <tfoot> e <caption> ajudam leitores de tela e buscadores.
| Aluno | Prova 1 | Prova 2 | Trabalho | Média |
|---|---|---|---|---|
| Ana Silva | 8,5 | 9,0 | 10,0 | 9,2 |
| Bruno Costa | 7,0 | 7,5 | 8,0 | 7,5 |
| Carla Mendes | 9,0 | 8,5 | 9,5 | 9,0 |
| Diego Rocha | 6,5 | 7,0 | 7,0 | 6,8 |
| Eduarda Lima | 10,0 | 9,5 | 10,0 | 9,8 |
| Média da Turma | 8,2 | 8,3 | 8,9 | 8,5 |
colspan="2" une 2 colunas.rowspan="2" une 2 linhas. Use para células que abrangem mais de uma posição.
scope="col" indica que o <th> é cabeçalho de coluna. scope="row" indica cabeçalho de linha. Essencial para acessibilidade.
Envolve todos os campos. Atributos principais: action (onde enviar) e method (GET ou POST).
text, email, password, number, date, checkbox, radio, file, submit.
Todo campo precisa de um <label> associado via for / id. Facilita clique e é essencial para leitores de tela.
Informe um e-mail válido.
É a prática de criar sites que qualquer pessoa possa usar, incluindo pessoas com deficiências visuais, auditivas, motoras ou cognitivas.
Web Content Accessibility Guidelines — diretrizes do W3C com critérios de acessibilidade divididos em níveis: A, AA e AAA.
Softwares como NVDA e JAWS leem o conteúdo da tela em voz alta. Um HTML semântico e bem estruturado é fundamental para eles funcionarem.
Perceptível · Operável · Compreensível · Robustez — todo conteúdo deve atender esses pilares.
<header>, <nav>, <main>, <article>, <footer> já oferecem acessibilidade por padrão — sem precisar de ARIA!
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) é um conjunto de atributos HTML que permite comunicar às tecnologias assistivas a função, o estado e as propriedades de elementos de interface, especialmente quando o HTML nativo não é suficiente.
Define o papel de um elemento. Ex.: role="navigation", role="alert", role="dialog", role="button".
Fornece um nome acessível quando não há texto visível. Ex.: botão com ícone sem texto. aria-label="Fechar menu".
Aponta para um elemento que descreve o campo. Ideal para mensagens de erro ou dicas de preenchimento.
aria-expanded, aria-hidden, aria-checked, aria-disabled comunicam o estado atual de componentes interativos.
Anuncia mensagens urgentes ao leitor de tela imediatamente.
Anuncia mudanças dinâmicas no conteúdo quando o usuário estiver livre.
Oculta o elemento de tecnologias assistivas (decorativos ou duplicados).
Nomeia o elemento quando não há texto visível disponível.
Indica se um menu, acordeão ou seção está aberto (true) ou fechado (false).
Informa que o campo é obrigatório — use junto com required.
<button> a <div role="button">, <nav> a <div role="navigation">, etc.
Abra o Bloco de Notas, crie um arquivo .html e resolva cada exercício. Salve e abra no navegador para ver o resultado.
Crie uma tabela com os horários da semana (Segunda a Sexta) e 5 disciplinas. Use <caption>, <thead>, <tbody> e o atributo scope nos cabeçalhos.
Crie uma tabela de resultados esportivos onde o nome do time ocupe 2 linhas (rowspan="2") e o placar total ocupe 2 colunas (colspan="2").
Crie um formulário com os campos: Nome, E-mail, Telefone, Assunto (select com 3 opções) e Mensagem (textarea). Todo campo deve ter um <label> associado corretamente pelo atributo for / id.
Expanda o formulário anterior adicionando: campo de data de nascimento (type="date"), senha (type="password"), confirmação de senha e checkbox "Aceito os termos". Use required nos campos obrigatórios.
No formulário do exercício 4, adicione: aria-required="true" nos campos obrigatórios, aria-describedby apontando para uma <span> com dica de preenchimento na senha, e aria-label no botão de enviar.
Pegue a tabela do exercício 1 e torne-a acessível: adicione role="table", aria-label descritivo na tabela, e aria-sort em um dos cabeçalhos para simular ordenação.
Crie uma página HTML completa com: <header> com <nav> e aria-label="Menu principal", <main> contendo uma tabela de dados e um formulário de busca, e <footer>. Aplique HTML semântico e atributos ARIA em todos os componentes interativos.