diff --git a/.changeset/light-ladybugs-destroy.md b/.changeset/light-ladybugs-destroy.md new file mode 100644 index 00000000..ee1d40a4 --- /dev/null +++ b/.changeset/light-ladybugs-destroy.md @@ -0,0 +1,8 @@ +--- +"dom-accessibility-api": patch +--- + +Maintain `img` role for `img` with missing `alt` attribute. + +Previously `` would be treated the same as ``. +`` is now treated as `role="img"` [as specified](https://w3c.github.io/html-aam/#el-img-empty-alt). diff --git a/sources/__tests__/getRole.js b/sources/__tests__/getRole.js index fbdfcce6..fedea011 100644 --- a/sources/__tests__/getRole.js +++ b/sources/__tests__/getRole.js @@ -89,6 +89,7 @@ const cases = [ ["html", null, createElementFactory("html", {})], ["iframe", null, createElementFactory("iframe", {})], ["img with alt=\"some text\"", "img", createElementFactory("img", {alt: "text"})], + ["img with missing alt", "img", createElementFactory("img", {})], ["img with alt=\"\"", null, createElementFactory("img", {alt: ""})], ["input type=button", "button", createElementFactory("input", {type: "button"})], ["input type=checkbox", "checkbox", createElementFactory("input", {type: "checkbox"})], diff --git a/sources/getRole.ts b/sources/getRole.ts index 1cdc2d4f..fc27ae2b 100644 --- a/sources/getRole.ts +++ b/sources/getRole.ts @@ -75,11 +75,13 @@ function getImplicitRole(element: Element): string | null { return "link"; } break; - case "img": - if ((element.getAttribute("alt") || "").length > 0) { + case "img": { + const alt: string | null = element.getAttribute("alt"); + if (alt === null || alt.length > 0) { return "img"; } break; + } case "input": { const { type } = element as HTMLInputElement; switch (type) {