[wp-trac] [WordPress Trac] #27642: Keyboard Accessibility for TinyMCE image panel

[WordPress Trac]

#27642: Keyboard Accessibility for TinyMCE image panel
--------------------------+-----------------------------
 Reporter:  joedolson     |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Future Release
Component:  TinyMCE       |     Version:  3.9
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  accessibility
--------------------------+-----------------------------

Comment (by azaozz):

 Replying to [comment:10 rianrietveld]:
 > In the WYSIWYG editor there is now way, after selecting an image, to
 enter the options to edit the Image Details panel using a keyboard or
 screen reader only.  Also the options to align an image are unreachable.

 This is no longer the case. After an image is selected the user can press
 Alt+F8 to move the focus to the new image toolbar, Alt+F9 to move to the
 TinyMCE menu (if shown), Alt+F10 to move the the editor toolbar.

 Once the first toolbar button is highlighted, the focus can be moved to
 the next/previous button with the arrow keys. This works in the image
 toolbar too. Buttons are activated by pressing Enter or the space bar.

 > The real issue is editing the image details (alt text, caption, size,
 advanced options): once an image is inserted into the editor, mouse users
 can simply select it and click on the "pencil" icon, keyboard users have
 no options.

 Keyboard users can select an image the same way as any other text:
 Shift+Left Arrow. This is a bit quirky in some browsers but generally
 works. There are several other "standard" shortcuts when working with text
 using the Ctrl/Cmd, Alt and Shift keys plus the arrow keys. Note that
 these are implemented by the browsers so some have better support than
 others.

 To edit the image details without using a mouse:
 1. Focus the editor.
 2. Place the caret in front of the image using the arrow keys.
 3. Press Shift+Left Arrow to select the image.
 4. Press Alt+F8 to move focus to the image toolbar.
 5. Select the "pencil" icon with the arrow keys and press Enter/Space bar
 to open the modal.

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