Let's use this wiki page to share and tweak proposed designs for accessible form field identification.
The issue queue discussion in issue #447816 comment #260 raised a lot of questions. Let's try to develop a design that handles all the cases discussed. Once we have consensus and the Accessibility and UX teams give feedback, we can then open a new issue with a more concise plan of action and roll patches. Let's get this done for D8!
Case 1: A simple, very short form
Description: The screenshot shows a "Request new password" form where the user has entered an e-mail address that is not recognized. So the $messages area at the top of the page shows the complete error text, "Sorry, email@example.com is not recognized as a username or e-mail address". Lower on the form, the 'Username or e-mail address' field is surrounded by a red box and text next to the label says, "Error (show)". The word 'show' is a link which shows the complete error text in place when activated.
Clicking the 'show' link displays the full error:
When the 'show' link is activated, the full error text is displayed in place next to the field label.
Case 2: A very long form
Description: The screenshot shows a very long "Site information" form where the 'Default 404 page' field has an error near the bottom of the form. As before, the $messages area at the top of the page shows the complete error text, "The page /path/to/404 is either invalid or you do not have access to it". Six fields down on the form, the 'Default 404 page' field is surrounded by a red box and text next to the label says, "Error (show)". As before, if that link were activated the full error text would be displayed in place.
Case 3: Multiple errors, some #required fields and other validation errors
Description: The screenshot shows the 'Add person' admin page submitted with 2 errors. The $messages area says, "2 Errors: E-mail address and Password". Each of those field names is a link to the field. Lower on the form each of those fields has a red box around it and an indication of the complete error is next to each field's label. So the 'E-mail address' field says "Error: E-mail address is required". The 'Password' field says "Error: The specified passwords do not match".
Case 4: AJAX/AHAH interaction operations
Case 5: Combined form elements (e.g., password confirmation widget)
As illustrated in Case 3 above, the error message text only appears once at the first occurrence. The same error should not be repeated on the 'Password' and 'Confirm password' fields or any multi-part form fields.
Case 6: Visually constrained forms (e.g., user login block)
Description: The screenshot shows the User login form in a block. The $messages area says, "Sorry, unrecognized username or password". The Username field has a red box and the error text that says, "Error (show)". As before, 'show' is a link to display the full error in place.
When the 'show' link is activated, the full error text is displayed in place next to the field label. This is especially helpful for visually-constrained forms or users working on a mobile device where the $messages area may be off-screen at the time:
Case 7: Forms without connection to primary messages output area (e.g., forms in blocks)
Case 6 immediately above provides an example of this. A form in a block will still have a short textual error indication next to the field label. It will start out saying "Error (show)" and when the 'show' link is clicked the full error text is displayed. Users on a mobile device may use this error message and never see the $messages error because of layout placement determined by the theme.
Case 8: Form elements following a strict presentation standard (e.g., textarea, text-format-enhanced text area)
Description: Errors in textareas are treated the same way. As shown in the mockup above, a single error is reported at the top in the $messages and the field itself is surrounded by a red box and has "Error (show)" next to the label.
Case 9: Long form elements in height (scrolling the error message out of the viewport)
Description: When a field with an error is scrolled partly off the screen, the red box the whole way around it helps to give a visual clue for sighted users that the portion of the field they are seeing is a field with an error.
(feel free to click Edit and add your own comments or ideas to this wiki page)