h1元素的有效角色属性值

Question

(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

Answer 1

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 .

Answer 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.