Style Guide for Accessible Design in Moodle

Consideration Points for Designing Accessible Online Content

Designing online content accessibly improves the learning experience for all users. Atto, Moodle’s HTML editor, and Moodle’s two responsive themes, Clean and Snap, provide many built-in accessibility features. Using these features will significantly improve your ability to create an accessible online course and will also save you time.

Heading structure in online courses helps all users more easily navigate content in Moodle, but it is especially important for assistive technology users. Six heading levels, H1 – H6, are used internationally. Moodle automatically provides some important and logical heading structure for you.

Clean Theme

In the Clean theme, the title of your course is always an H1; H2s are reserved for titles of blocks. Using the field Moodle provides to name a topic automatically makes the topic title an H3.

Clean theme

If you wish to add sub-topics, the Atto HTML editor provides the option to create headings 3, 4, and 5. To manually create additional heading structure, follow these simple steps:

  1. Highlight the text you want to convert into a heading.
  2. Then from the Paragraph styles button in the Atto HTML editor, select the appropriate heading, Heading 3, 4, or 5. Notice that the HTML editor does not let you select H1 or H2 since these headings are automatically used by the system for other course content.

Notice that Moodle automatically sizes these headings for you, which saves you time.

Snap Theme

The title of your course in Snap is always an H1. The topics in Snap appear as links in the Contents section at the top of every Snap course. When a topic is opened (such as “Welcome to Moodle 101 for Students”), the topic name automatically becomes an H2. If you wish to add sub-topics within any topic, you can manually create an H3 heading and Atto will automatically size the text for you.

Snap theme

When resources and activities open in both Clean and Snap, Moodle automatically assigns heading structure (H2) to the title of the resource and activity.

Give all your headings clear, unique titles and keep them consistent with the language in your syllabus.

In addition to providing good heading structure, it is helpful to explain course navigation to your students and provide them with an orientation. A textual explanation or a brief screen capture video can effectively provide this information and will benefit all students.

Information about the accessibility of all technologies required in the course should be provided in the course syllabus or in the course orientation.

If some content will be opening in new windows in your course, explain this in your course orientation. General rule of thumb - any new content in Moodle always opens in the same window. Content external to Moodle, such as a PDF or an external website, opens in a new window. Remember that consistency will make course navigation better for all students, but especially for students who are new to the learning management system or who are assistive technology users.

When creating hyperlinks that take students to other information and locations, make hyperlinks that are self-describing. In other words, name the link so that all users know where they will be taken when they click on it. Avoid using link phrases, such as click here, read more, etc.

Atto provides a sans serif font and creates font sizes for the headings and regular text. These have been selected for screen readability and will provide textual consistency across your course. Follow these basic guidelines for stylizing text:

  • Avoid using font variations such as bold, italics, underlining, ALL CAPITAL LETTERS and colored text to convey meaning since many users, including users who are color blind or assistive technology users, will not get equivalent information from the font appearance.
  • To remove font formatting that has been bolded, italicized, colorize, etc., highlight the text and click on the Clear formatting button (add graphic) in the Atto HTML editor. All formatting, except heading structure, will be removed and the default font format will be restored.
  • Reserve underlined text for hyperlinks since this is a web convention people are familiar with. Using underlined text for non-link purposes may cause confusion.

Text and Color

Information that is important can be emphasized in a variety of ways, without relying solely on color or other font styles for the emphasis.

  • Improper use of color:
    • Assignments (optional extra credit assignments indicated in red): Collaborative writing assignment, Proposal for final project, Journal entry.
  • Proper use of color:
    • Assignments due this week: Collaborative writing assignment (required), Proposal for final project (required), Journal entry (optional extra credit).

If you want students to pay special attention to a particular sentence in a paragraph, use spacing to make that sentence a separate paragraph and set it apart with a word like “important,” even adding an exclamation point at the end for additional emphasis. The red will still provide a strong visual cue, but all students, including those students who are color blind or assistive technology users, will receive equivalent information.

Important: Class will meet online on March 4th only!

In addition to using special words, punctuation, or spacing, you can use symbols, such as an asterisk, to denote specific types of information (e.g. days when class will meet online). Use your syllabus to inform students how this symbol will be used throughout your course and use it consistently.

Other Text-Related Tips:

Online courses can be text heavy, which makes online learning difficult for many students, including students with print disabilities. Here are some suggestions for addressing this situation:

  • Use descriptive and unique titles to name topics, links, and other content items throughout the course. These titles should be consistent with the language in your syllabus and should make sense in and out of context.
  • Organize textual content in manageable “chunks.” Add an extra space between paragraphs for optimal on-screen reading. This will be particularly helpful for students accessing the course through mobile devices.
  • When appropriate, use lists, either ordered (e.g. numbered list) or unordered (e.g. bulleted list), to clearly structure the presentation of your textual content. Use the two list tools in Atto to properly format your lists. Manually created lists lack the coding assistive technologies use and also take more of your time to create.
  • Supplement text with illustrations and other multimedia elements so that content is represented in ways that meet the diverse learning preferences of your students.

