Can I have a header work as a button but not use the role of a button

Question

I have a header that I want to work as a button. My problem is that if I assign the header a button role, it messes with accebility and a screen reader; The button role overrides the header so the blind user can not navigate to the header as they would with other headers.

I want the user to be able to navigate to the header and push it like a button (using the space bar). I have been trying to nest a button into the header with a changed tab index but it does not work.

<h2 class="navigation_title" tabindex="0">
     <span role="button" class="navigation_title_text" tabindex="-1">
</span></h2>

Any ideas of how I can have a header work as a button but not use the role of a button?

Answer 1

What's wrong with this? Simplify everyone's lives by using a real <button>:

<h2 class="navigation_title">
    <button class="navigation_title_text">
        Foo
    </button>
</h2>

<script>
    $('.navigation_title_text').click(function () {
        ...
    });
</script>

Answer 2

I interpret the question so that you have assigned some scripted event to an heading element and you would therefore want to assign the button role to it, in addition to the default heading role. And this is meant to improve accessibility so that the element would be treated both as a heading, e.g. in “headings reading mode”, and as a button, e.g. so that assistive software could inform the user about a button that can be activated.

According to the WAI ARIA spec, the role attribute allows a space-separated list of role identifiers as its value, but only the first one is used. So setting role="heading button", while formally allowed (HTML5 validators have a bug that reports it as an error), is taken as identical with role="heading". This means that you can only one role for an element instance.

(Moreover, W3C HTML5 Rec defines h2 so that the only allowed roles are heading, tab, and presentation.)

You can wrap a span inside an h2 element as in the question, or an h2 inside a div, and declare the role of the span or div element to button. However, this makes one the elements a heading and another element a button, in WAI terms. The situation that you cannot assign a single element two roles reflects implementations: they cannot be expected to handle the same element in two ways.

From a more general accessibility point of view, considering also cognitive problems, this is reasonable: Even if you could make an element act both as a heading and as a button (as you technically can, up to a point, but not in WAI sense), users would have a cognitive challenge. When they encounter something that walks like a heading, talks like a heading, they won’t expect it to to a push button as well.

Given the abstractness of the description, it is impossible to suggest other approaches. But a solution might consist of simply having a button, with short text, after each heading (possibly on the same line).