Please consider the following markup:
<label class="required" for="email-address">Email Address <span class="audible">Required</span></label>
<input type="text" id="email-address" placeholder="[email protected]">
Along with that i have the following css...
.required:after {
color: red
content: "*";
......
}
When i focus a field a screen reader will read: Email Address required "star". I'd like to be able to do this with css only to display a visual * but i dont want that read by screen readers?
Or otherwise is this a common enough thing that screenreaders and users would ignore the star or set settings. I.E. Not a real problem?
Is there any possible way?
Try this, it targets screen readers with a media query and hides the star
@media reader, speech, aural {
.required:after {
display: none;
visibility: hidden;
}
}
As the support for my initial solution doesn't seem to be that good I have thought of a alternative. It occurred to me that the only way to ensure that its not read by a screen reader (w/o extra markup) would be to have no asterisk at all! However you could add a image with css to look like a asterisk like so:
.required:after {
content:'';
display: inline-block;
width: .5em;
height: .5em;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
background-size: .5em .5em;
vertical-align: top;
margin-left: .15em;
margin-top: .1em;
}