I'm working on a project to be used by several foreign language teachers. I'm struggling with a technical issue related to two project goals: We want to narrate the entire project so students can hear native speakers, and we also want to make the project accessible to people with disabilities.
I've made the keyboard-accessible, and now I'm working to add the audio. Since 'audio from native speakers' is a project goal, I need to override the default machine-generated speech used by screen reading software. This doesn't seem particularly difficult -- it involves adding
aria-hidden="true"
to the parent tag, then implement a JavaScript listener that will play the appropriate audio file when text element with specific IDs or classes gain focus.
My problem is that I'm having trouble adding a class and/or id to links generated with <<click>>.
I'm using <<click>> because I have a series of objects in each passage. Each object holds a possible responses to a question, number of points for that response, feedback, etc. Each object also includes the file name of the audio for the choice, and the file name for the audio of the feedback. The feedback doesn't show until the user chooses a response.
Greyelf kindly helped me display and randomize these responses:
<<for $i to 0; $i < $choices.length; $i++>>
<<print "<<click $choices[$i].choice>><<set $j to " + $i + ">><<display \"Choice Logic\">><</click>>">>
<</for>>
(The Choice Logic passage, which isn't part of the problem (I hope!) displays the feedback, takes care of the scoring, etc. I hope to leave it alone as I spent a week getting it to work, and am afraid to change anything!!)
Is there any way to get an ID or class into these links, or should I throw everything out an adopt a different approach?
I thought about using a <span>, but I'd have to make a span get focus, which seems like a bad practice. I also thought about using a paragraph around the choice, but then I'd have to give the paragraph focus to play the sound, then users would have to activate the link inside the paragraph, which seems like poor UI.
Any help or advice appreciated.
Comments
In SugarCube, macros generally denote ownership of generated elements via a class like macro-{name}—specially, macro-click in this case. So, a postrender task could target such elements within the render buffer and modify them as necessary before they're added to the live page. Something like the following should do the job: (goes in Story JavaScript) That will add aria-hidden="true" to all <<click>> generated links within the main passage display.
If you need to be more selective in your link targeting, then you'll need something more. For example, to only target <<click>> generated links within certain passages, you could use passage tags (e.g. let's say ariahidden): That will add aria-hidden="true" to all <<click>> generated links within the main passage display for passages tagged with ariahidden.
Beyond that, there are various ways to be even more selective, if necessary. I can provide examples, if it comes to that.
edit: looks like we both answered your question at the same time. lol