Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Simple Checkbox accessibility issue

Luis CabralOct 9 2014 — edited Oct 12 2014

Hi there,

In Apex 4.2.4 I have a "simple checkbox" column in a tabular form with this definition: Y, (i.e. checked means Y, unchecked means NULL)

The generated markup is this:

<td class="data">

  <label for="f06_0003" class="hideMeButHearMe">PublicAccess?</label>

  <input autocomplete="off" name="f06_NOSUBMIT" value="Y" id="f06_0003_01" onclick="if (this.checked) {apex.jQuery('#f06_0003').val('Y');} else {apex.jQuery('#f06_0003').val('');}" type="checkbox">

  <input autocomplete="off" name="f06" value="" id="f06_0003" type="hidden">

</td>

As you can see, there is a discrepancy between the label "for" attribute and the actual input id. This raises an error in our accessibility checking tool.

I am not an accessibility expert but it looks wrong indeed and seems like a bug to me. Any ideas to fix this?

Thanks

Luis

This post has been answered by fac586 on Oct 10 2014
Jump to Answer

Comments

GhanaApexDeveloper

HI Luis,

your ur question is very vague. What are u trying to achieve please explain further .

Regards,

Benjamin

fac586

GhanaApexDeveloper wrote:

HI Luis,

your ur question is very vague.

On the contrary, it's very clear. APEX version, how to reproduce, code sample, and a concise problem description.

Much easier to understand than "ur" IM speak.

What are u trying to achieve please explain further .

He is trying to ensure that the application complies with the Web Content Accessibility Guidelines by correctly labelling form controls, making it easier for people with disabilities to use.

Labelling the checkbox properly will provide users accessing the page using a screen reader with an audible description of its purpose.

(Contrast this with the confusion that would be generated in screen reader users by your post, as they tried to comprehend the relevance of a Sumerian city-state to the thread...)



fac586
Answer

Luis Cabral wrote:

In Apex 4.2.4 I have a "simple checkbox" column in a tabular form with this definition: Y, (i.e. checked means Y, unchecked means NULL)

The generated markup is this:

<td class="data">

  <label for="f06_0003" class="hideMeButHearMe">PublicAccess?</label>

  <input autocomplete="off" name="f06_NOSUBMIT" value="Y" id="f06_0003_01" onclick="if (this.checked) {apex.jQuery('#f06_0003').val('Y');} else {apex.jQuery('#f06_0003').val('');}" type="checkbox">

  <input autocomplete="off" name="f06" value="" id="f06_0003" type="hidden">

</td>

As you can see, there is a discrepancy between the label "for" attribute and the actual input id. This raises an error in our accessibility checking tool.

I am not an accessibility expert but it looks wrong indeed and seems like a bug to me. Any ideas to fix this?

Very wrong. The HTML specification states that input controls of type hidden are not labelable. This Mozilla bug indicates that browsers (Firefox at least) will ignore such labels. Even if they do you're still left with an unlabelled checkbox. This is clearly a bug. APEX should be setting the for attribute of the label element to the ID of the checkbox:

<label for="f06_0003_01" class="hideMeButHearMe">PublicAccess?</label>

Workarounds:

  • Use a refresh dynamic action to run some JavaScript to set the for attribute correctly.
  • Don't use the built-in simple checkbox control. Generate the equivalent of the code above with the correct labelling as a column in the region source query.
  • Don't use a tabular form.
Marked as Answer by Luis Cabral · Sep 27 2020
Luis Cabral

Thanks Fac for the reply

Not using the simple checkbox control is the way to go I think. Ideally I'd not use tabular forms at all but in this case that is not an option!

This is only one of a few accessibility issues I am encountering with Apex. It surprises me that, for such a mature product, obvious bugs like this are still present.

Cheers

Luis

1 - 4
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Nov 9 2014
Added on Oct 9 2014
4 comments
1,377 views