[buddypress-trac] [BuddyPress Trac] #7348: Accessibility: Group related form elements within fieldsets in Profile > Edit screen

[buddypress-trac]

#7348: Accessibility: Group related form elements within fieldsets in Profile >
Edit screen
------------------------------+------------------------------
 Reporter:  mercime           |       Owner:
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Extended Profile  |     Version:
 Severity:  normal            |  Resolution:
 Keywords:                    |
------------------------------+------------------------------

Comment (by rianrietveld):

 Hi,
 Paul Gibbs asked me to look at the proposed structure above and to give my
 opinion. Thanks @mercime for working on accessibility! I totally agree
 with using fieldsets and legends. This makes a form so much more
 understandable for users of assistive technology.

 But also: I think code should be semantic by itself and the use of aria to
 fix non semantic constructions needs to be kept to a minimum. They are not
 working for all assistive technology (AT) the same.

 I'm not familiar with BuddyPress and also don't know how much this code is
 fixed or legacy and if the screen-reader-text class is present in all the
 themes. So, if I'm making totally undoable suggestions, please forgive me
 and please correct me.

 Giving the p.field-visibility-settings-toggle a tab-index=0 maybe not
 necessary: better make the p standalone (inline?) and link it with aria-
 describedby the button. And an aria-label in the button would also be
 nice.
 Screen-reader users can call a list of buttons and then it's nice if the
 button describes the action.

 If there is a button that toggles a hide/visible element, it's nice to
 tell a screen reader what the element is that is toggled and if it's
 expanded or not.
 To make this work the aria-expanded="false" should set to true when the
 div.field-visibility-settings is visible.

 The ul/li construction can go, it just adds more clutter to the code.

 If you have an implicitly label construction the for/id's are not
 necessary:
 {{{
 <label>
   <input type="radio" id="see-field_67_public" name="field_67_visibility"
 value="public">
   <span class="field-visibility-text">Everyone</span>
 </label>
 }}}

 But better: use an explicit label.

 {{{
 <input type="radio" id="see-field_67_public" name="field_67_visibility"
 value="public" checked="checked">
 <label for="see-field_67_public"><span class="field-visibility-text">Only
 Me</span></label>
 }}}

 Then you are certain it works on all devices. See
 [https://make.wordpress.org/core/handbook/best-practices/coding-standards
 /accessibility-coding-standards/ WordPress code standards].



 Here a HTML code example as I think it should be (again, not sure how this
 is legacy code).
 {{{
 <div class="editfield field_67 field_text-field optional-field visibility-
 public field_type_textbox">
         <fieldset>
                 <legend>Text Field options</legend>

                 <label for="field-67">Text Field</label>
                 <input id="field-67" name="field-67" type="text" aria-
 describedby="description-67">
                 <p id="description-67" class="description">Description of
 this text field.</p>

                 <p class="field-visibility-settings-toggle" id="field-
 visibility-settings-toggle-67" id="toggle-text-67">
                         This field can be seen by: <span class="current-
 visibility-level">Everyone</span>
                 </p>
                 <button type="button" class="visibility-toggle-link" aria-
 describedby="toggle-text-67" aria-expanded="false" aria-
 controls="collapsible-67" aria-label="Change visibility of the text
 label">Change</button>

                 <div class="field-visibility-settings" id="field-
 visibility-settings-67" id="collapsible-67">
                         <fieldset>
                                 <legend>Who can see this field?</legend>

                                 <input type="radio" id="see-
 field_67_public" name="field_67_visibility" value="public"
 checked="checked">
                                 <label for="see-field_67_public"><span
 class="field-visibility-text">Only Me</span></label>

                                 <input type="radio" id="see-
 field_67_adminsonly" name="field_67_visibility" value="adminsonly">
                                 <label for="see-field_67_adminsonly"><span
 class="field-visibility-text">Only Me</span></label>

                                 <input type="radio" id="see-
 field_67_loggedin" name="field_67_visibility" value="loggedin">
                                 <label for="see-field_67_loggedin">
 <span class="field-visibility-text">All Members</span></label>

                                 <input type="radio" id="see-
 field_67_friends" name="field_67_visibility" value="friends">
                                 <label for="see-field_67_friends">
 <span class="field-visibility-text">My Friends</span></label>
                         </fieldset>

                         <button type="button" class="field-visibility-
 settings-close" aria-label="Save the visibility of the text
 label">Close</button>
                 </div>
   </fieldset>
 </div>

 }}}


 If you want to hide the <label for="field-67">Text Field</label> you can
 do that with  the screen-reader-class.
 Since ( I think) WP 4.2 this is a [https://codex.wordpress.org/CSS
 WordPress Generated Class]
 so

 {{{
 <label for="field-67" class="screen-reader-text">Text Field</label>
 }}}
 will hide text from screen but not from a screen reader.

 I hope this helps :-)

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