Form hints (description) should be rendered above the input, not below

[thomasmassmann]

The default widget template in Plone (implemented in https://github.com/plone/plone.app.z3cform/blob/master/plone/app/z3cform/templates/widget.pt) has some accessibility issues:

The current template is based on the Bootstrap 5 markup, and there the hints are below the input, linked with an aria-describedby (https://getbootstrap.com/docs/5.1/forms/overview/#form-text). While the linked information is a good start for screenreader users, it might cause problems for sighted users with complex and longer widgets: if the hint is placed below the input, the information gets disconnected (it is not immediately visible) and might not be recognized and overseen by users. People using a zoomed representation of the form or screen magnifiers, or people with limited visibility might miss the form hint.

Best practices have shown that the form hint should be placed between label and input. See also https://formspree.io/blog/accessible-forms/ (at “2. Use a Clear Visual Label—Not Placeholder Text”).

In his book “Form Design Patterns” Adam Silver also places all form hints for a field above the input: