CATEA.orgassistivetech.netATWiki
Personal tools
Views

Interested in disability history? Check out what happened Today in AT History!

E-Recruitment 3 - How to Lay Out a Recruiting Web Page

From ATWiki

Jump to: navigation, search

The layout of E-Recruiting web pages is important, because some methods of accessing the web will read the elements of a page in a specific order. Prospective applicants who are blind, for example, may use a voice output screen reader to read your pages. A screen reader is a software tool that parses the contents of a page and produces spoken output, much like having a sighted person read the page out loud. The screen reader takes its material from the underlying HTML code of the web page, not the visual layout produced by the web browser, so it’s important to produce the proper HTML code so the screen reader can do its job properly. This is often called linerarizing a page, because screen readers read the HTML in order of its position, in a linear way. The goal for designers is to provide a page that is easy-to-use both visually and via a screen reader.

Fortunately, this isn’t difficult for most pages of simple to moderate complexity. Since the reading order is linear, it is also predictable. Screen readers read information left to right and top to bottom. Two examples of a simple page layout are shown below, representing a recruiting page that includes a banner at the top (usually including the business name), a navigation bar with links on the left, a main content section in the middle, and secondary content on the right. In the first example, the page looks fine visually, but when read by the screen readers, it has some problems.


Example 1

Non-linerarized content

Since all content is read left to right, top to bottom, the table structure on this page will render content spoken in the following order:

Banner
Link 1
Page content
Right content
Link 2
Link 3
Link 4

This would be very confusing to the listener, not to mention frustrating. The problem can be easily corrected by placing all of the links in one cell. This can be done by a variety of means such as Cascading Style Sheets (CSS) DIV tags, nested tables and use of HTML lists. Whichever method is used, a corrected version would look something like the following.


Example 2

Properly linearized web page

Now, when you linearize the code, the table reads like this:

Banner
Link 1
Link 2
Link 3
Link 4
Page content
Right content

This is exactly what we want, a page that provides the same information visually or via screen reader.

How can you verify that your page is going to be read in the proper order? One of the easiest and least expensive ways is to use a text-only browser, or an online tool that emulates a text-only browser. These browsers ignore images, strip out Cascading Style Sheets and linearize text just like a screen reader. A good example is Lynx and the Lynx Emulator available from Yellowpipe Interent Services.

Another excellent choice is the use of a screen reader, of course. This has traditionally been problematic for most developers since screen reading software is often rather expensive and few organizations are willing to purchase a license for each web developer on their staff. In addition, the most popular screen readers, such as Window Eyes from GW Micro, Hal from Dolphin, and JAWS from Freedom Scientific are only available for the Windows platform.

Fortunately, the University of Washington has created a browser-based screen reader that is free of charge and works on multiple platforms. WebAnywhere can be used to test the reading order of your pages by simply inserting the URL on a system with a sound card.

And that’s it! The same principles apply to reading order within tables, within CSS, etc. With just a little forethought, it’s easy to provide recruiting pages that can be used by everyone.