- Apr 2021
It should be defined inline. If you are using the img tag, that image should have semantic value to the content, which is why the alt attribute is required for validation. If the image is to be part of the layout or template, you should use a tag other than the img tag and assign the image as a CSS background to the element. In this case, the image has no semantic meaning and therefore doesn't require the alt attribute. I'm fairly certain that most screen readers would not even know that a CSS image exists.
I believed this when I first read it, but changed my mind when I read this good rebuttal: https://hyp.is/f1ndKJ5eEeu_IBtubiLybA/stackoverflow.com/questions/640190/image-width-height-as-an-attribute-or-in-css
- Oct 2015
why not annotate, say, the Eiffel Tower itself
As long as it has some URI, it can be annotated. Any object in the world can be described through the Semantic Web. Especially with Linked Open Data.
- Sep 2015
Maps make a great case for SVG. There are some neat libraries and tools to play with SVG maps but, more importantly, maps make it easy to understand that an image can be semantic.
A couple of weeks before Shepazu posted this, was playing with SVG maps of contemporary Africa’s political boundaries. (Especially those used on Wikipedia; including some which separate South Sudan.) Been teaching African Studies (on occasion) for years, and maps of the continent tend to become important quite quickly.
Those SVG maps with which I started playing were pretty neat in several respects. The fact that they were vector drawings instead of bitmaps meant that they easily be resized without causing visual artifacts. More importantly, though, each country was drawn as a named outline, so it was possible to play with them as separate objects.
One thing I was trying to do is create an animation which would show where each country fits in a region of the continent, using this United Nations geoscheme. Doing so, eventually noticed that Sudan and South Sudan had been classified as part of different regions, which is an interesting tidbit which could lead to useful classroom discussions.
Haven’t retraced all the steps but, at some point, I’ve used a Public Domain map of Africa from Wikimedia Commons (itself based on another Public Domain map), and ended up creating a simple animated version using Tumult’s Hype commercial HTML5 editor.
It’s flawed in many ways, but for someone with almost no background in this things, it’s a significant accomplishment.
(Surely, the same could be done through SVG itself. Haven’t been able to learn how to do so.)
Playing with those maps taught me quite a few things. For instance, the benefits of a well-tagged image. And some rudimentary notions of CSS-based animations. Or the limitations linked to selecting rectangular sections of an image (with a large overlap between Northern and Western Africa, for instance).
The experience also gave me all sorts of ideas. Such as annotating parts of a well-structured image. Or uses for Open Street Maps. Or ways to embed interactive content (including quizzes) in Open Textbooks.
The key point, perhaps, and what led me to Schepers’s work (including this deeply insightful SVG-based presentation and interactive infographic about annotations) is that Open Standards can open up fascinating opportunities for learning.
So nice to be working at a standards-happy learning technology non-profit!