I want to start making and sharing sketchnotes, but I’m not sure the best way to make them accessible for screen reader users. Anyone have any tips for best practices?
Some possible options I’m considering:
- Include one long, detailed description in the alt text for the image.
- Share the sketchnote image on Twitter, and use follow-up tweets to describe the content.
- Post the sketchnote in a blog post, so that the body of the post can reiterate all the content in the sketchnote. Share the link to the blog post on social media instead of the sketchnote image.
Any preferences or other suggestions? Are there any examples of people doing this well?
Top comments (5)
Twitter can allow alt text, so anywhere you're sharing them, alt text definitely make sense.
Posting the sketchnotes to a blog post is another good option. Plenty of folks post sketchnotes to DEV and include captions and/or alt text.
the alt text length on twitter is limited, so that may not work.
i'd say a blog or wiki would be best; perhaps have a look at notion 's publishing ability, but rolling your own blog these days pretty accessible.
p.s. sketchnoting is awesome!!
I came across this post by accident when I was looking for something on accessibility - but hopefully still of use.
A11y and sketchnotes are something I've been exploring more recently. I publish visual guides on my Twitter (@SketchTheDocs) account and some of my thinking is aligned to that specific use case, but might be generalized.
101-level: treat it just like any other image
Add alt-text describing the whole image. I am trying to make a template for myself which involves specifying the following:
Check for color accessibility (for persons who are color-blind) and legibility of text (for persons with low vision).
One thing I am thinking of is to explore DIGITAL sketchnotes as a layered approach - where images are on one layer and text on another, allowing me to export each separately.
201-level: treat it as visual notes.
Create alterrnative content that provides the same level of note-taking value using other modalities.
ex:
create complementary audio transcripts that describe each section in more detail, and provide a link to those in the alt-text. or, add a text transcript that any screen reader can use
301-level: treat it as interactive information guides
Provide or explore ways to allow audiences with diverse capabilities to engage with the content
ex:
inspired my museums that have "audio guides" for art - think of things like AI bots that are configured with Q&A to allow users to ask (or press a button) to get specific sections read out, or to potentially engage with content in that segment. I'm looking at things like paper circuits and IoT to "bring sketchnotes to life"
Hope that helped
Hi Nitya, thanks for sharing! (Also I have to add that I've seen your work on Twitter and I love your sketchnotes! I like how each post includes the sketchnote image and a link to a blog post or slides, so that people can choose how they want to engage with the information.)
I love the way you've broken this down into multiple levels - reminds me of the 3 levels of WCAG conformance.
The 301 level sounds really fascinating. I've wondered about using SVG to add some structure to the sections of a sketchnote, but I hadn't thought about things like audio guides or paper circuits. It sounds really cool! Do you have any examples of those more interactive guides in practice, or is it more something you've been brainstorming?