Techniques for Marking Images as Decorative

Which techniques will mark an image as decorative, so that it is effectively invisible to screen reader technologies.

Informational Image

text before the image

HTML 5 orange shield logo

text after the image

Decorative Image Using Empty Alt Attribute

text before the image

text after the image

Decorative Image With No Alt Attribute and Role Presentation

text before the image

text after the image

Decorative Image With No Alt Attribute and Role None

text before the image

text after the image

Decorative Image With No Alt Attribute (Bad Markup)

text before the image

text after the image

Effectively Decorative Image Due to Parent Being ARIA Hidden

text before the image

text after the image

Three Images within a Shadow Root / as Web Component

text before the images

text after the images