back to CanAdapt home

Test skip to main content link under different conditions tabindex="-1"

Example 1: Destination is an anchor with tabindex=-1

Immediately after this sentence is a skip navigation link which becomes visible on focus.

Skip to main content

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

 

Main Content (Example 1)

Here is some fake main content material. And here is a discussion about the weather to read to ensure we actually have skipped over the menu and are not stuck with focus back on the skip nav link. Here is a test link to tab to after skipping. The destination was an empy anchor with tabindex="-1"

 

Accessibility Support technology used

  JAWS NVDA VoiceOver
FireFox34.0.5 OK OK N/A
IE11.0.9 OK OK N/A
Chrome 39.02

skipnav doesn't read on focus.

skipnav doesn't read on focus.

 N/A
Safari MacOS N/A N/A OK

 

Example 2: Destination is an anchor (no tabindex)

Immediately after this sentence is a skip navigation link which becomes visible on focus.

Skip to main content

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

 

Main Content (Example 2)

Here is some fake main content material. And here is a discussion about the weather to read to ensure we actually have skipped over the menu and are not stuck with focus back on the skip nav link. Here is a test link to tab to after skipping. The destination was an empy anchor with no tabindex.

Accessibility Support technology used

  JAWS NVDA VoiceOver
FireFox34.0.5 OK OK N/A
IE11.0.9 OK OK N/A
Chrome 39.02

skipnav doesn't read on focus.

skipnav doesn't read on focus.

 N/A
Safari MacOS N/A N/A Doesn't work

Comments

 

Example 3: Destination is an h1 (no tabindex)

Immediately after this sentence is a skip navigation link which becomes visible on focus which goes to content below.

Skip to main content

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Main Content (Example 3)

This is some different main content material. And here is a different discussion about the weather to read to ensure we actually have skipped over the menu and are not stuck with focus back on the skip nav link. Here is a different test link to tab to after skipping. The destination is the main heading with tabindex="-1"

Accessibility Support

  JAWS NVDA VoiceOver
FireFox34.0.5 OK OK N/A
IE11.0.9 OK OK N/A
Chrome 39.02

skipnav doesn't read on focus.

skipnav doesn't read on focus.

 N/A
Safari MacOS N/A N/A Doens't work

Example 4: destination a <h1 tabindex="-1">

Immediately after this sentence is a skip navigation link which becomes visible on focus which goes to content below.

Skip to main content

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Main Content (Example 4)

This is some different main content material. And here is a different discussion about the weather to read to ensure we actually have skipped over the menu and are not stuck with focus back on the skip nav link. Here is a different test link to tab to after skipping. The destination is the main heading with no tabindex.

Accessibility Support technology used

  JAWS NVDA VoiceOver
FireFox34.0.5 OK OK N/A
IE11.0.9 OK OK N/A
Chrome 39.02

skipnav doesn't read on focus.

skipnav doesn't read on focus.

 N/A
Safari MacOS N/A N/A OK