CK Editor Accessibility Guidelines
!!draft!!
These Guidelines are currently in draft and are not complete.
Introduction
Sakai uses a single consistent editor across all areas where text can be added that is more than a few lines. This editor is based on the most recent stable version of the CKEditor.
When creating content using the rich text editor, it is important that the author follow the simple guidelines below to ensure that the content can be read and understood by all. Creating well structured and accessible content is a best practice that ensures content is compatible with assistive devices, robust enough to be copy and pasted to other contexts or presented in unanticipated contexts, and is a legal requirement in some jurisdictions.
The technical measure of the accessibility of the format of a web-based resource is the WCAG 2.0 standard from the W3C . The requirements of the WCAG 2.0 are summarized in the four letter acronym POUR:
Perceivable - Information must be presentable to users in ways they can perceive.
Operable - User interface components, navigation and structure must be operable.
Understandable - Information and the operation of user interface must be understandable, and structure elements are used in a meaningful way.
Robust - Content must be robust enough so that it can be interpreted reliably by a wide variety of technologies, including assistive technologies.
These relatively simple considerations make a big difference if applied when content is created. The W3C provides more information in their Introduction to Understanding WCAG 2.0 .
Images
Users with some disabilities will be unable to see images and/or comprehend what they are meant to convey.
When to Add Alternative Text Descriptions for Images
Simple image with "simple meaning" - add descriptive alternative text of 10 to 169 character as outlined below. The alternative text should describe the educational/informational purpose of the image
Complex image with "rich meaning" - add a paragraph above or below it that goes into more detail. Some pointers ("Next image," "Previous image") will help tie them together. If the image is referenced from elsewhere in the document, add a paragraph below it that can serve as a caption, and then refer to it.
If the longer alternative text is not feasible, create a link to an external Web page that contains an appropriate description.Decorative image - if the image is purely decorative or used for visual formatting, the alternative text description should be left blank to hide it from users of assistive technology
Examples Text Alternatives
Alt Text: “Scientist in a lab filling a vial with fluid”
Description in the text before or after the image: “Next/Previous image shows a female forensic scientist is filling a vial containing a small about of blood with fluid to denature the sample as part of the process of the PCR analysis method of DNA profiling. In the background is a centrifuge which will aid in the process of extracting the DNA from the sample of blood.”
Reference farther away in body
"... Figure 1.3 shows the correlation between the...."
[Image] Figure 1.3
Steps to Add Alternative Text
Activate the “image” button on the toolbar.
[Figure 1: CKEditor Menu. For screen reader users working with the CKEditor see the <link to ckeditor section>Accessibility Documentation </link>]Locate the “Alternative Text” input form control in the dialog that is loaded after you activate the button.
[Figure 2: CKEditor Image Options Panel. For screen reader users working with the CKEditor see the <link to ckeditor section>Accessibility Documentation </link>]
Place the appropriate alternative text in the form control following the guidelines above.
Document Structure
Assistive technology users rely heavily on headings to navigate complex content. Structuring complex content will help all users parse it as well.
When to Add Structure with Headings
If a document can be outlined or you have an outline in mind when writing it, then adding headings will convey its structure. Some notes:
Nest headings appropriately:
Heading 1 > Heading 2
Heading 2 > Heading 3, Heading 3, Heading 3Use short title-like headings that describe content that follows
If the content you are creating is an HTML Resource start with a Heading 1, in all other cases start with a Heading 4, since the application is already using Heading 1 through Heading 3. Your content in these cases will always be a child of a pre-existing Heading 3.
Examples of Structure
This document is an example.
Steps to add Headings
Headings are available from the Format menu. This can look like one of the two examples below:
[Figure 3: CKEditor Format Menu. For screen reader users working with the CKEditor see the <link to ckeditor section>Accessibility Documentation </link>]
Note: the default size of the Headings can always be adjusted with the Size menu. The default size of some of the higher headings (h5 - h6) may need adjustment. Conversely, d o not use headings for typographical effects.
Using semantically helpful elements
Assistive technology users benefit when the page elements used have a relationship to the meaning they are trying to convey visually.
Lists
If you think of a vertical series of items as a list, you should include it in your page as a list. Select the lines involved and click on the numbered or bulleted list option:
[Figure 4: CKEditor List Buttons. For screen reader users working with the CKEditor see the <link to ckeditor section>Accessibility Documentation </link>]
Paragraphs
A paragraph (hit Enter or Return) is always more meaningful than a line break (hit Shift + Enter or Return).
Inline styles
Using the right style to format a bit of text is very helpful as it "codes" it appropriately. These are all available in the "Styles" menu:
Cited work
Inline Quotation
Computer Code
Sample text
Inserted and Deleted text