Links and Screenreaders

Twine Version: Harlowe 3.3.5

Hello again!

I had a question in regard to screen readers. I’ve noticed that, while a screen reader will read the text of my game, it will not note when there are links to click in the passage, which could be difficult for blind players. I understand that Harlowe does not have very good accessibility in comparison to Sugarcube, but I am not confident in my ability to use Sugarcube, so I was hoping to Jerry-rig something in Harlowe.

Would it be helpful to add an option in settings to mark links in text? Something like

He surveys the wreckage of his office. “You’re hired.” [Link]

Or would moving links to the bottom of the page work better? For ones like the above, which just continues on to the next page, I don’t see that being an issue, but I’m concerned about how that will work with in-passage links like

“What was it?” Several carriages are parked in the distance. You recognize several as belonging to your siblings, one to your grandmother, and one to your Uncle Henry.

where each link takes you to another sub-passage and then back to the main passage, or for links that append hooks when clicked. The first option seems like the better one to me, but I also have never needed to depend on a screenreader.

Thanks in advance!

2 Likes

As a reader I certainly feel more comfortable if all links are gathered at the bottom of the page. However I’ve grown with CYOA books, so I might be biased.

In any case, it’s important your links to be identified as links. So if your screen reader doesn’t identify them as such, you’ll have to mark them.

All in all, I advise you to use both options at once.

2 Likes

This might be ignorant of me, but could you just make them link elements in HTML, or if that’s not possible, give them tabindex="0" role="link"? I know nothing about Harlowe and very little about Twine in general, but if either of those options are possible, you’d have navigable links which behave as a screen reader expects them to, and no real need for a toggle.

2 Likes

Some of the likely reasons that the Reader might be having issues with Harlowe’s links are:

1: Harlowe uses custom HTML elements, instead of a standard <a> anchor element, to represent its links.

This can be seen by adding the three most common link types to a Passage…

<!-- Markup based -->
[[Link Text->Target Passage]]

<!-- Link Macro (family) based -->
(link-goto: 'Link Text', 'Target Passage')

<!-- Click Macro (family) based -->
|hookName>[Link Text]
(click-goto: ?hookName, 'Target Passage')

…and then using your web-browser’s Web Developer Tools to inspect the HTML that is generated when that Passage is visited…

<!-- Markup based -->
<tw-expression type="macro" name="link-goto" return="command">
	<tw-link tabindex="0" data-raw="">Link Text</tw-link>
</tw-expression>

<!-- Link Macro (family) based -->
<tw-expression type="macro" name="link-goto" return="command">
	<tw-link tabindex="0" data-raw="">Link Text</tw-link>
</tw-expression>

<!-- Click Macro (family) based -->
<tw-enchantment class="link enchantment-link" tabindex="0">
	<tw-hook name="hookname">Link Text</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click-goto" return="command"></tw-expression>

note: the Markup based link and the Link Macro based one create the same HTML, because the Markup based syntax is just an abstraction for the Link Macro.

And because Harlowe doesn’t have a documented JavaScript API to access the internals of its runtime engine, simulating the equivalent of one of its link-types using a HTML anchor element combined with some JavaScript is harder to achieve than you might wish.

2: Harlowe runs a background process that re-applies all Click Macro calls whenever the HTML content generated by the “current” Passage is dynamically altered, like what happens when an Author use a link to append additional content to the page.

eg. like this Hidden Hook plus (show:) macro based example.

Welcome to the library...

(link-reveal: "Examine Room")[(show: ?desc)]

|desc)[You see  books]
3 Likes