Contact Form 7 Code creates Accessibility Failure

denmanwall2016
(@denmanwall2016)

3 months, 3 weeks ago
It looks like recent code updates create an accessibility error. Recent as in we never used to see this error in scans.

In the code:
```
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
```
The empty <ul></ul> is triggering the following Accessibility failure.

ul elements must contain either an li element or an element with role=listitem and must not contain elements with other roles.

Owned roles: no owned roles

Viewing 6 replies - 1 through 6 (of 6 total)

ytsuyuzaki
(@ytsuyuzaki)

3 months, 3 weeks ago

I checked the output in Contact Form 7, and it looks like this markup has been the same since around version 5.3.

According to the release notes here:
https://github.com/rocklobster-in/contact-form-7/releases/tag/v5.3

As far as I can see, the CF7 code itself hasn’t really changed since around 2020, and the empty <ul></ul> has been there for quite a long time.

Could you share which accessibility scanning tool is reporting this issue?
It might be that CF7 hasn’t changed, but the requirements or rules used by the scanning tool (or general HTML accessibility expectations) have become stricter over time.

Thread Starter denmanwall2016
(@denmanwall2016)

3 months, 3 weeks ago

I am using PowerMapper (SortSite 6). It’s probably that the accessibility requirements have become more strict. In my scans prior to September 2025, the empty UL issue did not get flagged.

https://www.powermapper.com/

Also, can you advise if the screen reader response is generated as <li></li> items? One of my thoughts is that, if WCAG requirements have gotten more strict, perhaps stripping the empty<ul></lul> code could work?

ytsuyuzaki
(@ytsuyuzaki)

3 months, 3 weeks ago

Thanks for sharing the scanning tool. I wasn’t familiar with PowerMapper / SortSite, so I’ll try it out on some sites I manage as well.

The relevant code for this output is here:
https://github.com/rocklobster-in/contact-form-7/blob/v5.3/includes/contact-form.php#L538

The HTML is generated by the screen_reader_response() function, which creates the <ul> element even when there are no <li> child elements yet. That generated markup is then inserted here:
https://github.com/rocklobster-in/contact-form-7/blob/v5.3/includes/contact-form.php#L354

For reference, the same function and structure are still present in the latest version (v6.1.4) as well:
https://github.com/rocklobster-in/contact-form-7/blob/v6.1.4/includes/contact-form.php#L786

Thread Starter denmanwall2016
(@denmanwall2016)

3 months, 3 weeks ago

Thanks. Please let me know the outcome of your review using PowerMapper / SortSite and if a fix is advised.

Thread Starter denmanwall2016
(@denmanwall2016)

3 months, 3 weeks ago

Also, what would happen if we simply remove the empty <ul></ul> from the code?

seanr1978
(@seanr1978)

3 months ago

I looked into this myself and there is no easy way to fix it. Just removing the UL tags won’t work because when the form is submitted, the JavaScript (which unfortunately is minified) looks for that element for the AJAX stuff. With JS off, the form would submit and print errors, but then you’d have LI elements not in a UL. This really needs a proper fix from the developer

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.