Test internal links

The purpose of this page is to test in-page links - especially in iOS and VoiceOver. We are seeing a strange behavior where an in-page link works well in FF with NVDA and IE with JAWS, but not on iOS Safari with VoiceOver. In iOS Safari with VoiceOver, we are seeing two different classes of problems:

1. VoiceOver will move visual focus to the destination content, but nothing is read or only the landmark info (such as "main") is read. If you swipe away from the content and then back to it, VoiceOver skips it completely as you swipe back and forth over / past it.
2. VoiceOver will move visual focus to and read the destination content, but if you swipe away from the content and then back to it, VoiceOver skips it completely as you swipe back and forth over / past it.

Conclusions:

1. It appears that putting the destination ID directly on an anchor element works well in iOS Safari with VoiceOver in all cases.
2. No other robust solutions have been found thus far.

1. Destination ID is on a natively focusable element: link, text box and button

Test 1A: Destination is an anchor

Link to another anchor

Result: NVDA/FF reads the link content as expected and focus is on the link.
iOS/VoiceOver/Safari reads the link content as expected and there are no swiping issues.

Destination 1A

Test 1B: Destination is a text box

Link to a text box

Result: NVDA announces the text box but not its label - focus appears to be in the text box, but NVDA does not go into forms mode until user presses Enter.
iOS/VoiceOver/Safari moves visual focus to text box, nothing is read, user can swipe away and back to hear text box.

Destination 1B

Test 1C: Destination is a button

Link to a button

Result: NVDA reads the button as expected and focus is on the button.
iOS/VoiceOver/Safari moves visual focus to button, button name is read but not its roles, user can swipe away and back to hear button name and role.

Destination 1C

2. Destination ID is on a div around a natively focusable element: link, text box and button

Test 2A: Destination is an anchor

Link to a div around an anchor

Result: NVDA reads the link content as expected and focus is on the link.
iOS/VoiceOver/Safari moves visual focus to link, reads nothing, cannot swipe to link, can find link by explore by touch.

Test 2B: Destination is a text box

Link to a div around a text box

Result: NVDA announces the text box but not its label - focus appears to be in the text box, but NVDA does not go into forms mode until user presses Enter.
iOS/VoiceOver/Safari moves visual focus to text box, reads nothing, cannot swipe to text box, can text box by explore by touch.

Destination 2B

Test 2C: Destination is a button

Link to a div around a button

Result: NVDA reads the button as expected and focus is on the button.
iOS/VoiceOver/Safari moves visual focus to button box, reads nothing, cannot swipe to button, can find button by explore by touch.

3. Destination ID is on a semantic (but non-focusable) element: h2, p

Test 3A: Destination is a heading

Link to a heading

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

Destination 3A

Test 3B: Destination is a paragraph

Link to a paragraph

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the paragraph, reads nothing, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

Destination 3B

4. Destination ID is on a div around a semantic (but non-focusable) element: h2, p

Test 4A: Destination is a heading

Link to a div around a heading

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

Test 4B: Destination is a paragraph

Link to a div around a paragraph

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the paragraph, reads nothing, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

5. Destination ID inside a div with role=main

Test 5A: Destination is an anchor inside a div with role=main

Link to anchor in a main landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari read content as expected, and there are no swiping issues.

Test 5B: Destination is an anchor inside a div, inside a div with role=main

Link to anchor in a main landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari read content as expected, and there are no swiping issues.

Test 5C: Destination is a heading inside a div with role=main

Link to a heading in a main landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

Test 5D: Destination is a heading inside a div, inside a div with role=main

Link to a heading in a main landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

6. Destination ID inside a div with role=complementary

Test 6A: Destination is an anchor inside a div with role=complementary

Link to anchor in a complementary landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari read content as expected, and there are no swiping issues.

Test 6B: Destination is an anchor inside a div, inside a div with role=complementary

Link to anchor in a complementary landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari read content as expected, and there are no swiping issues.

Test 6C: Destination is a heading inside a div with role=complementary

Link to a heading in a complementary landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.

Test 6D: Destination is a heading inside a div, inside a div with role=complementary

Link to a heading in a complementary landmark

Result: NVDA reads the content as expected.
iOS/VoiceOver/Safari moves visual focus to the heading, reads the content, if user swipes off the content cannot swipe back to it, can find content by explore by touch.