[wp-trac] [WordPress Trac] #38338: Twenty Sixteen: Skip To Content Link Not Working on iPhone

[WordPress Trac]

#38338: Twenty Sixteen: Skip To Content Link Not Working on iPhone
---------------------------+------------------------------
 Reporter:  alexstine      |       Owner:  davidakennedy
     Type:  defect (bug)   |      Status:  reopened
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:
 Severity:  major          |  Resolution:
 Keywords:  needs-testing  |     Focuses:  accessibility
---------------------------+------------------------------

Comment (by GrahamArmfield):

 Hi all, I have tested the KSB Yearbook site mentioned above on an iPhone 5
 running iOS10.3.3 and with Voiceover activated.

 I get the same problem as outlined above. I hear the "skip to content"
 link, and double-tap to follow the link. Initially, the main content seems
 to get the Voiceover focus ring, but nothing is announced. When I swipe
 right to move to the next item, I find I am on the first link in the
 footer.

 I note comment from @afercia about the skip link not becoming visible when
 it gets focus - and this '''is''' an issue for sighted keyboard users.

 With this in mind I tried another page: https://openinclusion.com/visitor-
 information/

 I helped put this site together and I know it has skip links that do
 become visible when they get focus. Additionally this long page also
 contains a table of contents at the top - a series of in-page links, each
 of which jumps down to a heading.

 Interestingly, the skip link at the top shows exactly the same behaviour
 as the skip link on the KSB Yearbook site - ie initially the content area
 gets Voiceover focus, but swiping to the right takes you down into the
 footer area.

 However, the in-page links work perfectly - focus is on the heading and
 Voiceover reads out the heading (and level).

 Additionally on that site at mobile widths, there is a 'Top' link that
 floats near the bottom of the viewport. It points to #top - a `<div>` that
 contains the banner and navigation. Manually focusing on that with
 Voiceover and double tapping takes you back up '''near''' the top but
 Voiceover actually starts to read the first paragraph of the main content
 - ie after the navigation and top level heading. That's not right...

 So far then, in-page links that point to headings work fine, but in-page
 links that point to `<div>`s do not give the desired behaviour.

 It's also not about the lack of a `tabindex="-1"` on the target element,
 because the skip link points to the <main> element which does have a
 `tabindex="-1"`. The headings do not have this and they work fine.

 To me this seems like a 'feature' of iOS.

 There's also this article: https://axesslab.com/skip-links/

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/38338#comment:23>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform