ADA Compliance

[bruceanthony]

We are finding the following tag at the end of all profoundUI pages which is flagged by firefox wave accessibility evaluator as an input element that lacks a label:
<input style="position: absolute; left: -999px; top: -999px; width: 10px; border-style: none; background-color: transparent;" readonly="readonly" type="text">

We also find that all input field are being flagged as not having a label.

Does profound have a setting that will cause all input fields to have a label?

Example:
<label for="state">State</label>
<input type="text" id="state" />

[Scott Klement]

Hi Bruce,

The tag is not visible in the browser window (notice that it is positioned 999 pixels to left of the start of the window, as well as 999 pixels higher than the top of the page). Therefore, it should not be a usability concern.

For technical reasons, we need that tag to work around some browser issues with cursor focus.

Hope that helps!

[bruceanthony]

I understand your response regarding the hidden -999 pixel field.

ADA appears to require input form field labels. Is there a way to handle this ADA requirement?

[Alex]

As you probably know, the content in Profound UI applications is dynamically generated by JavaScript code rather than HTML. It is possible to extend the JavaScript code to accomplish what you want.

You can utilize the pui.onload global event (see http://www.profoundlogic.com/docs/displ ... pui.onload) to iterate through all input fields and create/assign label tags.

If you need to individually control the label text that would be assigned to each field, the "user defined data" property in the Visual Designer can be used for this purpose.

[Scott Klement]

Extending Alex's idea... perhaps if there's an existing label (using the PUI label widget) for each field, maybe you could spin through the JavaScript and use them to get the text? You'd need some way to correlate the label widgets with the text widgets (maybe due to a naming convention for the 'id' attributes) but it might be workable?

I haven't tried it, it's just an idea.

[bruceanthony]

Thank you. We will give this a try and get back to you.

[bruceanthony]

Sorry to say that I am having some difficulties here:

My code is:

function sb_inputFieldLabels()
{

alert('Hello there0');

var fields = getInputFields(); //returns an array of all input fields on the screen

for(var i = 0; i < fields.length; i++)
{
var field = fields;

alert('Hello there');
alert(field.id);
alert(field.maxLength);

}
}

The program is being run anonymously and I get the following message in firefox:

getInputFields is not defined

Line 13

So I added: <script type="text/javascript" src="/profoundui/proddata/js/genie.js"></script>

To the start.html

Now I get the following message in firefox:

a is null

Line 315

Also, I am not sure how to check what is in the “user defined data”.

[Alex]

getInputFields() is a Genie-specific API. Adding genie.js to start.html would not work. However, you should be able to use something like the following instead:

Code: Select all

var fields = pui.runtimeContainer.getElementsByTagName("input")

To retrieve user defined data, you can use the following expression:

Code: Select all

field.properties["user defined data"]