It is unfortunate that so much of the great content produced for the internet, like webcomics, drawings, videos and other material, is not accessible to those who can’t see it. Vision impairment or visual impairment, can refer either to the blind, or to those people whose eyes are incapable of deciphering images for whatever reason (cataracts, color blindness, etc). That’s why I want to talk about how we as online artists can make accessible comics for the blind or vision impaired.

How blind people surf the internet

You might not have known this, but blind people can and do use the internet. They use programs that scan websites and read the content aloud. These are called screen readers, and to the best of my knowledge these provide the most common way for blind people to use the internet. There’s also a hardware technology that translates web content over a physical Braille display. Thanks to these two technologies, anyone who lacks sufficient visual power can still enjoy a good internet read.

How to make webcomics accessible using ALT text

Technology that can extrapolate text is one thing, but now comes the question: what about images? Naturally, we’re talking about images if we’re talking about online webcomics, so how are blind people supposed to enjoy text that is embedded in a JPEG or PNG? The answer is something that’s called Alternative Text.

Alternative text is an HTML attribute that exists within the HTML tag <img>. If you don’t know much about HTML, that’s ok. It’s quite simple. HTML is one of the front-end coding languages that defines the design and structure of a web page. Right click the browser area and select “view page source” to see all the code that comprises that given page. All images in HTML are called upon using the code: <img src=””> where “src” is the source image file. So if your image is in your WordPress media library, the source address will look something like this:

http://www.thingsinsquares.com/wp-content/uploads/title-new3.png

Alternative text is an attribute that occurs within this “<img>” tag, as such: <img=”” alt=””>. All you have to do is place the text within the quotes. Voila:

So now you may be wondering how alt text helps blind internet users understand an image. Screen readers read aloud alt text for blind users. So depending on what you put in the ALT attribute, a blind user can get an idea of what it is they’re supposed to be looking at.

What should you write as ALT text for webcomics?

You can write whatever you want. Accessibility guidelines from WEBAIM suggest that the alt text must be descriptive of the image.

I began writing alternative text on my comics that described exactly what was happening in the comic. But then I realized that if I were a blind or vision impaired user who wanted to enjoy a webcomic via text alone, my description would bore me to high hell. So I started trying to come up with little jokes. I realized it was very difficult to create alt text on webcomics in the form of relevant jokes. The jokes eventually had very little or nothing at all to do with the comic itself. And anyway, XKCD already writes alt text jokes for his blind readers. Recently I came upon my ALT Text Calling: Limericks. Well, I’m not actually writing strict limericks on an anapaestic meter… rather it’s poetry that’s quite all over the place. But fuck it, they’re fun and I’m enjoying reading them, and those lucky readers who happen upon the little poems are happy to read them too, especially since the words relate to the comic in question. Above all, these poems are meant to help blind people enjoy my webcomics. Here is the alt text from the Salty comic and bonus panel:

Note the little broken image icon that signifies that the image did not load. The alt text always appears beside this icon.

If you’re a webcomic creator, then the takeaway from this article is simple: fill in your ALT text. If you’re using WordPress, edit the image and you’ll see the field dedicated to alternative text. Not only will you be contributing to making the internet more accessible for all, but you’ll increase your following by catering to this specific demographic.

Additional things to know about ALT text

There are a few more things you should keep in mind when it comes to ALT text:

• Google and other search engines index image alternative text and give your page more weight for the words that occur there. An image that is called “comic.jpg” with alt text “this is comic” will rate higher for the word “comic” than an image without that word.
• Alt text always loads when the image does not. For whatever reason, some users may deactivate images. In this case, it behooves you to put some interesting alt text in its place
• Images on your webcomic site that are not comics themselves must still have the alt text, especially if they serve a core function. For example, I have navigational arrows, menu buttons, and social buttons. These all have alt text that describes precisely what will happen if a blind user decides to activate their on-click function.
• There is also something called the Title text attribute. I don’t use a title attribute but I should. You can copy the same text you use in the Alt attribute into the Title attribute if you’re lazy about it. The Title attribute is the text that appears beside your cursor as it hovers over an image or link. The title attribute occurs within the <img> tag in the same manner as the alt attribute.

---

I hope this article has been helpful! Get on the band wagon, give blind people the eyes to read your comic!