Salut à tous, merveilleux développeurs ! Dans cet article, je vais vous expliquer la création d'un formulaire de contact simple utilisant du HTML sémantique et une pseudo-classe CSS géniale connue sous le nom de :focus-withinL’ :focus-within La classe permet un grand contrôle sur la concentration et fait savoir à votre utilisateur que c'est exactement là où il en est dans l'expérience. Avant de nous lancer, allons au cœur de ce qu’est l’accessibilité Web.

Accessibilité des formulaires ?

Vous avez probablement entendu partout le terme « accessibilité » ou le numéronyme a11y. Qu'est-ce que ça veut dire? C'est une excellente question avec tant de réponses. Lorsque nous regardons le monde physique, l'accessibilité signifie des choses comme avoir des conteneurs pour objets tranchants dans les salles de bains de votre entreprise, s'assurer qu'il y a des rampes pour les personnes assistées au volant et avoir des périphériques comme des claviers à gros caractères à portée de main pour toute personne qui en a besoin.

La gamme de l'accessibilité ne s'arrête pas là : nous devons également être conscients de l'accessibilité numérique, non seulement pour les utilisateurs externes, mais également pour les collègues internes. Le contraste des couleurs est un fruit à portée de main que nous devrions pouvoir étouffer dans l'œuf. Sur nos lieux de travail, nous nous assurons que si un employé a besoin d'une technologie d'assistance comme un lecteur d'écran, nous l'avons installée et disponible. Il y a beaucoup de choses à prendre en compte. Cet article se concentrera sur l'accessibilité du Web en gardant le WCAG (directives d'accessibilité du contenu Web) à l'esprit.

Cette pseudo-classe est vraiment géniale lorsque vous souhaitez souligner que l'utilisateur interagit en fait avec l'élément. Vous pouvez par exemple modifier la couleur d’arrière-plan de l’ensemble du formulaire. Ou, si le focus est déplacé vers une entrée, vous pouvez rendre l'étiquette en gras et plus grande d'un élément d'entrée lorsque le focus est déplacé vers cette entrée. Ce qui se passe ci-dessous dans les extraits de code et les exemples rend le formulaire accessible. :focus-within n'est qu'une façon parmi d'autres d'utiliser CSS à notre avantage.

Comment se concentrer

La concentration, en ce qui concerne l'accessibilité et l'expérience Web, est l'indicateur visuel avec lequel quelque chose interagit sur la page, dans l'interface utilisateur ou dans un composant. CSS peut savoir quand un élément interactif est ciblé.

Assurez-vous toujours que l'indicateur de mise au point ou la bague autour des éléments focalisables maintient le contraste de couleur approprié tout au long de l'expérience.

Focus est écrit ainsi et peut être stylé pour correspondre à votre image de marque si vous choisissez de le styliser.

:focus {
  * / INSERT STYLES HERE /*
}

Quoi que vous fassiez, ne définissez jamais votre plan sur 0 or none. Cela supprimera un indicateur de concentration visible pour tout le monde tout au long de l’expérience. Si vous devez supprimer le focus, vous le pouvez, mais assurez-vous de le rajouter plus tard. Lorsque vous supprimez le focus de votre CSS ou définissez le contour sur 0 or none, cela supprime la bague de mise au point pour tous vos utilisateurs. Cela se voit souvent lors de l'utilisation d'une réinitialisation CSS. Une réinitialisation CSS réinitialisera les styles sur un canevas vierge. De cette façon, vous êtes en charge de la toile vide et pouvez la styliser comme vous le souhaitez. Si vous souhaitez utiliser une réinitialisation CSS, consultez La réinitialisation de Josh Comeau.

*NE PAS FAIRE ce qui est ci-dessous !

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Regarder entre!

L’un des moyens les plus intéressants de styliser le focus à l’aide de CSS est le sujet de cet article. Si vous n'avez pas vérifié le :focus-within pseudo-classe, jetez-y un coup d'œil ! Il existe de nombreux joyaux cachés lorsqu'il s'agit d'utiliser le balisage sémantique et le CSS, et celui-ci en fait partie. Beaucoup de choses négligées sont accessibles par défaut, par exemple, le balisage sémantique est accessible par défaut et doit être utilisé à tout moment sur les div.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/fr/">Home</a></li>
      <li><a href="/fr/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>

La header, nav, main, section, asideet footer sont tous des éléments sémantiques. Le h1 ainsi que ul sont également sémantiques et accessibles.

À moins qu'un composant personnalisé doive être créé, alors un div est bon à utiliser, associé à ARIA (Applications Internet riches accessibles). Nous pourrons approfondir ARIA dans un article ultérieur. Pour l'instant, concentrons-nous… voyons ce que j'ai fait là-bas… sur cette pseudo-classe CSS.

La :focus-within la pseudo-classe vous permet de sélectionner un élément lorsque tout élément descendant qu'il contient a le focus.

:focus-within en action!

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>

CSS

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

L'exemple de code ci-dessus ajoutera une couleur d'arrière-plan orange, ajoutera un peu de remplissage et changera la couleur des étiquettes en noir.

Le produit final ressemble à ce qui suit. Bien sûr, les possibilités sont infinies pour modifier le style, mais cela devrait vous mettre sur la bonne voie pour rendre le Web plus accessible à tous !

Un autre cas d'utilisation pour l'utilisation :focus-within il s'agirait de mettre les étiquettes en gras, d'une couleur différente ou de les agrandir pour les utilisateurs malvoyants. L’exemple de code pour cela ressemblerait à ci-dessous.

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>

CSS

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

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

:focus-within dispose également d'un excellent support de navigateur dans tous les domaines, selon Puis-je utiliser.

Conclusion

Créer une expérience utilisateur étonnante et accessible doit toujours être une priorité absolue lors de l'expédition de logiciels, non seulement en externe mais également en interne. En tant que développeurs, jusqu'aux hauts dirigeants, nous devons être conscients des défis auxquels les autres sont confrontés et de la manière dont nous pouvons être les ambassadeurs de la plate-forme Web afin d'en faire un meilleur endroit.

Utiliser des technologies telles que le balisage sémantique et CSS pour créer des espaces inclusifs est un élément crucial pour rendre le Web meilleur. Continuons à avancer et à changer des vies.

Découvrez une autre excellente ressource ici sur CSS-Tricks sur en utilisant :focus-within.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• PlatoData.Network Ai générative verticale. Autonomisez-vous. Accéder ici.
• PlatoAiStream. Intelligence Web3. Connaissance Amplifiée. Accéder ici.
• PlatonESG. Carbone, Technologie propre, Énergie, Environnement, Solaire, La gestion des déchets. Accéder ici.
• PlatoHealth. Veille biotechnologique et essais cliniques. Accéder ici.
• La source: https://css-tricks.com/accessible-forms-with-pseudo-classes/