useIframeTitle (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useIframeTitle
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/iframe-has-title
- Same as @html-eslint/require-frame-title

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useIframeTitle": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a title on every <iframe>.

Screen readers use the title to identify the embedded content before a user enters the frame. A static HTML title must be non-empty and should describe the frame’s purpose. Vue bindings are accepted without evaluating the value they produce at runtime.

Examples

Invalid

1
<iframe></iframe>

code-block.html: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.

1
<iframe title=""></iframe>

code-block.html:1:1 lint/a11y/useIframeTitle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

Valid

1
<iframe title="title"></iframe>