Olá a todos vocês, desenvolvedores maravilhosos! Neste post, vou orientá-lo na criação de um formulário de contato simples usando HTML semântico e uma pseudo classe CSS incrível conhecida como :focus-within. O :focus-within class permite um grande controle sobre o foco e permite que o usuário saiba que é exatamente onde ele está na experiência. Antes de começarmos, vamos ao cerne do que é acessibilidade na web.

Acessibilidade do formulário?

Você provavelmente já ouviu o termo “acessibilidade” em todos os lugares ou o numerônimo a11y. O que isso significa? Essa é uma ótima pergunta com tantas respostas. Quando olhamos para o mundo físico, acessibilidade significa coisas como ter recipientes para objetos cortantes nos banheiros da sua empresa, garantir que haja rampas para pessoas com rodas e ter periféricos como grandes teclados impressos à mão para quem precisar.

A gama de acessibilidade não para por aí, temos acessibilidade digital da qual precisamos estar cientes também, não apenas para usuários externos, mas também para colegas internos. O contraste de cores é uma fruta fácil de alcançar que deveríamos ser capazes de cortar pela raiz. Em nossos locais de trabalho, certificando-nos de que, caso algum funcionário precise de tecnologia assistiva, como um leitor de tela, nós a tenhamos instalada e disponível. Há muitas coisas que precisam ser levadas em consideração. Este artigo se concentrará na acessibilidade da web, mantendo o WCAG (diretrizes de acessibilidade de conteúdo da web) em mente.

Essa pseudo classe é realmente ótima quando você deseja enfatizar que o usuário está de fato interagindo com o elemento. Você pode alterar a cor de fundo de todo o formulário, por exemplo. Ou, se o foco for movido para uma entrada, você poderá deixar o rótulo em negrito e maior de um elemento de entrada quando o foco for movido para essa entrada. O que está acontecendo abaixo nos trechos de código e exemplos é o que torna o formulário acessível. :focus-within é apenas uma maneira de usar CSS a nosso favor.

Como focar

O foco, no que diz respeito à acessibilidade e à experiência web, é o indicador visual de que algo está sendo interagido na página, na UI ou dentro de um componente. CSS pode dizer quando um elemento interativo está em foco.

Certifique-se sempre de que o indicador de foco ou o anel ao redor dos elementos focáveis ​​mantém o contraste de cor adequado durante a experiência.

O foco é escrito assim e pode ser estilizado para combinar com sua marca, se você decidir estilizá-lo.

:focus {
  * / INSERT STYLES HERE /*
}

Faça o que fizer, nunca defina seu esboço para 0 or none. Isso removerá um indicador de foco visível para todos durante toda a experiência. Se precisar remover o foco, você pode, mas certifique-se de adicioná-lo novamente mais tarde. Quando você remove o foco do seu CSS ou define o esboço como 0 or none, ele remove o anel de foco de todos os seus usuários. Isso é muito visto ao usar uma redefinição de CSS. Uma redefinição de CSS redefinirá os estilos para uma tela em branco. Desta forma, você fica encarregado da tela vazia para estilizar como desejar. Se você deseja usar uma redefinição de CSS, confira Redefinição de Josh Comeau.

*NÃO FAÇA o que está abaixo!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Olhar para dentro!

Uma das maneiras mais legais de estilizar o foco usando CSS é o tema deste artigo. Se você ainda não conferiu :focus-within pseudo classe, definitivamente dê uma olhada! Existem muitas joias escondidas quando se trata de usar marcação semântica e CSS, e esta é uma delas. Muitas coisas que são esquecidas são acessíveis por padrão, por exemplo, a marcação semântica é acessível por padrão e deve ser usada em divs o tempo todo.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/pt/">Home</a></li>
      <li><a href="/pt/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

A header, nav, main, section, aside e footer são todos elementos semânticos. O h1 e ul também são semânticos e acessíveis.

A menos que haja um componente personalizado que precise ser criado, então um div é bom de usar, combinado com ARIA (Aplicativos Ricos Acessíveis para Internet). Podemos nos aprofundar no ARIA em uma postagem posterior. Por enquanto vamos focar…veja o que eu fiz lá…nesta pseudo classe CSS.

A :focus-within A pseudo classe permite que você selecione um elemento quando qualquer elemento descendente que ele contém tem foco.

:focus-within em ação!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

APF

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

O código de exemplo acima adicionará uma cor de fundo laranja, adicionará algum preenchimento e alterará a cor dos rótulos para preto.

O produto final se parece com o abaixo. É claro que as possibilidades são infinitas para mudar o estilo, mas isso deve colocá-lo no caminho certo para tornar a web mais acessível para todos!

Outro caso de uso para usar :focus-within seria colocar os rótulos em negrito, com uma cor diferente ou aumentá-los para usuários com baixa visão. O código de exemplo para isso seria parecido com o abaixo.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

APF

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within também tem ótimo suporte ao navegador em todos os aspectos, de acordo com Eu posso usar.

Conclusão

Criar uma experiência de usuário incrível e acessível deve ser sempre uma prioridade ao enviar software, não apenas externamente, mas também internamente. Nós, como desenvolvedores, até a liderança sênior, precisamos estar cientes dos desafios que os outros enfrentam e de como podemos ser embaixadores da plataforma web para torná-la um lugar melhor.

Usar tecnologias como marcação semântica e CSS para criar espaços inclusivos é uma parte crucial para tornar a web um lugar melhor. Vamos continuar avançando e mudando vidas.

Confira outro ótimo recurso aqui em CSS-Tricks on usando :focus-dentro.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
• PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
• PlatãoESG. Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
• PlatoHealth. Inteligência em Biotecnologia e Ensaios Clínicos. Acesse aqui.
• Fonte: https://css-tricks.com/accessible-forms-with-pseudo-classes/