ASP.NET Core-Fehlerbehebung für nicht zugeordnete Eingaben

Einführung

Bei der Entwicklung einer Webseite zum Sammeln von Informationen von Benutzern berücksichtigen weder ein Teamleiter noch ein Entwickler häufig sehbehinderte Besucher einer Website nicht, wie unten gezeigt.

Beachten Sie, dass dies nicht nur für eine sekundäre Straßeneingabe gilt, sondern auch für andere Arten von Eingaben, die möglicherweise zusätzliche Informationen erfordern.

Warum ist das wichtig? Denn wenn ein Besucher, ein neuer potenzieller Kunde, versucht, Informationen ohne Kennzeichnung einzugeben, hat er keine Ahnung, wofür die Eingabe gedacht ist. Sie könnten frustriert sein und gehen, ohne das Formular auszufüllen.

Eine solide Empfehlung beim Erstellen einer Webseite ist die kontinuierliche Verwendung eines Barrierefreiheitstools, um zu prüfen, ob die Seite WCAG AA-konform ist. Schauen Sie sich das Wave-Barrierefreiheitstool für Chrome, Firefox und Microsoft Edge an.

Kombinieren Sie dies mit Screenreader-Tests, bei denen NVDA ein kostenloses Tool ist, um die Erfahrung eines sehbehinderten Benutzers nachzuahmen.

TIPP

Eine einfache Lösung besteht darin, aria-label und aria-describeby für die Eingabe hinzuzufügen, wie unten gezeigt.

Wechseln

Abhängig davon, dass eine Bibliothek eines Drittanbieters wie Bootstrap oder Tailwind verwendet wird, wären schwebende Beschriftungen eine weitere Option, wie unten gezeigt.

Quellcode

Quellcode

In dem Projekt, das den obigen Tipp demonstriert, gibt es mehrere Extras.

JavaScript zur Unterstützung beim Debuggen von CSS. Der unten gezeigte Code fügt der Seite ein einfaches Stylesheet hinzu oder entfernt es.

Für die Produktion wird unten angezeigt, für andere Umgebungen übergeben Sie „true“, um das Debuggen zu aktivieren.

<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>

Der oben gezeigte benutzerdefinierte H1-Stil befindet sich in wwwrootcssheaders.css

Feldsatz- und Legendenstile befinden sich in wwwrootcsssite.css

Zusammenfassung

Der Tipp, Informationen darüber bereitzustellen, wozu eine Eingabe dient, ohne eine Eingabe mit einer Bezeichnung zu verknüpfen, mag trivial und/oder umständlich erscheinen, ist für einen sehbehinderten Besucher jedoch überhaupt nicht trivial und kann zu einem Besucher- oder Einkommensverlust führen .

Wenn die Barrierefreiheit bei der Entwicklung einer Seite von Anfang an berücksichtigt wird, ist dies kostengünstiger, als noch einmal Code für die Barrierefreiheit hinzufügen zu müssen.

? Und wenn die Webanwendung für eine staatliche oder staatliche Einrichtung bestimmt ist, muss diese bis April 2026 WCAG AA-zertifiziert sein.

Das obige ist der detaillierte Inhalt vonASP.NET Core-Fehlerbehebung für nicht zugeordnete Eingaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!