How about adding a left padding to the H tag and using the image as a background in that space? It would help as it means you’re not dirtying your H’s with image ALTs and can be easily restyled for a responsive design
No sir. Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.
>Making the image a background is not the best option. Let him just add the image naturally with image tag in html doc. This is just issue of floating. There is no point bringing the image in through css.
If the image is **styling** (like a list bullet) and has **no relation** to the heading then it shouldn’t be in the html.
If the image was related to the contents of the heading (or even a paragraph following the h4) then, yes, by all means have it in the HTML and float it or whatever.
Otherwise. it adds nothing and should be kept out of the document.
Even in this case, where you could vaguely relate a flower image to the “Herbal Medicine” content you have to ask yourself “What would this add for a screen reader?”.
Your way it would read something like “Flower Image – Herbal Medicine”…my way it would read just “Herbal Medicine”.
That’s a simplistic way of stating this case but I hope you see where i am coming from.
As you can see there are many toggles on it. The flower next to the title is a placeholder image for now. Inside every toggle is an image. My client wants that image to appear next to the heading to make the page appear more aesthetically interesting.
So it seems the solution is to have the image in the HTML as suggested by @CodeGraphics ?