[buddypress-trac] [BuddyPress Trac] #7613: xprofile field "description" placement inconsistency

[buddypress-trac]

#7613: xprofile field "description" placement inconsistency
------------------------------+------------------------------
 Reporter:  sbrajesh          |       Owner:
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Extended Profile  |     Version:  2.9.0
 Severity:  major             |  Resolution:
 Keywords:                    |
------------------------------+------------------------------

Comment (by mercime):

 Hi @sbrajesh. I'm sorry that the accessibility and usability improvements
 done in #7348 to the xProfile Fields has caused you some headaches :(

 Close proximity of the descriptions to the respective form fields is
 necessary to provide logical connections of related form elements for
 sighted users as well as those using assistive technologies (ATs).

 ATs read the source code of each page in a linear fashion, from top to
 bottom. Before #7348, this is what was read in generic terms for a radio
 field group with an opened profile visibility settings:
 {{{
 Which adjective describes you best? grouping list
 List of 3 items
 bullet, Funny, radio button unchecked
 bullet, Thoughful, radio button unchecked
 bullet, Happy-go-lucky, radio button unchecked
 End of list
 Clear link
 Change button expanded
 Who is allowed to see this field? grouping list
 List of 4 items
 bullet, Everyone, radio button checked
 bullet, Only Me, radio button unchecked
 bullet, All Members, radio button unchecked
 bullet, My Friends, radio button unchecked
 End of list
 Close button
 Description of the first radio button group
 }}}

 Some users can become confused about whether the description is about the
 profile visibility preference (when enabled) and if not, why the
 description is so far away from the profile field. Screen reader users who
 tab through the interface won't even hear/touch/know that there's a
 description associated with the form field.

 #7348 makes the interface more accessible for everyone. For one, moving
 the descriptions right before/after the profile fields improved on the
 connection between description and form field for sighted, keyboard and/or
 AT users. Along with some more improvements in said ticket, here's how
 that radio field group is read now:

 {{{
 Which adjective describes you best? grouping
 Description of this radio button group
 Funny, radio button unchecked
 Thoughtful, radio button unchecked
 Happy-go-lucky, radio button unchecked
 Clear link
 Change button expanded
 Who is allowed to see this field? grouping
 Everyone, radio button checked
 Only Me, radio button unchecked
 All Members, radio button unchecked
 My Friends, radio button unchecked
 Close button
 }}}

 It's cleaner and clearer. Note that there are numerous ATs with different
 versions and settings out there, compatible at different levels with
 different browsers at different configurations and serving different needs
 for different users. For example, some ATs won't read lists as list items
 (bullet) if `list-style:none`, but some do all  the time. Another example
 is that some ATs would read the description as `Paragraph, Description of
 radio button group` while some don't read `paragraph` before the words out
 loud. There are so many permutations that we just do the best we can to
 get it right with semantic elements and improved UI or fix accessibility
 issues for other ATs as they are reported or uncovered.

 Re inconsistencies: Following are the logical and accessible patterns for
 the positioning of the descriptions for the different form fields.

 1. Profile fields with '''single form controls''' like `text`, `number`,
 and `url` input types along with `textarea`, `select box` and `multi
 select box`=> descriptions are placed immediately after respective form
 controls. All single form controls are associated with descriptions via
 the visual proximity of the description to the form control for sighted
 users and `aria-describedby` attributes added for ATs.
 2. Profile fields with '''multiple form controls''' like the `radio
 buttons`, `checkboxes`, and `dateboxes`=> descriptions with `tabindex="0"`
 are placed immediately before the form controls to improve discoverability
 by sighted, keyboard, and AT users so that they have the necessary
 information before going through the multiple form controls of respective
 fields.

 Thanks for bringing this up. I hope that I've clarified the description
 locations for you. It's all about  improving accessibility for everyone.

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7613#comment:1>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac