CODEWITHSUNDEEP
htmlcsswai-ariascreen-readers
user1447718
user1447718

Reputation: 681

Adding text for visually challanged people

In a web application when the user enters data and tabs out, I'm giving a tick mark to the right of control indicating that the required field validation is successful. If the user tabs to another control without entering data, I'm showing a cross mark.

The styles I'm using are:

for tick

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

for cross

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

But for visually challenged people, seeing this tick or cross is a problem. So, I want to read out text "Validation successful" whenever validation is successful. How can I do it? Can I do it via CSS itself, so that I can apply the change to the entire application by making it at one place?

Upvotes: 0

Views: 42

Answers (1)

egvaldes
egvaldes

Reputation: 168

if I understand you right, you want to add a label that's readable by screen readers.

For that we have the ARIA standard, which is a set of attributes that you can add to HTML elements that communicate role, state and property semantics to assistive technologies via the accessibility APIs implemented in browsers.

I don't have much info on this since I've never actually used it myself, but I can provide you some links so you can read about it, hope it helps. Also, as far as I know you can add this with JavaScript so you don't have to make a lot of changes on your application.

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

Upvotes: 1

Related Questions