|
|
| (56 intermediate revisions by 22 users not shown) |
| Line 1: |
Line 1: |
| Websites built with '''accessibility''' in mind are flexible in meeting different user needs, preferences and situations. Though these methods can increase [[Development:Usability|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.
| | {{Template:Migrated|newDocId=/general/development/policies/accessibility}} |
| | |
| == Starting points ==
| |
| | |
| These are some readable introductions to accessibility that cover; what accessibility is, why it is important, as well as practical advice.
| |
| * [http://www.w3.org/WAI/intro/accessibility.php Web Accessibility Initiative's ''Introduction to Web Accessibility'']
| |
| * [http://diveintoaccessibility.info/ Mark Pilgrim's ''Dive into Accessibility'']
| |
| * [http://joeclark.org/book/ Joe Clark's ''Building Accessible Websites'' book]
| |
| | |
| == 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 <code><h1>, <h2>, <h3>...</code>, which are used to form the document's hierarchical structure, and <code><strong></code> and <code><em></code> 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 <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
| |
| * An <code>alt</code> attribute is required (even if empty) on all images.
| |
| * If a link is wrapping an <code><img></code>, the <code><img></code> does not need a <code>title</code> attribute if the link has one.
| |
| * The <code>alt</code> for an image and the <code>title</code> for its surrounding link should usually differ. An image <code>alt</code> attribute 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.
| |
| ; Links and buttons should be selectable and easily click-able
| |
| * An image used as an icon for a user to click should be large enough so that the user can click on it easily.
| |
| * Users should be able to navigate to all links and buttons using the keyboard.
| |
| * Generally we should avoid having two buttons/links that achieve the same action in the same area. This can be annoying and confusing for users of screen readers.
| |
| ; 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 ===
| |
| | |
| * [http://www.w3.org/WAI/ Web Accessibility Initiative]
| |
| ** [http://www.w3.org/WAI/intro/wcag.php Web Content Accessibility Guidelines (WCAG)]
| |
| ** [http://www.w3.org/WAI/intro/wcag20 Web Content Accessibility Guidelines 2.0 (draft)]
| |
| *** An article on the [http://www.alistapart.com/articles/tohellwithwcag2 problems with WCAG2] from A List Apart
| |
| ** [http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html Client-side scripting guidelines]
| |
| | |
| * [http://www.w3.org/WAI/intro/aria.php W3C ARIA]
| |
| | |
| * [http://webaim.org/techniques/forms/controls WebAIM Form Accessibility guidelines]
| |
| * [http://webaim.org/techniques/aria/ WebAIM ARIA guidelines]
| |
| | |
| === USA ===
| |
| * [http://www.section508.gov/ Section 508]
| |
| | |
| === UK ===
| |
| * [http://www.parliament.the-stationery-office.co.uk/pa/ld200001/ldbills/003/2001003.htm SENDA - Special Educational Needs and Disability Act/Bill]
| |
| * [http://www.opsi.gov.uk/acts/acts1995/1995050.htm Disability Discrimination Act 1995]
| |
|
| |
| === Germany ===
| |
| * [http://www.einfach-fuer-alle.de/artikel/bitv/ Barrierefreie Informationstechnik-Verordnung - BITV]
| |
| | |
| == Tools ==
| |
| | |
| === Firefox extensions ===
| |
| * [http://firefox.cita.uiuc.edu/ Firefox Accessibility Extension] by the Illinois Center for Information Technology and Web Accessibility (iCITA)
| |
| * [[Web developer extension]] for [[Firefox]]
| |
| * [[Blank_Your_Monitor_and_Easy_Reading_extension_for_Firefox|Blank Your Monitor and Easy Reading Extension]] for Firefox
| |
| * [http://www.deque.com/products/worldspace-fireeyes/download-worldspace-fireeyes|FireEye plugin for Firebug]
| |
| * [https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-checker|Color contrast plugin for Firefox]
| |
| | |
| === Accessibility validation tools ===
| |
| * [[W3C validation]] (for [[HTML in Moodle]], [[CSS]] and [[RSS]])
| |
| * [http://wave.webaim.org/ Web accessibility evaluation tool]
| |
| * [http://cynthiasays.com/ Cynthia Says accessibility checker]
| |
| | |
| === Screen readers ===
| |
| * [http://www.standards-schmandards.com/projects/fangs/ Fangs – the screen reader emulator] for Firefox
| |
| * [http://www.nvda-project.org/ NVDA NonVisual Desktop Access] - open source screen reader for Windows
| |
| * [http://webaim.org/projects/screenreadersurvey4// WebAIM Screen reader survey] (Predominance of tools, browsers, OSs used by accessibility users)
| |
| | |
| See also this [http://www.w3.org/WAI/ER/tools/complete long list of accessibility tools].
| |
| | |
| == Resources ==
| |
| | |
| * [http://webstandards.org/action/atf/manifesto/ Web Standards.org's ''Accessibility Task Force Manifesto'']
| |
| * [http://alistapart.com/topics/userscience/accessibility/ Accessibility articles from ''A List Apart'']
| |
| * [http://diveintomark.org/archives/2003/08/29/semantics Mark Pilgrim's ''Won’t somebody please think of the gerbils?'']
| |
| : [http://diveintoaccessibility.org/ Dive Into Accessibility] by Mark Pilgrim
| |
| * [http://joeclark.org/access/webaccess/ Joe Clark's writings on accessibility]
| |
| : [http://joeclark.org/book/ Building Accessible Websites] by Joe Clark (online version)
| |
| * [http://en.wikipedia.org/wiki/Web_accessibility Wikipedia article on ''Web Accessibility'']
| |
| * [http://juicystudio.com/article/validity-accessibility.php ''Validity and Accessibility'']
| |
| * [http://www.edtec.unsw.edu.au/inter/support/accessibility/access_vids.cfm Videos showing as student accessing another Learning Management System via Screen Reader software]
| |
| | |
| == See also ==
| |
| | |
| * [[Semantic HTML]]
| |
| * [http://moodle.org/mod/forum/view.php?f=820 Accessibility forum on Moodle.org]
| |
| * Using Moodle [http://moodle.org/mod/forum/discuss.php?d=85119 New Accessibility Themes] forum discussion
| |
| * See [[:en:Usability FAQ]] for the related concept of usability.
| |
| * [[:en:Moodle Accessibility Specification]]
| |
| * http://moodle.org/mod/forum/discuss.php?d=127807#p559951
| |
| * The [http://dev.moodle.org/course/view.php?id=2 Introduction to Moodle Programming] provides some extensive information and discussion on accessibility.
| |
| * [http://www.easy.pro.br/ EASY: Interface Between The Virtual Environment Moodle Learning and People with Visual Impairments]
| |
| * [http://www.bbc.co.uk/blogs/bbcinternet/2008/03/homepage_accessibilty.html BBC blog post on how their Web 2.0 homepage was made accessible]
| |
| * [http://www.bbc.co.uk/accessibility/ BBC Accessibility Help]
| |
| * [http://tracker.moodle.org/browse/MDL-7396 Accessibility Compliance in Moodle 1.8]
| |
| * [http://tracker.moodle.org/browse/MDL-7860 Compliance with Italian Legislation on Accessibility]
| |
| | |
| [[Category:Coding guidelines|Accessibility]]
| |
| [[Category:Accessibility]]
| |