Multimedia content involves the integration of text with video, audio, images, or animation. All media resources need to be accessible and resources are available to provide support.

Video and Closed Captions:

Captions are text versions of the spoken words and sounds presented in video format. Though captioning is primarily intended for those who are deaf or hard of hearing, many people find captions helpful (people watching video in a noisy sports bar or working out at the gym, second language learners, etc.) See the University of Montana’s Electronic Accessibility website for information regarding captioning services available to you and the captioning guidelines that are followed.

Audio and Text Transcripts

Transcripts provide a textual version of an audio recording and are useful to everyone. Students may prefer to listen to the recording and then use the transcript for review at a later date. Transcripts are searchable and provide everyone with flexible use of audio content. See this Accessible Technology Services website for information on transcription services available through IT.

Images and Alternative Text

The meaning contained in images (drawings, photographs, diagrams, maps, charts, etc.) must be conveyed to assistive technology users who do not see those images. Alternative text is added to the images to describe the meaning of the image located in a certain context.

Moodle requires you to insert alternative text for images, unless the image is purely decorative (e.g. a line divider or curlicue). If you check that the image is purely decorative and has no meaning, screen readers will skip over this content.

Insert image

Complex images, such as a diagram of the circulatory system or chart about economic trends, require longer descriptions than are generally put in alternative text. These images should have brief alternative and a paragraph below them that more fully discusses the meaning conveyed in the image. See the DIAGRAM Center for more extensive information on making complex images accessible.

Other Alternative Text Tips:

  • You do not need to include “image of” or “picture of” in your alternative text. Screen readers automatically announce this information out to the user.
  • If your image is a logo that contains text, you must include this text in the alternative text description.
  • Images that are not logos should not contain text. People using low vision software enlarge the elements on their screen in order to see and read the content. When images with text are enlarged, the text pixilated and becomes difficult to read.
  • Use Atto’s Bootstrap grid tool to aligning images with text. Do not use tables to control the layout of images with text.

In addition to the content created in Moodle, instructors generally upload files into Moodle and these files need to adhere to accessibility guidelines too. PDFs and Microsoft Word, Excel, PowerPoint documents are the most common types of uploaded files. Here are some helpful links that provided accessibility guidance:

You may also find these handouts helpful:

Heading Structure

Heading structure in online courses helps all users more easily navigate content in Moodle, but it is especially important for assistive technology users. Six heading levels, H1 – H6, are used internationally. Moodle automatically provides some important and logical heading structure for you.

Clean Theme

In the Clean theme, the title of your course is always an H1; H2s are reserved for titles of blocks. Using the field Moodle provides to name a topic automatically makes the topic title an H3.

Clean theme

If you wish to add sub-topics, the Atto HTML editor provides the option to create headings 3, 4, and 5. To manually create additional heading structure, follow these simple steps:

  1. Highlight the text you want to convert into a heading.
  2. Then from the Paragraph styles button in the Atto HTML editor, select the appropriate heading, Heading 3, 4, or 5. Notice that the HTML editor does not let you select H1 or H2 since these headings are automatically used by the system for other course content.

Notice that Moodle automatically sizes these headings for you, which saves you time.

Snap Theme

The title of your course in Snap is always an H1. The topics in Snap appear as links in the Contents section at the top of every Snap course. When a topic is opened (such as “Welcome to Moodle 101 for Students”), the topic name automatically becomes an H2. If you wish to add sub-topics within any topic, you can manually create an H3 heading and Atto will automatically size the text for you.

Snap theme

When resources and activities open in both Clean and Snap, Moodle automatically assigns heading structure (H2) to the title of the resource and activity.

Give all your headings clear, unique titles and keep them consistent with the language in your syllabus.

In addition to providing good heading structure, it is helpful to explain course navigation to your students and provide them with an orientation. A textual explanation or a brief screen capture video can effectively provide this information and will benefit all students.

Information about the accessibility of all technologies required in the course should be provided in the course syllabus or in the course orientation.

If some content will be opening in new windows in your course, explain this in your course orientation. General rule of thumb - any new content in Moodle always opens in the same window. Content external to Moodle, such as a PDF or an external website, opens in a new window. Remember that consistency will make course navigation better for all students, but especially for students who are new to the learning management system or who are assistive technology users.

When creating hyperlinks that take students to other information and locations, make hyperlinks that are self-describing. In other words, name the link so that all users know where they will be taken when they click on it. Avoid using link phrases, such as click here, read more, etc.

