Se você assistiu à lição O que é acessibilidade e por que ela é importante?, então sabe que acessibilidade digital é um conceito amplo; em essência, trata-se de garantir que o maior número possível de pessoas possa usar a web.
Além dos aspectos legais e comerciais, o mais importante é que seguir as diretrizes de acessibilidade torna a experiência de navegação muito melhor para todos.
A maneira mais fácil de criar um tema, plugin ou site acessível é pensar nisso desde o início. Inclua a acessibilidade já no planejamento e conscientize seus colegas (e clientes) sobre o assunto. Assim, você não apenas poderá identificar erros logo no início, como também evitará muitos deles desde o começo.
Nesta lição, você aprenderá os fundamentos do HTML acessível e saberá como aplicá-los ao seu tema do WordPress.
Fundamentos
O HTML é tão poderoso quanto acessível.
Experimente: abra seu editor de código e crie uma página HTML válida, corretamente marcada com landmarks, títulos, texto, botões, links, formulários etc.
Você pode usar o código abaixo, se quiser.
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Meu site</title>\n</head>\n<body>\n\n<header>\n <h1>Boas-vindas ao meu site</h1>\n <nav>\n <ul>\n <li><a href="#home">Início</a>\n <li><a href="#about">Sobre</a>\n <li><a href="#services">Serviços</a>\n <li><a href="#contact">Contato</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <article id="home">\n <h2>Início</h2>\n <p>Esta é a seção inicial, onde você encontrará conteúdo introdutório.</p>\n <form name="Just a button">\n <button type="button">Clique em mim!</button>\n </form>\n </article>\n\n <article id="about">\n <h2>Sobre</h2>\n <p>Esta seção contém informações sobre o site ou sobre a pessoa/empresa por trás dele.</p>\n <p><a href="https://example.com">Veja o perfil completo deles</a></p>\n </article>\n\n <article id="services">\n <h2>Serviços</h2>\n <p>Aqui você encontrará detalhes sobre os serviços oferecidos.</p>\n </article>\n\n <article id="contact">\n <h2>Contato</h2>\n <form action="#" method="post" name="contact" autocomplete="on">\n <fieldset>\n <legend>Vamos conversar</legend>\n <div><label for="name">Nome:</label></div>\n <div><input type="text" id="name"></div>\n <div><label for="email">E-mail:</label></div>\n <div><input type="email" id="email"></div>\n <div><label for="message">Mensagem:</label></div>\n <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>\n <div><input type="submit" value="Enviar"></div>\n </fieldset>\n </form>\n </article>\n</main>\n\n<footer>\n <p>© 2024 Meu site</p>\n</footer>\n\n</body>\n</html>\nAgora teste o código com uma ferramenta online, como o Web Accessibility Checker, e verifique se não há nenhum problema de acessibilidade.
Os problemas geralmente começam quando você adiciona estilos, scripts ou recursos de mídia. Como desenvolvedor moderno de temas do WordPress, você trabalhará principalmente com essas tecnologias — como blocos baseados em React, padrões criados com PHP e CSS gerado a partir do theme.json.
O ponto principal é ter consciência da acessibilidade ao programar e projetar.
Vamos conhecer algumas técnicas e práticas recomendadas que desenvolvedores e designers podem seguir ao criar blocos, modelos e padrões personalizados.
HTML semântico
Em vez de envolver tudo em elementos <div>, use os elementos semânticos ou significativos do HTML.
Isso evitará códigos desnecessariamente complexos ou o trabalho de “reinventar a roda”.
Landmarks
Landmarks são uma forma de definir a estrutura ou o esquema da página. Eles ajudam os leitores de tela a navegar pelo conteúdo com mais facilidade.
Por exemplo, em vez de usar apenas alguns <div> e suas classes:
<div class="header">\n <h1>Boas-vindas ao meu site</h1>\n</div>\n\n\n<div class="nav">\n <ul>\n <li><a href="#home">Início</a></li>\n <li><a href="#about">Sobre</a></li>\n <li><a href="#services">Serviços</a></li>\n <li><a href="#contact">Contato</a></li>\n </ul>\n</div>Você pode usar landmarks para as seções correspondentes.
<header>\n <h1>Boas-vindas ao meu site</h1>\n</header>\n\n\n<nav>\n <ul>\n <li><a href="#home">Início</a></li>\n <li><a href="#about">Sobre</a></li>\n <li><a href="#services">Serviços</a></li>\n <li><a href="#contact">Contato</a></li>\n </ul>\n</nav>Se você criar ou projetar um tema pelo Editor do site, também será possível definir landmarks nele.
Para definir os blocos Group, Row e Stack como elementos de seções de conteúdo, selecione o bloco, abra Settings e expanda a seção Advanced .
Role para baixo e, de acordo com a função e a posição do bloco, selecione header, main, section, article, aside ou footer como o HTML ELEMENT.
Títulos
Ao adicionar títulos ao modelo, use-os sempre na ordem correta, começando em H2 e seguindo em sequência até H6.
No Editor do site, clique em Document Overview > Outline para verificar se algum nível foi omitido ou se tudo está correto.
Botão versus link
Ao projetar ações para o usuário, considere os seguintes pontos ao usar botões e links:
- Se quiser que os usuários realizem uma ação, use o elemento button.
- Se quiser que eles naveguem para outra página, use um elemento anchor (<a>).
- Se um link precisar parecer um botão, como em uma chamada para ação de uma landing page, estilize-o com CSS.
Formulários
Ao projetar um formulário no seu tema, siga as orientações abaixo:
Sempre coloque o formulário dentro de um elemento form.
Defina sempre o type correto e os atributos correspondentes nos campos de entrada. Por exemplo, se você definir o type do campo como tel, um teclado numérico será exibido em dispositivos móveis.
<input type="tel" name="phone" id="phone" required>Não dependa apenas do texto do placeholder para explicar para que serve o campo de entrada; use sempre rótulos acessíveis.
Use o elemento search para qualquer formulário de pesquisa.
Ao projetar um formulário de login, você pode usar o atributo autocomplete para ajudar o gerenciador de senhas a preencher o formulário.
<input type="password" autocomplete="current-password">Por padrão, a maioria dos navegadores exibe um anel de foco no elemento focado.
Se quiser alterar a exibição desse anel de foco, use a pseudo-classe :focus-visible e nunca o remova completamente.
Cores
Crie uma paleta de cores acessível com contraste suficiente.
Ao editar um modelo, o WordPress avisará se você usar cores de texto e de fundo que não ofereçam contraste suficiente.
Não transmita informações apenas por meio de cores. Por exemplo, não identifique os links somente pela cor; defina os estados de foco da mesma forma. Em caso de dúvida, observe os estilos padrão de links e foco do HTML e siga-os.
Tipografia
Ao definir o tamanho da fonte, use unidades relativas, como rem, e evite usar px.
Limite a largura do conteúdo a entre 50 e 70 caracteres; para isso, a unidade character ou ch é perfeita.
Use um espaçamento entre linhas adequado ao tamanho da fonte.
Dê prioridade às preferências do usuário
A base do design responsivo são as media queries, que ajudam a melhorar a experiência do usuário.
Algumas media queries, como prefers-color-scheme ou prefers-reduced-motion, estão diretamente relacionadas à acessibilidade, enquanto queries como pointer, hover ou scripting podem ser usadas para adaptar o comportamento dos componentes ao dispositivo.
Alternativa ao ARIA
ARIA é a abreviação de Accessible Rich Internet Applications framework e costuma ser mencionada como uma maneira rápida de tornar o conteúdo HTML mais acessível para leitores de tela.
No entanto, a regra mais importante para usar ARIA é utilizá-lo somente quando for realmente necessário. O ideal é sempre usar os próprios recursos do HTML para transmitir o significado do conteúdo ao leitor de tela.
Atributos ARIA usados incorretamente reduzem a acessibilidade. Portanto, evite-os, a menos que você não tenha controle sobre o HTML ou precise lidar com conteúdo dinâmico.
Para obter mais informações, consulte o WAI-ARIA basics da MDN.
Resumo e leituras adicionais
A acessibilidade é um processo contínuo. Mesmo uma pequena melhoria pode fazer uma grande diferença para os visitantes do seu site, sem nenhum efeito negativo. Ela nunca piorará a experiência do usuário.
Para saber mais, confira os tutoriais da Web Accessibility Initiative (WAI) do W3C.