Proposal for adding ARIA parsing rules

[rahimabdi]

Description of bug or feature request

During the Jan 4 2024 ARIA WG meeting, we discussed the following issue around unconventional nested ARIA heading markup and expected AT experience for what is likely an authoring error:

Web devs attempt to nest headings; what to do? (#2086)

For the group's consideration, should we have parsing guidance to provide some level of markup error handling and ensure ARIA markup minimizes authoring errors? Parity between native HTML and ARIA markup errors would be desirable so adopting analogous HTML validation rules seems sensible. Besides proper ARIA heading nesting, a couple other examples that could benefit from prescriptive guidance:

• Improper nesting of interactive elements:
  • Button nested in a link: <span role="link"><span role="button"></span></span> (fails HTML validation)
  • Link nested in a button: <span role="button"><span role="link"></span></span> (passes HTML validation but shouldn't)
• Improper landmark usage
  • Main landmark inside another main: <span role="main"><span role="main"></span></span> (passes HTML validation but shouldn't)

Perhaps it could be sufficient to simply state that ARIA markup validity should align with its host language equivalent? If there is agreement, related issues could also be tracked via a parsing GitHub label.

Note: The examples above were tested using the W3C Markup Validation Service.

Will this require a change to CORE-AAM?

No.

Will this require a change to the ARIA authoring guide?

No.

[cookiecrook]

Also mentioned in the WG call:

• https://www.w3.org/WAI/WCAG21/Understanding/parsing.html
• https://adrianroselli.com/2022/12/the-411-on-4-1-1.html

[giacomo-petri]

According to the WG call discussion, I'm adding an example of nested interactive elements resulting in a parsing HTML issues, together with the same example but with a peculiarity, as it is generated using JavaScript.

Example 1. The HTML code:

<a href="#a">Test0<a href="#b">Test1</a></a>

is computed by the browser as two consecutive non-nested links:

<a href="#a">Test0</a><a href="#b">Test1</a>

---

However, when a link is dynamically injected into another using JavaScript, the scenario changes. In this case, the link elements remain nested.

Example 2. The HTML code:

<a href="#a">Test0</a>

<script>
    const link = document.createElement("a");
    link.href = "#b";
    link.textContent = "Test1";
    document.querySelector("a").appendChild(link);
</script>

results in the following

<a href="#a">Test0<a href="#b">Test1</a></a>

[spectranaut]

Minutes from today's meeting: https://www.w3.org/2024/01/18-aria-minutes.html#t06

After Rahim looks into this a bit more, with more examples, we will have a deep dive discussion.