Aria Guidelines: Difference between revisions
Damyon Wiese (talk | contribs) |
|||
| Line 17: | Line 17: | ||
=== How this applies to Moodle === | === How this applies to Moodle === | ||
Keyboard navigation for drag and drop has been built into the Moodle yui module moodle-core-dragdrop. 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). | Keyboard navigation for drag and drop has been built into the Moodle yui module moodle-core-dragdrop. 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 === | === Related tracker issues === | ||
Revision as of 03:09, 2 August 2013
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).
As developers are fixing bugs or designing new interactions for keyboard access, please add to this list of examples.
Drag and drop
Summary
Drag and drop is an interaction technique involving either a mouse or touch enabled device where content is click and dragged from it's original position into a new position to permanently change the position of the element in the page. 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. 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
- focus
- label
- calling button
- calling link
Visual change of HTML (table...)
You need to alert the user of a visual changes. For example, if you collapsed a column from a table you would want to alert the user of the change. See: https://tracker.moodle.org/browse/MDL-36011
