Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Orion/Accessibility"
(→Chrome) |
|||
Line 57: | Line 57: | ||
Alternative text for an image in a wiki follows a vertical bar typed after the image file name, for example: <nowiki>[[Image:Orion-myimage.png|My Alternative Text]]</nowiki>. | Alternative text for an image in a wiki follows a vertical bar typed after the image file name, for example: <nowiki>[[Image:Orion-myimage.png|My Alternative Text]]</nowiki>. | ||
Exactly what the alternative text should say depends on context. For example, here are [http://dev.w3.org/html5/alt-techniques/ HTML5: Techniques for providing useful text alternatives]. | Exactly what the alternative text should say depends on context. For example, here are [http://dev.w3.org/html5/alt-techniques/ HTML5: Techniques for providing useful text alternatives]. | ||
+ | |||
+ | ==WAI== | ||
+ | |||
+ | The [http://www.w3.org/WAI/ W3C Web Accessibility Initiative] is the overarching body that publishes the standards and guidelines for web accessibility. | ||
==ARIA== | ==ARIA== | ||
− | Read | + | In order to write Accessible Rich Internet Applications you need to use WAI-ARIA to augment your HTML, Javascript, and CSS with semantic information. Read the [http://www.w3.org/WAI/intro/aria Introduction to WAI-ARIA] or jump right into the [http://www.w3.org/WAI/PF/wai-aria/complete WAI-ARIA Specification]. |
Follow the [http://www.w3.org/WAI/PF/aria-practices/#accessiblewidget 13-step process for creating an accessible widget with WAI-ARIA]. | Follow the [http://www.w3.org/WAI/PF/aria-practices/#accessiblewidget 13-step process for creating an accessible widget with WAI-ARIA]. | ||
Make sure the user can navigate to every focusable control or item with the keyboard. | Make sure the user can navigate to every focusable control or item with the keyboard. | ||
− | Read [http://www.w3.org/ | + | Read [http://www.w3.org/WAI/PF/wai-aria-practices/#kbd_generalnav section 3.1.2 and 3.1.3] |
− | and [http://www.w3.org/ | + | and [http://www.w3.org/WAI/PF/wai-aria-practices/#focus_tabindex section 3.2.1] of the [http://www.w3.org/WAI/PF/wai-aria-practices ARIA Authoring Practices] doc. |
Follow the [http://www.w3.org/WAI/PF/aria-practices/#aria_ex ARIA Design Patterns] when you are creating custom controls like the tree, breadcrumb, or toolbar. | Follow the [http://www.w3.org/WAI/PF/aria-practices/#aria_ex ARIA Design Patterns] when you are creating custom controls like the tree, breadcrumb, or toolbar. | ||
− | Here is an [http://www.w3.org/ | + | Here is an [http://www.w3.org/WAI/PF/wai-aria/appendices#quickref ARIA Role, State, and Property Quick Reference]. |
− | + | For examples of ARIA in Orion, search for <code>aria-</code> or <code>tabindex=</code> or <code>role=</code> in the code. | |
− | + | ||
− | For examples of ARIA in Orion, search for <code>aria-</code> or <code>role=</code> in the code. | + | |
===HTML5 and ARIA landmark roles=== | ===HTML5 and ARIA landmark roles=== | ||
Line 81: | Line 83: | ||
and this [http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ ARIA Landmark Roles blog post] has further discussion. | and this [http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ ARIA Landmark Roles blog post] has further discussion. | ||
− | == | + | ==Web Accessibility Links== |
− | * The [http://www.w3.org/TR/ | + | * The [http://www.w3.org/TR/WCAG20/ Web Content Accessibility Guidelines (WCAG) 2.0] are the standard guidelines for web accessibility. |
+ | |||
+ | * The [http://www.w3.org/WAI/PF/aria/ Accessible Rich Internet Applications (WAI-ARIA) 1.0] specification. | ||
− | * The [http://www.w3.org/ | + | * The [http://www.w3.org/WAI/PF/aria-practices/ WAI-ARIA 1.0 Authoring Practices] is an excellent best practices guide. |
* The [https://developer.mozilla.org/en/aria ARIA wiki] is still being developed, but it has some good resources. | * The [https://developer.mozilla.org/en/aria ARIA wiki] is still being developed, but it has some good resources. | ||
* The [https://groups.google.com/forum/#!forum/free-aria Free ARIA] email list can answer tough questions that google search can't answer. | * The [https://groups.google.com/forum/#!forum/free-aria Free ARIA] email list can answer tough questions that google search can't answer. | ||
− | |||
− | |||
* The [http://www-03.ibm.com/able/guidelines/web/accessweb.html IBM web accessibility checklist] and [http://www-03.ibm.com/able/guidelines/documentation/accessdoc.html IBM document accessibility checklist] are both excellent resources providing many examples of ways to improve accessibility. | * The [http://www-03.ibm.com/able/guidelines/web/accessweb.html IBM web accessibility checklist] and [http://www-03.ibm.com/able/guidelines/documentation/accessdoc.html IBM document accessibility checklist] are both excellent resources providing many examples of ways to improve accessibility. | ||
Line 102: | Line 104: | ||
* [http://www.paciellogroup.com/ The Paciello Group] is a good website containing a web accessibility blog and other resources. | * [http://www.paciellogroup.com/ The Paciello Group] is a good website containing a web accessibility blog and other resources. | ||
+ | |||
+ | * [https://mikewest.org/2011/12/transcript-gdd-accessibility-with-chromevox Accessibility with ChromeVox] is a good overview talk on web accessibility. | ||
* [http://www.hhs.gov/web/508/index.html Section 508 (for Web)] is a U.S law governing accessibility. (See also [http://www.section508.gov/ Section 508]). | * [http://www.hhs.gov/web/508/index.html Section 508 (for Web)] is a U.S law governing accessibility. (See also [http://www.section508.gov/ Section 508]). |
Revision as of 12:02, 9 January 2013
Contents
Testing Orion Accessibility
A great accessibility test is to put your mouse (and/or trackpad) out of reach and just use the keyboard for a while. Every time you find yourself reaching for your visual pointing device, stop and think, "Can I do this with the keyboard"? Need a menu? Type Alt. Context menu? Shift+F10. List of keyboard commands in Orion? Shift+? (or Alt+Shift+? from within the editor). Every platform and every browser has a set of keyboard shortcuts. For platform shortcuts, check out Wikipedia's Table of Keyboard Shortcuts. For browser-specific shortcuts, see the list below. If you can't figure out how to do something with the keyboard in Orion, then maybe that something needs to be fixed. If an important function takes too many keystrokes, maybe a key binding - or a refactoring - is needed.
After you become more proficient with keyboard navigation, start testing with a screen reader. Learn some of the screen reader's keyboard commands. Try listening without looking at the monitor. Think you've got the keyboard aced? Turn off your monitor and see if you can last more than 30 seconds before turning it back on.
Browser Accessibility and Keyboard Shortcuts
- Firefox on all platforms
Screen Readers and other Assistive Technologies
Windows
- JAWS (search page for Free Demo, which runs 40 minutes then needs reboot) (JAWS Documentation and JAWS Screen Reader Modes)
- NVDA (free, but requests donation) (NVDA Documentation and 2 good articles on using NVDA to test web applications in Firefox: Marco's NVDA Overview and WebAIM NVDA Overview)
- Narrator for IE10 in Windows 8 (but not Firefox or Chrome).
- Inspector tools, such as AccProbe for Firefox and Chrome, or Inspect (available with Windows SDK) for IE
Mac
- Inspect Objects (installed with Xcode). Note: with Xcode 4.3, you need to use
Xcode->Open Developer Tool->More Developer Tools...
Linux
Chrome
- ChromeVox screen reader for Chrome browsers on all OS platforms
- ChromeShades for Chrome browsers shows you what a screen reader would see
Orion Documentation
Accessible documentation includes making sure that the text can stand alone without the images. If images are used to convey meaning, then suitable replacement text needs to be supplied. Alternative text for an image in a wiki follows a vertical bar typed after the image file name, for example: [[Image:Orion-myimage.png|My Alternative Text]]. Exactly what the alternative text should say depends on context. For example, here are HTML5: Techniques for providing useful text alternatives.
WAI
The W3C Web Accessibility Initiative is the overarching body that publishes the standards and guidelines for web accessibility.
ARIA
In order to write Accessible Rich Internet Applications you need to use WAI-ARIA to augment your HTML, Javascript, and CSS with semantic information. Read the Introduction to WAI-ARIA or jump right into the WAI-ARIA Specification.
Follow the 13-step process for creating an accessible widget with WAI-ARIA.
Make sure the user can navigate to every focusable control or item with the keyboard. Read section 3.1.2 and 3.1.3 and section 3.2.1 of the ARIA Authoring Practices doc.
Follow the ARIA Design Patterns when you are creating custom controls like the tree, breadcrumb, or toolbar.
Here is an ARIA Role, State, and Property Quick Reference.
For examples of ARIA in Orion, search for aria-
or tabindex=
or role=
in the code.
HTML5 and ARIA landmark roles
This Orion bug discusses HTML5 section elements and ARIA landmark roles, and this ARIA Landmark Roles blog post has further discussion.
Web Accessibility Links
- The Web Content Accessibility Guidelines (WCAG) 2.0 are the standard guidelines for web accessibility.
- The Accessible Rich Internet Applications (WAI-ARIA) 1.0 specification.
- The WAI-ARIA 1.0 Authoring Practices is an excellent best practices guide.
- The ARIA wiki is still being developed, but it has some good resources.
- The Free ARIA email list can answer tough questions that google search can't answer.
- The IBM web accessibility checklist and IBM document accessibility checklist are both excellent resources providing many examples of ways to improve accessibility.
- WebAIM is a good web accessibility resource with articles and links to other resources.
- WebAxe is a web accessibility blog and podcast with news and practical tips.
- A List Apart is a good website containing many articles on web accessibility.
- The Paciello Group is a good website containing a web accessibility blog and other resources.
- Accessibility with ChromeVox is a good overview talk on web accessibility.
- Section 508 (for Web) is a U.S law governing accessibility. (See also Section 508).
Bugs
Orion is an open source project. Testing, bug filing/triage, documentation and code contributions to the accessibility support are very welcome and greatly appreciated.
When you run into an issue, check the Orion accessibility bug list.
If your issue isn't in the list, file an Orion accessibility bug.
If you know how to fix it, please submit a patch.