Flow Elements within Buttons and Links

According to specification, there should not be flow content inside of buttons and links, only phrasing content.

Even though using a span and setting role=heading does not flag as an error in the HTML5 validator, it is semantically confusing. For example, what is a heading link or a heading button? Is it a link? a button? a heading? Screen readers will report more than one role, which could be confusing.

Button with an HTML Heading

Button with an ARIA Heading Using Span

Button with an ARIA Heading Using Div

Link with an HTML Heading

I am a heading in a link

Link with an ARIA Heading

I am a heading in a link