Skip to content
Biome
Docs Enterprise Playground
Blog

useIframeTitle

Diagnostic Category: lint/a11y/useIframeTitle

Since: v1.0.0

Sources:

Description

Section titled Description

Enforces the usage of the attribute title for the element iframe.

Examples

Section titled Examples

Invalid

Section titled Invalid
 <iframe />
code-block.jsx:1:2 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │  <iframe />
      │  ^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe></iframe>
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe></iframe>
      │ ^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title="" />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title="" />
      │ ^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title={""} />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title={""} />
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title={undefined} />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title={undefined} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title={false} />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title={false} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title={true} />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title={true} />
      │ ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.
  
<iframe title={42} />
code-block.jsx:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a title attribute when using iframe elements.
  
  > 1 │ <iframe title={42} />
      │ ^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers rely on the title set on an iframe to describe the content being displayed.

Valid

Section titled Valid
<>
  <iframe title="This is a unique title" />
  <iframe title={uniqueTitle} />
  <iframe {...props} />
</>

Accessibility guidelines

Section titled Accessibility guidelines

How to configure

Section titled How to configure
biome.json
{
  "linter": {
    "rules": {
      "a11y": {
        "useIframeTitle": "error"
      }
    }
  }
}
Section titled Related links