a11y Updates Requested PR-5.4-dev Pending

User tests: Successful: Unsuccessful:

avatar alwaysalearner1234
alwaysalearner1234
15 Aug 2026

Pull Request resolves #48243 .

  • I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

This PR fixes accessibility issues reported in Issue #48243 where structural and non-standard fields (specifically Spacer and Captcha) generate invalid <label> markup.

Root cause:
These fields were rendering <label> tags that were either missing a for="..." attribute or pointing to a DOM ID that did not exist (since structural elements and JS widgets do not render standard <input id="..."> controls). This triggers "label not associated with a form control" warnings in developer consoles and accessibility testing tools.

Changes:

  1. renderlabel.php Layout: Detects if the $for attribute is empty. If it is, it outputs a <span> instead of a <label>, ensuring semantic validity while preserving styling. It also accepts a predefined $id variable instead of enforcing $for . '-lbl'.
  2. CaptchaField: Overrides getLabel() to pass an empty string for the for attribute and passes the id explicitly, triggering the new <span> behavior since the JS captcha widget doesn't render a matching input ID.
  3. SpacerField: Modifies the hardcoded label string generation to natively output a <span> element instead of a <label>, as spacer fields act strictly as structural dividers.

Testing Instructions

  1. Configure a Joomla site with a com_contact menu item.
  2. Enable a Captcha plugin (if available) and assign it to the contact form.
  3. Navigate to the Contact form on the frontend.
  4. Inspect the developer console and run an accessibility checker (e.g. Lighthouse, WAVE, or Axe).

Actual result BEFORE applying this Pull Request

  • <label> tags are incorrectly used for elements that are not form controls, causing accessibility validation errors: "A form label must be associated with a control".

Expected result AFTER applying this Pull Request

  • No accessibility console errors regarding jform_spacer-lbl or jform_captcha-lbl.
  • The visual styling and layout of the spacer and captcha fields remain identical.
  • The HTML inspector shows that the "labels" for these elements are now properly rendered as <span> tags rather than invalid <label> tags.

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:

  • No documentation changes for guide.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

avatar alwaysalearner1234 alwaysalearner1234 - open - 15 Aug 2026
avatar alwaysalearner1234 alwaysalearner1234 - change - 15 Aug 2026
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 15 Aug 2026
Category ⇒ Layout Libraries
avatar richard67
richard67 - comment - 15 Aug 2026

@alwaysalearner1234 Please stick with the pull request template.

You have removed the AI policy confirmation. Please add that back and check the check box to confirm the AI policy.

In addition, please add a Pull Request resolves #48243 . to the top so the issue is correctly referenced. That was also a part of the pull request template which you have removed.

Please check and fix.

Thanks in advance.

avatar alwaysalearner1234 alwaysalearner1234 - change - 15 Aug 2026
The description was changed
avatar alwaysalearner1234 alwaysalearner1234 - edited - 15 Aug 2026
avatar alwaysalearner1234 alwaysalearner1234 - change - 15 Aug 2026
Labels Added: PR-5.4-dev
avatar tecpromotion tecpromotion - change - 16 Aug 2026
Title
…
Fix accessibility warnings for Spacer and Captcha form labels
[5.4] Fix accessibility warnings for Spacer and Captcha form labels
avatar tecpromotion tecpromotion - edited - 16 Aug 2026
avatar drmenzelit
drmenzelit - comment - 16 Aug 2026

A span instead of a label for the spacer could be correct, but the captcha is an input element and needs a label

avatar alwaysalearner1234 alwaysalearner1234 - change - 16 Aug 2026
Labels Added: a11y
avatar brianteeman
brianteeman - comment - 17 Aug 2026

before this pr

image

after this pr

image
avatar alwaysalearner1234 alwaysalearner1234 - change - 18 Aug 2026
Labels Added: Updates Requested
avatar brianteeman brianteeman - test_item - 18 Aug 2026 - Tested successfully
avatar brianteeman
brianteeman - comment - 18 Aug 2026

I have tested this item ✅ successfully on c37a232


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48244.

avatar brianteeman
brianteeman - comment - 18 Aug 2026

I have tested this item ✅ successfully on c37a232


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48244.

avatar aproxdev aproxdev - test_item - 22 Aug 2026 - Not tested
avatar aproxdev
aproxdev - comment - 22 Aug 2026

I have not tested this item.

Label is fixed on spacer when using any captcha. When using Aimy Captcha-Less the original problem still exists.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48244.

avatar aproxdev
aproxdev - comment - 22 Aug 2026

I have not tested this item.

Label is fixed on spacer when using any captcha. When using Aimy Captcha-Less the original problem still exists.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48244.

avatar brianteeman
brianteeman - comment - 25 Aug 2026

I am changing my result as it doesnt resolve the issue for all captcha plugins

FriendlyCaptcha ✖️
HashCash ✖️
JOfun ✖️
Q & A ✔️

avatar brianteeman brianteeman - alter_testresult - 25 Aug 2026 - brianteeman: Not tested

Add a Comment

Login with GitHub to post a comment