This repository has been archived by the owner on Jul 15, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 198
react a11y img has alt Rule
t-ligu edited this page Sep 20, 2016
·
1 revision
Enforce that an img
element contains the alt
attribute. For decorative images, using empty alt attribute and role="presentation". All images must have alt
text to convey their purpose and meaning to screen reader users.
Besides, the alt
attribute specifies an alternate text for an image, if the image cannot be displayed.
This rule takes one optional argument of an array of strings.
These strings determine which JSX tags should be checked for the alt
attribute.
The img
tag will be checked no matter the passed strings.
This is a good use case when you have a wrapper component that simply renders an img
element (like in React):
// Image.tsx
class Image extends React.Component<IImageProps, {}> {
public render(): JSX.Element {
return (
<img alt={ this.props.alt } src={ this.props.src } />
);
}
}
// Usage.tsx
public render(): JSX.Element {
return (
<Image { ...this.props } alt='Logo' src='logo.jpg' />
);
}
To make this plugin check your Image
element, specify the following configuration in your tslint.json
file:
{
"rules": {
"a11y-img-has-alt": [true, ["Image"]]
}
}
// Without alt attribute.
<img src='srcUrl' />
// Empty alt attribute without presentation role.
<img alt />
<img alt='' />
<img alt={} />
<img alt={ '' } />
// Empty alt attribute with role='presentation'.
<img alt='' role='presentation' />
// <img> element has non-empty alt attribute.
<img alt='altText' />
<img alt={ 'altText' } />
<img alt={ altText } />
// <img> element has spread attributes which might contain alt attribute.
<img { this.props } />