Visual style guidelines

When you are introducing new ideas to your students, it is important to consider how they receive that information. The way you share content - from formatting, to signposting, to use of language - can impact how students process what you have shared. The Universal Design for Learning (UDL) principles provide guidance on structuring your learning content for students.

The following guidelines aim to assist Monash University staff in creating and editing content in Moodle text editors and will cover some specific tools you can use to make text in your unit more accessible. For more general guidelines on accessible content, see the inclusive teaching guide.

Expand the accordions to learn more

Layout (Text formatting)

Chunking text

The simplest way to differentiate your text is to make sure to separate the text into manageable sections by leaving a line between paragraphs to provide visual space on the page. You can also use different formatting options to differentiate the text, see examples below.

Formatting options	Description
Headers	Text editors allow you to change the size and emphasis of headings. Four levels of text are provided in the Moodle text editor: Heading Large Heading Medium Heading Small Paragraph. They can be used hierarchically to give structure to your content. It is recommended to use a combination of a main heading size, a sub heading size and body text. Headings are also recognised by screen readers, increasing accessibility.
Bold and italic text	Bold and italic text can be used separately or *together.* They can be used to indicate emphasis, highlight section headings, indicate key terms, and more. Italic text should be used sparingly, use bold text for preference.
Dot points and numbered lists	If information can be presented in a series of short statements, consider using a list. Dotted lists are suited for non-sequential statements, and numbered lists are for numerically ordered information.
Tables	Tables are ideal for conveying multiple relationships between information in a simple format.

Considerations for chunking text:

Headings can serve to indicate new ideas and sections.
Use text hierarchy and Moodle text and media area to break up chunks of text via subheadings.
Use the ‘squint test’ to see where a student’s attention will be drawn - and if you need to space things out more.
If students have to scroll through more than two or three screens of content, consider using a Moodle book to break the content into ‘chapters'.

Components for Learning

Components for Learning gives you a range of tools to introduce text boxes, highlights and other features to delineate key areas of your text. Use this tool to provide quick and consistent formatting for quotes, tips, key concepts, and more. Components for learning is only available in the TinyMCE editor.

For more information, see the Components for Learning guide.

Considerations for using Components for Learning:

Be consistent. Use the same components for the same purpose throughout your unit.

FontAwesome icons

The FontAwesome filter in Moodle allows you to add icons in text and media areas and is available in TinyMCE and ATTO. For more information, see Icons (below).

Considerations for using icons:

Pair icons with text to clarify meaning.
Be consistent - use the icons you have selected in the same manner throughout your unit.

For more information about text editors, see Selecting your default text editor.

Images
- Always include an image description (alt text) to accommodate individuals with low vision, ensuring that the description accurately portrays the content of the image.
- Source images from the Monash Brand image and illustration banks, otherwise you can use royalty and copyright-free images via Unsplash or Pixabay.
Video and other multimedia
- Include the duration or run time for audio-visual content.
- Embed video content using the Monash video application Panopto and ensure the closed captioning is enabled (closed captioning is enabled by default).
At the time of unit creation, your faculty Moodle admin can elect to include a custom banner - otherwise Moodle will randomly generate a generic banner. It is recommended that you use banners provided by the Monash Web Toolkit (Digital Asset Management) to elevate your unit design and align to our brand. Visit the Monash full-width banners resource to search or scroll through banner options.
If you wish to change your banner, please contact your faculty administrator.
You can use FontAwesome to insert code that shows up as an icon in the Moodle text editor. We have compiled a list of recommended FontAwesome icons that can be used in the higher education context.
Download FontAwesome icon guide
Best practice for icons
We encourage you to use icons to enhance student understanding of content. However be aware that misusing icons can lead to confusion and reduced readability. Please refer to the following principles to ensure that icons are effectively incorporated into your content.
Incorporate icons with accompanying text descriptions
Icons may not convey information as accurately as text, potentially leading to misunderstanding. Additionally, for students with vision impairments, icons can be unreadable. Therefore, we recommend adding text whenever you use an icon.
Reduce the use of icons when possible
When crafting a list, although items can share the same icon, its repetitive use may be burdensome for readers. Consider placing the icon in the list header instead, except when you require icons to differentiate between different types of list items.
Avoid misunderstanding when using multiple icons
When incorporating multiple icons in your content, ensure that the icons and text content are aligned. Avoid situations where one icon represents different meanings or the same meanings are represented by different icons.
Note about using icons in components
Some components already include embedded icons; we recommend refraining from adding additional icons to avoid confusion or redundancy.
For learning and teaching purposes, and to prevent potential misinterpretation, please use icons judiciously, as an excessive amount can be overwhelming. We advise against using emojis or clipart. However, this exclusion applies when communicating with students through informal methods, such as forum responses.

Text colours

Note

Always use the Accessibility Checker tool in the Moodle text editors to make sure your content is accessible according to the Web Content Accessibility Guidelines (WCAG) 2.1.

Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities.

These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices.

Learning and Teaching: Teach HQ

Learning and Teaching: Teach HQ

Visual style guidelines

Expand the accordions to learn more

Chunking text

Considerations for chunking text:

Components for Learning

Considerations for using Components for Learning:

FontAwesome icons

Considerations for using icons:

Images

Video and other multimedia

Best practice for icons

Incorporate icons with accompanying text descriptions

Reduce the use of icons when possible

Avoid misunderstanding when using multiple icons

Note about using icons in components

Considerations for using text colours:

Note

	Use Red for urgent issues and highly critical text. Use it very sparingly as students may find it confronting.
	Use Orange for reminders and warnings. In general it is seen as less urgent than red, so it can be used more freely.
	Use Green for positive feedback, confirmations, or progress markers. It is seen as a positive indicator.