useIframeTitle
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/useIframeTitle - This rule is recommended, which means is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
- Same as
jsx-a11y/iframe-has-title
- Same as
Description
Section titled DescriptionEnforces the usage of the attribute title for the element iframe.
Examples
Section titled ExamplesInvalid
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 guidelinesHow to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "useIframeTitle": "error" } } }}