Atto HTML Editor in Moodle

Atto, a lightweight, accessible HTML editor, is the new default text editor in Moodle. It is designed to simplify the editing process and maximize the creation of accessible content. It has several key features to help with this:

  • Improved “paste from Word” function that automatically brings in clean HTML
  • Simplified heading structure
  • Pre-selected font families and font sizes
  • Responsive and mobile friendly design

Important: The previous default editor, TinyMCE, will be still available up until August 7, 2016 when we upgrade to Moodle 3.0. If you prefer to use this editor, it can be accessed and activated in your Profile until that time.

Here are some of the tools available in Atto:

Atto HTML Editor buttons

  1. Paragraph styles: This button gives users the ability to add heading structure to their course content. Only headings 3, 4, 5 are available since headings 1 and 2 are automatically built into courses by the system to enhance their accessibility.
  2. Font color: Color can be added to text using the font color button. However, remember that color alone should not be used to convey meaning. For example, if optional assignments are indicated in red text only, users who have difficulty perceiving color or who use assistive technologies may miss this “optional assignment” cue. Solution: Use color to highlight these assignments, but add the word “optional” to the assignment name.
  3. Image: When images are uploaded into the course, they must have a description unless the image is purely decorative.
  4. Equation editor: This button supports writing or pasting LaTeX equations directly into the editor. Equations are rendered using MathJax, which is accessible to an increasing number of assistive technologies and browser combinations.
  5. Table: This button provides the user with a quick and easy way to create a table for tabular data, adding a caption and defining headers for rows and columns, making the data highly accessible.
  6. Bootstrap grid: The grid options in this button allow users to select layout options for aligning images with text or creating content in columns. Use these accessible grid options, rather than tables, to format content.
  7. Clear formatting: Formatting previously applied to text, such as bolding, coloring, highlighting, etc., can be removed by selecting that text and then clicking on the clear formatting button.
  8. Accessibility checker: This checker lets users know if their content has some accessibility problems.
  9. Screen reader helper: This button alerts screen reader users to styles that are being used in the current content.

Download this information as a Word document.