3

(I already checked this question and the attributes linked do not work for me.)

I have a h1 tag containing a dropdown which activates onclick. The W3C Validator is complaining here:

  <h1 class='dropdown-toggle' id='mylist' 
         data-toggle='dropdown'
         aria-haspopup='true'
         aria-expanded='true' 
         role='button'>

Apparently a role='button' can't be assigned to h1. Now the question is: which role can I assign to a h1? The W3C's long list of role attributes does not really help finding a solution.

Test page

Community
  • 1
  • 1
Fabbio
  • 343
  • 2
  • 16

2 Answers2

3

How to find out which WAI-ARIA roles an HTML5 element can have:

  1. Go the HTML5 specification: http://www.w3.org/TR/2014/REC-html5-20141028/

  2. Check the ToC’s section 4 for the link to the element’s definition: The h1, h2, h3, h4, h5, and h6 elements

  3. Check this element’s "Allowed ARIA role attribute values":

    heading role (default - do not set), tab or presentation.

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
2

Since HTML5 was published, in Oct 2014, the rules for use of ARIA in HTML have been moved into a separate specification (a module of the HTML spec). The rules are still summarised in each element definition in the HTML spec. In the case of h1-h6 elements the rules are detailed (along with those of all other HTML elements) in the conformance table in ARIA in HTML.

Notes on using ARIA in HTML may also be helpful in understanding the why and how of ARIA use in HTML.

Steve Faulkner
  • 2,572
  • 15
  • 17