Aria Guidelines

Jump to: navigation, search

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 http://www.w3.org/TR/wai-aria-practices/ too.

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


Drag and drop

Summary

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.

References

http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#dragdrop http://www.w3.org/TR/2008/WD-wai-aria-20080204/#dragdrop

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

MDL-36002


Opening a dialogue/popup

Summary

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.

References

dialog label

aria-labelledby http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby

Related tracker issues

dialog focus

MDL-35926 MDL-35923

triggering button

MDL-35922

triggering link

MDL-35919

Changing div/span content

Accessibility Goals

Alert the user that a specific region changed.

References

aria-live http://www.w3.org/TR/wai-aria/states_and_properties#aria-live https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions

Managing live changes: http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#docmgt

Collapsing/Expanding

Accessibility Goals

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

References

aria-expanded http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded
aria-controls http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

Related tracker issues

MDL-36011

How to prioritise an accessibility issue

You can get help from http://oaa-accessibility.org/ to detect important ARIA issues.