Search code examples
htmlhyperlinkaccessibilitytabindex

Activating parent link with keyboard focus on tabbable child without Javascript?

Consider a situation like this:

<a href="#">
    <div tabindex="0">Tab focus me, then ⏎</div>
</a>

If I'm focused on the <div /> and press enter, I get different behaviour across the major desktop browsers (OS X Yosemite):

  • Chrome 54.0.2840.71: The parent link is not activated. Both the <a /> and child <div /> are separately selectable by tab.
  • Firefox 48.0.2: The <a /> doesn't seem to be selectable by itself, but the link can be activated with focus on the <div />.
  • Opera 39.0: Same behaviour as Chrome.
  • Safari 9.1.2: Like Firefox, the <a /> itself isn't selectable, but when the <div /> is selected, the link isn't activated.

Since <a /> can't be nested, is there any way to make a focused child element activate the parent link across browsers without Javascript? The Javascript option is obvious, but I find it somewhat unbelievable something this simple would need it.

Solution

  • Any element with a tabindex is considered as an interactive content

    See: http://w3c.github.io/html/single-page.html#kinds-of-content-interactive-content

    The tabindex attribute can also make any element into interactive content.

    And those interactive elements can not belongs to a a[href] tag

    The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within

    So you won't be able to achieve that without javascript as it's not something that your browser should do normally.