[wp-trac] [WordPress Trac] #31522: Quicktags: use aria-label to improve accessibility

[WordPress Trac]

#31522: Quicktags: use aria-label to improve accessibility
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:
     Type:  enhancement                |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Editor                     |    Version:  4.1
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Reported in the last accessibility testers group testing session, see:
 https://make.wordpress.org/accessibility/2015/03/03/test-chat-summary-
 march-2/

 In the "quicktags" buttons in the text editor there's nothing that can be
 read out by screen readers but their "value" attribute. Screen readers
 will read out:
 > b button
 > i button
 > link button
 > b-quote button
 > del button
 > ins button
 > img button
 > ul button
 > ol button
 > li button
 > code button
 > more button
 > close tags button  Close all open tags

 The proposed patch adds `aria-label` attributes, this way buttons will be
 read out:
 > Bold button
 > Italic button
 > Link button
 > Blockquote button
 > Deleted text (strikethrough) button
 > Added text button
 > Image button
 > Bulleted list button
 > Numbered list button
 > List item button
 > Code button
 > Insert Read More tag button
 > Close all open tags button

 Also, removes the title attribute on the "Close tags" button.

 Please notice there are some outstanding issues:

 "del" and "ins" tags are used in a not-semantic way: they're meant to mark
 up additions and deletions (like in document revisions) and instead
 they're used as "strikethrough" and "highlight" text.

 As far as I can see, TinyMCE doesn't have "ins".

 Moreover, while TinyMCE adds just the "del" tag, quicktags.js add also the
 "datetime" attribute which is perfectly OK and enforces the semantic
 meaning of the tags so they would really mean "deleted text, added text
 and when they were deleted/added" but then they're used for visual
 purposes.
 {{{
 TinyMCE:
 <del>text</del>

 quicktags:
 <del datetime="2015-03-04T16:19:27+00:00">text</del>
 <ins datetime="2015-03-04T16:19:27+00:00">text</ins>
 }}}

 Thus, there's inconsistency with TinyMCE and I'm not sure which label text
 would be more appropriate. Open to suggestions, there should be parity
 with TinyMCE.

 Worth noting that using "strong" and "em" for "bold" and "italic" is not
 perfectly semantic too.

 Finally, I'm not sure the current text for the "Close tag" label (formerly
 the title attribute) is appropriate for what that button really does:
 `Close all open tags`
 maybe should be
 `Close last inserted open tag` ?

 Any thoughts more than welcome.

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