Skip to content
Biome
Docs Blog Playground

useSemanticElements (since v1.8.0)

Diagnostic Category: lint/nursery/useSemanticElements

Sources:

It detects the use of role attributes in JSX elements and suggests using semantic elements instead.

The role attribute is used to define the purpose of an element, but it should be used as a last resort. Using semantic elements like <button>, <input>, <textarea>, <a>, <img>, <table>, <article>, <section>, <nav>, <aside>, <header>, <footer>, <main>, <figure>, <figcaption>, <details>, <summary>, <dialog>, <menu>, <menuitem>, <fieldset>, <legend>, <caption>, <colgroup>, <col>, <optgroup>, <option>, <select>, <datalist>, <output>, <progress>, <meter>, <time>, <audio>, <video>, <track>, <source>, <embed>, <object>, <param>, <iframe>, <canvas>, <map>, <area>, <svg>, <math> are more accessible and provide better semantics.

Examples

Section titled Examples

Invalid

Section titled Invalid
<div role="checkbox">
code-block.jsx:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected `<` but instead the file ends
  
    1 │ <div role="checkbox">
  > 2 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <div role="checkbox">
  > 2 │ 
      │ 
  

<div role="img">
code-block.jsx:2:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ expected `<` but instead the file ends
  
    1 │ <div role="img">
  > 2 │ 
      │ 
  
  ℹ the file ends here
  
    1 │ <div role="img">
  > 2 │ 
      │

Valid

Section titled Valid
<>
 <div></div>
 <header></header>
 <img alt="" src="image.jpg" />
</>
Section titled Related links