Web Standards / Code Samples, U.Va.

Office of Web Communications Code Samples

Accessibility

Text-only version link

<span class="un_jtt_hide">
    <a href="http://transcoder.usablenet.com/tt/referrer" rel="nofollow">Text Version</a>
</span>

Visit the LIFT for webmasters page for more information about the text-only version.

Skip to Content / Navigation

Allowing users to skip repetitive page areas is important for accessibility - particularly users of screen reading software. The following hidden link can be used, placed after the opening <body> tag:

<!-- Place this at the start of the <body> -->
<p style="position:absolute;left:-999em;width:990em;">
<a href="#content" title="Skip to Content">Skip to Content</a></p>

<!-- Content starts here -->
<h1 id="content">Title of Your Page</h1>

Accessible Popups

In order to create a popup link that works when Javascript is not enabled, you can use the following code:

Demo: open mypage.html in a new window

<a href="mypage.html" onclick="window.open(this.href,'popup','width=350,height=300');return false;">
  Open mypage.html in a new window!</a>

Scripting, Flash

SWFObject

SWFObject is an easy way to insert Flash movies into your pages. Simply download the library and link it in your page.

Hiding Email Addresses

The following technique shows one way to hide email addresses from spam-harvesting robots.

First, declare this function in your page or an external library:

<script type="text/javascript">
// <![CDATA[
  function writemail(a,b,c,d) {
    if (d) {the_string = "<a href='mailto:"+a+"@"+b+"."+c+"'>"+d+"</a>";} 
    else {the_string = "<a href='mailto:"+a+"@"+b+"."+c+"'>"+a+"@"+b+"."+c+"</a>";}
    return (the_string);}
// ]]>
</script>

Next, use the following code to show the email address on the page:

<script type="text/javascript">
// <![CDATA[
  document.write(writemail('nancyt', 'virginia', 'edu', 'Nancy Tramontin'));
// ]]>
</script>

Site Basics

Footer

The following example shows an implementation of the preferred footer layout using Javascript email hiding (above) and server-side includes See above, "Hiding Email Addresses", for the writemail() function to include in the document <head>.

<p class="footer">Maintained by 
   <script type="text/javascript">
      document.write(writemail('webmaster', 'virginia', 'edu', 'webmaster'));</script><br />
   <a href="http://www.virginia.edu/copyright.html">&copy;</a> 
     <!--#config timefmt="%Y" --><!--#echo var="DATE_LOCAL" --> 
      by the Rector and Visitors of the University of Virginia<br />
   Last Modified: <!--#config timefmt="%d-%b-%Y %H:%M:%S EDT" -->
      <!--#echo var="LAST_MODIFIED"--></p>

Navigation w/ Page-on state

Consult the following tutorial and example for a convenient way to show page-on states using CSS.

Search Engine Blocking

Google for Webmasters has an informative page with tips on blocking your site with a robots.txt and META tags. Contact the Web Communications Office if your content is already being indexed by search engines but needs to be blocked.