[wp-trac] [WordPress Trac] #41872: Minor accessibility improvements to the CodeMirror editing areas

[WordPress Trac]

#41872: Minor accessibility improvements to the CodeMirror editing areas
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  melchoyce
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.9
Component:  Customize                |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots                        |  administration
-------------------------------------+-------------------------------------

Comment (by afercia):

 Trying to keep the Help text as an unordered list and at the same time
 using this text as target for `aria-describedby` is not so easy because
 the text is composed by separate strings (and elements):

 [[Image(https://cldup.com/8rHGjEmEfK.png)]]

 There are basically two options:
 - wrap the whole Help text within a container with an ID and target the
 wrapper using `aria-describedby="wrapper-ID"`: this doesn't work
 consistently across various browsers/screen readers combinations, see test
 results below
 - `aria-describedby` accepts multiple IDs so can target multiple elements;
 this would require to use a unique ID on each element of the Help text and
 target them this way: `aria-describedby="element-1 element-2 element-3
 element-4"`; this works with all combos I've tested with, but it's not so
 clean in terms of code, especially for the JavaScript part

 However, there's one more important concern: translations. Ideally,
 messages that are meaningful as a whole, shouldn't be split in separate
 strings. Splitting a string, increases the chances the whole message will
 be translated inconsistently and should be avoided. Feedback from the
 polyglots team would be very appreciated.

 Test results: for the ones who want to have some fun testing with screen
 readers, I've prepared 3 codepens:

 Test aria-describedby targeting parent element with multiple children
 https://codepen.io/afercia/full/XeJxwB

 Test aria-describedby targeting parent element (hidden with display none)
 with multiple children
 https://codepen.io/afercia/full/YrPdmj/

 Test aria-describedby targeting multiple elements
 https://codepen.io/afercia/full/BwyGNp

 Safari + VoiceOver have a very weird behavior, where also the visibility
 of the help text plays a role. When targeting the wrapper, the whole text
 gets announced only if it's hidden with `display: none`. Instead, when
 it's visible, only the first sentence gets read out. For clarity, I've
 made a short video:

 https://cloudup.com/cCcpmOxRjqi

 Conclusion: I'd recommend to keep it simple and use just a single element
 (a paragraph). Worth also noting the Help text should be the same in 4
 different places, and when used in the admin pages Help tabs, a list might
 not look so nice: depending on the screen width and translations, there's
 the chance the text will wrap producing a few "widows", for example:

 [[Image(https://cldup.com/ncnV-TE9hp.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/41872#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform