whatwg / whatwg.org

The WHATWG website and other static resources
https://whatwg.org/
Other
76 stars 50 forks source link

Confusing UI for `<details>` in the Participant Agreement #400

Open zcorpan opened 2 years ago

zcorpan commented 2 years ago

In https://github.com/whatwg/html/pull/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 https://github.com/whatwg/html/issues/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:

Screenshot, two lines with a leading triangle and the text 'If signing as an Individual' where 'Individual' is a link, and similarly for 'Entity'.

Straw person proposal:

Screenshot, same as above but without the links. Above the details widgets, a radio button group 'Sign as (radio button) Individual (radio button) Entity' and a paragraph saying 'For reference, refer to the definitions for Individual and Entity.' with 'Individual' and 'Entity' being links.
domenic commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.

A screenshot of the signature section of the Participant Agreement. In that image, there are no links. Everything is in one action.

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

A screenshot of an entity form in the Participant Agreement with the green square. The green square highlighted the statement for people who signed it.

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.

A screenshot of the signature section of the Participant Agreement with a new style. The links have normal font-weight, while the rest are bold.

smellygoat1 commented 5 months ago

It makes sense, but click the triangle for more information, it is not confusing

janbrasna commented 3 months ago

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:)

(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.)