Navigation

With the rebuild of Physics Classroom and its site template, we have added specific tools to help make navigating around easy for those with Screen Readers.

Heading Navigation

Physics Classroom has structured its pages to leverage Heading level navigations. The start of the content in the page is always the Heading 1 tag, and the content is organized using headings in their proper order. Using screen reader devices to navigate heading should allow you to easily navigate the content of the site.

Additionally, we have a Page Level navigation (3rd tab of the left-hand side bar for those not using a screen reader) which shows the page's hierarchy structure and highlights where a person is on the page and allows for easy navigation to key parts.

The site has various areas which contain different types of navigation, we'll cover each area and how to leverage them.

Quick Screen Reader Nav

When you first visit a page, if you hit the tab key, you'll bring up the hidden screen reader navigation. This navigation is meant to get you to the main page, or the other navigation areas. The first link is to the Content (you can also just go to the Header 1 if you wish), and then it links to the other Navigations. Here's the list of the elements:

  1. Skip to Content
  2. Your Account (if logged in)
  3. Skip to Primary Navigation (contains first and second level navigation)
  4. Skip to Secondary Navigation (third and fourth level navigations if you're on a second level or below page)
  5. Skip to Page Navigation (heading structure - largely you can ignore this in favor of Heading navigation)
  6. Skip to Header Navigation (contains links and tools)
  7. Skip to Footer Navigation (contains contact links and some others)
  8. Read More About Accessibility (contains toggles for accessibility options and more information)

Skip to Content

The Skip to content link in the screen reader quick navigation allows you to skip to the body of the page. You can also just skip to the Heading 1 element as well.

Primary and Secondary Navigations

The Primary and Page Navigations contain a custom screen-reader navigation that are accessed through the Quick Screen Reader Nav links. These screen reader versions are tied into your arrow keys to navigate. Up and Down keys will go up and down the levels of the navigation and Left and Right will cycle between sibling navigation items.

Page Navigation

The page navigation shows the heading structure of the current page. If you are using a screen reader, I would ignore this navigation and use your standard built in Heading Navigation tools to skip or navigate heading levels.

The header and footer elements both can be tabbed through once you navigate to them. They are designed with the proper aria tags and descriptions and should be easily usable.

Return to Screen Reader Navigation