DEV Community

Megan Sullivan
Megan Sullivan

Posted on

Accessible Sketchnotes?

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?

Discussion (5)

Collapse
ben profile image
Ben Halpern

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.

Collapse
nitya profile image
Nitya Narasimhan

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:

  • color scheme of image
  • topic/title and target audience
  • some sense of layout
  • source of information that this summarizes

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.

  • now you can potentially localize content or replace your handwritten notes with a font (size adaptive) to suit diverse audiences.
  • you can also potentially allow others to personalize the text now, to suit regionally relevant tech terms or examples etc.

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

Collapse
meganesulli profile image
Megan Sullivan Author

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?

Collapse
tamouse profile image
Tamara Temple

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.

Collapse
tamouse profile image
Tamara Temple

p.s. sketchnoting is awesome!!