Styling for Accessibility? Don’t Forget Your Printer

Accessible web design isn’t just for the visually impaired. There’s one accessibility issue that will probably affect every user at one time or another, whether they need a reciept for an online transaction, or just want to read a long document without tiring out weary eyes. If you’re styling for accessibility, you should consider creating a printable version of your content.

As usual, CSS provides the best method yet. Designers used to go to the trouble of duplicating their content in a separate, printer-friendly page, free of large images, navigational elements and light colored fonts on dark backgrounds. Not only is this tedious and difficult to maintain; it also has a negative impact on your search engine ranking.

Thankfully, with print-specific stylesheets we can do away with all the redundancy. There are several ways to feed your print styles to the browser, the simplest being to create a duplicate of your presentation stylesheet, optimize it for print, and toss it in right after your other sheets.

Other methods work just as well, but watch out for certain import methods that can actually crash the fussiest of older browsers.

Of course, you’re already writing standards compliant, semantic markup, right? In that case, it’ll be easy to style away unwanted elements. Just set them to {display:none;} and your remaining content will flow into place as if they never existed.

Working with a tables site? Lingering tables-based layouts are an unfortuante reality of the web, but here’s one of the rare cases where tables can actually save you some time. Rather than listing off the id or class of every item you want to hide, you can create a declaration that hides everything contained in any table cell:

td * { display:none; }

Once you’ve hidden a parent element, everything contained in it will disappear, regardless of it’s own display setting. So, don’t hide your table cell itself (or your wrapper div, for that matter,) because you’re going to want to use another declaration to single out the cells you do want to print:

#main_content, #sidebar_content{ display:block; width:7in; }

Naturally, the benefits of CSS based layouts far outweigh this small advantage, but when it isn’t feasible to take a whole site out of tables, you can still make use of print specific styling.

Just one more way the smallest bit of CSS can add functionality and accessibility to any site.