Skip to content
This repository has been archived by the owner on Jul 11, 2024. It is now read-only.

Commit

Permalink
Cleanup, Wording
Browse files Browse the repository at this point in the history
Addresses #296
  • Loading branch information
yatil committed Apr 14, 2015
1 parent 014fda2 commit caeedff
Showing 1 changed file with 10 additions and 8 deletions.
18 changes: 10 additions & 8 deletions source/page-structure/in-page-navigation.html.erb.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,36 @@ wcag_techniques:
- G124
---

Web browsing is non-linear and useful navigation can be provided to efficiently orient users to page content. Such in-page navigation provices users with links to sections of the page that might be hard to discover in a linear fashion. This also benefits people with low vision. In-page links to content also make it easier to share specific content.
As Web browsing is non-linear, useful navigation can be provided to efficiently orient users to page content. Such in-page navigation provides users with links to sections of the page that might be hard to discover in a linear fashion. This also benefits people with low vision. In-page links to content also make it easier to share specific content.

## Anchors

The `id` attribute is used as an anchor and can be directly linked to from within the page or externally. If the main content is using `<div id="content">`, attaching `#content` to the URL will scroll the main content into view and focus on it. This can be helpful to people who bookmark commonly used pages to jump directly to the section of the page of interest. For example, creating a bookmark to the first news item on a news listing page.
The `id` attribute of any element can be used as an anchor and directly linked to from within the page or externally. If the main content is using `<div id="content">`, attaching `#content` to the URL will scroll the main content into view and focus on it. This can be helpful to people who bookmark commonly used pages to jump directly to the section of the page of interest. For example, creating a bookmark to the first news item on a news listing page.

If possible, make those anchors visible by adding permalinks to the page. In this tutorial, you can find permalinks are accessible by using the share button displayed near each heading.
If possible, make those anchors visible by adding links to the web page. In this tutorial, you can find permalinks by using the share button displayed near each heading.

## Skip links

Skip links are historically needed to jump to different sections on the page. They were used before WAI-ARIA landmarks were implemented in browsers and assistive technologies. Skip links are still recommended because browsers still don’t provide keyboard access to landmarks. Also, most screen reader users are used to move to the main content using skip links. For more information on landmarks see the [Page Sections](sections.html) page.
Skip links are historically needed to jump to different sections on the page. They were used before WAI-ARIA landmarks were implemented in browsers and assistive technologies. Skip links are still recommended because browsers still don’t provide keyboard access to landmarks. Also, most screen reader users are used to move to the main content using skip links. Skip links are useful for people using the keyboard to navigate through the page, even if they can visually perceive the content. For more information on landmarks see the [Page Sections](sections.html) page.

These tutorials, for example, have a visually hidden link to the navigation that allows the user to jump directly to the navigation, which comes after the main content of the page. This skip link is hidden by default but made visible as soon as it is focused to not confuse sighted keyboard users. As the tutorials are designed in a responsive way, the content is linearized on small screens or when zoom is enabled. In those cases the navigation menu is on the bottom of the page. The skip link is visible to allow all users to jump down to the navigation menus.

The following example shows skip links in a more traditional situation with the navigation before the content, allowing users to jump directly to the content.

{::nomarkdown}
<%=code_start%>
{:/nomarkdown}

~~~html
<nav aria-label="Skip Links">
<ul>
<ul>
<li>
<a href="#navigation" class="visuallyhidden focusable">Jump to navigation</a>
<a href="#content" class="visuallyhidden focusable">Jump to content</a>
</li>
<li>
<a href="#content" class="visuallyhidden focusable">Jump to content</a>
<a href="#navigation" class="visuallyhidden focusable">Jump to navigation</a>
</li>
</ul>
</ul>
</nav>
~~~

Expand Down

0 comments on commit caeedff

Please sign in to comment.