Keyboard Accessibility for TinyMCE image panel

[joedolson]

Related: #24409

There is no way to access the controls for modifying image insertion characteristics from the keyboard, and therefore also for screen readers.

Once the TinyMCE Edit Image panel is opened, keyboard and screen reader access is almost perfect, with the exception that a) the user can tab out of the modal and b) the 'Close' button is not included in the tab focus order. The modal should also be closable using the Esc key. These are relatively minor issues.

The greater issue is whether it's possible to access the modal from the keyboard, which means making the controls for the image keyboard focusable.

This issue also references tickets #25100, #25101, #25102, #25103 and #25105; with the add media panel issues at present, it's not possible to insert an image at all unless you're sighted and using a mouse.

[helen]

Attached a screenshot above - this modal shifted a fair bit toward the end of 3.9 development, so it may not be the same as it was. Testing now, tabbing seems to be contained and esc closes it. Can you re-test for what issues remain or are new? I can't seem to use the keyboard to action into this view at all, actually, but it's possible I'm missing something.

[joedolson]

The close button is now in tab order, but it's textless, so it would just be read as a blank link by screen readers; it should have screen-reader-text to provide a label for screen readers. ESC works to close.

I'm not seeing that the tab order is contained; I can still tab out of the modal (Chrome current).

And yes, there's still no way to trigger the modal from the keyboard.

I can select the image, by moving the cursor before it and using shift right-arrow to select, and that triggers the resize points, but doesn't give me any keyboard access that I can find.

[DrewAPicture]

helen: "can't get to that modal by keyboard alone right now."

Also, no patch. Punting for now.

[joedolson]

At the moment, the root issue on this ticket is still very important: there's no way to add captions using a keyboard. This is because the only path to add subtitles/captions is by opening this media modal, which can only be done by clicking on the visual editor image insert for a video.

I'm open to raising that as a new ticket or by revising this one, but recommend against closing this ticket.

[rianrietveld]

This issue still exists in WP 4.1 beta 1 with the new .

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.
Also NVDA doesn't give any indication that there is a way to enter alignment options or edit the image.

[afercia]

Basically this issue still applies to the new TinyMCE "image toolbar", see #30147 which is not usable with the keyboard. For image alignment, there are some keyboard shortcuts:

• Alt+Shift+L align left
• Alt+Shift+C align center
• Alt+Shift+R align right

though I doubt users are informed about them.

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.

[joedolson]

One of my biggest concerns about this actually pertains to videos and video captions; right now, the *only* way to add captions to a video within WordPress core is by clicking on the media toolbar in the visual editor after adding a video, and it's not accessible.

If somebody knows another way to do it, by all means tell me - but I haven't found it.

[wonderboymusic]

Adding caption support in the modal was an upgrade from having to write the HTML by hand inside the body of the video shortcode. The work in 3.9 was to figure out how to translate shortcodes into JS objects that can be edited in their own media frame and then kicked back into the editor intact - there is still plenty to do on the a11y front.

[azaozz]

Replying to 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 to 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.

Replying to afercia:

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+Right 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+Right 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.

[iseulde]

Hm, maybe we should add that information somewhere? E.g. "press ALT+F8 for tools" as a title tag on the image? Is there a standard way of passing such instructions?

[azaozz]

TinyMCE adds that to the iframe title. We can append the " press Alt+F8 for image toolbar" there (in the translation).

Would be good to add some "Accessibility Help" to the "Help" tab under the admin toolbar too, perhaps include the above 5 steps, etc.

[afercia]

Replying to azaozz:

TinyMCE adds that to the iframe title. We can append the " press Alt+F8 for image toolbar" there (in the translation).

I was going to open a ticket for the iframe title :) since it still refers to "ALT-0" for help, which doesn't work anymore. Now there's Alt+Shift+h to open the Keyboard Shortcuts modal.

Please notice also the iframe title is way too long: hearing all that long text read out by screen readers *each time* you focus the editor is a bit annoying. I would prefer just:
"Press ALT-Shift-h for a list of keyboard shortcuts".
(please use hyphens not + in the title attribute)

Unfortunately, the Keyboard shortcuts modal is not accessible. It doesn't get focus, you can't close it with the keyboard etc. and its content needs a refresh, will open a new ticket for this found #28431 and commented there.

About the 5 steps: I guess all testers here knew how to select the image, the point was the missing information about Alt+F8.
Anyway, once users finally move focus to the image toolbar, they should also be able to "close" the image toolbar pressing Escape and move focus back to the editor area. I couldn't find a way to do that.

Finally, in the Keyboard Shortcuts modal there's a section about Distraction Free Writing mode that should be removed. Wondering if there is other text here and there in the codebase still referencing DFW.

[afercia]

Replying to joedolson:

One of my biggest concerns about this actually pertains to videos and video captions; right now, the *only* way to add captions to a video within WordPress core is by clicking on the media toolbar in the visual editor after adding a video, and it's not accessible.

For reference, this is the current mce view toolbar, same for audio and playlists:

Since the image toolbar can be focused using Alt+F8 as keyboard shortcut, it would be great to use the same shortcut here too.

[azaozz]

In 30757:

TinyMCE, improve accessibility:

• Return focus to the editor on pressing Escape while the image toolbar is focused.
• Add a Close button to the Help modal and close it on Escape.
• Override the title on the editor iframe (read by screen reader apps), replace with the Alt+Shift+H shortcut.
• Add focus shortcuts descriptions to the Help modal.

Fixes #27642.

[azaozz]

Replying to afercia:

Lets open new tickets for the remaining issues mentioned in the comments. Opened #30619 for the wpView toolbar/buttons.

[azaozz]

In 30775:

TinyMCE: return focus to the editor after closing the image toolbar. Props afercia, see #27642.

[iseulde]

#28431 was marked as a duplicate.