WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 months ago

#38338 reopened defect (bug)

Twenty Sixteen: Skip To Content Link Not Working on iPhone

Reported by: alexstine Owned by: davidakennedy
Milestone: Future Release Priority: normal
Severity: major Version:
Component: Bundled Theme Keywords: needs-testing
Focuses: accessibility Cc:

Description

When using an IPhone5C with Voiceover, the Skip To Content link is not working. Once the link is clicked, it goes to "contentinfo"/"<footer>" instead of "content" as "#content" directs it to do. Seems to work fine visually, but with Voiceover it focuses on the first item of the footer navigation menu.

GitHub Issue: https://github.com/WordPress/twentysixteen/issues/488

Any possibility of getting this one fixed?

Thanks.

Change History (25)

#1 @SergeyBiryukov
3 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
3 years ago

  • Summary changed from (Twenty Sixteen) Skip To Content Link Not Working on IPhone to Twenty Sixteen: Skip To Content Link Not Working on iPhone

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#4 @afercia
2 years ago

  • Milestone changed from Awaiting Review to 4.7
  • Version 4.6.1 deleted

Sounds like an iPhone bug but since the code is presumably the same used in the upcoming Twenty Seventeen I'd say it's definitely something to check for 4.7. Then the Twenty Seventeen can make a decision and even close the ticket if they confirm it's a device bug and there's not so much that can be done.

#5 @alexstine
2 years ago

This seems to only be a problem in Twenty Sixteen, other skip to content links on other sites work fine on the IPhone.

Thanks.

#6 @davidakennedy
2 years ago

  • Focuses template removed
  • Keywords reporter-feedback added

Hi @alexstine! Welcome! Thanks for the report.

I've tested the skip links on both the official demos for Twenty Sixteen and Twenty Seventeen. Those are:

https://twentysixteendemo.wordpress.com/
http://2017.wordpress.net/

Tested with Safari on an iPhone 5. I can't reproduce the bug you report. Is there anything special or different about the steps you're taking to reproduce the bug?

This ticket was mentioned in Slack in #accessibility by davidakennedy. View the logs.


2 years ago

#8 @alexstine
2 years ago

Hello,

I tested on your links using Voiceover and it still does not work. It totally skips the content and seems to focus on the navigation menu launcher.

Thanks.

This ticket was mentioned in Slack in #accessibility by davidakennedy. View the logs.


2 years ago

#10 @davidakennedy
2 years ago

  • Owner set to davidakennedy
  • Status changed from new to assigned

#11 @davidakennedy
2 years ago

@alexstine Thanks for testing again. Much appreciated!

I've tried again multiple times on each demo, and can't reproduce. I also asked @laurelfulford to test this, and she couldn't reproduce it either.

What version of iOS are you running? What browser? Anything different about that browser or your setup? Maybe something else is causing this?

This ticket was mentioned in Slack in #accessibility by davidakennedy. View the logs.


2 years ago

#13 @alexstine
2 years ago

Using the latest version of IOS. No special browser, just default Safari browser. It works fine visually, but Voiceover gets targeted anywhere but the main content, 90% of the time it ends up in the footer menu.

Thanks.

This ticket was mentioned in Slack in #accessibility by davidakennedy. View the logs.


2 years ago

This ticket was mentioned in Slack in #core by helen. View the logs.


2 years ago

#16 @davidakennedy
2 years ago

  • Milestone 4.7 deleted
  • Resolution set to worksforme
  • Status changed from assigned to closed

Since myself and @laurelfulford weren't able to reproduce this in either Twenty Sixteen or Twenty Seventeen in multiple attempts, I'm going to close it. But it can be reopened in the future if steps to accurately reproduce the issue more often are determined.

#17 @alexstine
18 months ago

  • Resolution worksforme deleted
  • Severity changed from normal to major
  • Status changed from closed to reopened

Hello,

I just switched my live site over to the Twenty Seventeen theme and am still seeing this problem.
https://goo.gl/49UjaL

Steps to replicate.

  1. Start with any iPhone. I'm now using the iPhone 7.
  2. Go to Settings --> General --> Accessibility --> Voiceover and enable it.
  3. Open Safari.
  4. Visit my domain or another site using the Twenty Seventeen theme.
  5. When you find the Skip to content link, double tap to activate it. You will see Voiceover focus does not change to the main content. You simply stay right on the link.

This however works just fine with using a screen reader such as NV Access (NVDA) on Windows. It must be the way the code is with some of the default WP themes. For other websites, skip links work fine. I'm just not for sure why it does not work on WP themes. One thing is for sure, it is not an Apple bug in IOS if it works on other sites.

Thanks.

#18 @SergeyBiryukov
14 months ago

  • Keywords reporter-feedback removed
  • Milestone set to Awaiting Review

#19 @afercia
3 months ago

This should be tested again on a real iOS device. That said I think there's an issue on the site reported as example.

@alexstine hello there. As far as I see, the KSB site is using a child theme. The child theme is probably changing something in the header template because the skip link doesn't even get visually revealed when focused.

Sorry for the code examples, hope you can get it: on the KSB site I see the markup is:
<a class="screen-reader-text" href="#content">Skip to Content</a>

while it should be:
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Basically, it misses an additional skip-link CSS class. Not sure that has anything to do with the issue you reported though, unfortunately I can't test on an iPhone.

#20 @afercia
3 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#23 @GrahamArmfield
3 months ago

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/

#24 @afercia
3 months ago

  • Milestone changed from Awaiting Review to Future Release

To recap the information provided by the article @GrahamArmfield linked to:

there are bugs reported against both WebKit for iOS and Android:

The fact on some sites the skip link works might be related to the usage of the tabindex="-1" fix, as suggested in the axesslab.com article. However, seems things are a bit more complicated:

  • Twenty Sixteen uses a few lines of JavaScript to add tabindex="-1" to the skip link target
  • Twenty Seventeen and Nineteen use the same JavaScript but only for Internet Explorer, as the original WebKit bug was solved, at least on desktop

The fact this bug seems to happen on both Twenty Sixteen and Twenty Seventeen suggests it happens regardless of the tabindex="-1" fix. Worth also noting that using tabindex="-1" on a non-interactive element like a div has undesirable consequences for Internet Explorer and JAWS, see [44639].

Moving to Future Release, as seems this issue needs some research and investigation.

#25 @afercia
3 months ago

On a side note, despite the bug reported against Android, I've just tested on Android with Chrome 71 and TalkBack 7.2 and the skip link worked well for me on Twenty Sixteen, Seventeen, and Nineteen.

Note: See TracTickets for help on using tickets.