Hacker News new | ask | show | jobs
by calvin 1326 days ago
You should still be able to use alt="" to indicate that it is "decorative" and not meaningful imagery for a visually-impaired user.
2 comments

Instead use the ARIA tag role="presentation": https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... to indicate when an element has no semantic meaning and is purely visual.
Which of these tags you should use and what they should contain is entirely context dependant.

That said, the use of empty alt tags is generally discouraged and not even allowed together with the ARIA presentation role in most cases.

This decision of theirs will steer developers towards non-compliant/asemantic code. It's really stupid.

https://html.spec.whatwg.org/multipage/images.html#alt

https://w3c.github.io/aria/#presentation

https://w3c.github.io/aria-practices/#presentation_role

That second link from W3C gives this very example:

https://w3c.github.io/aria/#example-13

"In the following code sample, the containing img and is appropriately labeled by the caption paragraph. In this example the img element can be marked as presentation because the role and the text alternatives are provided by the containing element."

<img src="example.png" role="presentation" alt="">

So empty alt tags are not discouraged.

Hence the generally discouraged - as in not recommended in the majority of situations but exceptions exist (such as the one you provided).
As I read that page, role="presentation" is intended to remove the natural semantics of a tag (e.g. have an <h2> be treated as a <div>), rather than to tell the user that there is nothing relevant to them in the given tag?
"presentation" is the default role for an <img> element when the "alt" attribute is an empty string.
That's like the difference between null and undefined.
If you have no alt attribute, then screen readers read the URL!

Empty strings are the way to go for decorative images

Alt is a required attribute of the <img> tag, so requiring it is just basic validation. C code won't compile if you omit the semicolon after statements, either.
What if I have an app that no screen reader will ever read?
Then write your own component that extends and removes the requirement. Until then, web tooling is better off explicitly acknowledging that accessibility is an explicit goal.