Amphtml: Improve accessibility of keyboard focus and skip links in IE11
What's the issue?
In WordPress themes it is extremely common for there to be a JS file included like this: https://github.com/Automattic/_s/blob/master/js/skip-link-focus-fix.js
The purpose of this JS is to fix an accessibility issue in IE11 for keyboard-only users. In particular, per https://github.com/Automattic/_s/pull/136:
The problem is that when someone clicks a skip link, the viewport is scrolled to the #content, but pressing tab will bring focus to the site's main navigation. The expected behavior would be to select the first link in the #content, not the site's main navigation. Of course this is the browser's default behavior, and not really a _s bug, but it is an opportunity to make _s-based themes more accessible to users that navigate solely through keyboard input.
I learned about this issue via an article written by Nicholas C. Zakas. He suggests setting focus to the #content using JavaScript. I've adapted his example to use jQuery and to better conform to WordPress coding standards.
In work on the AMP for WordPress plugin, this is a common bit of JS that is encountered which must be suppressed to avoid validation errors. However, in doing so then IE11 users miss out on the a11y fix.
See also:
Should this a11y fix be made part of the AMP runtime?
What browsers are affected?
IE11
westonruter
All 7 comments
This should be fairly easy to add since we already do most of the work that script does. We always intercept navigation and know when it is an anchor nav already so no need to listen to hashchange.
All we need is to add the if(IE) { focus() } logic to this line: https://github.com/ampproject/amphtml/blob/a2f9c1d3fff343d4722b9e0d248dfa75a35c2448/src/service/viewport/viewport-impl.js#L493
Anyone interested in contributing this fix?
(Our IE11 support is essentially "it will not be perfect, but it will work", so if this was not an a11y issue it would have been up for debate as this will increase V0 size by a bit. We are looking at only a few bytes anyway, so I am 馃憤 @kristoferbaxter )
aghassemi
on 11 Oct 2018
I agree with your assessment @aghassemi. Would love to see this change and am happy to find some other bits to remove in our quest to a smaller runtime.
kristoferbaxter
on 12 Oct 2018
I am new to amphtml codebase and ready to fix this issue to get familiar with the codebase. Although I can write some good JS and excited to explore web components and progressive enhancement used in amphtml codebase.
sagarkbhatt
on 25 Oct 2018
Thanks @sagarkbhatt. bit.ly/helpamp has some good getting started documentation. Also this talk from AMP Contributor Summit could be helpful: https://www.youtube.com/watch?v=kjn322ELFvs&t=0s&list=PLXTOW_XMsIDQTgsP8P77-aTu26D4_N3Kt
aghassemi
on 25 Oct 2018
@aghassemi
While debugging I figured out that we are not reaching till scrollIntoViewInternal_ when user click on skip to link instead, runtime will return from handleNavClick_ function in navigation.js
Ref code:
https://github.com/ampproject/amphtml/blob/master/src/service/navigation.js#L450-L463
sagarkbhatt
on 30 Oct 2018
/to @aghassemi I have updated changes to fix the issue that I mentioned above. Can you please take a look at it.
Thank you
sagarkbhatt
on 30 Oct 2018
westonruter
on 21 Oct 2019
Related issues
mkhatib
路
3Comments
cvializ
路
3Comments
choumx
路
3Comments
radiovisual
路
3Comments
aghassemi
路
3Comments
Most helpful comment
This should be fairly easy to add since we already do most of the work that script does. We always intercept navigation and know when it is an anchor nav already so no need to listen to
hashchange.All we need is to add the
if(IE) { focus() }logic to this line: https://github.com/ampproject/amphtml/blob/a2f9c1d3fff343d4722b9e0d248dfa75a35c2448/src/service/viewport/viewport-impl.js#L493Anyone interested in contributing this fix?
(Our IE11 support is essentially "it will not be perfect, but it will work", so if this was not an a11y issue it would have been up for debate as this will increase V0 size by a bit. We are looking at only a few bytes anyway, so I am 馃憤 @kristoferbaxter )