Re: [csswg-drafts] [selectors] pseudo selector to match forms ValidityState (#1525)

Currently, you need JS and ARIA to associate an input and error message using well-supported features: 
- `aria-describedby` connects 1+ container statically and JS writes the message(s) into the DOM dynamically.
- `aria-describedby` 1+ static, pre-filled error containers get dynamically associated by JS updating the attr value.

The axTree picks up any linked description content even when hidden, so association or message must be dynamic (JS) to be accurate. For this to work with the proposal, JS would need to update the message association. No ARIA proposal needed. This is not a pure CSS solution to inline validation.

```html
<label for=input1>Label</label>
<input id=input1 aria-describedby="{applied by JS}">
<p id=msg1>message 1</p> <!-- visible when CSS matches error condition -->
<p id=msg2>message 2</p>
```

Then there's a less-well-supported technique (looking at you Safari on MacOS):
- `aria-errormessage` statically associates the container(s) and JS applies `aria-invalid` and writes the correct message dynamically.
- `aria-errormessage` dynamically associates the correct message and `aria-invalid` is applied dynamically.

The message can be hidden by CSS and it won't hit the axTree. However, only `aria-invalid` will trigger the axTree update. Since there's only one `aria-invalid` the association is all done in CSS.

```html
<label for=input1>Label</label>
<input id=input1 aria-errormessage="msg1 msg2" aria-invalid="{toggled by JS}">
<p id=msg1>message 1</p> <!-- visible when CSS matches error condition -->
<p id=msg2>message 2</p>
```

IMO, `aria-errormessage` works better with the proposal. But it's not widely supported. If we wanted a pure CSS solution, we'd need `aria-errormessage` to trigger updates to the axTree when the `:invalid` and like classes apply. But if ARIA wanted that, I'm sure they would have gone with `:invalid` from the start. I don't see an ARIA proposal here.

-- 
GitHub Notification of comment by AutoSponge
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1525#issuecomment-4118854373 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 24 March 2026 14:42:19 UTC