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 role="table">
<div role="rowgroup">
<div role="row">
<div>
<label>
<input type="checkbox" name="select-all-rows" aria-label="select-all-rows">
</label>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Player Name</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Number</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Position</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Height</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Weight</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Age</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>Experience</div>
<span>▲</span>
</div>
</div>
<div draggable="true">
<div role="columnheader" tabindex="0">
<div>College</div>
<span>▲</span>
</div>
</div>
</div>
</div>
<div role="rowgroup">
<div id="row-Hakeem-Adeniji" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Hakeem-Adeniji" aria-label="select-row-Hakeem-Adeniji">
</label>
</div>
<div id="cell-1-Hakeem-Adeniji" role="gridcell">
<div>Adeniji, Hakeem</div>
</div>
<div id="cell-2-Hakeem-Adeniji" role="gridcell">
<div>77</div>
</div>
<div id="cell-3-Hakeem-Adeniji" role="gridcell">
<div>G</div>
</div>
<div id="cell-4-Hakeem-Adeniji" role="gridcell">
<div>6' 4"</div>
</div>
<div id="cell-5-Hakeem-Adeniji" role="gridcell">
<div>302</div>
</div>
<div id="cell-6-Hakeem-Adeniji" role="gridcell">
<div>24</div>
</div>
<div id="cell-7-Hakeem-Adeniji" role="gridcell">
<div>2</div>
</div>
<div id="cell-8-Hakeem-Adeniji" role="gridcell">
<div>Kansas</div>
</div>
</div>
<div id="row-Brandon-Allen" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Brandon-Allen" aria-label="select-row-Brandon-Allen">
</label>
</div>
<div id="cell-1-Brandon-Allen" role="gridcell">
<div>Allen, Brandon</div>
</div>
<div id="cell-2-Brandon-Allen" role="gridcell">
<div>8</div>
</div>
<div id="cell-3-Brandon-Allen" role="gridcell">
<div>QB</div>
</div>
<div id="cell-4-Brandon-Allen" role="gridcell">
<div>6' 2"</div>
</div>
<div id="cell-5-Brandon-Allen" role="gridcell">
<div>209</div>
</div>
<div id="cell-6-Brandon-Allen" role="gridcell">
<div>29</div>
</div>
<div id="cell-7-Brandon-Allen" role="gridcell">
<div>5</div>
</div>
<div id="cell-8-Brandon-Allen" role="gridcell">
<div>Arkansas</div>
</div>
</div>
<div id="row-Ricardo-Allen" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Ricardo-Allen" aria-label="select-row-Ricardo-Allen">
</label>
</div>
<div id="cell-1-Ricardo-Allen" role="gridcell">
<div>Allen, Ricardo</div>
</div>
<div id="cell-2-Ricardo-Allen" role="gridcell">
<div>37</div>
</div>
<div id="cell-3-Ricardo-Allen" role="gridcell">
<div>S</div>
</div>
<div id="cell-4-Ricardo-Allen" role="gridcell">
<div>5' 9"</div>
</div>
<div id="cell-5-Ricardo-Allen" role="gridcell">
<div>186</div>
</div>
<div id="cell-6-Ricardo-Allen" role="gridcell">
<div>30</div>
</div>
<div id="cell-7-Ricardo-Allen" role="gridcell">
<div>7</div>
</div>
<div id="cell-8-Ricardo-Allen" role="gridcell">
<div>Purdue</div>
</div>
</div>
<div id="row-Eli-Apple" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Eli-Apple" aria-label="select-row-Eli-Apple">
</label>
</div>
<div id="cell-1-Eli-Apple" role="gridcell">
<div>Apple, Eli</div>
</div>
<div id="cell-2-Eli-Apple" role="gridcell">
<div>20</div>
</div>
<div id="cell-3-Eli-Apple" role="gridcell">
<div>CB</div>
</div>
<div id="cell-4-Eli-Apple" role="gridcell">
<div>6' 1"</div>
</div>
<div id="cell-5-Eli-Apple" role="gridcell">
<div>199</div>
</div>
<div id="cell-6-Eli-Apple" role="gridcell">
<div>26</div>
</div>
<div id="cell-7-Eli-Apple" role="gridcell">
<div>6</div>
</div>
<div id="cell-8-Eli-Apple" role="gridcell">
<div>Ohio State</div>
</div>
</div>
<div id="row-Chidobe-Awuzie" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Chidobe-Awuzie" aria-label="select-row-Chidobe-Awuzie">
</label>
</div>
<div id="cell-1-Chidobe-Awuzie" role="gridcell">
<div>Awuzie, Chidobe</div>
</div>
<div id="cell-2-Chidobe-Awuzie" role="gridcell">
<div>22</div>
</div>
<div id="cell-3-Chidobe-Awuzie" role="gridcell">
<div>CB</div>
</div>
<div id="cell-4-Chidobe-Awuzie" role="gridcell">
<div>6' 0"</div>
</div>
<div id="cell-5-Chidobe-Awuzie" role="gridcell">
<div>202</div>
</div>
<div id="cell-6-Chidobe-Awuzie" role="gridcell">
<div>26</div>
</div>
<div id="cell-7-Chidobe-Awuzie" role="gridcell">
<div>5</div>
</div>
<div id="cell-8-Chidobe-Awuzie" role="gridcell">
<div>Colorado</div>
</div>
</div>
<div id="row-Markus-Bailey" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Markus-Bailey" aria-label="select-row-Markus-Bailey">
</label>
</div>
<div id="cell-1-Markus-Bailey" role="gridcell">
<div>Bailey, Markus</div>
</div>
<div id="cell-2-Markus-Bailey" role="gridcell">
<div>51</div>
</div>
<div id="cell-3-Markus-Bailey" role="gridcell">
<div>LB</div>
</div>
<div id="cell-4-Markus-Bailey" role="gridcell">
<div>6' 0"</div>
</div>
<div id="cell-5-Markus-Bailey" role="gridcell">
<div>235</div>
</div>
<div id="cell-6-Markus-Bailey" role="gridcell">
<div>24</div>
</div>
<div id="cell-7-Markus-Bailey" role="gridcell">
<div>2</div>
</div>
<div id="cell-8-Markus-Bailey" role="gridcell">
<div>Purdue</div>
</div>
</div>
<div id="row-Jessie-Bates" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Jessie-Bates" aria-label="select-row-Jessie-Bates">
</label>
</div>
<div id="cell-1-Jessie-Bates" role="gridcell">
<div>Bates III, Jessie</div>
</div>
<div id="cell-2-Jessie-Bates" role="gridcell">
<div>30</div>
</div>
<div id="cell-3-Jessie-Bates" role="gridcell">
<div>S</div>
</div>
<div id="cell-4-Jessie-Bates" role="gridcell">
<div>6' 1"</div>
</div>
<div id="cell-5-Jessie-Bates" role="gridcell">
<div>200</div>
</div>
<div id="cell-6-Jessie-Bates" role="gridcell">
<div>24</div>
</div>
<div id="cell-7-Jessie-Bates" role="gridcell">
<div>4</div>
</div>
<div id="cell-8-Jessie-Bates" role="gridcell">
<div>Wake Forest</div>
</div>
</div>
<div id="row-Vonn-Bell" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Vonn-Bell" aria-label="select-row-Vonn-Bell">
</label>
</div>
<div id="cell-1-Vonn-Bell" role="gridcell">
<div>Bell, Vonn</div>
</div>
<div id="cell-2-Vonn-Bell" role="gridcell">
<div>24</div>
</div>
<div id="cell-3-Vonn-Bell" role="gridcell">
<div>S</div>
</div>
<div id="cell-4-Vonn-Bell" role="gridcell">
<div>5' 11"</div>
</div>
<div id="cell-5-Vonn-Bell" role="gridcell">
<div>205</div>
</div>
<div id="cell-6-Vonn-Bell" role="gridcell">
<div>27</div>
</div>
<div id="cell-7-Vonn-Bell" role="gridcell">
<div>6</div>
</div>
<div id="cell-8-Vonn-Bell" role="gridcell">
<div>Ohio State</div>
</div>
</div>
<div id="row-Tyler-Boyd" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Tyler-Boyd" aria-label="select-row-Tyler-Boyd">
</label>
</div>
<div id="cell-1-Tyler-Boyd" role="gridcell">
<div>Boyd, Tyler</div>
</div>
<div id="cell-2-Tyler-Boyd" role="gridcell">
<div>83</div>
</div>
<div id="cell-3-Tyler-Boyd" role="gridcell">
<div>WR</div>
</div>
<div id="cell-4-Tyler-Boyd" role="gridcell">
<div>6' 2"</div>
</div>
<div id="cell-5-Tyler-Boyd" role="gridcell">
<div>203</div>
</div>
<div id="cell-6-Tyler-Boyd" role="gridcell">
<div>27</div>
</div>
<div id="cell-7-Tyler-Boyd" role="gridcell">
<div>6</div>
</div>
<div id="cell-8-Tyler-Boyd" role="gridcell">
<div>Pittsburgh</div>
</div>
</div>
<div id="row-Joe-Burrow" role="row">
<div>
<label>
<input type="checkbox" name="select-row-Joe-Burrow" aria-label="select-row-Joe-Burrow">
</label>
</div>
<div id="cell-1-Joe-Burrow" role="gridcell">
<div>Burrow, Joe</div>
</div>
<div id="cell-2-Joe-Burrow" role="gridcell">
<div>9</div>
</div>
<div id="cell-3-Joe-Burrow" role="gridcell">
<div>QB</div>
</div>
<div id="cell-4-Joe-Burrow" role="gridcell">
<div>6' 4"</div>
</div>
<div id="cell-5-Joe-Burrow" role="gridcell">
<div>221</div>
</div>
<div id="cell-6-Joe-Burrow" role="gridcell">
<div>25</div>
</div>
<div id="cell-7-Joe-Burrow" role="gridcell">
<div>2</div>
</div>
<div id="cell-8-Joe-Burrow" role="gridcell">
<div>LSU</div>
</div>
</div>
</div>
</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.

Role Reverser

Some music news ...

Also available here: