HTML View:

The code below is located in the top of the HTML document before any navigation links, and may or may not be visible depending on your situation. This code contains an anchor that is pointed to a level heading (h1) with an id of 'start'. Selecting this link will take you to the main content area, which is where the level 1 heading should reside. All web pages should contain a level 1 heading by applying an id of 'start' to all these headings, we are laying the groundwork for accessibility.

<a href="#content">Skip to main content</a>

Further down the HTML code:

In the main content area the h1 heading element has the id of 'start' applied, which is what the anchor requires to properly link to this area.

<h1 id="content">Designing for the Cognitively-Impaired</h1>

<h2>Cognitively-Impaired Users:</h2>

<p>This is the beginning of the body content...</p>

Back to Top Links

HTML View:

The code below consists of an ID element being applied to the H1 Level heading. The purpose of this is to provide a position at the top of the page where the user will be taken to upon selecting the 'Back to Top' link. Since the H1 header is top a top-level heading, it is a natural and consistent portion of the page to take the user back to. As mentioned in the 'Skip to Content' technique we have applied ID name of 'content' as all these elements must contain a unique name.

<h1 id="content">Developing Skip Links</h1>

The following is the code for a text link called 'Start of page'. This link points to the H1 element that we have applied the ID of "content" to.

<a href="#content">Back to Top</a>

Testing the 'Back to Top' link