Update guidance to encourage labeling required fields

[thisisdano]

In most forms we should encourage teams to label required fields. More context and backup here: https://github.com/uswds/uswds/issues/3295. For this Issue, conduct research and compile a findings report to support this change.

First Week of Sprint

• [x] #1354

[jaclinec]

After recent discussions about this issue, we decided to dig further into a couple of questions:

1. Get to the bottom of WCAG guidance. What does it say? Does it give exceptions (What about simple forms with one or two fields such as login pages?)?
2. What are the best practices from a usability standpoint on whether exceptions should be made for calling out required form fields?

Next steps:

• [x] Document what we have now on the site/what’s recommended and where
• [x] Review previous research done, revisit other design systems referenced to see what current guidance is
• [x] Review WCAG guidance
• [x] Review best practices from a UX standpoint on this issue
• [x] Present prelim findings to team and Dan
• [x] Write up findings and make a recommendation

[jaclinec]

After sharing preliminary findings with Dan, the guidance on whether to label required fields on login pages was still unclear from the sources consulted during this research. So we decided to reach out to the Login.gov team to ask about their approach to labeling required fields on login pages (and if they had any major discussions or research to support it).

I found out they don't mark required fields on the login page, saying that most users expect those fields to be required, but they have not had any significant discussions or done any research around it.

[jaclinec]

Based on the review of WCAG guidelines, consulting sources for UX best practices, and further discussions with the team, here is the recommendation for labeling required fields guidance.

USWDS RECOMMENDATION:

Be explicit about whether a field is required or optional. Always mark required fields as required by using a red asterisk () combined with a text description at the top of the form instructing the user of its meaning (e.g. “A red asterisk () indicates a required field”). One-field forms are the exception and do not need to be marked with a required label or symbol.

Add the required attribute to form controls programmatically (HTML5 and ARIA required attributes for labels).

Mark optional fields with the optional label within parentheses: (optional).

Link to research document for more details.

[jaclinec]

The work for this issue is complete. Updates to guidance and templates on the website are detailed in issue #1832