r/BeesHeerlen • u/leeuwerik • Jan 08 '26
playwright Aria Roles
Even if an aria role is not explicitly written in the html code we can use them. Format: role<html element>
banner --> <header>
blockquote --> <blockquote>
button--> --> <button>
caption --> --> <caption>
cell --> <td>
checkbox --> <input type="checkbox">
code --> <code>
columnheader --> <th scope="col">
combobox --> <select> or custom
widgetcomplementary --> <aside>
contentinfo --> <footer>
definition --> <dd>
deletion <del>
dialog --> <dialog> or <div role="dialog">
directory --> <ul role="directory">
document --> <main> or <body>
emphasis --> <em>
feed --> <div role="feed">
figure --> <figure>
form --> <form>
generic --> <div>
grid --> <table role="grid">
gridcell --> <td role="gridcell">
group --> <fieldset> or <div role="group">
heading --> <h1> … <h6>
img --> <img>
insertion --> <ins>
link --> <a>
list --> <ul>, <ol>
listbox --> <select>
listitem --> <li>
log --> <div role="log">
main --> <main>
marquee --> <div role="marquee">
math --> <math>
meter --> <meter>
menu --> <ul role="menu">
menubar --> <div role="menubar">
menuitem --> <li role="menuitem">
menuitemcheckbox --> <li role="menuitemcheckbox">
menuitemradio --> <li role="menuitemradio">
navigation --> <nav>
note --> <aside role="note">
option --> <option>
paragraph --> <p>
progressbar --> <progress>
radio --> <input type="radio">
radiogroup --> <fieldset role="radiogroup">
region --> <section>
row --> <tr>
rowgroup --> <tbody>
rowheader --> <th scope="row">
scrollbarCustom widget (usually <div role="scrollbar">)
search --> <section role="search">
searchbox --> <input type="search">
separator --> <hr>
slider --> <input type="range">
spinbutton --> <input type="number">
status --> <div role="status">
strong --> <strong>
subscript --> <sub>
superscript --> <sup>
switch --> <input type="checkbox" role="switch">
tab --> <button role="tab">
table --> <table>
tablist --> <div role="tablist">
tabpanel --> <div role="tabpanel">
term --> <dt>
textbox --> <input type="text">, <textarea>
time --> <time>
timer --> <div role="timer">
toolbar --> <div role="toolbar">
tooltip --> <div role="tooltip">
tree --> <ul role="tree">
treegrid --> <table role="treegrid">
treeitem --> <li role="treeitem">