This post is part of series on Universal Design at Salesforce.com. As always, all of the content and images in these posts fall under our safe harbor agreement. 

Specify Content Order for Major Elements in your Layout

Designers choose a visual layout, which pulls a user's eye through a web page. Sometimes the path starts in the middle and other times it starts to the left or the right of the page.

The content or DOM order specifies the programmatic flow through a web page. This dictates several important aspects of web design including:

• Default tab order for form fields and hyperlinks
• Visual order of items on a page when zoomed, reflowed, viewed on a mobile device, or all three
• Text to speech reading order including screen readers such as JAWS or Apple's Siri
• Document order with styles sheets turned off or altered

In the example below involving the interface for a customer service tool, let's focus on the top information bar. This bar is split into three sections. On the left is the customer name and contact information. In the middle you will find the case number and a description of the problem. On the right is the status and priority.

The designer decided that the case title, case number, and description is the most important item and is prominently displayed in the center of the screen. The customer and status information of to the sides is complementary. To mirror programmatically what has been done visually, we chose for the center panel to be 2nd in the DOM order, followed by the customer information, and lastly the status and priority information.

Looking at the rest of the page, we can see that although featured high up on the page, the list of people following the case will be last in the content order. On an mobile phone, this would presumably feature at the bottom.

It should be noted that depending on the structural layout of your page, it can be difficult or unwise to alter the DOM order too much. DIV positioning across all browsers can often be more trouble than it is worth. The important take away here is to consider visual order, reading order, and tab order when creating the DOM structure for your web pages.