Confusing UI for <details> in the Participant Agreement

[zcorpan]

In whatwg/html#8241 @tashasyarifah struggled to sign the Participant Agreement because they thought the triangles were bullet points of a list, and clicked the link "Individual" which doesn't expand the <details> but just scrolls up to the definition.

This is confusing UI. We shouldn't use links in <summary> (also see whatwg/html#2272), and the styling could maybe be different to make it more usable.

For example, maybe there could be a radio button group for signing as individual vs entity, and selecting the radio button expands the appropriate <details>.

Currently it looks like this:

Straw person proposal:

[domenic]

This is confusing UI. We shouldn't use links in <summary> (also see whatwg/html#2272),

I disagree with this; I think the UI is fine as-is in that regard.

Removing triangles if they have confused someone seems fine I guess, but I think disclosure triangles are a pretty common UI pattern...

[zcorpan]

I don't think removing the triangles solves anything. With that as the only change, people would still be tempted to click the link, and then not be aware that they're expected to click the text next to the link to expand an initially invisible form.

[zcorpan]

With my suggested change, the natural next step is to click one of the radio buttons, rather than clicking the links. When you do that, the details opens and then the natural next step is to fill in the now visible form.

[tashasyarifah]

After looking back, I figure out there are two actions that happen in <summary>. First, click the If signing as an individual which opens <details> that have a form. Second, click the link which individual that will scroll up to the definition. Yesterday, I had no idea if there were two actions.

I agree that not to input links in a summary. It might solve the problem. So, it will open the form automatically when people click it. It will look like this.

For the definition, might be we can give the reference or statement like in the Entity form.

Other suggestions will be to change the style for links in a <summary>. We can see that the font-weight are bold. It seems like no difference between them. Try to change font-weight for links to normal. There will be a significant difference. People will focus on bold text and might realize that the links are additional information. Here's the picture of what it looks like.

[janbrasna]

Due to the reality how various AT handle the interactive elements inside a button role (plaintext), it can happen that screen readers not only don't present the link as a link, but some even remove the link text entirely, making the two summaries read out as "signature … if signing as an … if signing for an", leaving out the most important bit.

A good quick fix would be just rewording these two summaries to better capture the affordance, and separate the interactive links to definitions to a degree it doesn't get in a way to complete the form:

---

Signature (select the appropriate form:)

• I'm signing as an Individual (see Individual definition above)
• I'm signing for an Entity (see Entity definition above)

---

(or moving the definitions inside the details as OP suggested above; which could nonetheless still make use of some of the more-CTA-esque wording here, to better show the summary as a binary toggle to complete the form.)