9. In-page Navigation

Support navigation within the page

When distinguishable features or sections (e.g. navigation, main content, individual news articles) appear on a page or in a document, provide a way to navigate to the features or sections using a screen reader and the keyboard.

Rationale

Mouse users commonly navigate Web pages by skimming the page visually. When they see a feature of interest, they can immediately read the text there and use a mouse to access interactive elements there.

So, designers might not think about in-page navigation unless a page contains a very long list that is not pleasant to skim visually, such as a glossary.

However, keyboard access users (with and without screen readers) move through a page, item by item, starting at the top. So, for example, if 40 links appear before the link the user wants, the user may have to press tab 40 times to reach the desired link.

Similarly, if there are many articles on the page, screen reader users may have to listen to a lot of content before finding the article of interest.

In-page navigation addresses these issues.

Additional Benefits: In-page navigation is useful for users without disabilities as well. If a student needs to check a fact on a long page of text, jumping from heading to heading is much faster and more pleasant than watching for the heading needed while scrolling the page.

HTML & JavaScript

Headings (h1 through h6)

Organize pages using HTML headings (e.g. <h1>, <h2>, <h3>). This allows screen reader users to jump from heading to heading to read and interact with the content under each heading only as needed.

If desired, you can use CSS to change or remove all formatting associated with these heading elements:

h2.nostyle_inline {
/* 1em results in the same font size that
would be used for plain text in that
location on the page */
font-size: 1em;
/* standard font weight */
font-weight: normal;
/* no extra space */
padding: 0;
margin: 0;
/* With display set to inline,
headings can appear inline with other
text. For example, bold text at the
beginning of a paragraph might
serve as a heading */
display: inline;
}

If necessary for visual effects, you can also use an image within a heading tag. (See Pearson Guideline 21 regarding images of text.)


<h1>
<img src=“sea_mammals.gif” alt=“Mammals of the Sea”>
</h1>

But, don’t use heading tags like <h1> for the headers inside tables. See Pearson Guideline 11 for the correct semantic markup for tables.

WAI-ARIA Headings (not recommended)

It is now possible to mark HTML elements as headings without using the traditional HTML heading tags. This even works in many screen reader/browser combinations. However, the traditional HTML heading tags are still supported in many more places. So, if you can use the traditional tags, that is the best option for universal accessibility.

These headings are defined through two attributes:

role=“heading”
aria-level

For example, to create the equivalent of an h2 element, you could type: <div role=“heading” aria-level=“2”>.

Using Headings in HTML 5

There was a proposal in HTML5 for the user agents (browsers) to assist with setting correct heading levels automatically (for use cases like syndication, where a piece of content with a heading could be placed anywhere within another document) using an algorithm known as the HTML5 Document Outline. This idea came from the general heading element <h> proposed in XHTML, and in HTML5 the idea was to allow special sectioning elements (section, article, aside, nav…) to adjust the semantic heading level based on nesting.

This Document Outline is still mentioned in the WHATWG HTML specification (see current issue), however the reality is that currently no user agents nor Assistive Technology support this (JAWS did support some version of this but it was removed in JAWS 15), and there are warnings in ePub guidelines and W3C specs.

For this reason, the current recommendation is to continue to use h1 through h6 as needed.

One thing for developers to be aware of is that while the semantics of the Document Outline have not been added to user agents, some of the styling ideas have been. Following the code examples on the MDN page, developers may see changes in default heading size (generally smaller than what corresponds to the actual level), so developers are also encouraged to set explicit sizes if headings are nested in section or article elements.

WAI-ARIA Landmarks

Often navigation menus, banners, and footers are not preceded by a visible heading because it is visually clear what they are. WAI-ARIA landmark roles can be used to identify these areas and allow screen readers users to navigation to them.
In an example page layout, banner stretches across the page, followed by navigation, which contains search. Under that, main is on the left and complementary on the right. ContentInfo marks a page footer.

