Hinzufügen von Text für visuell anspruchsvolle Personen

Question

In einer Web-Anwendung, wenn der Benutzer Daten und Tabs ausgibt, gebe ich ein Häkchen auf der rechten Seite der Kontrolle, die angibt, dass die erforderliche Feld Validierung erfolgreich ist. Wenn der Benutzer zu einem anderen Steuerelement wechselt, ohne Daten einzugeben, zeige ich ein Kreuzzeichen an.

Die Stile Ich verwende sind:

für tick

input-valid::after { 
    position: relative; 
    display: inline-block; 
    margin-left: -1em; 
    content: "\2714"; 
    font-size: 18px; 
    color: #438D5B; 
} 

für Quer

input-invalid::after { 
    position: relative; 
    display: inline-block; 
    margin-left: -1em; 
    content: "\2716"; 
    font-size: 18px; 
    color: #D60036; 
} 

Aber für sehbehinderte Menschen, dieses Häkchen oder Kreuz zu sehen, ist ein Problem. Also, ich möchte den Text "Validierung erfolgreich" vorlesen, wenn die Validierung erfolgreich ist. Wie kann ich es tun? Kann ich das über CSS selbst machen, damit ich die Änderung an einem Ort auf die gesamte Anwendung anwenden kann?

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie ein Etikett hinzufügen, das von Bildschirmlesern lesbar ist.

Dafür haben wir den ARIA-Standard, eine Reihe von Attributen, die Sie HTML-Elementen hinzufügen können, die Semantik zu Rollen, Zuständen und Eigenschaften für assistive Technologien über die in Browsern implementierten Eingabehilfen-APIs kommunizieren.

Ich habe nicht viele Informationen zu diesem Thema, da ich es nie selbst benutzt habe, aber ich kann Ihnen einige Links geben, damit Sie darüber lesen können, hoffe es hilft. Außerdem, soweit ich weiß, können Sie dies mit JavaScript hinzufügen, so dass Sie nicht viele Änderungen an Ihrer Anwendung vornehmen müssen.

http://html5doctor.com/using-aria-in-html/ http://w3c.github.io/aria-in-html/