Search code examples
htmlaccessibilitysemantic-markupwai-aria

Is it semantically correct to use role=button on a page section (hash) link?


I have links that point to sections in the page. To improve accessibility, I have added the attribute role="button" to these as my understanding was that these links are within the page and simply go to a section. But I am not sure if doing this is appropriate.

<ul>
  <li><a role="button" href='#section1'>Go to section 1</a></li>
  <li><a role="button" href='#section2'>Go to section 2</a></li>
</ul>

<div style="height:15rem"></div>

<h2 id='section1'>Section 1</h2>

<div style="height:15rem"></div>

<h2 id='section2'>Section 2</h2>


Solution

  • No.

    You have links, which are functioning as links. That they are linking to another part of the same page doesn't make them buttons.

    See WAI-ARIA Authoring Practices 1.1

    A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

    You are doing none of those things.

    It also says:

    The types of actions performed by buttons are distinctly different from the function of a link (see link pattern). It is important that both the appearance and role of a widget match the function it provides. Nevertheless, elements occasionally have the visual style of a link but perform the action of a button. In such cases, giving the element role button helps assistive technology users understand the function of the element. However, a better solution is to adjust the visual design so it matches the function and ARIA role.

    … which highlights that links are a different thing.