Correctif d'entrée non associée ASP.NET Core

Introduction

Lors du développement d'une page Web visant à collecter des informations auprès des utilisateurs, un chef d'équipe ou un développeur ne prend souvent pas en compte les visiteurs malvoyants d'un site, comme indiqué ci-dessous.

Notez que cela ne concerne pas seulement une entrée secondaire de rue, mais pour d'autres types d'entrées qui peuvent nécessiter des informations supplémentaires.

Pourquoi est-ce important ? Parce que lorsqu'un visiteur, un nouveau client potentiel, tente de saisir des informations sans étiquette, il n'a aucune idée de la destination de cette saisie. Ils peuvent devenir frustrés et partir sans remplir le formulaire.

Une recommandation solide lors de la création d'une page Web est d'utiliser continuellement un outil d'accessibilité pour voir si la page est conforme aux WCAG AA. Découvrez l'outil d'accessibilité Wave pour Chrome, Firefox et Microsoft Edge.

Combinez cela avec des tests de lecteur d'écran où NVDA est un outil gratuit pour imiter l'expérience d'un utilisateur malvoyant.

CONSEIL

Une solution simple consiste à ajouter aria-label et aria-describeby pour l'entrée comme indiqué ci-dessous.

Alterner

En fonction d'une bibliothèque tierce utilisée telle que Bootstrap ou Tailwind, une autre option serait les étiquettes flottantes comme indiqué ci-dessous.

Code source

Code source

Dans le projet qui illustre le conseil ci-dessus, il y a plusieurs extras.

JavaScript pour aider au débogage CSS. Le code ci-dessous ajoute ou supprime une simple feuille de style à la page.

Pour la production, c'est illustré ci-dessous, pour les autres environnements, passez true pour activer le débogage.

<script src="lib/payne-debugger/debugHelper.js"></script>
<script>
    document.addEventListener('keydown', function (event) {

        if (event.key === '1' && event.altKey && event.ctrlKey) {
            $debugHelper.toggle();
        }

    });
</script>

Le style H1 personnalisé illustré ci-dessus réside dans wwwrootcssheaders.css

Les styles de jeux de champs et de légende résident dans wwwrootcsssite.css

Résumé

L'astuce pour fournir des informations sur l'utilité d'une entrée sans associer une entrée à une étiquette peut sembler triviale et/ou un inconvénient, mais pour un visiteur malvoyant, ce n'est pas du tout anodin et peut entraîner une perte de visiteurs ou de revenus. .

Lorsque l'accessibilité est prise en compte, développer une page dès le départ est moins coûteux que de devoir revenir en arrière et ajouter du code pour l'accessibilité.

? Et si l'application Web est destinée à un État ou à une entité gouvernementale, elle doit être certifiée WCAG AA d'ici avril 2026.

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!