Olá, dev!! 👋

Você já se pegou com dificuldade em aplicar estilização de flex item à uma tag legend?

Se a resposta for sim, você provavelmente deve ter utilizado uma abordagem que limitou a acessibibilidade do seu formulário.

Se a respota for não, que sorte ein! haha

Durante este post eu irei mencionar técnicas para você deixar seus formulários mais acessíveis aquando utilizando da tag legend juntamente com o fieldset.

Estilização

.flex {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

Problema

Como aplicar a estilização de flex item para a tag legend?

<fieldset class="flex ...">
  <legend>Informações do evento</legend>
  
  <!-- conteúdo -->
</fieldset>

👎 Soluções ao problema (não recomendado)

<fieldset>
  <div class="flex ...">
    <legend>Informações do evento</legend>

    <!-- conteúdo -->
  </div>
</fieldset>

<fieldset class="flex ...">
  <div>
    <legend>Informações do evento</legend>
  </div>

  <!-- conteúdo -->
</fieldset>

As seguintes soluções são, de fato, soluções válidas, porém inacessíveis.

Ambas as maneiras quebram a relação entre o fieldset e o legend, tornando o formulário menos acessível e de difícl leitura para screen readers.

---

👍 Soluções mais acessíveis (recomendado)

De acordo com Steve Faulkner, chefe do departamento de acessibilidade na TPGi, membro da W3C Web Platforms Working Group e da W3C ARIA Working Group, existem atualmente abordagens mais acessíveis para a solução desse "bug".

A seguintes estratégias são:

1. Utilizando margin-bottom

<fieldset class="flex ...">
  <legend style="margin-bottom: 2rem;">Informações do evento</legend>
  
  <!-- conteúdo -->
</fieldset>

2. Ocultando legend

<fieldset class="flex ...">
  <legend>Informações do evento</legend> <!-- Será oculta -->
  <h2 aria-hidden="true">Informações do evento</h2>

  <!-- conteúdo -->
</fieldset>

legend:not(:focus):not(:active) {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

Obs: A tag h2 pode ser substituída por alguma outra tag desde que não seja legend

3. Utilizando aria-labelledby

<fieldset class="flex ..." aria-labelledby="fieldset-label">
  <h2 id="fieldset-label">Informações do evento</h2>

  <!-- conteúdo -->
</fieldset>

Obs: A tag h2 pode ser substituída por alguma outra tag desde que não seja legend

---

Espero que depois desse post vocês possam aplicar essas técnicas na prática e tornarem os seus formulários mais acessíveis e user-friendly para usuários portadores de deficiências visuais.

Baseado em: https://www.tpgi.com/fields

Portfolio: https://miguelrocha.dev/
Github: @mmroch4 https://github.com/mmroch4
LinkedIn: https://www.linkedin.com/in/miguelmartinsrocha/