search

cds-snc / node-starter-app

Quick start application setup.... because you have to start somewhere.
MIT License
5 stars 3 forks source link

Required fields markers #98

Closed CalvinRodo closed 4 years ago

CalvinRodo commented 4 years ago

So while the Form Design from Zero to Hero blog post states that you shouldn't mark fields as required it is a requirement at ESDC to pass our accessibility guidelines.

And while the success criterion for 3.3.2 states that:

G131: Providing descriptive labels AND one of the following:

  • ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls (ARIA)
  • ARIA9: Using aria-labelledby to concatenate a label from several text nodes (ARIA)
  • ARIA17: Using grouping roles to identify related form controls (ARIA)
  • G89: Providing expected data format and example
  • G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input
  • G162: Positioning labels to maximize predictability of relationships
  • G83: Providing text descriptions to identify required fields that were not completed
  • H90: Indicating required form controls using label or legend (HTML)
  • FLASH10: Indicating required form controls in Flash (Flash)
  • PDF5: Indicating required form controls in PDF forms (PDF)

We don't have the luxury of not having required fields, so would be nice to have them in the starter-app or at least the option to render them for those that can exclude them.

timarney commented 4 years ago

Thanks @CalvinRodo happy to accommodate. In practice what does this typically look like for your forms (screenshot would help).

i.e. not seeing them in bio metrics app i.e.

Screen Shot 2019-10-08 at 12 15 47 PM

I would be very much for a minimum making that an option - but ideally something that works for everyone.

cc: @JuliannaR

timarney commented 4 years ago

More like this perhaps

http://www.cic.gc.ca/english/passport/map/map.asp

Screen Shot 2019-10-08 at 12 20 57 PM
CalvinRodo commented 4 years ago

The web experience toolkit style guide is a good example for our stuff since that's what most of our stuff is built on.

Their form validation demo outlines how our forms look https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html

The biometric scheduler needs some work to align with ESDC standards.

timarney commented 4 years ago

Noting this pattern from GOV.UK

https://govuk-elements.herokuapp.com/form-elements/#form-optional-fields

cc: @obrien-j 

- if you do ask for optional information, mark the labels of optional fields with ‘(optional)’
- don’t mark mandatory fields with asterisks

Will look at what making that an option available as opt-in to would look like.

timarney commented 4 years ago

@willeybryan flagging this as a todo item after yesterdays chat with @JuliannaR .

We'll plan to make this available as an option.

Noting per Julianna it's easier for screen readers users find the required fields if they are marked as such vs 1. not revealing until clicked or 2. marking optional fields.

timarney commented 4 years ago

PR merged here: https://github.com/cds-snc/node-starter-app/pull/107