Accessible print-friendly web pages

There are times when you might want to render a page specifically for printing (rather than using CSS). For example you might want to include or exclude specific information on the printed page. When users view the print-friendly page, you might want to include some instructions at the top of the page, but not have these themselves print out. You might want to let users know they are viewing a print-friendly version and provide them with a link back to the on-screen view.

You can do this by first defining a “noprint” class:

    <style type="text/css">
        @media print
        {
            .noprint
            {
                display: none;
            }
        }
    </style>

You can then include your instructions in a DIV having this class.

Typically, the next action a user will take on viewing the page is to open the print dialogue box. We could attach a “window.print()” JavaScript action to the body’s onload event, or within a <script> tag somewhere in the body. However, having a dialogue box appear automatically is not particularly accessible as it changes the focus. The alternative is to insert a “print this page” link if the browser supports JavaScript. For non-JavaScript browsers, simply inform the user to use his or her browser’s print menu. This is demonstrated by the following HTML:

    <div class="noprint" style="background-color: #eeeeee;
border: solid 1px black; padding: 10px 10px 10px 10px;">
        <p>
            You are viewing a print-friendly version
 of a page.</p>
        <p>

            <script type="text/javascript">
                var str = "Print this page";
                document.write(
str.link("javascript:window.print()"));
            </script>

        </p>
        <noscript>
            <p>
                Please select print from your browser’s
menu to print the page</p>
        </noscript>
        <p>
            or <a href="/path/file.htm">
return to the normal on-screen view of the page
            </a>
        </p>
    </div>