Guidelines for writing accessible CSS

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. – Tim Berners-Lee

Accessibility in today’s real-life projects is merely an afterthought rather than something you plan for and consider from the start. For 80% of non-technical people accessibility is simply about having two “font resize” links at the top. Accessibility as defined by the WCAG 2.0 however is so much more than that.

This article is based on the W3C’s Working Group Note Techniques and Failures for Web Content Accessibility Guidelines 2.0 and presents CSS snippets with which to provide an accessible experience for a modern website.

I’m using HTML5 and CSS3 here, so if you are not familiar with the changes those two standards will bring please refer to the following sites for clarification.

• HTML 5 differences from HTML 4

Here are a few CSS snippets I use to ensure better accessibility for the websites I create.

Many of these use features that will be introduced with CSS3 sometime soon, if you have a current version of Safari, Firefox or Opera though, they have all implemented all that fancy stuff right now.

Sizes should be defined relative with % or em, never absolute.

body {font: 1em/1.6em "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;}

When using exotic fonts, make sure to define multiple generic fonts a screen agent can fall back on.

body {font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;}

Target at least these 3 different media types: screen, print and handheld.

@media screen {
	/* styles for screen output */
}
@media print {
	/* styles for printing */
}
@media handheld {
	/* styles for handhelds */
}

Screen and more importantly browser resolutions vary a lot on the different devices available to access the web. In this modern day and age there simply is no excuse to use a fixed-size layout, no matter what you think the majority of your target audience uses as default. Fluid (elastic) layouts should be mandatory in every web designer’s work.

section {width: 80%; margin: 0 auto}
section	{float: left; width: 60%}
aside 	{float: right; width: 40%}

Experiment with elastic layouts different browser resolutions by using CSS3’s advanced media types.

@media all and (max-width: 999px) {
	article  {width: 100%}
}
@media all and (min-width: 1000px) {
	article  {float: left; width: 49%; padding: 1%}
}
@media all and (min-width: 1400px) {
	article {float: left; width: 32%; padding: 1%}
}

Don’t use capitalized words unless they are abbreviations or acronyms. Some screen readers spell out the word so use CSS to do the task visually.

.capitalise {text-transform: capitalize}

For keyboard-only users it is an important accessibility consideration to add active and focus states to all links. .Define different styles for hover and active states and visited links. Definitions should be on LoVe/HAte order or they won’t work correctly.

a:link 		{color: #900}
a:visited 	{color: #999}
a:hover,
a:active,
a:focus 	{color: #fff; background: #900}

Mark links to external sites, epscial links or links to downloadable files by using CSS attribute selectors

a[target^="_blank"]:after 	{content: " (this is a link to an external site)"}
a[href^="mailto:"]:after 	{content: " (this link opens your email program)"}
a[href$='.pdf']:after 		{content: " (this leads to a downloadable PDF file)"}

You might also add an icon depending on the type of file.

a[href$='.doc'],
a[href$='.rtf'],
a[href$='.txt'],
a[href$='.wps'] 	{display:inline-block; padding-left:20px; line-height:18px; background:transparent url(../images/icons/icon_doc.gif) center left no-repeat;}

Use hidden text (in screen version) for the benefit of screen reader users. The text allows these users to orient themselves within the context of the page.

a:visited:after {content: " (you've visited this link before)"}

In multilanguage environments you can offer language specific content with CSS (snippet form the W3C’s CSS page stylesheet).

/* Various other languages */
div.map:lang(bg):before {content: "\41B\43E\43A\430\43B\43D\438  \432\440\44A\437\43A\438"}
div.map:lang(de):before {content: "Lokale Links"}
div.map:lang(es):before {content: "Enlaces locales"}
div.map:lang(fr):before {content: "Liens locaux"}
div.map:lang(it):before {content: "Link nella pagina"}
div.map:lang(nl):before {content: "Lokale links"}
div.map:lang(no):before {content: "Lokale linker"}
div.map:lang(pt):before {content: "Links locais"}
div.map:lang(sr):before {content: "\41B\43E\43A\430\43B\43D\438  \43B\438\43D\43A\43E\432\438"}
div.map:lang(th):before {content: "\E40\E21\E19\E39\E25\E31\E14"}

/* Links to translations. Each language a different color. Colors are random */
.translations a[hreflang] {background: hsl(0,0%,83%); padding: 0 0.15em}
.translations a[hreflang|=az] {color: hsl(300,57%,24%); background: hsl(300,57%,83%)}
.translations a[hreflang|=be] {color: hsl(100,57%,24%); background: hsl(100,57%,83%)}
.translations a[hreflang|=bg] {color: hsl(260,57%,24%); background: hsl(260,57%,83%)}
.translations a[hreflang|=cs] {color: hsl(140,57%,24%); background: hsl(140,57%,83%)}
.translations a[hreflang|=de] {color: hsl(60,57%,24%); background: hsl(60,57%,83%)}
.translations a[hreflang|=el] {color: hsl(190,57%,24%); background: hsl(190,57%,83%)}
.translations a[hreflang|=en] {color: hsl(20,57%,24%); background: hsl(20,57%,83%)}
.translations a[hreflang|=es] {color: hsl(130,57%,24%); background: hsl(130,57%,83%)}
.translations a[hreflang|=fi] {color: hsl(320,57%,24%); background: hsl(320,57%,83%)}

With aural stylesheets you can define the aurual rendering of your document. These aural presentations convert the document to plain text and feed this to a screen reader – software or hardware that simply reads all the characters on the screen. Other large markets for listening to information, including in-car use, industrial and medical documentation systems (intranets), home entertainment, and to help users learning to read or who have difficulty reading.

h1, h2, h3, h4, h5, h6 {
	voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}

Access to alternative representations of content. In the following example, the value of the “alt” attribute for the IMG element is rendered after the image (visually, aurally, etc.):

img:after { content: attr(alt) }

A few words of caution when using some of these techniques.

• Ensure that important content always appears in the document object. Any text generated by style sheets is not part of the document source and will not be available to assistive technologies that access content through the Document Object Model
• CSS should never mimic semantic markup, always prefer semantic markup like h2 instead of <div class=”headline”>
• Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
• Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

Tags: accessibility, best practices, css