Accessible Sketchnotes?
Megan Sullivan

Megan Sullivan @meganesulli

About: I like learning new things and teaching others how to use tech to improve the world. Previously: Apollo GraphQL, Gatsby, ThoughtWorks, Girls Who Code.

Location:
San Francisco Bay Area
Joined:
Mar 5, 2020

Accessible Sketchnotes?

Publish Date: Nov 22 '20
9 5

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?

Comments 5 total

  • Ben Halpern
    Ben HalpernNov 22, 2020

    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.

  • Tamara Temple
    Tamara TempleNov 29, 2020

    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.

  • Nitya Narasimhan, Ph.D
    Nitya Narasimhan, Ph.DJun 4, 2021

    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

    • Megan Sullivan
      Megan SullivanJun 6, 2021

      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?

Add comment