Landmark roles are simple to add to a page. Below are the definitions of each role quoted from WAI-ARIA Authoring Practices 1.1, W3C Working Group Note 14 December 2017.

banner: “A region that contains the prime heading or internal title of a page.”
complementary: “Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it.”
contentinfo: “Meta information which applies to the first immediate ancestor whose role is not presentation.”
form: “A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.”
main: “Main content in a document.”
navigation: “A collection of links suitable for use when navigating the document or related documents.”
region: “A perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section.”
search: “The search tool of a Web document.”

Each of the roles below should be used at most once per document:

banner
main
contentinfo

In most cases, that means they can each be used only once per HTML page. However, in some cases, a single HTML page may contain multiple items with role=“document,” and this would allow more per HTML page. We recommend that objects with these 3 roles be disjoint. In other words, they should not contain each other.

Add the role attribute to an object that contains the corresponding section of the document:

<div role=“main”> … Main Content Here … </div>

In this example, there are two areas marked with role='navigation'. One has aria-label='Site' and the other has aria-label='Chapter'
If you use more than one of the same role, such as two navigation landmarks, provide labels distinguishing the two using an aria-label attribute or an aria-labelledby attribute. While these labeling techniques are not yet widely supported, they work in JAWS 12 in our testing and will likely work in more screen readers soon.

Some implementation suggestions and tips

There are still screen readers in use today that do not support these roles, so be sure to still include at least a heading or a skip link to take the user to the main content.
If you use some landmarks, we recommend that you cover every major section of the page using one role or another.
The region landmark can be used if an area of your page needs a landmark and cannot use any of the roles defined above. Be sure to give it a label with aria-label or aria-labelledby.
There shouldn’t be too many landmarks on a page. Just the main 2-6 page sections should be landmarks.
The application role changes screen reader navigation behavior dramatically and should not be used simply to provide a landmark.

HTML 5 Elements that Sometimes Act as Landmarks (nav, footer, aside, section, header, article, form)

While WAI-ARIA landmarks are the most reliable way to create landmarks, it is important to note that some HTML 5 elements are announced as landmarks in some screen readers. The HTML 5 specification does not make it clear which elements should act as landmarks. Supplemental documentation does discuss this, but the current screen reader implementations do not match this documentation.

It is pretty clear that the intention is that <nav> will act as a landmark.

To move forward in this environment we suggest the following:

Include WAI-ARIA landmark markup for the following HTML 5 section elements when you want them to be used as landmarks:Most likely, you will not want <form> to act as a landmark.
- <footer role=“contentinfo”>
- <header role=“banner”>
- <nav role=“navigation”>
- <aside role=“complementary”>
- <section role=“region”>, or a more specific role if appropriate.
Finally, note that in some cases elements with role=“article” and <article> elements are being treated as landmarks.

Frames

keep until Mastering has stopped use??

Traditional HTML Framesets provide one level of in-page navigation since keyboard users can jump between frames (usually using F6 and Shift F6) on a Web page. This does not apply to inline frames (iframe). If your site uses framesets and the main content frame has headings, your site probably meets Pearson Guideline 9.

Skip Links

This is an older technique that would be deprecated if only browsers supported heading and landmark navigation without a screenreader or browser extension.

If your site has many pages with the same structure, you might supplement heading navigation by providing a small number of anchor links at the top of the page that allow users to jump to the main areas of the page. Just as consistent page design would allow sighted users to focus immediately on the main content area as they move from page to page, a link might bring screen reader users to the “main content” on every page. This is particularly helpful in sites without frames where the headings in the main content area vary from page to page.

Do not create mini-menus of these links; no more than two, maybe three, should be in any particular location
These links should refer to standard page elements such as ‘main content’ or ‘navigation’.

Make sure these links are either visible at all times or appear when a user tabs to the links:

