[wp-trac] [WordPress Trac] #31354: Compound settings confusing with screen readers (checkboxes)

[WordPress Trac]

#31354: Compound settings confusing with screen readers (checkboxes)
----------------------------+-----------------------------
 Reporter:  Cheffheid       |      Owner:
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  4.1
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 There are a number of settings in the admin that are made out of multiple
 variables. That is, they combine a checkbox/radio button toggle and a
 value.

 When you can see it, it makes sense because it forms a logical sentence
 and everything works out great.

 When you rely on a screen reader, it doesn't really come across as such
 and there's no link between the different inputs in the setting.

 For example:

 [[Image(http://i.imgur.com/0r0lDSn.png)]]

 As you tab through the different fields, NVDA (with default settings) will
 announce:

 - Break comments into page with - checkbox (not) checked.
 - top level comments per page and the - edit fifty.
 - page displayed by default - combo box last collapsed.

 We need to come up with a pattern that can be applied to split up these
 toggle/value inputs and clear up confusion this may create.

 It would be nice if the inputs for the actual values stay disabled until
 the appropriate toggle is enabled as well (similar to how the home/blog
 static page selectors work).

 This issue concerns the following fields:

 '''On /wp-admin/options-discussion.php:'''
 - Automatically close comments on articles older than X days
 - Enable threaded (nested) comments X levels deep
 - Break comments into pages with X top level comments per page and the X
 page displayed by default.
 - Comments should be displayed with the X comments at the top of each page

 '''On /wp-admin/network/settings.php'''
 - Limit total size of files uploaded to X MB



 Could use input from accessibility and UI teams on how to best tackle
 this. :)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31354>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform