Alt Text in Comics

[Awesomeness_Studios]

Hey so don't tell my readers but I'm working on a website for my comic

One reason why was because I wanted to see if I could add alt text to my comic for visually impaired readers. Now, every alt text tutorial says you should keep them short and sweet because they're supposed to be descriptions, but is it possible to place a whole transcript in a comic page? I read somewhere that some screen readers skip alt text after 125 characters, but I wanna know how true this is for most screen readers at least. I could also try to code in some kinda transcript box, or maybe make the author's note the transcript. Are there any screenreader users here that can help out or at the very least people who know something about making accessible comics.

[rajillustration]

A screen reader just can't read more than 140 characters anyway, and they're meant to be very short and concise. I would just put a script somewhere else on your website, leave the alt text to say "image of comic" and then have a link to where the script format version would be. (and in Tapas' case, you can make a novel version to go with your comic)

[ajcrwl]

I've never worked with screen readers and have no experience with them, but using my webdev experience and a quick google search I can suggest two methods.

1.
Add a div right after your webcomic image and put all the text you want in it, give it 0 height and no overflow.

<div style="height:0px;overflow: hidden;">TEXT GOES HERE</div>

You can add as many of these as you need, visually they will occupy no space at all, but functionally they will be there.
You can then leave the alt text in your image to say something like "Webcomic image. Description below."

I did a quick search and this page suggests a very similar method but sets width/height to 1px and moves the element off-screen:

Hiding elements visually by moving them off-screen

2.
Another article on the same website shows how to add labels with a more advanced method:

Labelling elements using aria-label and aria-labelledby

I tried this quickly and it also works with Google's Screen Reader extension. You need to edit your html a bit differently. In webcomic image code you need to add aria-labelledby="" like this

<img src="your image url" aria-labelledby="ID OF YOUR DESCRIPTION DIV">

And that div now will be:

<div id="ID OF YOUR DESCRIPTION DIV" style="display:none;">TEXT GOES HERE</div>

We can hide the div with display:none in this method, so no one can see it (way better than moving off-screen), but 100% you need to add an id (don't forget that all id's are unique, you can't assign one to multiple elements).
You can also put this div anywhere you want on the page with no relation to the image, screen reader should read it when it goes over the image (basically it finds that image is labelled with something, goes to read that label, then continues to read the page after the image).

I hope this helps.

[Awesomeness_Studios]

Oooo this seems really neat. Btw, how would I make the hidden text match each image? I'm using ComicFury to make this, and it seems that the image shown is determined by [v:comicimage] (though I'm very beginner at HTML so I'm not really all that sure). How would I then add text that changes depending on the image being shown

Gonna show a screenshot of what I'm doing. I highlighted [v:comicimage] to make it easier to see

[ajcrwl]

Ah, comic fury. From what I remember there is a way to create a custom field, which you can use for this, or use the transcript field maybe? I'll need to check, haven't touched it in a while. I'll do some tests after I wake up, literally writing this on my phone in bed now haha.
I know that CF allows multiple images per episode, but do you plan to upload one image or many?

[ajcrwl]

ok, so I looked at what it does. let's consider the worst case scenario: a multi-picture episode

CF turns [v:comicimage] into div.comicsegments with multiple div.segmentcontainer, each has an img in it.
What's common between multi-picture and single-picture pages is that mouseover text is always inserted in the title attribute, so it's not read by a screen reader, you may as well never use the mouseover field (unless you want to for fun). The engine uses page title as alt, so it will always be read (and we end up with multiple titles being read in a row on multi-picture pages :/)

1. a simple solution using the first method I suggested earlier. edit your

<div class="comicimagewrap">[v:comicimage]</div>

like this

<div class="comicimagewrap">[v:comicimage]
    <div id="transcript" style="height:0px;overflow:hidden;">[v:transcript]</div>
</div>

And now all you need is to just fill out the transcript field on each comic page. It doesn't accept any html tags, so no paragraphs or styling with < i > or < b > (etc) is allowed within it, but line breaks are ok.

2. As for the second method with labels:
You can't change the way CF renders [v:comicimage] and the img tag with all the attributes, so no way to sneak aria-labelled in there. You could do

<div class="comicimagewrap" aria-labelledby="transcript">[v:comicimage]</div>
<div id="transcript" style="display:none;">[v:transcript]</div>

this way it will read the transcript first, and then will read the title in every alt on your images x)

3. One last solution. Which completely destroys multi-image uploads. Don't do this, you never know if you might need multiple pictures, this is just for consideration. You can replace [v:comicimage] with a custom img construct with very specific variables, for example:

<div id="comicimagewrap"><img src="[v:comicimageurl]" id="comicimage" style="width:[v:comicwidth]px; height:[v:comicheight]px;" aria-labelledby="transcript" />
        <div id="transcript" aria-hidden="true" style="height:0px;overflow:hidden;">[v:transcript]</div>
    </div>

This way there's no alt or title on the image, so no extra text is read, just the transcript. Also I used aria-hidden on the transcript div, so it will definitely be skipped.

---

A suggestion regarding other elements:
just a little below your comic image, there's a navigation block. Look at the alts on those images too. <<First is no good, it will be read as "less than less than First", and so on (& lt; becomes < and & gt; becomes >). Remove those extra symbols. I also suspect the same block may be somewhere above the comic content.

[Awesomeness_Studios]

Alright I'm gonna go with the first option and test it out with Windows Narrator to see if it works. Thanks very much for this help. Also good point about the alt text for the navigation buttons. I removed those so it should just read "First" "Next" etc.

[Awesomeness_Studios]

Okay @doittkarl I tried the first two methods and then tested it out with Narrator, but my transcript wasn't read. The website knows the transcript is there, since I can still search it up with the search page, but I can't get the HTML to actually read it.

I decided to see what happens if I made the height into an actual number. The transcript does show up, but when I put it through the screenreader it still skipped it for some odd reason

So we're definitely making progress. We just need to get this piece of text actually read.

[ajcrwl]

Aight...
The first thing I did - grabbed my phone and tested my pages with Google's built-in screen reader. It worked.
Then I went to test with Windows Narrator. Didn't work.
Searched for a solution on the web.... Ah.

(it's from 2015 though, so take it with a grain of salt).

Installed and tested NVDA. Aha!

(The highlighted text is what I put in my transcript fields. HTML in there is not valid, the narrator reads it as "less than b greater than bold text less than slash b greater then", etc xD)

my pages

below this, only the comment form with some links at the bottom.

¯\_(¬_¬ )_/¯

However, NVDA also isn't perfect. And that Stackoverflow response is old now. Windows 10 came out in 2015, surely Windows Narrator has been improved since then?

What bothered me with both was that after the narrator stopped reading the whole page or a specific element it wasn't possible to make it focus on the same div.

tl;dr

I found a solution!
Add tabindex="0" to your comicwrap. I also put v:comicimage inside another div and labelled it as hidden. (The reason is that the reader kept stubbornly reading only the image title which is actually the mouseover text, and if I removed that it only read the alt text which is the page's title, and only after removing all of those it found the aria-label )

anyway this is the code that I used:

<div id="comicimagewrap" aria-labelledby="transcript" tabindex="0">
    <div aria-hidden="true">[v:comicimage]</div>
</div>
<div id="transcript" style="display:none;">[v:transcript]</div>

Note that in my template it's id="comicimagewrap" and yours uses class="comicimagewrap" for some reason.

[Awesomeness_Studios]

It works!! I even downloaded NVDA to verify and yeah it does work. I did have to change id="comicimagewrap" to class="comicimagewrap" or else the page would align left for some odd reason, but either way the screenreader could read the transcript!

Thank you very much for your help! I plan to ask blind and visually impaired people for help (maybe on r/Blind, but I gotta make a reddit account first lol) to check if they can use everything comfortably, but this is good for now.

[ajcrwl]

Hooray!
I'd figured you'd have to keep your classes because of your template's CSS. They're not mutually exclusive with IDs though, so if you need an id on that div you can totally add it along with the class.

Asking people to try this out is a great idea. If you need more help, just ping me on here or in discord.

[Awesomeness_Studios]

Yeah. Right now I reached out to a Discord server with a blind community to see how it works for them. I got one person who wasn't able to read it for some reason. They use MacOS's VoiceOver. I may need to see how it works on my Mac, to see if it's an issue with the code or just VoiceOver. Since NVDA is a popular screen reader, if it works with that then I guess it should be fine for now.

[Awesomeness_Studios]

Okay update on VoiceOver: I works on my Mac

I guess it must be some settings with that individual person??

[Awesomeness_Studios]

Alright so here's a update on everything (fortunately before this auto closes).

So I asked more visually impaired people and they said they also faced the issue. At this point, I decided it would be best to just make the transcript visible in order for it to work for most every screen reader.

Anyway, I'm still playing around and learning HTML. Someone suggested I try making the transcript collapsible just in case it ever gets really long. I'm trying to code that in and to make it visible by default. I got a button working, but apparently it requires a double click for the first toggle and then works find for all other clicks. I don't know how to fix this issue to only make it click once. Can anyone help me out with this?

[system]

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.