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

Sun Mar 15 09:23:41 UTC 2015

#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       |  Resolution:
 Keywords:  has-patch    |     Focuses:  accessibility, javascript
-------------------------+----------------------------------------

Comment (by rianrietveld):

 Test results from the wapa11y test team:

 '''@gab-nino''': VoiceOver, Safari 8.0.3 on Mac. Chrome (41) for Mac.
 Chrome (39), Windows XP and NVDA.
 All the “quicktags” for the text markup were properly labeled,
 understandable and complete in both NVDA and Safari.

 '''Michelle de Young''': Win8.1/FF/NVDA
 Virtual mode – Was unable to access the action links in the Comments
 section unless the spacebar is used. User does not know they need to do
 that. Sometimes the links list would appear and disappear quickly when the
 spacebar was pressed.
 Forms mode – Was able to access the action links, ‘Edit section’, ‘Quick
 Edit’ section, and the ‘Quick tags’ in the rich text editor.

 Win7/IE/JAWS
 Virtual mode – Action links in the Comments section are not displayed, but
 they are voiced by the screen reader and user is able to access them.
 ‘Enter’ or ‘Spacebar’ opens the editor.
 Forms mode - Was able to access the action links, ‘Edit section’, ‘Quick
 Edit’ section, and the ‘Quick tags’ in the rich text editor.

 Win8.1/Chrome/Chromevox
 Virtual mode – When arrowing to the Comments section in the table and the
 Submitted on date is reached, the list of action links become displayed,
 but when the user arrows past the date the list of links disappears and is
 never read by the screen reader or available to the user. Could not access
 the rich text editor to test the “Quick tags.”
 Forms mode - When tabbing the user can tab to the action links in the
 Comments section and access them. I did notice that if ‘Quick Edit’ is
 selected the user is jumped out of the table and focus is taken to the
 Search box. Could not access the rich text editor to test the “Quick
 tags.”

 Suggestion: Perhaps add an aria-polite to the ‘Quick Edit’ section that’s
 toggles it’s display. User is unaware that something has changed on the
 page, and that their cursor focus was dropped into the rich text editor.

 I can move to the 'Edit' link and use [Enter] to open the  the Edit
 screen. I thought it might be only occurring with internal links, but the
 'Publish Immediately Edit' link is operational.  This leads me to think
 perhaps something is off with the js for the aria status for hidden or
 visible for the items in the Post section.  For the 'Quick Edit' and
 'Reply' Link in the Comments section,  I wonder if there is a similar
 issue.
 When the internal links are selected the user focus should move to what
 was opened on that current screen.  I'm not sure if aria-controls or aria-
 owns would be of benefit in this scenario.

 http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls
 http://www.w3.org/TR/wai-aria/states_and_properties#aria-owns

 Wish I knew if it's a ChromeVox bug or not.

 '''Ruud van den Bercken''':In IE11/supernova 14.04
 I am a somewhat experienced users and never thought that unlabled buttons
 would not be clear for dummies/beginners....
 It never bothered me. In ie11/supernova 14.04 the labels are clear now.

 Note from Rian: Supernova is a screen reader used in Europe.

 '''@Badeyes''': JAWS 14.5 IE 11
 As a coder I dont use the bold, link tabs so I find it tedious having to
 tab through them just to get to the edit field, wouldn't it make more
 sense to have it closed by default and if someone wants to use it they can
 do so, at the very least have the close tab button at the top not at the
 bottom.
 Also, even if I wanted to use it how is a screen reader user supposed to
 insert any of these things in the right place, the minute I go out of the
 edit screen I dont have a clue what is highlighted, or where the cursor
 is.

 '''John Sexton''': Supernova V14 + IE11 + Win7
 Tabbing through the buttons on a new comment reads out the labels but says
 "button" twice.
 Using the cursors to navigate (using auto-dolphin-cursor), gives the same
 result accept the colour button is treated as two separate buttons. The
 first reads out as colour button and the other as just button.
 Interestingly this is the same in either direction.

 The quick edit menu is not obvious in supernova, to activate you have to
 use cursor navigation and press space while over the comment text. Then
 use either cursors or tabs to locate the quick nav menu.
 The buttons on the quick edit screen are read out as:
 when tabbing: bold button, italic button ...
 when using cursors: bold b button, italic I button ...

 Testing NVDA + IE11 + Win7
 Activating the quick edit is not obvious, have to press space while cursor
 focus is over the comment, then press tab to find the link.
 The process is first use cursors to locate the comment text, press space
 while focused over comment text, then tab to quick edit and press enter.
 If just using tabbing it skips over the comment text and if just using
 cursors, it skips over the quick nav menu.
 tabbing through the buttons reads out bold button, italic button ...
 however when cursoring through it reads them all as a single sequence.

 Possible improvements may be to add tabindex=0 to the comment text and
 move focus to the first item of the quick nav menu on users click
 (pressing space).
 Or adding a dedicated quick nav button, that toggles view of the quick nav
 menu for a given comment.

 '''Tobias Clemens Häcker''': ChromeVox, Browser Chrome, Windows7
 I had a hard time understanding the voice output of ChromeVox when using
 bold or italic on the text selection with ctrl + i/b keyboard shortcuts.
 I'm pretty certain that the word bold was not part of the audio output.

 When using alt+F10 to access the buttons directly most of them have the
 same voice output and results of actions (for example: selected text is
 now bold) are not output.

 When testing with with the old nightly version I could not notice any
 difference. This might be due to shortcomings of ChromeVox however.

 Remarks by Rian:
 If this patch works depends on the browser/screen reader combination used.
 And also on the skills of the user.
 It's hard to get it to work and make it usable understandable. This
 definitely needs more work.
 But the patch is an improvement for most screen reader users and it
 doesn't break anything.

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