- This topic has 2 replies, 2 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
Hi Jeremy,
I hope you are doing well.
My question is about accessibility. We have some participants who will be using screen readers to access the experiment. The issue is with pages where there is just text displayed and a TextInput box for a response. The problem is a “missing form label” — the text box needs to have an attached <label> in html in order for the screen reader to read the page.
We have the experiment on a private server, so I am hoping that I could modify some of the Ibex or PCIbex code to automatically assign a label to text input boxes. For simplicity, I was thinking the TextInput’s name (as in, the first argument in parenthesis when you call NewTextInput()) could also become the label for the text box, any time a text box is created. I was looking at the PennController.js code and have found the section where the TextInput element type is created, so I think that I basically just need some code in there where a label is created that points to that new JQuery textarea. But I’m not quite sure where or how it should fit in. I would appreciate any guidance you may have!
Thanks,
BriannaHi Brianna,
Thank you for pointing this out, I must admit that PennController is bad on the accessibility front. I will work on improving this, but there are non-trivial decisions to be made. In this case, how should the label element be integrated in the document? Should it be visible, and if so, should it come before or after the element?
Here is a suggestion: whenever any element is printed, create a label element that you add before it, whose content will be that element’s id. I decided to make the label not take any space and have its text fully transparent: my reasoning is that people who do not use a screen reader should not see the label element (unless they select text on the page, maybe) but that configuration should still allow screen readers to appropriately detect it. Here’s the code you can add to your script to make that happen (no need to modify any core js file):
_AddStandardCommands(function(PennEngine){ const oldPrint = PennEngine.elements.standardCommands.actions.print; PennEngine.elements.standardCommands.actions.print = async function(...args){ const r = await oldPrint.apply(this, args); this.jQueryElement.attr({id: this.id, name: this.id}); const label = $("<label for='"+this.id+"'>"+this.id+"</label>"); label.css({position: "absolute", color: "transparent", "pointer-events": "none"}) this.jQueryElement.before(label); return r; } });This should add a label to any element you print, not only TextInput elements. Let me know if this solution works for you
Jeremy
Hi Jeremy,
Thank you, that is exactly the type of solution I was thinking. I added that to my code and it indeed fixed the problem!
I believe this label issue was the only remaining thing affecting the screen reader accessibility. (In case it’s helpful for you to know, I earlier also had to add the line
<html lang="en">to experiment.html). I am currently waiting to hear back from a blind participant, and I will let you know how it goes.Thanks again,
Brianna
- You must be logged in to reply to this topic.