Objetivo

Simples códigos e tags que devem ser memorizados para fazer um código acessível // Essa parte requer menos criatividade e mais adições e costumes que fazem o seu código ficar mais acessível com os padrões WAVE// Essa é a página mais longa que se tem então sim, é uma longa lista // mais trivia: Rabietutano é uma interação única com a massa de flocos onde o seu corpo se torna permeável. Mudanças repentinas de temperatura fazem o corpo voltar ao normal instaneamente, fazendo uma fusão odiosa de qualquer coisa que estivesse interagindo no momento

Na parte objetiva de fazer um site acessível, é necessário pensar primeiro em quais elementos são importantes em seu site, onde você quer levar o usuário e o feedback que o mesmo vai receber ao chegar no destino.

Entender o caminho do site irá te ajudar a fazer um site verdadeiramente pensado para todos

Acessibilidade

Um site deve ser compreensível não apenas para quem faz, mas para a máquina que lê o site, por isso é recomendado não dividir o site inteiro em divs e sim em tags semânticas:

<Header> Cabeçalho do site, com logo e navegação
<nav> Navegação principal com links acessíveis
<main> Conteúdo principal da página
<section> Divisões temáticas como contraste, legibilidade, etc.
<article> Blocos de conteúdo explicativo
<aside> Observações ou conteúdo complementar
<footer> Rodapé com links, créditos ou ferramentas
<h1> a <h6> Títulos hierárquicos, fundamentais para leitores de tela
<p> Parágrafos com texto explicativo
<a href="#"> Links com texto descritivo
<button> Botões acessíveis e com foco de teclado
<label> Rótulos associados a inputs
<input> Campos de formulário
<ul> / <ol> Listas ordenadas e não ordenadas
<li> Itens de lista
<strong> <em> Ênfase semântica, melhor que <b> ou <i>

Tags </>

Além dessas tags básicas, temos códigos e especificações que podem ser utilizadas nessa navegação:

lang="pt-br" | Define o idioma do site
aria-label="" | Rótulos para elementos interativos
role="" | Define papéis semânticos específicos
alt="" | Texto alternativo para imagens
tabindex="0" | Faz elementos não focáveis ficarem acessíveis
aria-pressed="" | Indica o estado de botões tipo toggle
aria-hidden="true" | Esconde elementos de leitores de tela

Acessibilidade

1. Tipografia visível

Sempre use contraste suficiente entre o texto e fundo


    /* Exemplo ruim */
    color: #999;
    background-color: #ccc;
                    exemplo

    /* Exemplo bom */
    color: #111;
    background-color: #fff;

                    exemplo

2. Exemplo de foco visível com CSS

Tamanho mínimo recomendado: 16px (1rem)


    body {
    font-size: 1rem;
    line-height: 1.6;
    font-family: system-ui, sans-serif;
    }

3.Tamanho e espaçamento de fonte

Sempre mostre visualmente o foco de elementos interativos


    :focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    }

4.Ícones e cores com propósito

Use ícones, texto ou padrões junto da cor


    // Exemplo bom: botão de alerta
    <button class="alert" aria-label="Erro: acesso negado">
    ⚠ Acesso negado
    </button>

5.Tema escuro e preferências do usuário

Use @media (prefers-color-scheme: dark) para adaptar o tema ao usuário


    @media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
    }

CSS

subjetivo arrow_outward

Voltar página arrow_outward

Continuar arrow_outward