Acessibilidade, SEO e Performance

Este módulo consolida práticas profissionais modernas relacionadas a:

inclusão digital;
acessibilidade;
SEO técnico;
otimização de carregamento;
qualidade visual;
debugging;
inspeção profissional.

O foco deixa de ser apenas “construir interfaces” e passa a incluir:

qualidade técnica;
experiência universal;
performance;
rastreabilidade;
validação profissional;
preparação para produção real.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

construir interfaces acessíveis;
aplicar princípios básicos de A11y;
melhorar SEO técnico;
otimizar carregamento Front-end;
validar HTML e CSS;
utilizar Lighthouse;
utilizar DevTools para debugging;
aplicar práticas modernas de performance.

1. Acessibilidade Web (A11y)

Fundamentação Teórica

Acessibilidade Web (A11y) é o conjunto de práticas que tornam aplicações utilizáveis por:

pessoas com deficiência visual;
pessoas com deficiência motora;
usuários de leitores de tela;
usuários de navegação por teclado;
usuários com baixa visão;
usuários em dispositivos variados.

A acessibilidade moderna depende fortemente de:

HTML semântico;
contraste adequado;
foco visível;
navegação por teclado;
atributos ARIA;
textos alternativos.

Conceitos Fundamentais

Conceito	Finalidade
`alt`	Descrição de imagens
`focus`	Navegação por teclado
`aria-label`	Descrição acessível
HTML semântico	Melhor interpretação
contraste	Legibilidade
screen readers	Leitura assistiva

Exemplo 1 — Imagem Acessível e Navegação por Teclado

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Acessibilidade Web</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <header>

        <nav>

            <a href="#conteudo">
                Ir para conteúdo
            </a>

        </nav>

    </header>

    <main id="conteudo">

        <h1>
            Curso Front-end
        </h1>

        <img
            src="laboratorio.webp"
            alt="Laboratório de informática com alunos estudando HTML5">

        <button>
            Inscrever-se
        </button>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

a,
button {

    padding: 12px 20px;

    display: inline-block;
}

a:focus,
button:focus {

    outline: 4px solid #0077cc;

    outline-offset: 4px;
}

img {
    max-width: 100%;
    border-radius: 12px;
}

Exemplo 2 — aria-label e Formulário Acessível

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Formulário Acessível</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <form>

        <label for="busca">
            Buscar cursos
        </label>

        <input
            type="search"
            id="busca"
            aria-label="Campo de busca de cursos">

        <button
            type="submit"
            aria-label="Enviar busca">

            Buscar

        </button>

    </form>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    padding: 40px;
}

form {
    display: flex;
    gap: 10px;
}

input,
button {

    padding: 12px;

    border-radius: 8px;

    border: 1px solid #ccc;
}

input:focus,
button:focus {

    outline: 3px solid #005fcc;
}

Discussão Técnica

Boas práticas fundamentais:

nunca remover outline sem alternativa;
sempre utilizar alt significativo;
evitar textos genéricos como:
- “imagem”;
- “foto”;
- “clique aqui”;
utilizar semântica correta;
garantir navegação por teclado.

Contraste e Legibilidade

O contraste adequado melhora:

leitura;
acessibilidade;
UX;
uso em ambientes externos;
leitura por usuários com baixa visão.

Ferramentas modernas utilizam a razão de contraste da WCAG.

Exemplo de Relação de Contraste

Contraste\ WCAG\ \geq\ 4.5:1

Referências

Livros

Inclusive Design Patterns
Accessibility for Everyone

Sites

2. SEO Técnico Básico

Fundamentação Teórica

SEO Técnico é o conjunto de práticas que melhoram:

indexação;
rastreamento;
compreensão semântica;
desempenho inicial;
estrutura da página.

HTML5 semântico influencia diretamente:

motores de busca;
acessibilidade;
performance;
organização da informação.

Conceitos Fundamentais

Conceito	Objetivo
headings corretos	Hierarquia
meta description	Resumo da página
semântica	Melhor indexação
Lighthouse	Auditoria
performance inicial	Velocidade

Exemplo 1 — Estrutura SEO Profissional

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="description"
          content="Curso moderno de HTML5 e CSS3 com foco em Front-end profissional.">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>
        Curso Front-end Moderno
    </title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <header>

        <h1>
            Curso Front-end Moderno
        </h1>

    </header>

    <main>

        <section>

            <h2>
                HTML5 Semântico
            </h2>

            <p>
                Estrutura moderna preparada para SEO.
            </p>

        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    line-height: 1.6;
    padding: 40px;
}

h1 {
    color: #003366;
}

h2 {
    color: #005599;
}

Exemplo 2 — Hierarquia Correta de Headings

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Heading Hierarchy</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>
            Portal de Tecnologia
        </h1>

        <section>

            <h2>
                Desenvolvimento Web
            </h2>

            <article>

                <h3>
                    HTML5 Moderno
                </h3>

                <p>
                    Estrutura semântica profissional.
                </p>

            </article>

        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    padding: 40px;
}

h1 {
    color: #003366;
}

h2 {
    color: #005599;
}

h3 {
    color: #0077aa;
}

Discussão Técnica

Evitar:

múltiplos h1 desnecessários;
uso excessivo de div;
ausência de main;
headings fora de ordem;
páginas sem descrição.

Lighthouse

O Lighthouse é uma ferramenta do Chrome que avalia:

performance;
acessibilidade;
SEO;
boas práticas;
experiência do usuário.

Fluxo Simplificado

