m (test) |
(Introduction and basic navigation rewritten. Custom title and links added.) |
||
| Line 1: | Line 1: | ||
| − | CKEditor 3 is | + | {{#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]]. | ||
| − | + | 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 | + | == Basic Navigation == |
| − | *Alt+F10 | + | * ''Tab'' and ''Shift+Tab'' |
| − | *Shift+F10 | + | *: Allow you to move into and out of the 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. |
| − | *Alt+F11 | + | *: 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 toolbar when the 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, 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. | *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. | ||
*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. | *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 == | == 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. | *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. | ||
*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. | *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. | ||
| Line 21: | Line 27: | ||
== Navigating Context Menus == | == Navigating Context Menus == | ||
| − | |||
*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. | *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. | ||
*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. | *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. | ||
== Navigating Style Combo Boxes == | == Navigating Style Combo Boxes == | ||
| − | |||
*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. | *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. | ||
*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. | *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. | ||
== Navigating Color Selection Boxes == | == 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. | *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. | ||
*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 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. | ||
== Editor Hotkeys == | == 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.). | 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.). | ||
| Line 55: | Line 57: | ||
== 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. | *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. | ||
*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: | *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: | ||
Revision as of 09:51, 10 December 2010
Contents
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.
- Tab and Shift+Tab
- Allow you to move into and out of the 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.
- One exception to this rule is when
config.tabSpacesis 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 whenconfig.tabSpacesis set to a non-zero value.
- Alt+F10
- Moves the focus to the editor toolbar when the 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.
- Tab, Shift+Tab, Left Arrow and Right Arrow
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.
Left Arrow and Right Arrow works in the same manner as Tab and Shift+Tab. - Enter and Esc
Pressing Esc will put the focus back to the editing area without executing any commands. Pressing Enter will activiate the selected toolbar item.
- Tab and Shift+Tab
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.
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. - Left Arrow and Right Arrow
When a dialog tab is focused, Left Arrow and Rigth Arrow can also be used to cycle between tabs like Tab and Shift+Tab. - Alt+F10
Pressing Alt+F10 in a dialog will put focus to the currently active tab. - Enter and Esc
Pressing Esc in a dialog is equivalent to pressing the Cancel button or the Close button.
Pressing Enter in a dialog when a single-line text input is at focus is equivalent to pressing the OK button.
Pressing Enter in a dialog when a dialog tab is focused puts focus back to the first input element inside that tab page.
- Tab, Shift+Tab, Down Arrow and Up Arrow
When a context menu is opened, press Tab to cycle through menu items forward, Shift+Tab to cycle backwards.
Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab respectively. - Enter and Esc
Press Enter to activate a menu item or open a sub-menu.
Press close a context menu without executing any command.
- Tab, Shift+Tab, Down Arrow and Up Arrow
Press Tab and Shift+Tab to cycle through items in a combo box forward and backwards, respectively.
Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab. - Enter and Esc
Press Enter to activate the selected item in a combo box and put the focus back to the editing area.
Press Esc to close the combo box without executing any command, and put the focus back to the toolbar.
- Tab, Shift+Tab, Left Arrow and Right Arrow
Press Tab and Shift+Tab to cycle through colors forward and backwards, respectively.
Down Arrow and Up Arrow work in the same manner as Tab and Shift+Tab. - Enter and Esc
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.
Press Esc to close the color selection box and put focus back to the toolbar.
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.).
- Ctrl+Z
Undo command. - Ctrl+Y and Ctrl+Shift+Z
Redo command. - Ctrl+L
Open link dialog. - Ctrl+B
Bold command. - Ctrl+I
Italics command. - Ctrl+U
Underline command. - Ctrl+C or Ctrl+Insert
Copy. - Ctrl+V or Shift+Insert
Paste. - Ctrl+X or Shift+Delete
Cut. - Ctrl+Left or Ctrl+Right
Move to the previous or next word. - Ctrl+Backspace
Remove the previous word. - Ctrl+Delete
Remove the current word. - Shift+Enter
Create a new line in the same paragraph or list item.
- Alt+-
Toggle collapse toolbar.
JAWS
- Editing Mode vs. Non-editing Mode
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.
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.
Pressing Esc inside CKEditor will switch JAWS to 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. 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.
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.
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.
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.
- When a dialog is opened.
- When a dialog is closed.
- When a context menu is opened.
- When a combo box menu is opened.
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.
- Arrow Keys
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.