How to make images accessible
We make mistakes about accessibility, because of a lack of empathy. And we lack that empathy, because a lack of knowledge.
Juanjo Montiel is a developer who is always complaining about the use of images to insert source code in posts, because the text within images is invisible to screen readers. When another developer apologized for it, he said:
Don’t worry! You never imagined that a blind person read your code, didn’t you? That’s it, really!
There are alternatives to have source code within images, like formatting the text or using Gist. I don’t know if the content of a Gist snippet is easily accessible, but it provides a link to view the raw content.
However, what if we have source code within images? Could we provide an additional element to make that content accessible? This is the question that Juanjo Montiel tried to answer. I admire he was looking for it, respecting the use of the image, in other words, respecting the development behind the functionality of getting images with colored and formatted source code.
At the beginning, he thought about the use of a visually hidden aside. However, that solution is not recommended for universal accessibility. For example, a user with low vision needs to enlarge the text.
According to the image
For simplicity, we could identify three types of images:
- Decorative images
- Images that can briefly be described
- Images that need an extended description
If an image is decorative, it must be marked with an empty alternative text (
alt="") and the presentation role (
If an image can briefly be described, we can write that description in the
If an image needs an extended description, we could think about options which have the lowest impact on the visual layout:
- Near the image: an HTML Details Element, which content is only visible when it’s toggled into an “open” state. In this case, it’s important to check if the scrolling view or the paginated view behaves correctly when expanded.
- In another place: it’s necessary to provide a way to take the user back to the same location.
That extended description would be linked to the image with
aria-details attribute. It’s important to consider the use of text hyperlink or image hyperlink until
aria-details attribute is widely supported.
Source code within images
The option of adding an HTML Details Element could satisfy what we are looking for. Furthermore, it offers the possibility of copying the source code.
Therefore, if you use images, please, consider adding another element with the source code as text.
Related topic: graphics
SVG (Scalable Vector Graphics) offers some features to make graphics accessible: it’s scalable, it can store structural information about graphical shapes, it can provide an alternative equivalent, etc.
I love the definition about SVG from MDN web docs:
SVG is essentially to graphics what HTML is to text.
If text organized with HTML is accessible, could an image in SVG format be accessible in the same way? I’m thinking about interpreting the content of a SVG file automatically. Something like SVG-to-text. Dreams can come true ;)
- MDN web docs - The Details disclosure element
- MDN web docs - SVG
- WAI Tutorial - Images Concepts
- EPUBTEST 0340 - Extended Descriptions Accessibility Tests
- Accessibility Features of SVG
- Thread in WAI IG Discussion list
- Contributions to warn about the use of images with source code
- Juanjo Montiel, a .NET developer and the main character of this post. I still haven’t met him personally, but I can tell you one thing that impressed me. He’s blind and I chatted with him, before listening to him give a talk. He communicates with words much more than anyone else I’ve met. I’m not only talking about the message, but also about him. When I listened to him, he was exactly like I imagined.
- David Woolley
- Jonathan Avila
- George Kerscher
- The working group on accessibility of EPUB