Étapes simples pour garantir l'accessibilité de vos projets angulaires

Lorsque nous créons des applications, nous nous concentrons généralement sur la livraison plutôt que de couvrir d'autres aspects tels que l'Accessibilité et les tests (mais les tests seront abordés dans un autre article). Aujourd'hui, je veux parler de Accessibilité. La plupart du temps, nous pensons que l'accessibilité vise simplement à aider les personnes handicapées à utiliser notre produit, mais elle améliore en réalité l'expérience de tous les utilisateurs.

En décembre, j'ai passé du temps à me renseigner sur l'accessibilité et je recommande fortement de suivre ces cours gratuits.

• Apprendre l'accessibilité : https://web.dev/learn/accessibility

• Créez des applications angulaires plus accessibles https://codelabs.developers.google.com/angular-a11y#3

Ce week-end, j'ai pris le temps de tester les compétences que j'ai acquises en créant un petit formulaire qui inclut l'accessibilité dès le départ, y compris la configuration et la validation du formulaire. Faisons-le !

Je voulais créer le formulaire "Lettre au Père Noël" où mon fils peut envoyer son nom, son email et un message au Père Noël, mais je souhaite créer un formulaire accessible avec des validations claires et accessibles et une notification lorsque le message a été envoyé avec succès.

Enfin, j'ai obtenu un formulaire comme celui-ci :

---

L'objectif principal du formulaire est de collecter des informations auprès des utilisateurs. Si les formulaires ne sont pas accessibles, nous excluons une partie importante des personnes, comme les utilisateurs ayant une déficience visuelle ou motrice, ou ceux touchés par un accident passager ou ayant les mains occupées.

J'ai commencé à améliorer l'accessibilité en utilisant des éléments HTML sémantiques tels que

,

et

, et en organisant le contenu de manière hiérarchique avec des titres (

à

). Cela aide les lecteurs d'écran à naviguer correctement sur la page et améliore également le référencement.

<header>
  <h1>Write Your Letter to Santa</h1>
</header>
<main>
  <h2>Fill Out the Form</h2>
</main>
<footer>
</footer>

L'objectif principal du formulaire est de collecter des informations auprès des utilisateurs. Si les formulaires ne sont pas accessibles, nous excluons une partie importante des personnes, comme les utilisateurs ayant une déficience visuelle ou motrice, ou ceux touchés par un accident passager ou ayant les mains occupées.

J'ai commencé à améliorer l'accessibilité en utilisant des éléments HTML sémantiques tels que

,

et

, et en organisant le contenu de manière hiérarchique avec des titres (

à

). Cela aide les lecteurs d'écran à naviguer correctement sur la page et améliore également le référencement.

<label for="name">Name</label>
<input>



<p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p>

<p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p>

<blockquote>
<p>Learn more about aria-live and roles</p>
</blockquote>

<p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br>
</p>

<pre class="brush:php;toolbar:false">    <div>



<p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br>
</p>

<pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) {
  <div>



<p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br>
</p>

<pre class="brush:php;toolbar:false">    @if (messageSent) {
      <div>



<p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br>
</p>

<pre class="brush:php;toolbar:false">.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Cela permet de garantir que les informations essentielles sont transmises aux utilisateurs qui s'appuient sur des lecteurs d'écran sans affecter la présentation visuelle.

<span>



<p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br>
</p>

<pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched {
  border-color: #e74c3c; 
  background-color: #fdecea; 
}

Parfait, nous pouvons construire notre formulaire prêt avec accessibilité !! Hé, attends une seconde ? Que se passerait-il si demain @Jörgen de Groot ajoutait une nouvelle fonctionnalité, comment puis-je contrôler qu'il ne brise pas l'accessibilité ?

L'es-lint est votre ami, ajoutez d'abord à l'aide des schémas :

<header>
  <h1>Write Your Letter to Santa</h1>
</header>
<main>
  <h2>Fill Out the Form</h2>
</main>
<footer>
</footer>

Les es-lint fournissent un ensemble de règles d'accessibilité telles que l'accessibilité-label-has-associated-control pour garantir que chaque élément d'étiquette a un contrôle de formulaire associé (similaire à l'accessibilité-label-for mais plus strict).

<label for="name">Name</label>
<input>



<p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p>

<p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p>

<blockquote>
<p>Learn more about aria-live and roles</p>
</blockquote>

<p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br>
</p>

<pre class="brush:php;toolbar:false">    <div>



<p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br>
</p>

<pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) {
  <div>



<p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br>
</p>

<pre class="brush:php;toolbar:false">    @if (messageSent) {
      <div>



<p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br>
</p>

<pre class="brush:php;toolbar:false">.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

N'hésitez pas à en savoir plus sur l'accessibilité es-lint, ajoutez ces règles au fichier (.eslintrc.json), en ajustant la gravité ("warn", "error", etc.) si nécessaire :

<span>



<p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br>
</p>

<pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched {
  border-color: #e74c3c; 
  background-color: #fdecea; 
}

Après avoir exécuté npm, exécutez lint tada !! nous avons un linter pour notre code !

Résumer

J'espère que lorsque vous commencerez à créer votre prochain projet, gardez à l'esprit ces conseils pour simplifier votre accessibilité et veillez à améliorer nos applications pour tous les utilisateurs.

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!