Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Accessibility: Difference between revisions

From MoodleDocs
(Adding and updating accessibility guidelines)
Line 15: Line 15:
: Users of non-visual browsers cannot see images. They can read the <code>alt</code> tags of normal images, but background images are not presented like normal images.
: Users of non-visual browsers cannot see images. They can read the <code>alt</code> tags of normal images, but background images are not presented like normal images.
; Image <code>alt</code> and <code>title</code> attributes should differ
; Image <code>alt</code> and <code>title</code> attributes should differ
: An image <code>alt</code> tag provides a text equivalent to an image, whereas a <code>title</code> attribute adds supplementary information about the purpose or action associated with an image. Simply repeating the same text in <code>alt</code> and <code>title</code> attributes adds little and can be annoying for screen reader users.
: An image <code>alt</code> tag provides a text equivalent to an image, whereas a <code>title</code> attribute adds supplementary information about the purpose or action associated with an image link. Simply repeating the same text in <code>alt</code> and <code>title</code> attributes adds little and can be annoying for screen reader users.
; Support dynamic interaction with [[ARIA]] attributes
; Support dynamic interaction with [[ARIA]] attributes
: Events triggered by AJAX and JavaScript can be less obvious to users of non-visual browsers. [[ARIA]] attributes can assist users of such browsers to follow a dynamic change.
: Events triggered by AJAX and JavaScript can be less obvious to users of non-visual browsers. [[ARIA]] attributes can assist users of such browsers to follow a dynamic change.

Revision as of 02:03, 19 October 2012

Websites built with accessibility in mind are flexible in meeting different user needs, preferences and situations. Though these methods can increase usability for everyone who uses the Web they are often legally required to be implemented in a specific effort to prevent discrimination against people with disabilities.

Starting points

These are some readable introductions to accessibility that cover; what accessibility is, why it is important, as well as practical advice.

Moodle-related accessibility coding guidelines

Use CSS, but still use headings, strong and emphasis
It is generally a good idea to separate a document's content HTML from how it is presented using CSS. There are some tags that affect a document's presentation but also contribute to the structure and meaning of the content. These tags should remain in HTML. This includes heading tags <h1>, <h2>, <h3>..., which are used to form the document's hierarchical structure, and <strong> and <em> tags, which are used to add meaning to sections of text.
Avoid using background images for important information
Users of non-visual browsers cannot see images. They can read the alt tags of normal images, but background images are not presented like normal images.
Image alt and title attributes should differ
An image alt tag provides a text equivalent to an image, whereas a title attribute adds supplementary information about the purpose or action associated with an image link. Simply repeating the same text in alt and title attributes adds little and can be annoying for screen reader users.
Support dynamic interaction with ARIA attributes
Events triggered by AJAX and JavaScript can be less obvious to users of non-visual browsers. ARIA attributes can assist users of such browsers to follow a dynamic change.
Use labels with inputs
Context can easily be lost without a visual presentation. Labels are needed on all input input elements (except button) to describe their purpose in a form. Labels should be unique on a page. Repeated elements should have a unique label that identifies the element within its context.
Use appropriate page titles
A page title is a starting point for a screen reader. Page titles should be unique and should make sense for the page. Avoid generic page titles.
All pages should be navigable using just a keyboard
It should be possible navigate to all points on a page just using a keyboard. Important events triggered by a mouse event should be able to be triggered when the item receives focus through keyboard navigation.

Web standards, guidelines and legislation

International

USA

UK

Germany

Tools

Firefox extensions

Accessibility validation tools

Screen readers

See also this long list of accessibility tools.

Resources

Dive Into Accessibility by Mark Pilgrim
Building Accessible Websites by Joe Clark (online version)

See also