There are a variety of methods for making websites easy for users to navigate.
Page regions
Explicitly identifying common regions of a web page (e.g., banner, navigation, main content, sidebar, footer) helps screen reader users to easily jump directly to those regions, and contributes to users’ understanding of the overall structure of the page. For further details about this technique, see Page regions on websites.
Good structure
Headings and subheadings should provide an outline of page content, so users can understand how the page is structured, and can easily navigate between sections. Similarly, any content that might be described as a list of something should be coded using HTML list elements. Overall, using HTML semantic elements (i.e., the appropriate HTML tag to communicate what an element is) helps to make websites more predictable and easy to navigate, especially for assistive technology users and keyboard users. For further details about good structure, see the IT Accessibility Checklist pages on Headings, Lists, and Tables.
“Skip to main content” links
A “skip to main content” link is a same-page link that targets the id of an HTML element containing the main content. This enables screen reader users, keyboard users, and screen magnification users to bypass navigation links and jump directly to the main content of the page. The benefits for screen reader users are minimal if the other techniques described on this page are used. However, these links are still helpful for keyboard users and screen magnification users, since browsers don’t natively support jumping to ARIA landmarks or headings in the same way that screen readers do.
A common practice is to position the “Skip to main content” link in the top left corner of the page but visibly hide it by positioning it off-screen using CSS, then make it visible on :focus so it appears immediately after users press the Tab key. The following CSS code could be used to accomplish this:
#skip a
{
position:absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus
{
position: static;
width: auto;
height: auto;
}