Reply To: HTML labels

PennController for IBEX Forums Support HTML labels Reply To: HTML labels

#6595
Jeremy
Keymaster

Hi 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