[wp-trac] [WordPress Trac] #31144: Options general screen, accessibility improvements

[WordPress Trac]

#31144: Options general screen, accessibility improvements
----------------------------+-----------------------------
 Reporter:  afercia         |      Owner:
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  4.1
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 Splitting this out from #29955 see points 2. and 3.

 Basically, the date format and time format radio button labels don't get
 read out by JAWS. It reads out just "radio button checked". Should read
 the label text with the date/time example formats.

 After some testing with IE 8 and JAWS 15, turned out '''when in "form
 mode"''', JAWS doesn't read out the implicit label because there's a
 `<span>` wrapping the label text. So with this HTML:

 {{{
 <label><input type="radio" name="test"> <span>implicit label<span></label>
 }}}

 the label text is just ignored. I guess it make sense: when there's an
 implicit label, IE 8 and JAWS 15 expect to find a text node and instead
 they find a `<span>`. '''Oddly, looks like this happens just for radio
 buttons.'''
 Simple test case: http://codepen.io/afercia/full/BydyKx/

 So, lesson learned: '''never use a span or other elements to wrap a radio
 button implicit label text'''.

 In the proposed patch some more issues addressed:
 - removed spans wrapping implicit radio buttons label: they make JAWS
 ignore the label text
 - updated the JavaScript part related to the ".example" text
 - added 2 missing labels for custom formats text fields
 - added "aria-describedby" for elements with a description paragraph
 - added some screen-reader-text
 - small CSS fixes including spinner position

 Outstanding accessibility issues:

 - moving the focus on the custom format fields makes screen readers skip
 important information
 - try a better association between the "example" date and time (the ones
 changed by JavaScript on radio buttons click) and the input fields
 - the link: "to be different from the directory" it's confusing when read
 out of context, I would propose to change the wording of that sentence and
 use something like "Learn how to give WordPress its own directory".

 Accessibility team testing and any thoughts welcome :)

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