You would possibly assume that if you wager on the net platform and depend on native HTML options, your web site can be fully accessible. Sadly, this assumption is flawed in lots of instances.
This week, I’ve discovered that even easy issues, equivalent to linking to native parts through id (<a href="#one thing">), require cautious consideration to not trigger accessibility issues.
What is the subject with native hyperlinks?
I have been studying How To Keep away from Breaking Internet Pages For Keyboard Customers and discovered that some assistive applied sciences depend on doc.
The activeElement read-only property of the Doc interface returns the Factor throughout the DOM that presently has focus.
For instance, if you’re leaping by means of a web page through your keyboard’s TAB key, doc will all the time reference the targeted aspect. It may be hyperlinks, buttons, inputs… you get the concept.
And that is nice, however what occurs if you comply with a hyperlink pointing to an unfocusable aspect, like a skip hyperlink referencing the predominant aspect or a “scroll to high” hyperlink returning you to a weblog’s headline?
Then, there’s nothing to focus, and the doc strikes to physique as a fallback. If assistive know-how depends on doc, the context is misplaced. That is fairly poor UX. Ouch!
To resolve this subject, when you’re concentrating on a container, headline or every other unfocusable aspect, make it focusable through tabindex="-1".
And this is the repair in motion.
a hyperlink goal with out tabindex
a hyperlink goal with tabindex
Click on the hyperlinks above to see what doc.activeElement turns into after interacting with a neighborhood hyperlink.
The truth that activeElement can solely be a focusable aspect is fairly cheap. Nonetheless, it is puzzling that easy internet options like linking to a different HTML aspect have to be evaluated and thoroughly thought-about to maintain the whole lot intact and accessible.
It is one other case of “writing good and accessible HTML is more durable than the net business thinks”. However when you’re studying this weblog, you most likely know this already. 😉
