Log in   Register a New Account

Accessify Forum - Independent Accessibility Discussion Since 2003; Professional, Moderated, Web-based, Archived

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

Currently Online

No registered users are online.

Pseudo-elements :before and :after

  • Reply to topic
Reply with quote Hi guys,

Glad to be here, I hope this is the correct section to ask my question and I'm sure that it's not been asked before.

Basically, we've been looking into making our website accessible. We've got so far but there are a few issues I'd like to clear up and will post here in the next few weeks.

First and foremost, we have an issue with forms, when a user has forgotten to fill a field in, an error message occurs on the page reload, however, the only way that users are visually presented with these errors are by styling everything with a class="error" as red. Obviously this is not great.

So, I had an idea and I need some professionals to help me out and tell me it's ok.

With CSS we can use :before and :after pseudo-elements on the "error" classes to put an "*" before the string.

However, I have an old firefox plugin called "Fangs" (which is simulates a screen reader via a text output of what, lets say, JAWS, would read out to the user) currently isn't supported by FF3), and it doesn't read out the asterisk character.

However, all the W3C documentation I read is saying that using CSS to implement this sort of thing is fully accessible!?!?! Can someone help please!

Many thanks,
Reply with quote Hi Jonathan, and welcome to the forum. Smile

Screenreaders should not read out the content of the before and after pseudoelements, because they are intended for purely decorative effect—meaningful content must be represented in your HTML somehow.

There are several, perfectly accessible and acceptable ways of doing this, the complexity of which depends upon just how far you want to go.

1. Use an asterisk

The easiest is to use an actual asterisk in each label, and have a note earlier in the document explaining that asterisks mean that this field is required. Using asterisks to denote a required field is common practice, so most screenreader users will be somewhat familiar with it, and the explanatory note prepares those who may be unsure. Note that putting the asterisk in the form label is important, because it ensures that it will be announced in forms mode.

<p>Required fields are marked with <em>*</em>.


<p><label for="username">Username <em>*</em></label> <input id="username" name="username">

2. Expand upon the abbreviation

As a further refinement, you could use the abbr tag to try and clarify the meaning of the asterisk; however, few screenreaders will pick up on this, so it is not a significant improvement upon the first method.

<p><label for="username">Username <abbr title="(required)">*</abbr></label> <input id="username" name="username">

3. Use an image

You can expand upon the asterisk's meaning more reliably by using an image of an asterisk with some appropriate alt text. Most users will see an asterisk (and you can make it nicely anti-aliased if you want!), while screenreader users will hear the word "required" at the end of the field label.

<p><label for="username">Username <img src="asterisk.png" alt="(required)"></label> <input id="username" name="username">

4. Go crazy with CSS

If you really want to go the full hog, you can use CSS to replace a text element with an image. The CSS for this depends upon exactly how you're styling your form, but for an example, see the ShP Limited contact page. If you'll ignore the fact that there are some horrible issues with this form and the awful things that ASP.NET has done to it, there's an interesting technique being applied. Here's just some of what's going on in that form, condensed to the bare essentials:

label {
   cursor: pointer;
   display: block;
   float: left;
   margin: 0 0 0.9em 0;
   position: relative;
   text-align: right;
   width: 35%;

label em {
   color: #f6f9d6;
   font-style: normal;
   left: 485px;
   position: absolute;
   top: 0;
   width: 0.5em;

label em:after, q.required em:before {
   color: #c30;
   content: '*';
   font-weight: bold;
   font-size: 1.2em;
   text-indent: 0;
   visibility: visible;

/* IE 7 and below */

label em { /* Use an image to replace generated content */
   background: url(bg/required.png) 0 0 no-repeat;
   height: 1em;
   overflow: hidden;
   padding-right: 13px;
   width: 0px;

<p><label for="username">Name <em>(required)</em></label> <input id="username" name="username">

To summarise, the text is hidden and generated content of an asterisk is used in supporting browsers, while a background image is used in earlier versions of IE that don't support generated content. Screenreaders will read the label as "Username (required)" without any problems.

What do I recommend? Go with method 1 or 3. Method 2 isn't really much better than method 1, and method 4 will drive most people bonkers!
Reply with quote Jordan, thank you very much for your informative and very in depth reply. It's appreciated!

Sorry I've not had chance to reply sooner but things have been busy. We're currently looking into your 4 options to see which suits our current process better.

Ideally, a pseudo element would have been the best solution as it would mean minimal code changes, in most cases, it would mean a simple CSS sheet change, however, until your response, I was unaware that it was a function designed purely for decorative purposes.

Thank you for your prompt response, it was very helpful and we're working on it right now! Smile

Many thanks,
Reply with quote Not WCAG1 ideal however you could make accessible by inserting into the DOM as HTML using JavaScript.

Display posts from previous:   

All times are GMT

  • Reply to topic