CKEditor 3.x Accessibility Guide

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

m (Spacing under note added)
 
(26 intermediate revisions by 4 users not shown)
Line 1: Line 1:
CKEditor 3 is designed with people who have disabilities in mind. In addition to be usable with a mouse, a keyboard and a monitor; CKEditor is usable with a keyboard and a screenreader as well. JAWS with IE7 and JAWS with Firefox 3 are currently supported.  
+
{{#CUSTOMTITLE:CKEditor 3.x Accessibility Guide}}
 +
__TOC__
 +
CKEditor is compliant with several accessibility standards, including the [[CKEditor 3.x/Accessibility Compliance/Web Content Accessibility Guidelines|Web Content Accessibility Guidelines]] (WCAG), the US [[CKEditor 3.x/Accessibility Compliance/Section 508|Section 508]] Amendment to the Rehabilitation Act of 1973 and the [[CKEditor 3.x/Accessibility Compliance/IBM Web Accessibility Checklist|IBM Web Accessibility Checklist]].  
  
== Basic Navigation<br>  ==
+
CKEditor 3.x is designed to support users with disabilities. You can use it with your mouse, but also with the keyboard as well as a screen reader. The currently supported screen reader solution is [http://www.freedomscientific.com/products/fs/jaws-product-page.asp JAWS] with Firefox 3.6 or Internet Explorer 8.
  
*Tab and Shift+Tab <br>To move into and out of the editor among other form elements, press tab and shift+tab. On supported browser and screenreader combinations, the editor should behave just like any other form elements in respect to tab and shift+tab key presses.<br>One exception to this rule is when config.tabSpaces is set to a non-zero value. In this case, if the user presses tab from inside the editor, spaces will be added to the editing area, and the focus will not be moved out of the editing area. Shift-tab would still work as expected when config.tabSpaces is set to a non-zero value.  
+
== Basic Navigation ==
*Alt+F10 <br>Pressing Alt+F10 when the editing area is focused will move the focus to the editor toolbar.  
+
* ''Tab'' and ''Shift+Tab''
*Shift+F10 or Ctrl+Shift+F10 <br>Pressing Shift+F10 or Ctrl+Shift+F10 (in cases where Shift+F10 does not work), will open the context menu inside the editing area.  
+
*: Allow you to move into and out of the [[CKEditor 3.x/Users Guide/Interface/Editing Area|editor window]] from other form elements. For supported browser and screen reader solutions the editor should behave just like any other form element with respect to ''Tab'' and ''Shift+Tab'' key presses.
*Alt+F11 <br>Pressing Alt+F11 will put focus to the element path bar, usually at the bottom of the editor. While the element path bar is being focused, pressing tab and shift+tab will select HTML elements that are parents of the current element. Pressing Esc will move the focus back to the editing area without changing selection; while pressing Enter will select the element in the editing area.
+
*: One exception to this rule is when <code>config.tabSpaces</code> is set to a non-zero value. In this case, if you press the ''Tab'' key while inside the editor window, spaces will be inserted into the text in the editing area, and the focus will not be moved out of the editing area. The ''Shift+Tab'' keyboard shortcut would still work as expected though, even when <code>config.tabSpaces</code> is set to a non-zero value.  
 +
* ''Alt+F10''
 +
*: Moves the focus to the editor [[CKEditor 3.x/Users Guide/Interface/Toolbar|toolbar]] when the cursor is in the editing area.  
 +
* ''Shift+F10''
 +
*: Opens the [[CKEditor 3.x/Users Guide/Interface/Context Menu|context menu]] of an element inside the editing area.  
 +
* ''Alt+F11''
 +
*: Moves focus to the [[CKEditor 3.x/Users Guide/Interface/Elements Path|elements path]] usually located at the bottom of the editor. While the elements path is in focus, pressing the ''Tab'' and ''Shift+Tab'' keyboard shortcuts will select HTML elements that are parents of the current element. Pressing ''Esc'' moves the focus back to the editing area without changing selection. Pressing ''Enter'', on the other hand, selects the element chosen in the elements path in the editing area.
  
== Navigating Toolbar ==
+
== Navigating Toolbar ==
 +
* ''Tab'' and ''Shift+Tab''
 +
*: Once the toolbar is in focus after you press ''Alt+F10'', ''Tab'' and ''Shift+Tab'' will move focus forward and backward among the toolbar button groups. Toolbar button group focus is cyclic, so going backwards from the first item will put focus to the last item, and vice versa.
 +
* ''Left Arrow'' and ''Right Arrow''
 +
*: The ''Left Arrow'' and ''Right Arrow'' keys will move focus forward and backward among the toolbar buttons within a group, respectively.
 +
* ''Enter'' and ''Space''
 +
*: Activate a selected toolbar feature.
 +
* ''Esc''
 +
*: Puts the focus back to the editing area without executing any commands.
  
*Tab, Shift+Tab, Left Arrow and Right Arrow<br>Once the toolbar is focused by Alt+F10 from the editing area, Tab and Shift+tab will move focus forward and backward among toolbar items. Toolbar item focus is cyclic so going backwards from the first item will put focus to the last item, and vice versa.<br>Left Arrow and Right Arrow works in the same manner as Tab and Shift+Tab.
+
<note>The accessibility shortcuts for toolbar navigation were modified in [http://ckeditor.com/blog/CKEditor_3.6_released CKEditor 3.6], when the concept of a '''toolbar button group''' was initially introduced. On entering the toolbar you can now use the ''Tab'' and ''Shift+Tab'' shortcuts to navigate between button groups and the ''Arrow'' keys to navigate between the buttons ''within a group''. In CKEditor 3.5.x and before both ''Tab'' and ''Arrow'' keys were used to navigate between the toolbar buttons.</note>
*Enter and Esc <br>Pressing Esc will put the focus back to the editing area without executing any commands. Pressing Enter will activiate the selected toolbar item.
 
  
== Navigating Dialogs  ==
 
  
*Tab and Shift+Tab <br>Pressing Tab and Shift+Tab when dialog tabs are not focused will move the focus among input element in the dialog; when a dialog tab is focused, Tab and Shift+Tab will cycle through tab pages in the dialog.<br>Focus order in dialogs is cyclic so when the first tab or first input elements is focused and Shift+Tab is pressed, then the last tab or last input element will get the focus. Dialog buttons count as input elements as well.  
+
== Navigating Dialog Windows ==
*Left Arrow and Right Arrow<br>When a dialog tab is focused, Left Arrow and Rigth Arrow can also be used to cycle between tabs like Tab and Shift+Tab.  
+
* ''Tab'' and ''Shift+Tab''
*Alt+F10<br>Pressing Alt+F10 in a dialog will put focus to the currently active tab.
+
*: When [[CKEditor 3.x/Users Guide/Interface/Dialog Windows|dialog window]] tabs are not in focus, these keyboard shortcuts move focus among input element of the dialog window. When a dialog window tab is in focus, ''Tab'' and ''Shift+Tab'' cycle through dialog window tabs.
*Enter and Esc <br>Pressing Esc in a dialog is equivalent to pressing the Cancel button or the Close button.<br>Pressing Enter in a dialog when a single-line text input is at focus is equivalent to pressing the OK button.<br>Pressing Enter in a dialog when a dialog tab is focused puts focus back to the first input element inside that tab page.
+
*: Focus order in dialog windows is cyclic, so when the first tab or first input element is in focus, and the ''Shift+Tab'' shortcut is pressed, the last tab or last input element will be selected. Dialog window buttons count as input elements as well.  
 +
* ''Left Arrow'' and ''Right Arrow''
 +
*: When a dialog window tab is in focus, the ''Left Arrow'' and ''Right Arrow'' keys can be used to cycle between tabs just like ''Tab'' and ''Shift+Tab''.  
 +
* ''Alt+F10''
 +
*: Puts the tab list in focus, selects the currently active tab, and lets you move to the next or previous one with the ''Tab''/''Right Arrow'' or ''Shift+Tab''/''Left Arrow'' keys when inside the dialog window.  
 +
* ''Enter''
 +
*: Pressing ''Enter'' while inside the dialog window, when a single-line text input is in focus, is equivalent to pressing the '''OK''' button.
 +
*: Pressing ''Enter'' while inside the dialog window, when a dialog window tab is in focus, puts the focus back to the first input element inside that tab.
 +
* ''Esc''
 +
*: Pressing ''Esc'' while inside the dialog window is equivalent to clicking the '''Cancel''' or '''Close''' buttons.
  
== Navigating Context Menus ==
+
== Navigating Context Menus ==
 +
* ''Tab'','' Shift+Tab''
 +
*: When the context menu is open, press ''Tab'' to cycle through menu items forward or ''Shift+Tab'' to cycle backwards.
 +
*  ''Down Arrow'' and ''Up Arrow''
 +
*: When the context menu is open, the ''Down Arrow'' and ''Up Arrow'' keys can be used to cycle between menu items just like ''Tab'' and ''Shift+Tab'', respectively.
 +
*  ''Right Arrow'' and ''Left Arrow''
 +
*: When the context menu item contains a submenu, the ''Right Arrow'' lets you enter the submenu. To return to the parent context menu, use the ''Left Arrow''.
 +
* ''Enter'' and ''Space''
 +
*: Activate a menu item or open a submenu.
 +
* ''Esc''
 +
*: Closes a context menu without executing any command. When inside a submenu, closes the submenu and returns focus to the parent context menu. Press ''Esc'' again to close it.
  
*Tab, Shift+Tab, Down Arrow and Up Arrow<br>When a context menu is opened, press Tab to cycle through menu items forward, Shift+Tab to cycle backwards. <br>Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab respectively.  
+
== Navigating Toolbar Drop-down Lists ==
*Enter and Esc <br>Press Enter to activate a menu item or open a sub-menu.<br>Press close a context menu without executing any command.
+
* ''Down Arrow'', ''Enter'', and ''Space''
 +
*: Enter the drop-down list once it is selected on the toolbar.
 +
* ''Tab'', ''Shift+Tab''
 +
*: When the drop-down list is open, press ''Tab'' to cycle through list items forward or ''Shift+Tab'' to cycle backwards.  
 +
* ''Down Arrow'' and ''Up Arrow''
 +
*: When the drop-down list is open, the ''Down Arrow'' and ''Up Arrow'' keys can be used to cycle between list items just like ''Tab'' and ''Shift+Tab'', respectively.  
 +
* ''Enter'' and ''Space''
 +
*: Activate a feature selected from the drop-down list and put the focus back to the editing area.
 +
* ''Esc''
 +
*: Closes a drop-down list without introducing any changes.
  
== Navigating Style Combo Boxes ==
+
== Navigating Color Selection Boxes ==
 +
* ''Down Arrow'', ''Enter'', and ''Space''
 +
*: Enter the color selection box once it is selected on the toolbar.
 +
* ''Tab'', ''Shift+Tab''
 +
*: When the color selection box is open, press ''Tab'' to cycle through colors forward or ''Shift+Tab'' to cycle backwards.
 +
* ''Down Arrow'' and ''Up Arrow''
 +
*: When the color selection box is open, the ''Down Arrow'' and ''Up Arrow'' keys can be used to cycle between colors just like ''Tab'' and ''Shift+Tab'', respectively.
 +
* ''Enter'' and ''Space''
 +
*: Apply the selected color from the selection box and put the focus back to the editing area.
 +
* ''Esc''
 +
*: Closes a color selection box without introducing any changes and puts focus back to the toolbar.
  
*Tab, Shift+Tab, Down Arrow and Up Arrow<br>Press Tab and Shift+Tab to cycle through items in a combo box forward and backwards, respectively.<br>Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab.  
+
== Editor Hotkeys  ==
*Enter and Esc <br>Press Enter to activate the selected item in a combo box and put the focus back to the editing area.<br>Press Esc to close the combo box without executing any command, and put the focus back to the toolbar.
+
Many functions in CKEditor have their equivalent keyboard shortcuts. The [[CKEditor 3.x/Users Guide/Keyboard Shortcuts|Keyboard Shortcuts]] article contains a full list of editor hotkeys along with some common text editing shortcuts, grouped by problem areas.
  
== Navigating Color Selection Boxes ==
+
== JAWS ==
 +
JAWS is a popular screen reader whose aim is to make computer content accessible to blind and visually impaired users. CKEditor fully supports JAWS when used in conjunction with Firefox 3.6 and Internet Explorer 8 browsers.
  
*Tab, Shift+Tab, Left Arrow and Right Arrow<br>Press Tab and Shift+Tab to cycle through colors forward and backwards, respectively.<br>Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab.
+
=== Editing Mode vs. Non-editing Mode ===
*Enter and Esc<br>Press Enter to apply the selected color to the current selection in the editing area. Enter puts the focus back to the editing area as well.<br>Press Esc to close the color selection box and put focus back to the toolbar.
+
JAWS distinguishes between editing mode and non-editing mode for text boxes and rich text areas. When JAWS is entering the editing mode, a high pitched 'pop' sound is played to notify the user of the mode switch. Similarly, when JAWS is entering the non-editing mode, a lower pitched 'pop' sound is played.
  
== Editor Hotkeys  ==
+
It is up to JAWS to decide whether to put a text box or a rich text area to editing mode on the initial focus. When it so happens that JAWS has put the initial focus to CKEditor in non-editing mode, you will find that you cannot type in the editor, and no 'pop' sound is played when focus was put into the editing area.
  
Here is a list of hotkeys that you can use inside the editing area in addition to the more common text editing keyboard commands (i.e. arrow keys to move the caret, end to move to the end of line, etc.).  
+
To fix that, press the ''Enter'' key once to switch JAWS to the editing mode, and a high pitched 'pop' sound should be played. Pressing ''Esc'' inside CKEditor will switch JAWS to the non-editing mode, along with a lower pitched 'pop' sound to indicate the mode switch.  
  
*Ctrl+Z <br>Undo command.
+
=== Refreshing the Virtual Cursor ===
*Ctrl+Y and Ctrl+Shift+Z <br>Redo command.
+
JAWS keeps an internal model of the browser's view, and along with it, a virtual cursor, to facilitate reading of the contents in a Web browser. However, the internal model kept by JAWS is not always in sync with the contents displayed in the browser window. This is especially true for dynamically generated web contents written in JavaScript that CKEditor depends on.
*Ctrl+L <br>Open link dialog.
 
*Ctrl+B <br>Bold command.
 
*Ctrl+I <br>Italics command.
 
*Ctrl+U <br>Underline command.
 
*Ctrl+C or Ctrl+Insert<br>Copy.
 
*Ctrl+V or Shift+Insert<br>Paste.
 
*Ctrl+X or Shift+Delete<br>Cut.
 
*Ctrl+Left or Ctrl+Right<br>Move to the previous or next word.  
 
*Ctrl+Backspace<br>Remove the previous word.
 
*Ctrl+Delete<br>Remove the current word.  
 
*Shift+Enter<br>Create a new line in the same paragraph or list item.<br>
 
  
== JAWS ==
+
When JAWS's virtual cursor is out-of-sync with the contents displayed in the browser, you will be unable to move correctly among the contents of the web page. You will also find that JAWS's voice is reading out unpredictable garbage from the Web browser &mdash; e.g. it may be reading out the raw HTML code in the website, or it may be reading out the same element over and over despite the user's actions to move the virtual cursor away from that element.
  
*Editing Mode vs. Non-editing Mode<br>JAWS has the distinction between editing mode and non-editing mode for text boxes and rich text areas. When JAWS is entering editing mode, a high pitched 'pop' sound is played to notify the user of the mode switch. Similarly, when JAWS is entering non-editing mode, a lower pitched 'pop' sound is played.<br>It is up to JAWS to decide whether to put a text box or a rich text area to editing mode on the initial focus. When it happens that JAWS has put the initial focus to CKEditor in non-editing mode, the user will find that he/she cannot type into the editor, and no 'pop' sound is played when focus was put into the editing area. To fix that, simply press Enter to switch JAWS to editing mode, and a high pitched 'pop' sound should be played.<br>Pressing Esc inside CKEditor will switch JAWS to non-editing mode, along with a lower pitched 'pop' sound to indicate the mode switch.
+
To refresh JAWS's internal model and to keep the virtual cursor back in sync with the browser, you will need to press the ''Insert+Esc'' keyboard shortcut. In cases where even the ''Insert+Esc'' combination fails to refresh JAWS's virtual cursor correctly, you can press the ''Insert+Z'' shortcut twice, slowly, to disable and re-enable the virtual cursor.
*Refreshing the Virtual Cursor <br>JAWS keeps an internal model of the browser's view, and along with it, a virtual cursor, to facilitate reading of the contents in a web browser. The internal model kept by JAWS, however, is not always in sync with the displayed contents in the browser window. This is especially true for dynamically generated web contents written in JavaScript, which CKEditor depends on.<br> When JAWS's virtual cursor is out-of-sync with the browser's displayed contents, the user will be unable to move correctly among the web page's contents. The user will also find that JAWS's voice reading out unpredictable garbage from the web browser - e.g. it may be reading out the raw HTML code in the web page, or it may be reading out the same element over and over despite the user's actions to move the virtual cursor away from that element.<br>To refresh JAWS's internal model and to keep the virtual cursor back in sync with the browser, the user will need to press Insert+Esc. In cases where even Insert+Esc fails to refresh JAWS's virtual cursor correctly, the user can press Insert+Z twice, slowly, to disable and re-enable the virtual cursor.<br>There are a few points in CKEditor usage in which JAWS will get out-of-sync with the browser window contents:
 
  
#When an editor is newly created in the middle of a browsing session.  
+
There are a few problem areas in using CKEditor where JAWS will get out-of-sync with the contents of the browser window:
#When a dialog is opened.  
+
* When an editor is newly created in the middle of a browsing session.  
#When a dialog is closed.
+
* When a dialog window is opened.  
 +
* When a dialog window is closed.
 +
* When a context menu is opened.
 +
* When a drop-down list is opened.
  
In all of the above three events, it is recommended that the user press Insert+Esc to keep JAWS's virtual cursor in sync with the browser display.  
+
In all of the above events, it is recommended to press the ''Insert+Esc'' shortcut to keep JAWS's virtual cursor in sync with the browser display.  
  
*Arrow Keys<br>Arrow keys have special meaning in JAWS when virtual cursor is mode is on. Arrow hotkeys (like left arrow and right arrow for cycling through toolbar items) will stop working when JAWS is opened and in virtual cursor mode. Equivalent hotkeys like Tab and Shift+Tab should be used instead.
+
=== Arrow Keys ===
 +
When the virtual cursor mode of JAWS is on, ''Arrow'' keys have a special meaning. If JAWS is opened and is running in the virtual cursor mode, ''Arrow'' hotkeys (like ''Left Arrow'' and ''Right Arrow'' used for cycling through toolbar items) will cease to work. If this is the case, use equivalent hotkeys like ''Tab'' and ''Shift+Tab''.

Latest revision as of 14:29, 11 May 2011

CKEditor is compliant with several accessibility standards, including the Web Content Accessibility Guidelines (WCAG), the US Section 508 Amendment to the Rehabilitation Act of 1973 and the IBM Web Accessibility Checklist.

CKEditor 3.x is designed to support users with disabilities. You can use it with your mouse, but also with the keyboard as well as a screen reader. The currently supported screen reader solution is JAWS with Firefox 3.6 or Internet Explorer 8.

Basic Navigation

  • Tab and Shift+Tab
    Allow you to move into and out of the editor window from other form elements. For supported browser and screen reader solutions the editor should behave just like any other form element with respect to Tab and Shift+Tab key presses.
    One exception to this rule is when config.tabSpaces is set to a non-zero value. In this case, if you press the Tab key while inside the editor window, spaces will be inserted into the text in the editing area, and the focus will not be moved out of the editing area. The Shift+Tab keyboard shortcut would still work as expected though, even when config.tabSpaces is set to a non-zero value.
  • Alt+F10
    Moves the focus to the editor toolbar when the cursor is in the editing area.
  • Shift+F10
    Opens the context menu of an element inside the editing area.
  • Alt+F11
    Moves focus to the elements path usually located at the bottom of the editor. While the elements path is in focus, pressing the Tab and Shift+Tab keyboard shortcuts will select HTML elements that are parents of the current element. Pressing Esc moves the focus back to the editing area without changing selection. Pressing Enter, on the other hand, selects the element chosen in the elements path in the editing area.

Navigating Toolbar

  • Tab and Shift+Tab
    Once the toolbar is in focus after you press Alt+F10, Tab and Shift+Tab will move focus forward and backward among the toolbar button groups. Toolbar button group focus is cyclic, so going backwards from the first item will put focus to the last item, and vice versa.
  • Left Arrow and Right Arrow
    The Left Arrow and Right Arrow keys will move focus forward and backward among the toolbar buttons within a group, respectively.
  • Enter and Space
    Activate a selected toolbar feature.
  • Esc
    Puts the focus back to the editing area without executing any commands.
important note
The accessibility shortcuts for toolbar navigation were modified in CKEditor 3.6, when the concept of a toolbar button group was initially introduced. On entering the toolbar you can now use the Tab and Shift+Tab shortcuts to navigate between button groups and the Arrow keys to navigate between the buttons within a group. In CKEditor 3.5.x and before both Tab and Arrow keys were used to navigate between the toolbar buttons.


Navigating Dialog Windows

  • Tab and Shift+Tab
    When dialog window tabs are not in focus, these keyboard shortcuts move focus among input element of the dialog window. When a dialog window tab is in focus, Tab and Shift+Tab cycle through dialog window tabs.
    Focus order in dialog windows is cyclic, so when the first tab or first input element is in focus, and the Shift+Tab shortcut is pressed, the last tab or last input element will be selected. Dialog window buttons count as input elements as well.
  • Left Arrow and Right Arrow
    When a dialog window tab is in focus, the Left Arrow and Right Arrow keys can be used to cycle between tabs just like Tab and Shift+Tab.
  • Alt+F10
    Puts the tab list in focus, selects the currently active tab, and lets you move to the next or previous one with the Tab/Right Arrow or Shift+Tab/Left Arrow keys when inside the dialog window.
  • Enter
    Pressing Enter while inside the dialog window, when a single-line text input is in focus, is equivalent to pressing the OK button.
    Pressing Enter while inside the dialog window, when a dialog window tab is in focus, puts the focus back to the first input element inside that tab.
  • Esc
    Pressing Esc while inside the dialog window is equivalent to clicking the Cancel or Close buttons.

Navigating Context Menus

  • Tab, Shift+Tab
    When the context menu is open, press Tab to cycle through menu items forward or Shift+Tab to cycle backwards.
  • Down Arrow and Up Arrow
    When the context menu is open, the Down Arrow and Up Arrow keys can be used to cycle between menu items just like Tab and Shift+Tab, respectively.
  • Right Arrow and Left Arrow
    When the context menu item contains a submenu, the Right Arrow lets you enter the submenu. To return to the parent context menu, use the Left Arrow.
  • Enter and Space
    Activate a menu item or open a submenu.
  • Esc
    Closes a context menu without executing any command. When inside a submenu, closes the submenu and returns focus to the parent context menu. Press Esc again to close it.

Navigating Toolbar Drop-down Lists

  • Down Arrow, Enter, and Space
    Enter the drop-down list once it is selected on the toolbar.
  • Tab, Shift+Tab
    When the drop-down list is open, press Tab to cycle through list items forward or Shift+Tab to cycle backwards.
  • Down Arrow and Up Arrow
    When the drop-down list is open, the Down Arrow and Up Arrow keys can be used to cycle between list items just like Tab and Shift+Tab, respectively.
  • Enter and Space
    Activate a feature selected from the drop-down list and put the focus back to the editing area.
  • Esc
    Closes a drop-down list without introducing any changes.

Navigating Color Selection Boxes

  • Down Arrow, Enter, and Space
    Enter the color selection box once it is selected on the toolbar.
  • Tab, Shift+Tab
    When the color selection box is open, press Tab to cycle through colors forward or Shift+Tab to cycle backwards.
  • Down Arrow and Up Arrow
    When the color selection box is open, the Down Arrow and Up Arrow keys can be used to cycle between colors just like Tab and Shift+Tab, respectively.
  • Enter and Space
    Apply the selected color from the selection box and put the focus back to the editing area.
  • Esc
    Closes a color selection box without introducing any changes and puts focus back to the toolbar.

Editor Hotkeys

Many functions in CKEditor have their equivalent keyboard shortcuts. The Keyboard Shortcuts article contains a full list of editor hotkeys along with some common text editing shortcuts, grouped by problem areas.

JAWS

JAWS is a popular screen reader whose aim is to make computer content accessible to blind and visually impaired users. CKEditor fully supports JAWS when used in conjunction with Firefox 3.6 and Internet Explorer 8 browsers.

Editing Mode vs. Non-editing Mode

JAWS distinguishes between editing mode and non-editing mode for text boxes and rich text areas. When JAWS is entering the editing mode, a high pitched 'pop' sound is played to notify the user of the mode switch. Similarly, when JAWS is entering the non-editing mode, a lower pitched 'pop' sound is played.

It is up to JAWS to decide whether to put a text box or a rich text area to editing mode on the initial focus. When it so happens that JAWS has put the initial focus to CKEditor in non-editing mode, you will find that you cannot type in the editor, and no 'pop' sound is played when focus was put into the editing area.

To fix that, press the Enter key once to switch JAWS to the editing mode, and a high pitched 'pop' sound should be played. Pressing Esc inside CKEditor will switch JAWS to the non-editing mode, along with a lower pitched 'pop' sound to indicate the mode switch.

Refreshing the Virtual Cursor

JAWS keeps an internal model of the browser's view, and along with it, a virtual cursor, to facilitate reading of the contents in a Web browser. However, the internal model kept by JAWS is not always in sync with the contents displayed in the browser window. This is especially true for dynamically generated web contents written in JavaScript that CKEditor depends on.

When JAWS's virtual cursor is out-of-sync with the contents displayed in the browser, you will be unable to move correctly among the contents of the web page. You will also find that JAWS's voice is reading out unpredictable garbage from the Web browser — e.g. it may be reading out the raw HTML code in the website, or it may be reading out the same element over and over despite the user's actions to move the virtual cursor away from that element.

To refresh JAWS's internal model and to keep the virtual cursor back in sync with the browser, you will need to press the Insert+Esc keyboard shortcut. In cases where even the Insert+Esc combination fails to refresh JAWS's virtual cursor correctly, you can press the Insert+Z shortcut twice, slowly, to disable and re-enable the virtual cursor.

There are a few problem areas in using CKEditor where JAWS will get out-of-sync with the contents of the browser window:

  • When an editor is newly created in the middle of a browsing session.
  • When a dialog window is opened.
  • When a dialog window is closed.
  • When a context menu is opened.
  • When a drop-down list is opened.

In all of the above events, it is recommended to press the Insert+Esc shortcut to keep JAWS's virtual cursor in sync with the browser display.

Arrow Keys

When the virtual cursor mode of JAWS is on, Arrow keys have a special meaning. If JAWS is opened and is running in the virtual cursor mode, Arrow hotkeys (like Left Arrow and Right Arrow used for cycling through toolbar items) will cease to work. If this is the case, use equivalent hotkeys like Tab and Shift+Tab.

This page was last edited on 11 May 2011, at 14:29.