Skip to main content

avoid-missing-image-alt

v1.7.0
warning
recommended
configurable
has auto-fix
pro+

Warns when an Image widget does not have a semanticLabel.

Providing a label is important so that accessibility tools can read the image correctly, and even if you don't plan to fully support accessibility, setting the label usually requires no extra effort and can be done when creating the widget.

⚙️ Config​

Set allow-empty (default is true) to configure whether an empty string value is allowed to be used as a label (example).

Set ignore-svg (default is true) to configure whether the rule should ignore SvgPicture (example).

analysis_options.yaml
dart_code_metrics:
  rules:
    - avoid-missing-image-alt:
        allow-empty: true
        ignore-svg: true

Example​

❌ Bad:

void main() {
  const Image(key: 'hello'); // LINT: Avoid images without a semantic label.
  Image.asset(key: 'hello'); // LINT: Avoid images without a semantic label.

  const FadeInImage(key: 'hello'); // LINT: Avoid images without a semantic label.
  FadeInImage.assetNetwork(key: 'hello'); // LINT: Avoid images without a semantic label.
}

✅ Good:

void main() {
  const Image(key: 'hello', semanticLabel: 'some');
  Image.asset(key: 'hello', semanticLabel: 'thing');

  const FadeInImage(key: 'hello', imageSemanticLabel: 'some');
  FadeInImage.assetNetwork(key: 'hello', imageSemanticLabel: 'thing');
}

Example with "allow-empty"​

Config
analysis_options.yaml
dart_code_metrics:
  rules:
    - avoid-missing-image-alt:
        allow-empty: true

✅ Good:

void main() {
  const Image(key: 'hello', semanticLabel: ''); // Correct, empty label is allowed
}

Example with "ignore-svg"​

Config
analysis_options.yaml
dart_code_metrics:
  rules:
    - avoid-missing-image-alt:
        ignore-svg: false

❌ Bad:

void main() {
  SvgPicture.asset('asset name'); // LINT: Avoid images without a semantic label.
}

✅ Good:

void main() {
  SvgPicture.asset('asset name', semanticsLabel: 'some');
}
Last updated on