Faculty_HowTo: Text Editor Icons 4.0

Text Editor Icons 4.0

Layout of the text editor menu

Setting Font and Heading Size

Setting Font and Heading Size

Accessibility Note:

Headings should be ordered sequentially so that screen-readers appropriately summarize page content.

Heading (large) sets an "H3" heading
Heading (medium) sets an "H4" sub-heading
Heading (small) sets an "H5" sub-sub-heading
Automated page titles that appear at the top of the page are set to "H2" so all headings should be sequential from there.

Using Style Sheets (font sizes)

Using Style Sheets (font sizes)

Accessibility Note:

When copying and pasting text into the Text Editor, it is always a good idea to highlight all text and apply the [ x No style ] style option in order to clear any embedded styles.

Use font styles for emphasis only. Accessibility readers do not clearly read font styles so they won't register them as section headers or other ordering functions. Avoid using a combination of too many font styles in a single page.

Clear formatting: You can also clear formatting by highlighting the text you want to clear and then selecting the clear formatting icon: []

Font Family

Accessibility Warning - Not recommended:

It is highly unadvisable to alter or use multiple font-families. Deferring to the default font family is standard web-design practice.

Font families can create issues with various browsers and screen readers do not interpret font to users. Defer to the default font family in all cases. You are better off using headings structures, font-sizes, box-outlines, and colour (limited) to emphasize and differentiate text.

Font Colour Picker

(= Pick your own colour)

Accessibility Note:

Font Colour should be used sparingly and always meet contrast guidelines. Visit the WebAIM Contrast Checker to ensure you are meeting accessibility requirements.

Keep in mind that colour is not 'read' by screen-readers and can create issues for certain visual disabilities.

Highlight Colour Picker

(= Pick your own colour)

Accessibility Note:

Highlight Colour should be used sparingly and always meet contrast guidelines. Visit the WebAIM Contrast Checker to ensure you are meeting accessibility requirements.

Keep in mind that colour is not 'read' by screen-readers and can create issues for certain visual disabilities.

Text Emphasis and Effects

	Underline Text
	Bold Text
	Italicize Text

	Strike Through
	Superscript
	Subscript

	Add Emoticon
	Special Character
	Equation Editor

Paragraph Layouts

	Add Horizontal Line
	Justify Left - Centre - Justify Right
	Indent Right - Indent Left

	Insert Bulleted List
	Insert Numbered List
	Insert Table

Adding Links and Media

Accessibility Note:

1. Links: Do not select the [ open in new window ]. Web accessibility standard understands that this can be very disorienting for users. Users can opt to open in new tabs and windows on their own. Avoid using 'click here' or 'more information' as link text. Make sure to use descriptive text for the link.

2. Images: Make sure to give the image alt text - there are very few cases where this is not necessary. Do not use images to provide text content. If a user must read the text content of an image, you should re-produce the text content below the image.

3. Videos: use the Kaltura captioning software to ensure your videos provide active captioning and a printable transcript.

The Kaltura icon opens your Kaltura media gallery, where you can upload a video or select an existing video.
The video-recorder icon allows you to record a video with a maximum length of 4minutes which will then be added to your Kaltura media gallery where it can then be auto-captioned.

4. Audio: The audio recorder icon allows you to record an audio clip with a maximum length of 4minutes which will be stored in your course server files.

5. H5P: This allows instructors to insert mini-games and activities as page content.

6. Manage Files: all file content except videos are saved in your file server - you can access and manage the files in a single given page via the manage files icon: