backdrop
[UX] Limit the length of form element description text to keep it readable.
Description of the bug
Form description text is often a smaller font than default text, and with a large page-width it can often be very hard for some of us to read. We are most comfortable with an 80-100 character limit on lines, WCAG states that it should be limited it to 80.
Where to see the problem
- Edit any node
- Open the vertical tab for
URL settings - Inspect the description text for
URL alias
Recommended solution
In our admin theme, we should add width-restrictions on description text for all form elements.
if we set the min-width to 572px, that will exactly match the width of a 60 character text input field (the most common size), and will limit the number of characters in the description to 81. We could also write this as 35.75rem or 38.75em.
Because this is going to make more wrapping in description text, we should also increase the description text line-height to the minimum of 1.5em, to meet WCAG 2.0
Additional information
Add any other information that could help, such as:
- Backdrop CMS version: 1.30.x
This is a follow-up to https://github.com/backdrop/backdrop-issues/issues/6845
I like the suggestion, but I think the URL alias input field has a width of 511px, not 572. I've checked this using Chrome in the PR sandbox and on a vanilla Demo site. @jenlampton - could the difference be browser (setting) related?
Screenshot:
This has very far-reaching effects, since it affects all form elements within Seven. Here's the configuration form for the "Body" field as another example:
After:
Before:
Perhaps it's because the wrapping is new and unfamiliar, but I feel like some text is actually less-legible than before. For example the list of allowed tags, or the summary within fieldsets. It feels weird that they wrap when the parent wrappers are substantially wider.
This has very far-reaching effects, since it affects all form elements within Seven. (...) Here's the configuration form for the "Body" field as another example (...) I feel like some text is actually less-legible than before. For example the list of allowed tags, or the summary within fieldsets.
I agree, the change is really far-reaching. It's also difficult to find a compromise between the 80 characters per line rule and other design principles. As a pragmatic approach we could set the max-width to 768px, similar to what we did in https://github.com/backdrop/backdrop-issues/issues/6845.
For a better and more consistent look I'd suggest to also reduce the size of textarea elements and to increase the width of input elements to 768px. See the following mockup to get an idea (disclaimer: help text styling improved as well).
Thanks @olafgrabienski, nice screenshot there for demonstration. What I think would be a reasonable (and easier) alternative might be either adding a wrapper or using an existing one to limit the entire form to more narrow width. However, this would also have major implications. And not all forms make sense to limit in this way (like listing forms with bulk operations should use as much space as is available). This is a tricky problem to solve universally.