Tag Archives: pseudo-elements

A fancy box with rounded corners and drop shadow with CSS3 only. Really?

I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.
Continue reading

Testing the accessibility of the CSS generated content

This article is about how screen readers speak the content added with CSS pseudo-elements :before and :after (in CSS3 they are ::before and ::after).

I am trying to learn to use AT when developing websites and recently I saw that no matter how W3C wants us to use a certain CSS element, there will always be developers/designers who will try to push the limits of the specification.

While I do advise you to NOT use pseudo-elements to generate useful content (limit yourself to generating quotes or design elements), just in case somebody thinks that the cool resides in generating content with CSS because everything else is already old, let’s see how people using screen readers will “benefit” from the idea.

A piece of code…OK, maybe two…

The HTML is really simple, an innocent paragraph of text:

<h1>Example of content added with CSS pseudo-elements</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..and so on.</p>

and the CSS is also quite simple:

#content p:before {
content:"This is before the text, you can style it";
}
 
#content p:after{
content:"This is after the text";
}

Let’s hear voices

The video will show how NVDA, Jaws and Window Eyes read the page – I set NVDA to read at a lower rate in order for you to follow, but the other 2 are a bit faster.

The conclusion

There’s no need for me to tell you how bad the idea is, DON’T use these pseudo-elements for generating useful content, limit its use to generating quotes, breadcrumb icons, fluffy snowflakes or whatever. But keep it presentational in order for other people to have access to the useful stuff.

Check the Spanish version of this post:
Probando la accesibilidad del contenido generado por CSS