Aria Guidelines

From MoodleDocs

This is a collection of best practice techniques for use of aria attributes and related features to enable access from assistive technologies in Moodle (e.g. screenreaders, zoom text, keyboard navigation). We recommend you to have a look to too.

As developers are fixing bugs or designing new interactions for keyboard access, please add to this list of examples.

Drag and drop


Unless care is taken, this interaction is not possible for users not using a mouse or touch interface (this could be a screen reader, or someone may have a motor impairment). Note: providing a non-javascript alternative for this interaction is not sufficient to make this accessible (javascript enabled != can use a mouse).

Accessibility Goals

Provide a keyboard equivalent for this interaction.


How this applies to Moodle

Keyboard navigation for drag and drop has been built into the Moodle yui module moodle-core-dragdrop (once MDL-36002 is integrated). If you are implementing drag and drop in Moodle - use it - don't roll your own. Second - if you are using drag and drop in Moodle - you must use obvious "grab handles" which is a standard element used to initiate the drag and drop. Get a grab handle with M.core.dragdrop.get_drag_handle() (which will return a Y.Node with an image of a grab handle and event listeners already setup).

The way this works with M.core.dragdrop is that pressing enter on the drag handle will open list of valid drop targets for the drag with all the correct aria attributes.

Related tracker issues


Opening a dialogue/popup


Opening a dialog involves many aria tasks. You need to take care about:

  • dialog focus: if the dialog gets the focus, and in most case it should have the focus, then the user needs to be alerted.
  • dialog label: alert the user what the dialog is about.
  • triggering button: alert the user that the button will open a dialog.
  • triggering link: alert the user that the link will open a dialog.

Accessibility Goals

Alert the user that a link will open a dialog. Alert the user that a dialog is opened.


dialog label


Related tracker issues

dialog focus

MDL-35926 MDL-35923

triggering button


triggering link


Changing div/span content

Accessibility Goals

Alert the user that a specific region changed.



Managing live changes:


Accessibility Goals

You need to alert the user of a collapsing/expanding changes.



Related tracker issues


How to prioritise an accessibility issue

You can get help from to detect important ARIA issues.