Page Layout
Provide direct access to page content
Linear access to Web pages can be cumbersome when Web pages are top-heavy with nonessential elements, such as branding and advertising. Nonvisual users and keyboard users cannot easily move the cursor to different functional areas of a Web page, but instead must work through page elements in sequence. Users who are after the main content of the page must work though the branding and navigational elements to locate the content, and must repeat this process as they move from page to page.
The best way to reduce the tedium of linear access is to put the important information close to the top of the page. Content that appears at or close to the beginning of the code is easier to locate and has the added benefit of increasing search quality. Search engine software uses location as a measure for determining the subject of a page—content that appears at the beginning of a page is considered to be the most relevant. Users who want direct access to navigation, not content, have options because links are easier to locate than content. Nonvisual and keyboard users can locate links more easily than content because links are actionable and can be accessed directly via the tab key or through software features such as the link list. "Content" is not an HTML structure; software therefore cannot provide a "jump to content" feature since it cannot locate anything tagged as "content" on the page.
HTML does provide heading tags. Specialized software, such as screen reader software, often provides heading navigation and a headings list. When the main content area of a page begins with an H1
heading describing the content of the page, users can move to the content area by navigating to the heading. Providing direct access to content via heading tags is a good and practical use of document structure. However, users of most standard browser software currently do not have access to this feature.
Sometimes visual design calls for page elements—such as navigation—to appear before page content. When styles are used for layout, the visual order of elements need not interfere with the sequence of elements in the code. Good linear access can be maintained because styles determine the order of elements on the screen. For example, the sequence of elements in the code may be banner, content, navigation, and footer, but on screen the navigation may appear in the left column before the content area (Figure 15.12).
Figure 15.12: Style sheet positioning can be used to arrange elements on screen in a different order than they appear in the code. Blogger uses styles to position the main content of the page to the right of customer feedback. However, in the code of the page, the content appears before the feedback. www.blogger.com
Some designs may not allow for quick access to content in the code—for instance, designs that require layout tables, or that require elements to appear in a certain order (for example, advertising first), or legacy designs that cannot be altered. Whenever content may be difficult to access from the code, provide a link to allow users to skip directly to the content area. The "Skip to main content" or "Skip navigation" link is a convention that has evolved as designs become more top-heavy, making it challenging for keyboard users to arrive at the main content area of a page. The skip link is placed at the beginning of the page and links to an anchor that is located at the main content area. When a user activates the link, the cursor focus moves from the link to the anchor. Page access resumes from the main content area location.
In order to be usable by both visual and nonvisual keyboard users, the skip link must display on the page. Skip links are often coded so they are not visible on screen—the link is sometimes attached to a transparent image, or made "invisible" through styling or by placing the link off screen. A nondisplaying skip link is accessible to screen reader software since it appears in the code. However, visual keyboard users may not realize the link is available and will have to cycle through all the elements at the beginning of the page to access the content. A visible skip link provides the means for both visual and nonvisual users to skip directly to the main content area.