Chrome DevTools
        ↓
Lighthouse
        ↓
Auditoria automática

Referências

Livros

SEO 2026

Sites

3. Performance Front-end

Fundamentação Teórica

Performance Front-end influencia:

UX;
SEO;
consumo de dados;
carregamento mobile;
retenção de usuários.

Interfaces modernas precisam:

reduzir tamanho de arquivos;
evitar redundância;
otimizar imagens;
minimizar processamento visual.

Conceitos Fundamentais

Conceito	Benefício
WebP	Redução de tamanho
CSS DRY	Menos redundância
carregamento eficiente	Melhor UX
compressão	Menor tráfego

Exemplo 1 — Imagem Otimizada

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Imagem Otimizada</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <img
        src="banner.webp"
        alt="Banner institucional">

</body>
</html>

Arquivo: `style.css`

img {

    width: 100%;

    height: auto;

    display: block;
}

Exemplo 2 — CSS Modular e DRY

Estrutura de Pastas

projeto/
│
├── css/
│   ├── style.css
│   ├── buttons.css
│   └── cards.css

Arquivo: `style.css`

@import url("buttons.css");
@import url("cards.css");

:root {
    --cor-primaria: #004b8d;
}

Arquivo: `buttons.css`

.botao {

    padding: 12px 20px;

    border-radius: 8px;

    background-color:
        var(--cor-primaria);

    color: white;
}

Arquivo: `cards.css`

.card {

    padding: 20px;

    border-radius: 12px;

    background-color: #f5f5f5;
}

Discussão Técnica

Boa performance depende de:

imagens leves;
CSS organizado;
menos repetição;
menos renderizações desnecessárias;
layout consistente.

Otimização de Imagens

WebP tornou-se padrão importante porque:

reduz tamanho;
mantém qualidade;
melhora carregamento mobile.

Comparação Conceitual

Formato	Característica
PNG	Qualidade alta, maior tamanho
JPEG	Compressão tradicional
WebP	Melhor equilíbrio moderno

Referências

Livros

High Performance Browser Networking
Designing for Performance

Sites

4. Validação e Debugging

Fundamentação Teórica

Projetos profissionais precisam ser:

validados;
inspecionados;
depurados;
auditados.

Ferramentas modernas ajudam a detectar:

erros HTML;
problemas CSS;
falhas de acessibilidade;
problemas de performance;
erros de layout.

Ferramentas Fundamentais

Ferramenta	Função
W3C Validator	Validar HTML
DevTools	Inspeção
Lighthouse	Auditoria
Console	Logs e erros

Exemplo 1 — Validação HTML

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Validação</title>

</head>
<body>

    <main>

        <h1>
            HTML válido
        </h1>

        <p>
            Estrutura semântica correta.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
}

Exemplo 2 — Inspeção Visual com DevTools

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>DevTools</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="card">

        <h2>
            Produto
        </h2>

        <p>
            Exemplo para inspeção visual.
        </p>

    </section>

</body>
</html>

Arquivo: `style.css`

.card {

    width: 300px;

    padding: 20px;

    background-color: #eee;

    border-radius: 12px;
}

Atividade Recomendada

Abrir Chrome;
Pressionar F12;
Inspecionar elemento;
Alterar CSS em tempo real;
Observar Box Model;
Verificar acessibilidade;
Executar Lighthouse.

Discussão Técnica

DevTools tornou-se ferramenta obrigatória no Front-end moderno.

Competências essenciais:

inspeção visual;
debugging;
análise de layout;
auditoria de performance;
validação.

Referências

Livros

Learning Web Design

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Acessibilidade;
Navegação por teclado;
ARIA e screen readers;
SEO técnico;
Lighthouse;
Performance;
Otimização de imagens;
Validação;
Debugging com DevTools.

Mini Projeto Integrador Sugerido

Refatorar um projeto dos módulos anteriores adicionando:

acessibilidade;
SEO técnico;
headings corretos;
foco visível;
aria-label;
imagens otimizadas;
Lighthouse;
validação W3C;
melhoria de performance.

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Inclusive Design Patterns
Accessibility for Everyone
High Performance Browser Networking
Designing for Performance
SEO 2026
Learning Web Design

Plataformas e Documentação

Fim da aula 07

Linguagem e Técnica de Programação I – Aula 07

Acessibilidade, SEO e Performance

Objetivos do Módulo

1. Acessibilidade Web (A11y)

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Imagem Acessível e Navegação por Teclado

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — aria-label e Formulário Acessível

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Contraste e Legibilidade

Exemplo de Relação de Contraste

Referências

Livros

Sites

2. SEO Técnico Básico

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Estrutura SEO Profissional

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Hierarquia Correta de Headings

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Lighthouse

Fluxo Simplificado

Referências

Livros

Sites

3. Performance Front-end

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Imagem Otimizada

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — CSS Modular e DRY

Estrutura de Pastas

Arquivo: style.css

Arquivo: buttons.css

Arquivo: cards.css

Discussão Técnica

Otimização de Imagens

Comparação Conceitual

Referências

Livros

Sites

4. Validação e Debugging

Fundamentação Teórica

Ferramentas Fundamentais

Exemplo 1 — Validação HTML

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Inspeção Visual com DevTools

Arquivo: index.html

Arquivo: style.css

Atividade Recomendada

Discussão Técnica

Referências

Livros

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Mini Projeto Integrador Sugerido

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Plataformas e Documentação

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `style.css`

Arquivo: `buttons.css`

Arquivo: `cards.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`