This is an awesome project, I love the illustration and the way you’ve combined it with the text, it really breathes life into what could be a very dry topic and makes it much more memorable.
I had a bunch of fun yesterday afternoon remixing one of your diagrams - basically because I was disappointed to see that you had used a JPEG for the Timeline of the COVID-19 Outbreak, which is largely text-based diagram, and I wanted to make you an SVG version to show you how much better it could be if you tried using all the awesome power of SVG in future feature stories.
I know you’re familiar with all this already as you’ve already updated the site, but just a quick recap for anyone following along - what’s the problem with using a JPEG in this context?
- Accessibility: the text content is completely inaccessible to screenreaders.
- Mobile: the image cannot adapt to a smaller or portrait-oriented screen.
- Crispness: when zoomed beyond 100%, in the compression is visible and the text is difficult to read.
- Difficult to remix: (a problem for open source content like this!) JPEGs are not readily editable, and the public has no access to the image’s source files
- Difficult to update or make/suggest improvements: Fixing a typo requires going back to the designer for a new export rather than just updating a text file. In the case of a historical timeline for an emergent and ongoing situation, I’m sure it’s in your interest to make updating as easy as possible.
- File size: not really a problem in this case - the JPG is 172kb, which is totally acceptable. But as you’ll see, we can do far, far better than that.
I see that as of today, you have updated the diagram with CSS & HTML, which solves almost all of these issues… but it did mean compromising on your design layout.
Here’s a page containing an inline SVG version of the diagram:
Timeline of the COVID-19 Outbreak
The SVG maintains the original design and layout, but makes it…
- Accessible: All text is actually text, ARIA roles have been applied, and screenreaders can navigate the content.
- Crisp: it’s vector, you can zoom aaaaaaall the way in.
- Remixable: the image is the source code is the image.
- Updateable: typos etc can be fixed by anyone with access to the source code (this is a dat site, you can edit the source with Beaker)
- Tiny: 7.4kb - and it could be smaller, but I prefer to optimize for human-readability
- Animated: see the little details on the last two timeline points. If you wanted to you could do an SVG draw-on animation of this diagram, maybe tied to the user’s scrolling, which reveals the points one-by-one. Is it a good idea? I don’t know, but you could do it if you wanted.
Looking through the feature article, there are a bunch more images combined with inaccessible text (also without any alt text descriptions!), and it seems that you could really benefit from using SVG in these cases. SVG is also a nice go-between format for designers and developers, as you can export it from Illustrator/Inkscape etc.
What do you think?
Signed, your friendly local SVG advocacy group