In a document, if your image is marked as decorative, can it be set to wrap text around it and still be considered accessible? It seems as though if a screen reader is going to ignore the image anyway, it shouldn't matter whether it's inline or not.
1 Answer
A decorative image that is ignored by assistive technology is not interfering with the accessibility of the surrounding content. So the answer is yes, you can place an ignored image (but it counts for any ignored element) inline without breaking the flow of the text. But I have a few notes:
Be sure it is really decorative and not informative. Because anything a little illustrative can be informative. Don't assume too easily an image is not relevant for someone who has problems seeing it. Here is a good resource about relevance of images and relevant alt-texts to apply: https://webaim.org/techniques/alttext/
Be sure the image serves no other function than being decorative. If used as link, button or other interactive element, the image should be accessible. See also the link above.
Be sure the image is really ignored. Add an empty
alt=""attribute to the image (see also the link above). An SVG with a title should be accessible, or otherwise remove that title if it isn't relevant anyway. Any image that isn't ignored will at least be mentioned as just "image", confusing and unnecessary.
A side note: After testing in Safari and Chrome using VoiceOver I noticed they give different results. Chrome is correctly ignoring the image, but Safari is not. Before my edit I assumed that aria-hidden=true on the image is also valid to overcome problems with Safari but that only resulted in broken-up text. Therefore I recommend to follow best practices, like using the empty alt-text as the page from WebAIM advices.
