CKEditor 3.x/Accessibility - Revision history

Anna: Spacing under note added

2011-05-11T13:29:44Z

Spacing under note added

Anna: /* Navigating Toolbar */ Updated to CKEditor 3.6

2011-05-11T13:29:19Z

‎Navigating Toolbar: Updated to CKEditor 3.6

Anna: Final proof-reading

2010-12-13T20:56:32Z

Final proof-reading

Anna: /* JAWS */ Article rewrite

2010-12-10T13:56:17Z

‎JAWS: Article rewrite

Anna: /* Editor Hotkeys */ Redundant shortcuts removed

2010-12-10T13:36:05Z

‎Editor Hotkeys: Redundant shortcuts removed

Anna: /* Navigating Color Selection Boxes */ Section rewrite

2010-12-10T13:30:49Z

‎Navigating Color Selection Boxes: Section rewrite

Anna: /* Navigating Toolbar Drop-down Lists */ Shortcuts added

2010-12-10T13:28:36Z

‎Navigating Toolbar Drop-down Lists: Shortcuts added

Anna: /* Navigating Toolbar */ Section rewrite

2010-12-10T13:19:31Z

‎Navigating Toolbar: Section rewrite

Anna: /* Navigating Dialog Windows */ Esc and Enter separated

2010-12-10T13:16:35Z

‎Navigating Dialog Windows: Esc and Enter separated

Anna: /* Navigating Style Combo Boxes */ Setion rewrite

2010-12-10T13:14:23Z

‎Navigating Style Combo Boxes: Setion rewrite

← Older revision		Revision as of 13:29, 11 May 2011
Line 27:		Line 27:

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

	== Navigating Dialog Windows ==		== Navigating Dialog Windows ==

@@ Line 18: / Line 18: @@
 == 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 buttons. Toolbar elements focus is cyclic, so going backwards from the first item will put focus to the last item, and vice versa.
+*: 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 are equivalent to ''Tab'' and ''Shift+Tab'', respectively.
+*: 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.
 == Navigating Dialog Windows ==

@@ Line 3: / Line 3: @@
 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]].
-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.
+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.
 == Basic Navigation ==
 * ''Tab'' and ''Shift+Tab''
-*: 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 screenreader solutions the editor should behave just like any other form element with respect to ''Tab'' and ''Shift+Tab'' key presses.
+*: 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.
 *: 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 the cursor is in the editing area.
+*: 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.
@@ Line 31: / Line 31: @@
 *: 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 ''Rigth Arrow'' keys can be used to cycle between tabs just like ''Tab'' and ''Shift+Tab''.
+*: 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.
@@ Line 46: / Line 46: @@
 *: 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 sub-memu, the ''Right Arrow'' lets you enter the sub-menu. To return to the parent context menu, use the ''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 sub-menu.
+*: Activate a menu item or open a submenu.
 * ''Esc''
-*: Closes a context menu without executing any command. When inside a sub-menu, closes the sub-menu and returns focus to the parent context menu. Press ''Esc'' again to close it.
+*: 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 ==
@@ Line 94: / Line 94: @@
 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.
-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 ''Insert+Esc'' 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.
+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 an editor is newly created in the middle of a browsing session.
-# When a dialog window is opened.
+* When a dialog window is opened.
-# When a dialog window is closed.
+* When a dialog window is closed.
-# When a context menu is opened.
+* When a context menu is opened.
-# When a drop-down list 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''.
+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''.

@@ Line 79: / Line 79: @@
 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.
-== JAWS  ==
+== JAWS ==
-*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.
+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.
-#When an editor is newly created in the middle of a browsing session.
+=== Editing Mode vs. Non-editing Mode ===
-#When a dialog is opened.
+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.
-In all of the above events, it is recommended that the user press Insert+Esc to keep JAWS's virtual cursor in sync with the browser display.
+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.
-*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.
+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.

@@ Line 77: / Line 77: @@
 == Editor Hotkeys  ==
-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.).
+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.
 == JAWS  ==

@@ Line 65: / Line 65: @@
 == Navigating Color Selection Boxes ==
-*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.
+* ''Down Arrow'', ''Enter'', and ''Space''
-*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.
+*: Enter the color selection box once it is selected on the toolbar.
 == Editor Hotkeys  ==

@@ Line 53: / Line 53: @@
 == Navigating Toolbar Drop-down Lists ==
-* ''Down Arrow''
+* ''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 Arro''w keys can be used to cycle between list items just like ''Tab'' and ''Shift+Tab'', respectively.
+*: 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.