Why

How

Positioned at the top of the page within the <body> tags generally top left corner or near the logo

Hidden until focused on, activated by “Tab”

Enables the user to skip to navigation (to get to other pages on the site). Accompanied by anchor link to the navigation interface elements on the page and ARIA role “navigation” (discussed below)

Enables the user to skip to main content (to get to the core information on the page). Accompanied by anchor link to the heading of the main content on the page and ARIA role “main” (discussed below)

Enables the user to skip to an accessibility statement (this is the website’s position on supporting accommodation and can be a location to add other methods or processes to interacting with the information or services)

Why

How

To help users using screen readers and other assistive technologies ARIA tagged zones on the page helps the user determine where they are in the context of the page. ARIA labels are used to section off all zones of the web page (no content should not have a label).

Best bets on ARIA landmark labels:

ARIA role “banner”: used for the top of the page including main site navigation

ARIA role “main”: used for the main body content of the page

ARIA role “navigation”: used for the navigation of the site

ARIA role “complementary”: used for secondary information that supports the page

ARIA role “alert”: used for alert or call out information needed to let the user know about influencing information about the page

Why

How

Let the user know what they are linking to. Identify if the user will be opening another window, going to a different website or opening/downloading a document. Note, default to open in the same window

Do not over saturate a page with links

Ensure the link is meaningful. Do not say “click here”. Let the user know what they are doing when clicking, e.g. find out more about fish

Use anchor links to help the user skip to parts of the page quickly if there is a lot of content (like providing a table of contents)

Make redirects seamless (no delay or information to confuse the user)

Allow the user to choose their interaction with the site (i.e. open page in new window, refresh page, pop up interaction)