.skiplink {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

/* :active is needed for Internet Explorer */
.skiplink:focus,
.skiplink:active {
padding:3px;
position: static;
width:auto;
height:auto;
clip:auto;
overflow:initial;
}

Otherwise keyboard access users who don’t use a screen reader won’t be able to use the links. They would also have to tab past invisible links, which can be confusing and time-consuming.

There are bugs in Internet Explorer 5-11 that sometimes make these in-page links fail. Test the skip links by activating each link; then tab again. If the second tab goes to the top of the page or back to your skip link, your skip link is not working. To be sure to avoid this, add tabindex=“-1” to the target of the link as shown in the code example below. There were 2 bugs causing this: one relating to HasLayout, which no longer affects IE versions we support. The other bug however does still hit IE11.
```
<a name=“skiptarget” id=“skiptarget” tabindex=“-1”>
link name here
</a>
```

Open sample skip link

Tips

If JavaScript is used to change the page structure, be sure to update in-page navigation to reflect the change. For example, if the user can choose to remove the navigation bar and a link allows the user to jump to the navigation bar, the link should also be removed with the navigation bar.
Do not use the accesskey attribute to meet this guideline. Accesskey can actually block keyboard access. (Pearson Guideline 6 explains why.)

Android Applications

Android applications are limited on what they can provide for in-page navigation.

Screen Title

The screen title should reflect the screen contents. The title can be set using the setTitle method.

Headings

Headings are not available in Android applications. Explicit headers can be provided in list views using HeaderViewListAdapter.

iOS Applications

There are several ways to support in-page navigation in iOS applications:

Navigation bar
Tab Bar Controller
Headings

Navigation Bar

The navigation bar provides easy navigation through an information hierarchy and the management of screen contents. To learn more about defining a navigation bar coding practices, see Navigation Controllers, UINavigationController Class Reference, and UINavigationBar Class Reference.

When the user moves to a new screen, the following should change:

The navigation bar title should change to current screen title which is set using UINavigationItem.
The label for the back-button must be the previous level’s title.

Tab Bar Controller

The tab bar controller provides a way for a user to go to different views and allows users to easily move from one section to the next. For more information, see Tab Bar Controllers.

Headings

VoiceOver users will use headings to navigate between elements on the screen. Headings can be defined in iOS6 and later through UIAccessibilityTraitHeader, UITableView, UINavigationBar or content displayed through web view.

PDF in Acrobat

Headings

Organize the document and set a logical heading structure by using the heading tag for the document title and h1-h6 tags for the section headers. This allows screen reader users to jump from heading to heading to read and interact with the content that interests them.

Bookmarks

Bookmarks are a set of links which allows a user to see the different sections of the document and easily navigate to them. Every major section in the document should be included as a bookmark.

To generate bookmarks, go to the Bookmarks Panel. The process to add bookmarks differs slightly depending on the version of Acrobat and the operating system. To add bookmarks in Acrobat 9 Pro:

Go the Bookmarks Panel at View > Navigation Panels > Bookmarks.
Select “New bookmarks from structure” from the navigation panel options.
Select the structure elements to include in the list of bookmarks. The bookmark names come from the title of the tags. If there is no title, the tag content is used.

If there are bookmarks that should not be included, delete the bookmark in the tree structure. Add missing bookmarks manually by using the New Bookmark option in the navigation panel options.

Word

Headings

Use Word heading styles to organize your document structure. A well-structured document that uses the built-in heading styles allows screen reader users to quickly and easily navigate the content. They can jump from heading to heading to access the information that interests them.

Beware of formatting in Word documents that makes the content look like a heading visually but does not use heading styles. Such text is interpreted as plain text by the screen reader. These documents have no structure for screen readers.
In a Word document, 'Heading 3 + Trebuchet, 11 pt' is selected from the Format Menu to style a selected heading

Reference Links

Headings are the most widely used in-document navigation method, but tables of content and sometimes indexes are also used.

When content contains other references such as bookmarks, bibliography entries and table of contents, and footnotes, add them by using the built-in Word features found on the reference menu. Do not create them manually.

PowerPoint

Screen reader users can navigate in slideshow mode easily with keyboard shortcuts. PowerPoint and JAWS shortcuts are available to read the page, read element by element, or advance the next animation event. See Pearson Guideline 6 for a partial list of shortcuts.

However, certain actions are not as intuitive. For example, when a page contains a video or audio clip a user should tab to access the media control. It is possible to add alternate text to the object, but JAWS does not read that text when they tab to put a focus on the media controls. When the focus is on the media object, the user can either select shift-F10 to access the context menu, then Preview or they can press alt-P to play. Test slides with non-standard content layout or interactive objects using a screen reader to ensure that all content is accessible by keyboard.

Testing HTML

There are three recommended ways to provide in-page navigation in HTML: ARIA landmarks, headings and In-page links (“skip links”). Using the techniques below, see if enough support has been provided so that users can move to any of the primary page areas.

Rapid Code Review for HTML Pages

WAI_ARIA Landmarks
Testing technique	Description
Tools	Use the Landmarks favelet to see what has been marked as a landmark on the page. You may want to disable CSS and then apply the favelet so that results are more easily viewed. Disabling CSS is possible from the View menu in most browsers or from the CSS menu of either the Web Accessibility Toolbar or the Web Developer Toolbar.
Output	All ARIA landmarks and HTML Section Elements are shown.
Analysis	See if the ARIA landmark roles have been used according to the specification. Below are the definitions of each role quoted from WAI-ARIA Authoring Practices 1.1, W3C Working Group Note 14 December 2017. `banner` “A region that contains the prime heading or internal title of a page.” `complementary` “Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it.” `contentinfo` “Meta information which applies to the first immediate ancestor whose role is not presentation.” `form` “A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.” `main` “Main content in a document.” `navigation` “A collection of links suitable for use when navigating the document or related documents.” `region` “A perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section.” `search` “The search tool of a Web document.” Also check for the following: Make sure that `banner`, `main` and `contentinfo` are not used more than once per document. Make sure everything on the page is included in one landmark or another. Look out for too many landmarks and/or too many HTML Section Elements; these are spoken as a blind user listens to the page and too many can be distracting. If `role=“application”` is used, make note that that area of the site needs to be tested for accessibility as an application, using assistive technologies.

Headings
Testing technique	Description
Tools	Use the headings favelet to see what has been marked as a heading on the page. You may want to disable CSS and then apply the favelet so that results are more easily viewed. Disabling CSS is possible from the View menu in most browsers or from the CSS menu of either the Web Accessibility Toolbar or the Web Developer Toolbar.
Output	The Headings favelet brackets heading text with a heading level, like `<h1>…</h1>` and the JS alert displays the number of headings and their levels, like: “9 headings, 1 h2, 3 h2 and 5 h6.”
Analysis	Looking at the page as a whole: Is there heading text at the beginning of each major section of the page. Do sections of similar format and importance have the same heading levels? Is text that looks like a heading text marked up as an HTML heading? Also consider whether the heading structure is well-organized: There should be just one `h1`. Also, are there unreasonable gaps in heading numbering, like `h2` to `h5`?

Skip Links / In-Page Links
Testing technique	Description
Tools	If you use Internet Explorer, you can use the Skip Links favelet to display all in-page links. Or, preferably, use the Tab key to see if a Skip Link becomes visible at the top of the page. When it does, follow that link, and tab once more to confirm that input focus has moved correctly.
Output	The output of the favelet displays each in-page link and its effective target (where you actually end up on the page after followng the link) in the form of a dark rectangle. If the effective target is, for example, the whole page , then the input focus is not moving when you follow the skip link. When using the keyboard to test, make sure you not only jump to the location on the page visually, but that your next tab does not bring you back to the top of the page.
Analysis	Is there a skip link and is it visible when it receives focus, is it close to the top of the page (at most number 2 or 3), does the skip link move to the main content of the page and from there does one more tab go to the next link in that main content area (and not back to the top).

Screen Reader Commands

AT	Headings Forward & Back	Specific Heading Level	Landmarks Forward & Back
JAWS	h and Shift + h	number (1-6) and Shift + number	r and Shift + r (earlier than JAWS 15, use semicolon)
VoiceOver on iOS (iPad, iPhone, iPod Touch)	Turn rotor with two fingers to Headings. Swipe up or down with one finger.	Not available in gestures - need keyboard.	Turn rotor with two fingers to Landmarks. Swipe up or down with one finger.
Window Eyes	h and Shift + h	number (1-6) followed by h and number followed by Shift + h	semicolon and Shift + semicolon
NVDA	h and Shift + h	number (1-6) and Shift + number	d and Shift + d

Testing Mobile Applications

On mobile, the platform capabilities different. For Android applications, only the screen title can be set. In iOS if the navigation bar is used, the application title and back button must be set. Headings must be defined.

Android
Testing technique	Description
Tools	Visually look at the screen or use TalkBack for the screen title.
Output	This title is visible and is announced by TalkBack.
Analysis	The title provides context and helps orient the user to the screen. The title should be concise, descriptive and unique.

iOS
Testing technique	Description
Tools	Visually inspect the page to identify what the page title and the name of the back button. Use VoiceOver to check the information read the screen title, the back button, and the headings. Read the screen using left to right or right to left swipe gestures. Turn the rotor settings to headings (Turn dial on the screen with two fingers and change the option to Headings). Swipe up or down with one finger to move from one heading to the next.
Output	The screen title is visible and is announced by VoiceOver. The back button is visible and is read by VoiceOver. All visible headings on the screen should get focus when moving between headings using swipe up / down gesture when the rotor is set to headings.
Analysis	The title provides context and helps orient the user to the screen. The title should be concise, descriptive and unique. The back button is announced as a back button and has a unique name that indicates the page that the user will go back to. Looking at the page as a whole: Is there heading text at the beginning of each major section of the page. Is text that looks like a heading text marked up as a heading?

Testing Word

The table below provide some options for testing your Word documents:

Testing technique	Description
Word	Check that each heading is using a heading style.
Word with JAWS	Press Insert + Z to turn quick keys on. Press h or shift + h to move between headings.
Word with Window Eyes	Press Insert + Z to enter Word Navigation Mode. Press h or shift + h to move between headings. Press numbers (1-9) to navigate by heading level.

How to Check Heading Styles in Word 2007 and 2010

Testing technique	Description
Reveal styles	Shift-F1 (the Distinguish style source option can be useful)
Styles panel	Show the styles window by clicking the bottom-right arrow in Home > Styles
Style inspector	Click the button at the bottom of the styles window
Style area	View in draft or outline mode. The style name is shown to the left of the content. To turn on, select Word Options > Advanced > Display > style area pane width

Testing PDF in Acrobat

Testing technique	Description
Tools	In a PDF document, there are two key ways to provide in-page navigation: headings and bookmarks. Check that each heading has been defined as a heading. PDF - Check that each heading is represented by the appropriate heading tag (h, h1-h6) in the Tags pane. PDF with JAWS - Press Insert + Z to turn quick keys on. Press h or shift + h to move between headings. PDF with Window Eyes - Press Insert + Z to enter Word Navigation Mode. Press h or shift + h to move between headings. Press numbers (1-9) to navigate by heading level. Check the Bookmarks pane to verify that complete and properly worded bookmarks are used.
Output	Observe the results of this testing in the Bookmarks and Tags pane in Acrobat.
Analysis	Make note of content headings that are not in heading tags or which are tagged using an inappropriate heading level. Note missing or inappropriately worded bookmarks.

Related Guidelines

508 Web § 1194.22 (o)

A method shall be provided that permits users to skip repetitive navigation links.

WCAG 2.0 A – SC 2.4.1 Bypass Blocks

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)