Hacking Accessibility into Twine

AvaJarvis · May 2015

So I'm looking for advice on adding accessibility features to Twine. These include

* Ability to tab through paragraphs (for those with movement impairment)
* Ability to navigate content using VoiceOver (for those who are blind)

Thus far I've found Harlowe unusable for the second, because links aren't using the link tag (a) which means that structural readers cannot detect it's a link, and thus offer no way to activate it.

SugarCube is very nice, but a mess when it comes to tabbing because it doesn't use paragraph tags (p). Also the dialogs it creates are not friendly to structural readers.

Snowman I've been able to handle due to its event structure and clean HTML, but without lots of hacking on the previous two, I can't use them (and if people use them they alienate the blind and the movement-impaired). I don't know if this is something that we care about, but I hope that we do.

In any case, here's what I've done to have Snowman able to handle both cases mentioned above:

$(function() {
	var $pass = $("#passage");
	$pass.children().attr('tabIndex', '0');
	$pass.children().first().focus();
	
	$(window).on("showpassage:after", function() {
		$pass.children().attr('tabIndex', '0');
		$pass.children().first().focus();
	});
});

I will probably add more as things continue, but if anyone has advice on what to do with the other story formats, that would be great.

(And I've added a little code to have Snowman checkpoint after every link click, but obviously that varies from story to story as to whether one would want to do that.)

greyelf · May 2015

There is a Topic in the Chit-Chat area where people were talking about setting up an Accessibility Guide that you may wish to join and contribute to.

SugarCube is very nice, but a mess when it comes to tabbing because it doesn't use paragraph tags (p).

Although SugarCube does not automatically add paragraph tags to passage contents there is nothing stopping story Authors from doing it themselves if they wish to.

<<if $variable is "red">>\
<p>Describe to the Reader what the red object looks like!</p>
<<else>>
<p>Describe to the Reader what the green object looks like!</p>
<</if>>

AvaJarvis · May 2015

Thanks, greyelf! I'll mosey on to that topic.

Claretta · May 2015

I use <p> tags in my SugarCube story because double line breaks is wonky typography.

I'm unfamiliar with the term "structural readers", though.

AvaJarvis · May 2015

@Claretta - sorry, it was late in the night. I meant screen readers (which use page structure to figure out what elements mean).

AvaJarvis · May 2015

As it turns out, Sugarcube has a function that will turn breaks into paragraphs. It's just never called.

I tear my hair out.

I've made an enhancement request.

TheMadExile · May 2015

I've just released the second usable snapshot of SugarCube v2.0.0 (2.0.0-alpha.7) for all versions of Twine. It includes significant accessibility changes (hopefully gains). Feedback would be appreciated.

See the announcement in the SugarCube releases thread.

Orinks · September 2015

Hmm. It's great that SugarCube has accessibility changes. I haven't played a Twine story with Harlow yet because the works on the front page keep giving me Twine 1 stuff. Also I'm using NVDA on Windows so that may help.

Howdy, Stranger!

Categories

Hacking Accessibility into Twine

Comments