Atto provides a sans serif font and creates font sizes for the headings and regular text. These have been selected for screen readability and will provide textual consistency across your course. Follow these basic guidelines for stylizing text:

  • Avoid using font variations such as bold, italics, underlining, ALL CAPITAL LETTERS and colored text to convey meaning since many users, including users who are color blind or assistive technology users, will not get equivalent information from the font appearance.
  • To remove font formatting that has been bolded, italicized, colorize, etc., highlight the text and click on the Clear formatting button (add graphic) in the Atto HTML editor. All formatting, except heading structure, will be removed and the default font format will be restored.
  • Reserve underlined text for hyperlinks since this is a web convention people are familiar with. Using underlined text for non-link purposes may cause confusion.

Text and Color

Information that is important can be emphasized in a variety of ways, without relying solely on color or other font styles for the emphasis.

  • Improper use of color:
    • Assignments (optional extra credit assignments indicated in red): Collaborative writing assignment, Proposal for final project, Journal entry.
  • Proper use of color:
    • Assignments due this week: Collaborative writing assignment (required), Proposal for final project (required), Journal entry (optional extra credit).

If you want students to pay special attention to a particular sentence in a paragraph, use spacing to make that sentence a separate paragraph and set it apart with a word like “important,” even adding an exclamation point at the end for additional emphasis. The red will still provide a strong visual cue, but all students, including those students who are color blind or assistive technology users, will receive equivalent information.

Important: Class will meet online on March 4th only!

In addition to using special words, punctuation, or spacing, you can use symbols, such as an asterisk, to denote specific types of information (e.g. days when class will meet online). Use your syllabus to inform students how this symbol will be used throughout your course and use it consistently.

Other Text-Related Tips:

Online courses can be text heavy, which makes online learning difficult for many students, including students with print disabilities. Here are some suggestions for addressing this situation:

  • Use descriptive and unique titles to name topics, links, and other content items throughout the course. These titles should be consistent with the language in your syllabus and should make sense in and out of context.
  • Organize textual content in manageable “chunks.” Add an extra space between paragraphs for optimal on-screen reading. This will be particularly helpful for students accessing the course through mobile devices.
  • When appropriate, use lists, either ordered (e.g. numbered list) or unordered (e.g. bulleted list), to clearly structure the presentation of your textual content. Use the two list tools in Atto to properly format your lists. Manually created lists lack the coding assistive technologies use and also take more of your time to create.
  • Supplement text with illustrations and other multimedia elements so that content is represented in ways that meet the diverse learning preferences of your students.

Multimedia content involves the integration of text with video, audio, images, or animation. All media resources need to be accessible and resources are available to provide support.

Video and Closed Captions:

Captions are text versions of the spoken words and sounds presented in video format. Though captioning is primarily intended for those who are deaf or hard of hearing, many people find captions helpful (people watching video in a noisy sports bar or working out at the gym, second language learners, etc.) See the University of Montana’s Electronic Accessibility website for information regarding captioning services available to you and the captioning guidelines that are followed.

Audio and Text Transcripts

Transcripts provide a textual version of an audio recording and are useful to everyone. Students may prefer to listen to the recording and then use the transcript for review at a later date. Transcripts are searchable and provide everyone with flexible use of audio content. See this Accessible Technology Services website for information on transcription services available through IT.

Images and Alternative Text

The meaning contained in images (drawings, photographs, diagrams, maps, charts, etc.) must be conveyed to assistive technology users who do not see those images. Alternative text is added to the images to describe the meaning of the image located in a certain context.

Moodle requires you to insert alternative text for images, unless the image is purely decorative (e.g. a line divider or curlicue). If you check that the image is purely decorative and has no meaning, screen readers will skip over this content.

Insert image

Complex images, such as a diagram of the circulatory system or chart about economic trends, require longer descriptions than are generally put in alternative text. These images should have brief alternative and a paragraph below them that more fully discusses the meaning conveyed in the image. See the DIAGRAM Center for more extensive information on making complex images accessible.

Other Alternative Text Tips:

  • You do not need to include “image of” or “picture of” in your alternative text. Screen readers automatically announce this information out to the user.
  • If your image is a logo that contains text, you must include this text in the alternative text description.
  • Images that are not logos should not contain text. People using low vision software enlarge the elements on their screen in order to see and read the content. When images with text are enlarged, the text pixilated and becomes difficult to read.
  • Use Atto’s Bootstrap grid tool to aligning images with text. Do not use tables to control the layout of images with text.

In addition to the content created in Moodle, instructors generally upload files into Moodle and these files need to adhere to accessibility guidelines too. PDFs and Microsoft Word, Excel, PowerPoint documents are the most common types of uploaded files. Here are some helpful links that provided accessibility guidance:

You may also find these handouts helpful: