Problem/Motivation

There are keyboard controls for the new CKEditor, but they just aren't very visible. I suppose you could search Google and them memorize the page, you'd never find them. So how are people going to know that there are keyboard controls that they have access to?

We want to make it as easy as possible for folks to start using the keyboard shortcuts within CKEditor simply so that their work life becomes faster and more enjoyable. We'd like to benefit keyboard only users and screen readers too. Let's find ways to do that.

Link to original post - #1872206-43: Improve CKEditor toolbar configuration accessibility

Proposed resolution

1) We could have a short line describing how to find out more in the tips section when CKEditor is applied to the filter.
2) A longer description with notes for Mac & Windows, could be added to the help page.
3) When someone is tabbing through a website (which mostly keyboard only users will do), an alert (both visual & ARIA) could be launched the first time someone tabs over the edit bar.
4) CKEditor could have helpful reminders like CNTR-B for Bold on hover (this can actually benefit some keyboard only users too)

Upstream CKEditor issues

Comments

Wim Leers’s picture

Issue tags: -ckeditor +CKEditor in core
Bojhan’s picture

Does this have an issue in the CKeditor queue?

mgifford’s picture

Good reminder - http://dev.ckeditor.com/ticket/10015

I really don't know how many of these issues are really CKEditor's responsibility. The tooltip in #4 would be. They could improve the help that you get when you press ALT+0 as right now it's pretty windows specific. In anycase I've added a bug in CKEditor now for discoverability.

It also occurred to me to wonder if the key combinations be changed? There must language packs, or has the world just adopted english symbols & preferences for the WYSIWYG?

wwalc’s picture

It also occurred to me to wonder if the key combinations be changed? There must language packs, or has the world just adopted english symbols & preferences for the WYSIWYG?

Keystrokes are configurable in CKEditor: config.keystrokes, however I'm unsure if it makes sense to make drastic changes.
If someone already got used to CKEditor (either in Drupal or in different applications), being able to use the same keystrokes would definitely be an advantage.

If the question that you asked refers to keyboard shortcuts like CTRL+B for Bold, then changing the keystrokes might be confusing also because Bold/Underline/Italic/Strike icons are not localized.

mgifford’s picture

Ahh, yes.. Would be important to keep icons & key combinations in sync.

mgifford’s picture

Issue summary: View changes

adding link to 1872206

falcon03’s picture

Component: editor.module » ckeditor.module

Moving this issue to CKEditor module.

Wim Leers’s picture

Let's at least already figure out what should happen.

1) We could have a short line describing how to find out more in the tips section when CKEditor is applied to the filter.
2) A longer description with notes for Mac & Windows, could be added to the help page.

1) By "filter", I think you actually mean to say "text format". Note that we actually want the tips to go away. See #2004284: Integrate "text formats selector" into CKEditor toolbar.
2) Which help page?

3) When someone is tabbing through a website (which mostly keyboard only users will do), an alert (both visual & ARIA) could be launched the first time someone tabs over the edit bar.

I don't think this could be implemented by Drupal. This may not use a cookie, because that can cause performance/Varnish/etc. havoc. It should use localStorage, where the key stored in localStorage should contain the user ID. For that, you would need #2005644: Use client-side cache tags & caching to eliminate 1 HTTP requests/page for in-place editing metadata, introduce drupalSettings.user.permissionsHash.
And by "alert", do you mean a JavaScript alert()? Please also link to what an ARIA alert is, so we can inform the CKEditor developers.

4) CKEditor could have helpful reminders like CNTR-B for Bold on hover (this can actually benefit some keyboard only users too)

Agreed.


Points 3 and 4 are impossible for us to implement in Drupal. Points 1 and 2 need to be fleshed out and then we should start working on them.
Wim Leers’s picture

What I said in #7 about point 3 is clearly a contradiction. I say CKEditor should implement it, but at the same time I say it should use the Drupal user ID. That can't work. If we want that, then we will have to figure out how to detect the user tabbing onto CKEditor.

So, that leaves points 1, 2 and 3 for us, and 4 for CKEditor. I posted a sibling comment on the CKEditor ticket: https://dev.ckeditor.com/ticket/10015#comment:14.

falcon03’s picture

What about implementing #4 using aria-describedby so that the "tooltip" (or did I misunderstand #4?) can work for screen reader users as well?

I'm not sure if in proposed resolution#2 Mike was referring to the help page that you can get by pressing "Alt + 0" on windows or the hook_help() implementation in CKEditor.module.

Wim Leers’s picture

#9: good point, I've cross-posted that to the CKEditor ticket: https://dev.ckeditor.com/ticket/10015#comment:15 :)

mgifford’s picture

I can't remember for sure what I was thinking in February on this one. However, let's assume that it was "Alt + 0" since many users won't have access to the info from hook_help().

Wim Leers’s picture

Status: Active » Closed (works as designed)

Let's go over all 4 points that we're discussing/fixing in this issue (as documented in the issue summary):

  1. As explained in #7, this is wrong, so let's consider point 1 solved.
  2. This should be solved in CKEditor. This problem was recognized in http://dev.ckeditor.com/ticket/10015, http://dev.ckeditor.com/ticket/9821 and http://dev.ckeditor.com/ticket/7505, so it should be solved there.
  3. This is also a CKEditor problem. And in fact, it's already a solved problem. From http://dev.ckeditor.com/ticket/10015#comment:5:
    When I tried to use CKEditor with VoiceOver, it just read the iframe title. aria-describedby attribute pointing to cke_voice_label ("Press ALT 0 for help") was ignored. I believe this is the main reason why the first steps with CKEditor were problematic.

    . The main problem is that it's not working consistently in all screen readers. This problem was recognized in http://dev.ckeditor.com/ticket/10015, so it should be solved there.

  4. This, too, is a CKEditor problem, and this problem, too, was recognized in http://dev.ckeditor.com/ticket/10015 and should be solved there.

So, effectively, nothing remains to be done in this issue.

I've made a strong comment in the main CKEditor ticket that explicitly explains this: http://dev.ckeditor.com/ticket/10015#comment:16. When we update CKEditor, we will automatically receive these accessibility improvements.

mgifford’s picture

Thanks for this summary Wim. Seems like a good decision.

mgifford’s picture

Issue summary: View changes

added heading for proposed resolutions.
added section for upstream CKEditor issues.

mgifford’s picture

Issue summary: View changes

Just ran into this issue again.

I'm not sure what is up with CKEditor's development, but it seems like there are a lot of ones like this one which haven't been touched for nearly 2 years.

I'm glad that this ticket won't need to be resolved before the Drupal 8 release, although it would have been really nice if there had been more improvements in CKEditor's accessibility in this time.

Reinmar’s picture

Hi Mike,

I've just ran into http://dev.ckeditor.com/ticket/10015 myself again too. It doesn't seem to be a big task, but somehow we were forgetting about it for the last months.

So, I targeted http://dev.ckeditor.com/ticket/10015 to 4.6.0 – the next major release that we'll work on.

I also checked http://dev.ckeditor.com/ticket/7505 (assigned to 4.6.0 as well) and http://dev.ckeditor.com/ticket/9821 (not assigned to any milestone, because it's documentation thing in our opinion, but we plan to work on it in the meantime).

I left some comments under each of these tickets and it would be great if you could let us know if I missed something.

mgifford’s picture

Thanks @Reinmar. I'll take a look and comment there.