{"record":{"id":"ceab92015a6b569c","repo":"oxc-project/oxc","slug":"aria-used-where-native-html-could-suffice","errorCode":null,"errorMessage":"ARIA used where native HTML could suffice.","messagePattern":"ARIA used where native HTML could suffice\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs","lineNumber":48,"sourceCode":"            \"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\nfn aria_labelled_by_value(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing value for `aria-labelledby` attribute.\")\n        .with_help(\"Give `aria-labelledby` an ID to a label element. Prefer the `alt` attribute over `aria-labelledby` for images.\")\n        .with_label(span)\n}\n\nfn prefer_alt(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"ARIA used where native HTML could suffice.\")\n        .with_help(\"Prefer alt=\\\"\\\" over presentational role. Native HTML attributes should be preferred for accessibility before resorting to ARIA attributes.\")\n        .with_label(span)\n}\n\nfn object(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing alternative text.\")\n        .with_help(\"Embedded <object> elements must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.\")\n        .with_label(span)\n}\n\nfn area(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing alternative text.\")\n        .with_help(\"Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.\")\n        .with_label(span)\n}\n\nfn input_type_image(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Missing alternative text.\")","sourceCodeStart":30,"sourceCodeEnd":66,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/jsx_a11y/alt_text.rs#L30-L66","documentation":"Diagnostic from oxlint's jsx-a11y alt-text rule, produced by its `prefer_alt` helper. When an element that requires a text alternative (img, object, area, input[type=image]) is marked decorative with role=\"presentation\" or role=\"none\" instead of using the native attribute, the rule says ARIA was used where native HTML could suffice. The first rule of ARIA is to prefer native semantics, and `alt=\"\"` is the standard way to hide decorative images from screen readers.","triggerScenarios":"An img/area/object/image-input JSXOpeningElement that has a role attribute resolving to a presentation role and no alt, per the `has_jsx_prop_ignore_case(node, \"role\").is_some_and(is_presentation_role)` check that emits `prefer_alt(node.span)` — e.g. `<img src=\"divider.png\" role=\"presentation\" />`. Adding `alt=\"\"` (even `alt={undefined}` is treated as missing) silences it.","commonSituations":"Decorative dividers/spacers/background images given role=\"presentation\" copied from older a11y guides; teams switching from aria-hidden to role=\"none\"; designers' placeholder markup.","solutions":["For decorative images use the empty native attribute: `<img src=\"...\" alt=\"\" />`.","If the image conveys information, give it meaningful alt text instead of a presentation role.","Remove the redundant role attribute once alt is present."],"exampleFix":"// before\n<img src=\"divider.png\" role=\"presentation\" />\n\n// after\n<img src=\"divider.png\" alt=\"\" />","handlingStrategy":"validation","validationCode":"oxlint --jsx-a11y-plugin src/ # alt-text rule checks img/object/area/input[image]","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use alt=\"\" for decorative images; never role=\"presentation\" as an alt substitute.","Give meaningful alt to informative images.","Keep the jsx-a11y plugin enabled in CI so a11y regressions block merges."],"tags":["jsx-a11y","accessibility","alt-text","oxlint","lint","react"],"backgroundTag":"missing-image-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"}