Skip to Content

Converting Pages to Text

In 2006 the University acquired a sitewide license for Usablenet's Assistive text transcoder. The Assistive technology is a framework for creating a dynamic, customizable text-only view of any and all websites on the Virginia.EDU domain. The text-only view has the potential to offer significant accessibility improvements over the source web content.

Usablenet Assistive allows you to add a "text-only" link to every page on your web site, although the pages will be transcoded whether or not they have a link. Using text-only mode, the user can navigate U.Va.'s pages and web content without having to ever go back to graphical pages. Check out LIFT for webmasters if you're ready to deploy LIFT Assistive on your site.

Webmasters who wish to use LIFT Assistive on their site to meet Priority 2 compliance with the WCAG should view the following implementation tips.

Adding the LIFT text-only link

To add the transcoder, create a new link on your page that points to the LIFT service on Usablenet.com's servers. The following link is the simplest to implement, and will direct the user to a LA version of whatever page is the "referrer".

<a href="http://transcoder.usablenet.com/tt/referrer">Text-only version</a>

Another method of linking is to direct the user to a LA version of a specific page. Insert the full URL of the page to be transcoded after the tt/ in the following example.

<a href="http://transcoder.usablenet.com/tt/http://virginia.edu/">Text-only version</a>

Tips for placing the LIFT text-only link

The most effective locations for the text-only link are (1) at the top of the page in a hidden element, and (2) in the footer of each page as a textual link. To create a hidden link at the top of your page, paste the following code right after the opening <BODY> tag in your HTML document.

<span class="un_jtt_hide" style="position:absolute;top:0;left:-999em;width:990em;">
    <a href="http://transcoder.usablenet.com/tt/referrer">Text-only version</a>
</span>

The <span class="un_jtt_hide"> is used to instruct the LIFT transcoder to exclude this code fragment from the text-only view. The style="" attribute here hides the link from modern browsers, yet will be read aloud by supported screenreading software. A <div class="un_jtt_hide"> tag can also be used to hide HTML fragments from LIFT Assistive.

You can also employ these techniques using an inline style or external style sheet; this is left as an exercise to the reader.

Evaluate the text-only version

The default output from LIFT Assistive transcoding is not always optimal. For example, pages that rely on graphics to display navigation and text may not be automatically transcoded to show navigation and text as you intended.

While in the text-only view, start by analyzing the most important pages, and target the elements on the page that are most likely to affect a user's ability to access your site.

Next, check the HTML of your site to ensure that images have descriptive ALT tags, and that alternatives are provided for multimedia, Flash, and scripted content.

Finally, compare the transcoded version of your site to the WCAG Priority 2 checklist, and note any disparities or violations.

Customizing LIFT

The transcoder can be customized using annotations on a per-page or per-site basis.

Examples that will require customization include, but are not limited to:

Additional Code Samples

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>