Page MenuHomePhabricator

Form validation errors Accessibility Improvements
Closed, ResolvedPublic1 Estimated Story Points

Description

Guide: https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/#in-long-forms

  • Help text is below the fields and is then covered by autocomplete popups.
  • Research scroll to first error vs scroll to first field investigate best practices. What about "reduced motion" setting?
  • aria-live should be applied on form elements when we validate them inline
  • Add aria-describedby to the inputs that point to the error messages when there is a validation error.

Having fiddled with this a bit more I discovered:

  1. Popping up validation errors on submit won't be announced to the screen reader without adding role="alert" and aria-live="assertive"
  2. Once these validation errors appear the last one will be read to the screen reader
  3. This validation message will be read out of context, so for example if the donor didn't selecte a payment method and submitted the screen reader would just announce "What is your preferred payment method?"

So my advice now is:

  1. We add a new alert element that appears above the submit button when there is errors, and lists them. Each item contains an anchor link to allow the donor to skip straight to the invalid field.
  2. Improve the individual validation messages so they can be read in context to the field they're describing.

Event Timeline

AbbanWMDE moved this task from Doing to Todo on the WMDE-FUN-Sprint-2024-05-07 board.
AbbanWMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2024-06-04 board.
kai.nissen changed the point value for this task from 5 to 1.Jun 18 2024, 10:09 AM
AbbanWMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2024-06-18 board.

deployed frontend + application branch (validation summary, contact-response-data) to https://testing06.wikimedia.customers.manitu.net