Role Reverser

What's all this, then?

As noted in Steve Faulkner's article, HTML Developers: Please consider–in the year 2021,if you find yourself using the role attribute to indicate to a browser what a thing on the page is, you're probably better off using something else. This tool takes your role-heavy markup and transforms offending HTML elements into fine, upstanding semantic markup.

Examples of markup transformed using the Role Reverser tool

Source HTML:

<div><span role="button"><code>DIV</code> with <code>role="button"</code></span></div>
<div><span role="link"><code>DIV</code> with <code>role="link"</code></span></div>
<div role="heading" aria-level="1">Fake heading set to level 1</div>
<div role="heading" aria-level="2">Fake heading set to level 2</div>
<div role="heading" aria-level="3">Fake heading set to level 3</div>
<div role="heading" aria-level="4">Fake heading set to level 4</div>
<div role="heading" aria-level="5">Fake heading set to level 5</div>
<div role="heading" aria-level="6">Fake heading set to level 6</div>
<div role="list">
<div role="listitem"><code>DIV</code> list item with <code>role="listitem"</code></div>
</div>
<div role="listbox">
<div role="option"><code>DIV</code> option with <code>role="option"</code></div>
</div>
<div><span role="checkbox"></span><code>SPAN</code> with <code>role="checkbox"</code></div>
<div><span role="radio"></span><code>SPAN</code> with <code>role="radio"</code></div>
<div><span role="textbox"></span><code>SPAN</code> with <code>role="textbox"</code></div>
<div role="main"><code>DIV</code> with <code>role="main"</code></div>
<div role="navigation"><code>DIV</code> with <code>role="navigation"</code></div>
<div role="img"><code>DIV</code> with <code>role="img"</code></div>
<div role="image"><code>DIV</code> with <code>role="image"</code></div>
<div role="table"><code>DIV</code> with <code>role="table"</code></table>
<hr>
</div>

Proper native HTML version:

You can also use this bookmarklet version to run against any web page: Role Reverser. Just drag this link to your favourites/bookmarks and run it when you want to.