No error messages

[plousia]

When attempting to submit the demo form with no checkboxes selected, or the incorrect number of checkboxes, no error messages are given.

What I'd recommend:

On form submit, generate error messages for each fieldset with an error. Each error should have a unique ID. Associate the errors with their fieldsets using aria-describedby. Display the errors at the top of the fieldset, after the legend, as otherwise they might get missed, especially on smaller screens, for magnifier users, and/or lots of checkboxes. Programmatically focus the first input in the first fieldset with an error on form submit (this might not be the right way to go I suppose as this could be part of a longer form and there might be inputs before it with errors).

[aarongustafson]

Are you talking about server side errors? If so, that should be managed separately.

If you aren't seeing errors in the client / browser when the conditions aren't meet, can you provide details of browser & version, os & version, etc. so I can debug?

[plousia]

Client/browser.

For sure. I just did a quick test on Brave browser, 1.67.123 Chromium: 126.0.6478.126 (Official Build) (64-bit). Windows 10.

[aarongustafson]

Thanks for this. I’ll look to track down a Win10 VM so I can test.

[aarongustafson]

I just ran a test in 1.67.1434 for macOS and Win10 the validation is working:

@plousia Are you still not seeing the browser intervene to enforce the validation behavior?

[plousia]

Huh. That's an odd one. Nope, I've just tried in Edge, Chrome and Firefox as well as the original Brave (all on Win10) and still nothing except on the email address field.

[aarongustafson]

So strange. I have tested on Chrome, Firefox & Brave on Win10 (I’m waiting for an OS update to get the latest Edge on my Win10 test machine) with no issues. A few follow up questions for clarification:

• Are you able to submit the form once you correct the email error? In-built browser validation works on a first-error-encountered reporting model (rather than highlighting all errors at once), so it wouldn’t report the first issue with the checkboxes until the email field is valid. If the form submits without error once the email validation is remediated, something is for sure not right. The invalidation code should block submission (and does in my testing in those same browsers).
• Are you getting any errors in the JavaScript console? This could help with diagnosis.
• Are you relying on NVDA to receive the error or are you able to visually see the error indication in these browsers? I’m piggybacking on the browser’s validation API and assumed it would pipe through the invalid status without me needing to invoke ARIA attributes, but perhaps I need to manually handle that as well.
• Are you running any browser plugins? I’ve seen them occasionally wreak havoc on JS-driven interfaces and I may need to some additional hardening of my code to keep it from being interfered with.

[plousia]

Ah, you're using in-browser validation. I did realize you were using it on the email field but I thought maybe that was just because it wasn't one of the checkbox fields.

In that case I'd say the issue is using in-browser error handling; it has quite a few accessibility issues and when doing audits I always flag it. I'm happy to go into more detail about what those issues are, but bottom line, I'd recommend custom error handling.

[aarongustafson]

Fair. My preference is to keep things as discrete and as unopinionated as possible. Someone could absolutely plug into the browser API and build their own individual field error reporting on top of it. I don’t want to step on their toes with that as they’ll want it to be consistent across all fields, not just checkbox groups.

That said, maybe there’s a place for a form-error-summary web component that could capture a roll-up of all of the validation errors with the links & such (like you mentioned and as I typically do from the server side). 🤔 I’ll add it to my backlog.

Closing this as it’s not a bug, but rather as-designed.