title: <a role="button"> instead of <button>
body: <p>I use the program NVDA to test my website and make a website accessible to all people. Recently I saw on MDN Web docs an attribute allowing me to use <code>a</code> instead of <code>button</code>. It is <code>role="button"</code>.</p>
  
  <p>MDN and Bootstrap 4 Doc says:</p>
  
  <blockquote>
    <p>these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.</p>
  </blockquote>
  
  <pre><code>&lt;a class="btn btn-primary" href="#"&gt; Anchor without ROLE &lt;/a&gt;
  &lt;a class="btn btn-primary" href="#" role="button"&gt; Anchor with ROLE &lt;/a&gt;
  &lt;button class="btn btn-primary" type="button"&gt; Just a Button &lt;/button&gt;
  </code></pre>
  
  <p>I tried to use NVDA and I press <kbd>B</kbd> (a shortcut to find buttons in website), and the only button that it found is the button with <code>&lt;button&gt;</code> tag. What <code>role="button"</code> is being used? What is the correct way?</p>
  
  <p>Ref: <a href="https://getbootstrap.com/docs/4.0/components/buttons/#button-tags" rel="noreferrer">Bootstrap V4</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" rel="noreferrer">MDN Docs</a></p>