{"record":{"id":"66329294e87a7b0e","repo":"oxc-project/oxc","slug":"missing-alt-attribute","errorCode":null,"errorMessage":"Missing `alt` attribute.","messagePattern":"Missing `alt` attribute\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs","lineNumber":22,"sourceCode":"};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_macros::declare_oxc_lint;\nuse oxc_span::Span;\nuse oxc_str::CompactStr;\nuse schemars::JsonSchema;\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::Rule,\n    utils::{\n        get_element_type, get_prop_value, get_string_literal_prop_value, has_jsx_prop_ignore_case,\n        object_has_accessible_child,\n    },\n};\n\nfn missing_alt_prop(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing `alt` attribute.\")\n        .with_help(\"Must have `alt` prop, either with meaningful text, or an empty string for decorative images.\")\n        .with_label(span)\n}\n\nfn missing_alt_value(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Invalid `alt` value.\")\n        .with_help(\n            \"Must have meaningful value for `alt` prop. Use alt=\\\"\\\" for presentational images.\",\n        )\n        .with_label(span)\n}\n\nfn aria_label_value(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing value for `aria-label` attribute.\")\n        .with_help(\"Give `aria-label` a meaningful value. Prever the `alt` attribute over `aria-label` for images.\")\n        .with_label(span)\n}\n","sourceCodeStart":4,"sourceCodeEnd":40,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs#L4-L40","documentation":"This is the oxlint `jsx-a11y/alt-text` diagnostic for `<img>` elements without alternative text. It fires when an `img` (or a component listed in the rule's `img` config) has no `alt` attribute at all, and no usable `aria-label`/`aria-labelledby` fallback. Alt text is what screen readers announce for images, so a missing `alt` makes the element inaccessible; decorative images should use `alt=\"\"`.","triggerScenarios":"`run` sees a JSX opening element resolving to `img` (default or via `elements`/`img` config) where `has_jsx_prop_ignore_case(node, \"alt\")` finds nothing, the element has no non-empty `aria-label`, and no non-empty `aria-labelledby`. Spread-props elements are typically skipped since the attribute cannot be proven absent.","commonSituations":"Component libraries wrapping `<img>` in custom `<Picture>`/`<Avatar>` components that forget to forward `alt`; decorative divider images; enabling the `jsx_a11y` plugin on a legacy codebase for the first time.","solutions":["Add meaningful alt text: `<img src=\"chart.png\" alt=\"Q3 revenue by region\" />`.","For decorative images use an empty string: `<img src=\"spacer.gif\" alt=\"\" />`.","If the attribute genuinely cannot be statically seen (spread props), move the spread so `alt` is explicit, or pass `alt` through your wrapper component.","Register wrappers in the rule config: `\"jsx-a11y/alt-text\": [\"error\", { \"img\": [\"Picture\"] }]`."],"exampleFix":"// before\n<img src=\"/logo.svg\" />\n<Avatar user={u} />\n\n// after\n<img src=\"/logo.svg\" alt=\"Acme logo\" />\n<Avatar user={u} alt={u.name} />","handlingStrategy":"validation","validationCode":"// crude guard for wrappers: make alt required in props and forward it\n// Avatar.tsx\ntype AvatarProps = { user: User; alt?: string };\nexport function Avatar({ user, alt }: AvatarProps) {\n  return <img src={user.avatarUrl} alt={alt ?? user.name} />; // never renders alt-less\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Make image wrapper components take a required `alt` prop (or derive it) so an alt-less render cannot compile.","Add eslint-plugin/oxlint jsx-a11y to CI so missing alt fails the build.","Reserve `alt=\"\"` consciously for decorative images.","For dynamic images, default `alt` to a human-readable fallback instead of omitting it."],"tags":["jsx-a11y","accessibility","alt-text","react","lint","oxlint"],"backgroundTag":"jsx-a11y-alt-text","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}