Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

Accessible Comics!!! (#ID24)

Download to read offline

The comics medium is incredibly expressive, but because it's so visual, it often ignores audiences with vision impairments. How can we make comics a more inclusive medium that everyone can enjoy? In this talk, we'll examine some existing techniques, like transcription, and discuss some new and innovative ways of creating non-visual comics from the outset.

Originally presented at #ID24 in June 2017, http://www.inclusivedesign24.org/

  • Be the first to like this

Accessible Comics!!! (#ID24)

  1. 1. Accessible comics!
  2. 2. Comics School, Day 1: Comics are about relationships.
  3. 3. image & image
  4. 4. image & image image & text
  5. 5. image & image image & text image & culture
  6. 6. Comics are expressive!
  7. 7. Comics are expressive! Little Nemo in Slumberland, Winsor McCay (1905)
  8. 8. Comics are expressive! Excerpt from El Deafo, Cece Bell (2014)
  9. 9. They share stories and information in an easily consumable way.
  10. 10. The Nib
  11. 11. Comics can help teach about accessibility.
  12. 12. Comics can help teach about accessibility. “What if” from my comics series about a fictional Designer Dude
  13. 13. Comics can help teach about accessibility. Salesforce UX posters to promote usage of reusable components
  14. 14. Comics can help teach about accessibility. Excerpt from “The Postcards Guide to Braille!,” Constanza Yovaniniz
  15. 15. But most comics have an accessibility barrier...
  16. 16. But most comics have an accessibility barrier...
  17. 17. My personal experience as a reader... ● Is the text legible? ○ Contrast matters ○ Font size and kerning ○ Web: Can I highlight text to read it?
  18. 18. My personal experience as a reader... ● Is the text legible? ○ Contrast matters ○ Font size and kerning ○ Web: Can I highlight text to read it? ● Is it high enough resolution? ○ Are any important details missing, blurred
  19. 19. My personal experience as a reader... ● Is the text legible? ○ Contrast matters ○ Font size and kerning ○ Web: Can I highlight text to read it? ● Is it high enough resolution? ○ Are any important details missing, blurred ● Is it written in my language?
  20. 20. My personal experience as a reader... ● Is the text legible? ○ Contrast matters ○ Font size and kerning ○ Web: Can I highlight text to read it? ● Is it high enough resolution? ○ Are any important details missing, blurred ● Is it written in my language? ● Web: Is it easy to find it again if I forget to bookmark it?
  21. 21. Transcription
  22. 22. assistive technology
  23. 23. search engines assistive technology
  24. 24. search engines assistive technology automatic translators
  25. 25. OhNoRobot.com
  26. 26. Questions to think about as you transcribe ● What’s the tone of the work? ○ How would you tell this story on the radio? ○ Listen: Netflix audio descriptions
  27. 27. Questions to think about as you transcribe ● What’s the tone of the work? ○ How would you tell this story on the radio? ○ Listen: Netflix audio descriptions ● What information should you include? ○ And how much? ○ Exercise: Sit back-to-back with a friend and have them draw what you describe
  28. 28. Questions to think about as you transcribe ● What’s the tone of the work? ○ How would you tell this story on the radio? ○ Listen: Netflix audio descriptions ● What information should you include? ○ And how much? ○ Exercise: Sit back-to-back with a friend and have them draw what you describe ● Liana Kerr’s “On Describing Comics” is a must-read
  29. 29. Broodhollow, Kris Straub (transcription by Liana Kerr) White background. Panel 1. A young man is laying on his back on a flat, armless couch, his eyes closed and his hands folded over his belly. He is drawn in a flat, cartoonish style reminiscent of 1930s pop art, with a shock of hair sticking up from the top of his head and a rounded face. He's wearing brown pants, a buttoned up tan shirt and red suspenders. Someone offscreen says "Mr. Zane... You were about to tell me what brought you here." Zane replies "A taxi. Ha ha." Then, more quietly, "No, I walked. I haven't seen any taxis."
  30. 30. My 2015 retrospective comic Narration: If I had to pick one word to describe my 2015, it would be overwhelming. Illustration: Me lying blissfully on my couch with my feet up over the back cushions, one striped sock and one polka dot sock. There’s a “plop” sound effect, like I’ve just fell onto the couch, and an arrow pointing at me that says “me at the end of some stressful days.” I think, “It’s so nice to just lounge here like this… but I should go be productive.”
  31. 31. Formatting and placement ● I haven’t found any agreed-upon formatting guidelines for comic transcripts, but… ○ can learn a lot from scripts ○ ComicsML (XML) has a lot of potential
  32. 32. Formatting and placement ● I haven’t found any agreed-upon formatting guidelines for comic transcripts, but… ○ can learn a lot from scripts ○ ComicsML (XML) has a lot of potential ● Best practice: Visible transcript or visible link to transcript immediately after comic ○ alt and long-desc aren’t very accessible to people navigating visually
  33. 33. Formatting and placement ● I haven’t found any agreed-upon formatting guidelines for comic transcripts, but… ○ can learn a lot from scripts ○ ComicsML (XML) has a lot of potential ● Best practice: Visible transcript or visible link to transcript immediately after comic ○ alt and long-desc aren’t very accessible to people navigating visually ● Consider audio recordings!
  34. 34. <panel> <url>http://www.jmac.org/xml/dcs-xml/panel3.gif</url> <panel-desc> <action>Burt interrupts Martha, brandishing a sandwich at her. Martha looks confused.</action> <speech> <character>Burt</character> <text><strong>Pagh!</strong>Again, I have completed construction of my chicken sandwich in half the time as you. Your "Kitchen Creation Myths" remain unconstructive drivel!</text> </speech> </panel-desc> </panel> Excerpt from Jason McIntosh’s ComicsML framework
  35. 35. Brocedurally Generated, my experimental webcomic
  36. 36. Brocedurally Generated, my experimental webcomic
  37. 37. Brocedurally Generated, my experimental webcomic
  38. 38. Brocedurally Generated, my experimental webcomic
  39. 39. <section class="tier" aria-label="Tier 1"> <div class="panel animated"> <img src="..." alt= "A bed with a sock hanging off the side, a hairy bare leg poking out from under a blanket. A phone on the table reads 11:00." /> </div> </section>
  40. 40. <div class="panel animated"> <span aria-hidden="true"> Want to join our Burning Man camp? </span> <span aria-hidden="true"> No way. </span> <img src="..." alt= "Evan smiles while holding a disposable coffee cup. Evan says, 'Want to join our Burning Man camp?' Someone says, 'No way.'" /> </div>
  41. 41. Tactile Comics
  42. 42. Excerpt from my 2015 retrospective comic, in which I was extremely giddy about Shaun Kane & Sina Bahram’s CSUN 2015 presentation about 3D printing comics
  43. 43. Sensus: El universo en sus ojos Jorge Grajales & Bernando Fernández (“Bef”)
  44. 44. Life Philipp Meyer
  45. 45. Shapereader Ilan Manouach
  46. 46. image & image image & text image & culture
  47. 47. Comics School, Day 1: Everything is a comic.
  48. 48. Thanks! @cordeliadillon

The comics medium is incredibly expressive, but because it's so visual, it often ignores audiences with vision impairments. How can we make comics a more inclusive medium that everyone can enjoy? In this talk, we'll examine some existing techniques, like transcription, and discuss some new and innovative ways of creating non-visual comics from the outset. Originally presented at #ID24 in June 2017, http://www.inclusivedesign24.org/

Views

Total views

688

On Slideshare

0

From embeds

0

Number of embeds

13

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×