SugarCube: address in webbrowser to reflect passage? screen reader accessible?

aeghmn

Hi,
I was wondering if it were possible to enable the internet browser to reflect what passage you are in in the Twine module instead of it always reflecting the name of the entire project? Like in a website?

I am not sure if that is the answer to my question at all. My problem is that I want someone with a screen-reader to be able to view my story, but the reader gets hung up in the sidebar area and loops through it a couple times before proceeding through to the content, and does this for every new passage. It also will return to the first passage of the story, so I was wondering if allowing the passages to be independently identified would stop this from happening.

Thanks in advance

greyelf

There have been a number of threads on the forums about the accessibility / screen-readers related subjects.
(WCAG Accessibility, Twine Accessiblility, search for accessibility)

In a nutshell, a lot of work would be required (both by the story format creator and the story writer) to make the generated HTML file partly/fully compatible because most of the content the reader sees is dynamically generated, this is the same issue most web applications face.

aeghmn

Thanks for the pointers.
I created  my content to be accessible (headings, alttext, captions etc). I am going to implement the points about the links that were covered in the forums you provided.
It is just a matter of the template.
I am going to see if different story formats have the same issue.

aeghmn

So adding this :

<<script>>
$("#passages a").attr("tabindex", 0);
<</script>>

To a Passage Done passage works for the text passage links, but some of my images are links to other things as well.
I tried adding:

<<script>>
$("#passages a").attr("tabindex", 0);
$("img").attr("tabindex", 0);
<</script>>

To that script to get the images to appear in the links list as well, but they do not show up.
Any insight?

aeghmn

So adding this :

<<script>>
$("#passages a").attr("tabindex", 0);
<</script>>

to a PassageDone passage works for the text passage links, but some of my images are links to other things as well.

Is it possible to do 2 things:
[list type=decimal]
Set up 2 classes of images, that act as links: 1 class would display as a regular passage link for the screen reader (that's what using the script above makes happen), and the other class of linking images that the screen reader would not see to be links, but that actually are, and sighted people would be able to use their full functionality.
(Why you might ask? Because some links are to actual new pathways in the Twine module (which I want the user to be able to navigate) and others are just to larger versions of the image (which someone with a screen reader would not care about.)
Set up 2 classes of active passage text for the exact same reasons and parameters as above. Certain links would be useful for sighted people, but not someone with a screen reader


It would mean that the script would end up looking like:

<<script>>
$("#passages.screenreader a").attr("tabindex", 0);
<</script>>

and I would have to tag certain passages as that?
Is this even possible?

Claretta

If you were designing a truly accessible game, wouldn't images as links be a bit of a no-no anyway?

This doesn't answer your question, I know, but it seems that even if you got this to work the way you wanted it to, you'd still be left with accessibility problems just because of images being links.

aeghmn

It actually ends up being OK, as long as you have appropriate alt text, titles and captions.

The screen reader treats the passage links displayed with text the same way as one that is an image.

If my page were to look like the attached image it ends up being like this (read out in a robotic stilted voice)

[quote]"heading 1- Different Breeds of cats
Main content
There are many different breeds of cats, here we will look at the most common.
Start list: Link to persian cat content area, Link to American shorthair content area End list
Link to next content area"

When it uses the word link, the screen reader user knows they have the ability to interact with the object that comes next and select it.

For our purpose (building an educational module on a topic), the linking to content through an image is OK.

TheMadExile

The easiest way I can think of off-hand would be to add a class to the visual-only image anchors which would allow you to exclude them from selection.  Doing so would require you to use HTML markup for those, so it would probably require you to change their markup.

For example, setting up the anchor and image for a visual-only image link:

<a class="visual" href="ball_of_cats.jpg"><img href="ball_of_cats_thumbnail.jpg"></a>

And the PassageDone code to exclude such links from receiving a tabindex attribute:


<<script>>
$("#passages a:not(.visual)").attr("tabindex", 0);
<</script>>


EDIT: You may be able to use a widget macro to shorten what you have to type, if you care about that.

aeghmn

Oh?
What are your ideas on that?

TheMadExile

I assume you're referring to a widget macro to shorten what you have to type?

There's several different ways you could do it, but something like the following should suffice:


/% Takes a single argument which must be a wiki image markup w/ optional link component. %/
<<widget "imglink">>\
<<print '<a class="visual" href="' + $args[0].link + '"><img src="' + $args[0].source + '" title="' + $args[0].title + '"></a>'>>\
<</widget>>


Usage:


<<imglink [img[A big ball of the kitties|ball_of_cats_thumbnail.jpg][ball_of_cats.jpg]]>>