Source Order Can Create Usability Disasters

Usability on the Web is becoming increasingly important. Every day, new techniques and methods are developed to improve the way people interact with documents, making it easier to get things done. One facet of usability that isn’t often written about is that of source order. It’s easy to forget that document source order can have a strong influence on usability, as CSS gives us so much freedom with document styling. It’s important to keep source order in mind, as it can have strong adverse affects on a wide range of readers.

Which comes first? Navigation or content?

I have read in the past that certain developers feel that content belongs before site navigation. Their reasoning usually has to do with the belief that screen reader users prefer the content to be first instead of having to skip their way over a site navigation. Personally, I think site navigation fits best near the top of a document.

A lot of usability has to do with what people expect when faced with something. If your product doesn’t fit that user expectancy, the person is often confused. The majority of webpages have a global site navigation appearing first, followed by page content and various other elements. We all have been accustomed to this, including screen reader users. It follows normal convention and therefore becomes expected (most of the time).

This goes beyond navigation and page content, however. Secondary content is often misplaced in the source order because it’s easier for the developer to style a container element if it’s in the right place. The fact of the matter is, CSS gives a universal freedom to do anything you want to alter the display of a document without disturbing source order.

This is one of the major reasons I choose to apply markup to a document before even considering the style. Thinking about the style at the same time would set up a trap for non-liner source order. Keeping only the markup in focus initially will ensure that content sections are properly ordered and make sense.

Structural labels are very important for screen reader users

Tying in with source order, it’s really important to properly label your content sections with well written headings. Screen reader users are able to navigate a document extensively based on heading structure. If headings are vague or confusing, they will act as a hindrance for a screen reader user and make the document much more difficult to understand.

Your headings should strengthen the overall structure of your source order and further define how the document reads. Providing effective headings within a well thought source order can make any webpage that much easier for screen reader users or someone with a text based browser.

After reading usability test results, structural labels provided by headings have proven to be one of the most used features of a document. They’re universally regarded as useful by screen reader users, and the majority said a good heading structure really assisted with reading a document.

Skip links – useful or confusing?

Skip links can also sometimes be a usability debate. Some say that when a reader comes upon a hyperlink, they expect that link to target a different document. On the other hand, others say that skip links can be used very effectively and provide a nice service for screen reader users as well as those employing a text-based browser.

I think skip links can be very beneficial to both screen reader users and those with a text-based browser; it comes down to the link text. If you’re using a skip link to provide a shortcut to the primary or secondary content, use link text to describe it as such. It may seem like an obvious rule, but it should be said.

Usability testing has shown that experienced screen reader users hardly make use of skip links, but novice users rely on them heavily. Many times, the experienced users were able to much more effectively read a document using the heading structure as opposed to skip links. This is mostly due to the simple fact of experience. The more you use a piece of software, you become more proficient at it, and find more effective ways of accomplishing tasks. A novice screen reader user is much more likely to use a skip link and take advantage of what they have to offer.

Source order deserves a second look

While it may seem quote low level, keeping source order in mind will be of great benefit to many. Not only does it preserve accepted conventions of usability, a good source order helps to retain document longevity as well. In my opinion, one of the best ways to ensure a proper source order is to separate your development process into a markup stage and a style stage, in that order. Beyond that, testing with text-based browsers or disabling your style will help guide your placement of skip links.