Formulaires accessibles avec des classes pseudo

Ce didacticiel montre la construction d'un formulaire de contact accessible à l'aide de HTML sémantique et de la pseudo-classe CSS :focus-within. focus-within fournit une excellente gestion de la mise au point, améliorant l'expérience utilisateur et l'accessibilité. Avant de plonger dans le code, passons en revue les principes fondamentaux de l'accessibilité Web.

Accessibilité Web: A11y dans la pratique

L'accessibilité (A11Y) englobe divers aspects. Physiquement, il comprend des rampes, des matériaux à grande imprimé et des toilettes accessibles. Numériquement, il s'étend à des fonctionnalités comme un contraste de couleurs suffisant, une compatibilité des lecteurs d'écran et un support de technologie d'assistance. Ce tutoriel se concentre sur l'accessibilité Web, adhérant aux directives d'accessibilité du contenu Web (WCAG).

La pseudo-classe :focus-within est inestimable pour mettre en évidence l'interaction utilisateur. Il permet des modifications de style dynamique, telles que la modification de la couleur d'arrière-plan du formulaire ou la modification des styles d'étiquette lorsqu'un champ de saisie reçoit une mise au point. Cela améliore l'expérience utilisateur, en particulier pour ceux qui utilisent des technologies d'assistance.

Comprendre la concentration dans l'accessibilité du Web

La mise au point est le signal visuel indiquant l'interaction utilisateur avec un élément de page. CSS permet des éléments axés sur le style. Surtout, Never Supprimez l'indicateur de mise au point par défaut (contour) en utilisant outline: 0; ou outline: none;. Cela supprime les commentaires visuels cruciaux pour tous les utilisateurs, y compris ceux qui comptent sur les technologies d'assistance. Si des ajustements de style sont nécessaires, préservez le contour et ajoutez des styles personnalisés.

Évitez ceci:

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Tiration: focus-within

le :focus-within pseudo-classe styles un élément lorsque tout élément descendant à l'intérieur est au centre. Ceci est particulièrement utile pour les formulaires.

: Exemple de mise au point

html

First Name

Last Name

Phone Number

Message

CSS

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

Ce CSS ajoute un fond orange, un texte noir et un rembourrage au formulaire lorsque toute entrée est focalisée.

Un autre exemple: styliser les étiquettes sur la mise au point.

html (partie 2)

First Name: Last Name: Phone number: Message:

CSS (partie 2)

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

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

Cela styles étiquette dans la forme, ce qui les rend audacieux, rouges et plus grands lorsque leur entrée associée est concentrée. focus-within bénéficie d'un large support de navigateur.

Conclusion

prioriser les expériences utilisateur accessibles est primordiale. Les développeurs et le leadership devraient être conscients des besoins des utilisateurs et s'efforcer de créer des espaces numériques inclusifs. Les techniques sémantiques HTML et CSS, comme :focus-within, sont des outils puissants pour créer des applications Web accessibles et conviviales. Pour plus d'informations sur :focus-within, consultez le CSS-Tricks Almanac.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!