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.

Headings are used to give structure to our designs

Ranked in order of importance, the tags <h1> to <h6> represent an outline or table of contents for your web page. Each major section of a page needs a heading.

The example below shows a salesforce.com Home tab. Let's assume the page template contains an <h1>, so we will start with <h2>. My Tasks is a second level heading. Items to Approve, being one of my tasks yet still a major section of its own is given an <h3>. Calendar and Dashboard are on the same level of importance as My Tasks, so they are also <h2>. Since Americas, JP & Asia Pac, and EMEA are part of my dashboard, they are lower in the hierarchy than Dashboard and are labeled as <h3>.

Not all headings are visible on-screen, but they are still necessary

Sometimes a major section may still need a semantic heading, with the visual appearance of the heading moved off the screen. Below, Search Results is first level heading or <h1>, Chatter Updates and Records are both <h2>.

In this example, Records are broken down into two separate groups: Items I Frequently Use (marked by red point with the number 1) and Items I Rarely Use (marked by 2 in the collapsed view and 3 in the expanded version.

In the code, expect to see something similar to this:

<h1> Search Results </h1>
    <h2>Chatter Updates</h2>
    <h2>Records</h2>
        <h3 class="off_screen">Objects I Frequently Use</h3>
       		People, Groups, Files, etc.
        <h3 class="off_screen">Objects I rarely Use</h3>
        	Contacts, Leads, Products, etc.

.off_screen {position:absolute;left:-555em}
							

Using this method we can still use headings to structure our page, even if visual design limitations do not allow for the text to be seen.