WebKit scuppers skip-to-content links
JavaScript required to get anchors to work properly in Safari and Chrome
Web designer and developer Damon Muma has "stumbled on to the factoid" that skip links are broken in WebKit browsers. On his blog, he outlines the problem, which stems from an issue that has its very own four-year-old bug report.
Speaking to .net, Muma explained that in WebKit, when you navigate to an internal link on the same page (such as page.html#internal-location), the focus stays on the link you originally followed (not necessarily 'clicked'). If you then press Tab to move to the next link, it goes back to your original position on the page and your position at #internal-location is completely overridden. "The focus should move to the location of the anchor target, like in Firefox and Internet Explorer," he explained. "The way it is now in WebKit, internal links are practically unusable without scripting to fill in the proper behaviour."
Although the article was written from the context of skip-to-content links, Muma was keen to point out the problem is much wider: "It really affects anyone browsing a site using the keyboard. And this is important, because it's not just about people who hate moving their hands away from the keyboard while browsing. Many people use keyboards, or input devices that mimic keyboards, because it isn't physically possible for them to use a mouse. For these users, any unnecessary keystroke could be not just inconvenient but potentially painful."
Author of Adaptive Web Design Aaron Gustafson was also surprised by the bug, and told us that "while skip-to links are a common example of the problem, they're far from the only use – FAQs are probably the most common application". Gustafson said that the behaviour noted by Muma was bad for accessibility and has been "largely ignored by the WebKit team". This, he suggested, should be a big concern to those on the WebKit team: "It powers so many desktop browsers now – Chrome and Safari being the primaries, but Flock for Mac, Maxathon, Shiira, OmniWeb and iCab are other notables – and this bug therefore poses a major problem for the accessibility and usability of our websites. There are JavaScript workarounds, but they shouldn't be necessary – this is HTML 1.0 stuff!"
As for getting something done about the issue, Muma says you can visit and 'star' Chromium Issue 37721: 'Skip links do not work when using screenreader'.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.