Jump to: navigation, search

Difference between revisions of "Orion/Accessibility"

(Windows)
(Bugs: add category)
 
(37 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
A great accessibility test is to put your mouse (and/or trackpad) out of reach and just use the keyboard for a while.
 
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"?
 
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).
+
Need a menu? Type '''Alt'''. Context menu? '''Shift+F10'''. Zoom in/out/restore? '''Ctrl +''', '''Ctrl -''', and '''Ctrl 0''' (or '''Cmd''' on Mac).
 +
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 [http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts Table of Keyboard Shortcuts]. For browser-specific shortcuts, see the list below.
 
Every platform and every browser has a set of keyboard shortcuts. For platform shortcuts, check out Wikipedia's [http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts 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 you can't figure out how to do something with the keyboard in Orion, then maybe that something needs to be fixed.
Line 15: Line 16:
 
* [http://support.mozilla.org/en-US/kb/Accessibility Firefox] on all platforms
 
* [http://support.mozilla.org/en-US/kb/Accessibility Firefox] on all platforms
  
* [http://www.microsoft.com/enable/training/ie9/default.aspx IE9]
+
* [http://www.microsoft.com/enable/training/ie9/default.aspx IE9], [http://windows.microsoft.com/en-CA/internet-explorer/ie-keyboard-shortcuts#ie=ie-10 IE10], [http://windows.microsoft.com/en-CA/internet-explorer/ie-keyboard-shortcuts#ie=ie-11 IE11]
  
* [http://windows.microsoft.com/en-US/windows-8/keyboard-shortcuts IE10 on Windows 8]
+
* [http://windows.microsoft.com/en-US/windows-8/keyboard-shortcuts IE, Narrator, and Magnifier on Windows 8]
  
 
* [https://sites.google.com/a/chromium.org/dev/developers/design-documents/accessibility Chrome] ([https://support.google.com/chrome/bin/answer.py?hl=en&answer=157179&topic=25799&rd=1 Chrome Keyboard Shortcuts by platform])
 
* [https://sites.google.com/a/chromium.org/dev/developers/design-documents/accessibility Chrome] ([https://support.google.com/chrome/bin/answer.py?hl=en&answer=157179&topic=25799&rd=1 Chrome Keyboard Shortcuts by platform])
  
* [http://www.apple.com/safari/features.html#accessibility Safari]
+
* [http://support.apple.com/kb/PH11843 Safari Keyboard Shortcuts] and [http://www.apple.com/accessibility Apple Accessibility]
  
 
==Screen Readers and other Assistive Technologies==
 
==Screen Readers and other Assistive Technologies==
 +
 +
Screen readers interpret what is being displayed on the screen, and then read the information aloud or send it to a braille display to assist low-vision or blind users.
 +
Magnifiers enhance the screen with magnification and highlighting to benefit low-vision users.
 +
Inspectors are testing tools that present semantic information to developers.
  
 
===Windows===
 
===Windows===
  
* [http://www.freedomscientific.com/jaws-hq.asp JAWS (search page for Free Demo, which runs 40 minutes then needs reboot)] ([http://www.freedomscientific.com/documentation/screen-readers.asp JAWS Documentation] and [http://juicystudio.com/article/making-ajax-work-with-screen-readers.php#screenmodes JAWS Screen Reader Modes])
+
* [http://www.freedomscientific.com/jaws-hq.asp JAWS] screen reader (search page for Free Demo, which runs 40 minutes then needs reboot) ([http://www.freedomscientific.com/documentation/screen-readers.asp JAWS Documentation] and [http://juicystudio.com/article/making-ajax-work-with-screen-readers.php#screenmodes JAWS Screen Reader Modes])
 +
 
 +
* [http://www.nvda-project.org/ NVDA] screen reader (free, but requests donation) ([http://www.nvda-project.org/wiki/Documentation NVDA Documentation] and 2 good articles on using NVDA to test web applications in Firefox: [http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/ Marco's NVDA Overview] and [http://webaim.org/articles/nvda/ WebAIM NVDA Overview])
 +
 
 +
* [http://www.microsoft.com/enable/products/windows8/default.aspx Narrator] screen reader for IE10+ in Windows 8 (but not Firefox or Chrome)
  
* [http://www.nvda-project.org/ NVDA (free, but requests donation)] ([http://www.nvda-project.org/wiki/Documentation NVDA Documentation] and 2 good articles on using NVDA to test web applications in Firefox: [http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/ Marco's NVDA Overview] and [http://webaim.org/articles/nvda/ WebAIM NVDA Overview])
+
* [http://www.aisquared.com/zoomtext ZoomText] magnifier/reader
  
* [http://www.microsoft.com/enable/products/windows8/default.aspx Narrator] for IE10 in Windows 8 (but not Firefox or Chrome).
+
* [http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/ AccProbe] inspector for Firefox and Chrome
  
* Inspector tools, such as [http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/ AccProbe] for Firefox and Chrome, or [http://msdn.microsoft.com/en-us/library/dd318521%28v=vs.85%29.aspx Inspect] (available with Windows SDK) for IE
+
* [http://msdn.microsoft.com/en-us/library/dd318521%28v=vs.85%29.aspx Inspect] (available with Windows SDK) for IE
  
 
===Mac===
 
===Mac===
  
* [http://www.apple.com/accessibility/voiceover/ VoiceOver]
+
* [http://www.apple.com/accessibility/voiceover/ VoiceOver] screen reader
  
 
* [http://developer.apple.com/library/mac/#documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTesting/OSXAXTestingApps.html Inspect Objects] (installed with Xcode). Note: with [https://developer.apple.com/library/mac/#documentation/DeveloperTools/Conceptual/WhatsNewXcode/Articles/xcode_4_3.html Xcode 4.3], you need to use <code>Xcode->Open Developer Tool->More Developer Tools...</code>
 
* [http://developer.apple.com/library/mac/#documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTesting/OSXAXTestingApps.html Inspect Objects] (installed with Xcode). Note: with [https://developer.apple.com/library/mac/#documentation/DeveloperTools/Conceptual/WhatsNewXcode/Articles/xcode_4_3.html Xcode 4.3], you need to use <code>Xcode->Open Developer Tool->More Developer Tools...</code>
Line 43: Line 52:
 
===Linux===
 
===Linux===
  
* [http://projects.gnome.org/orca/ Orca] ([http://library.gnome.org/users/orca/stable/ Documentation])
+
* [http://projects.gnome.org/orca/ Orca] screen reader ([http://library.gnome.org/users/orca/stable/ Documentation])
  
* [http://live.gnome.org/Accerciser Accerciser] ([http://developer.gnome.org/accerciser/stable/ Documentation])
+
* [https://wiki.gnome.org/Apps/Accerciser Accerciser] inspector ([http://developer.gnome.org/accerciser/stable/ Documentation])
  
 
===Chrome===
 
===Chrome===
  
[http://www.chromevox.com/ ChromeVox for Chrome browsers on all OS platforms]
+
* [http://www.chromevox.com/ ChromeVox] screen reader for Chrome browsers on all OS platforms
 +
* [http://google-axs-chrome.googlecode.com/svn/trunk/chromeshades_docs/chromeshades_help.html ChromeShades] inspection tool for Chrome browsers shows you visually what a screen reader user would hear
  
 
==Orion Documentation==
 
==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.
+
Accessible documentation includes making sure that the written 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: <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 the context. For example, here are [http://dev.w3.org/html5/alt-techniques/ HTML5: Techniques for providing useful text alternatives].
 +
<p>Make sure that links have meaningful text. Link text for a link in a wiki follows a space after the link url, for example: <nowiki>[http://www.google.com Google]</nowiki>. Avoid using words like [http://www.google.com here] and [http://www.google.com here] and [http://www.google.com here] and [http://www.google.com more...] and [http://www.google.com more...] as link text because screen reader users rely on the link text to tell them what the link is for.</p>
 +
 
 +
==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 up on [http://www.w3.org/WAI/intro/aria WAI-ARIA].
+
In order to write Accessible Rich Internet Applications you need to use WAI-ARIA to augment your HTML/Javascript/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/aria 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/TR/wai-aria-practices/#kbd_generalnav section 3.1.2 and 3.1.3]
+
Read [http://www.w3.org/WAI/PF/aria-practices/#kbd_generalnav section 3.1.2 and 3.1.3]
and [http://www.w3.org/TR/wai-aria-practices/#focus_tabindex section 3.2.1] of the [http://www.w3.org/TR/wai-aria-practices ARIA Authoring Practices] doc.
+
and [http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex section 3.2.1] of the [http://www.w3.org/WAI/PF/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 a dialog, tree, breadcrumb, or toolbar.
  
Here is an [http://www.w3.org/TR/wai-aria/appendices#quickref ARIA Role, State, and Property Quick Reference].
+
Here is an [http://www.w3.org/WAI/PF/aria/appendices#quickref ARIA Role, State, and Property Quick Reference].
  
Here's the full [http://www.w3.org/TR/wai-aria/ ARIA specification].
+
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.
+
==Tips of the Day==
  
===HTML5 and ARIA landmark roles===
+
Orion committer Carolyn MacLeod wrote a very useful series of "tip of the day" messages that are a great place to get started with writing accessible web UIs.
  
This [https://bugs.eclipse.org/bugs/show_bug.cgi?id=365363 Orion bug] discusses HTML5 section elements and ARIA landmark roles,
+
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02345.html Whenever possible, use semantically appropriate HTML elements]
and this [http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ ARIA Landmark Roles blog post] has further discussion.
+
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02346.html Add or augment the semantics of HTML elements with WAI-ARIA]
 +
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02347.html Every focusable element needs a name]
 +
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02352.html Use HTML5 section elements and ARIA landmark roles to semantically organize pages]
 +
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02361.html More on role="application", role="document" and role="presentation"]
  
==Other Web Accessibility Links==
+
==Web Accessibility Links==
  
* The [http://www.w3.org/TR/wai-aria/ Accessible Rich Internet Applications (WAI-ARIA) 1.0] specification.
+
* 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)] specification.
  
* The [http://www.w3.org/TR/wai-aria-practices WAI-ARIA 1.0 Authoring Practices] is an excellent best practices guide.
+
* [http://www.w3.org/WAI/PF/aria-practices/ WAI-ARIA 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.
+
* [https://groups.google.com/forum/#!forum/free-aria Free ARIA] and [http://lists.w3.org/Archives/Public/w3c-wai-ig/ W3C's WAI Interest Group] are email lists that can answer tough questions that google search can't answer.
 
+
* The [http://www.w3.org/TR/WCAG20/ Web Content Accessibility Guidelines (WCAG) 2.0] are the standard guidelines for web 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.
 
* 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.
  
* [http://webaim.org/intro/ WebAIM] is a good web accessibility resource with articles and links to other resources.
+
* [http://webaim.org/ WebAIM] is a good web accessibility resource with articles and links to other resources.
  
 
* [http://www.webaxe.org WebAxe] is a web accessibility blog and podcast with news and practical tips.
 
* [http://www.webaxe.org WebAxe] is a web accessibility blog and podcast with news and practical tips.
 
* [http://www.alistapart.com/topics/topic/accessibility/ A List Apart] is a good website containing many articles on web accessibility.
 
  
 
* [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.
 +
 +
* [http://simplyaccessible.com/archives/ Simply Accessible] and [http://alistapart.com/topic/accessibility A List Apart] are good websites containing many articles on web accessibility.
 +
 +
* [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]).
 +
 +
==Automated Testing Tools==
 +
 +
Automated testing tools can find that low-hanging fruit, such as missing alt text on images, or pages without any headings. However automated testing does not take the place of clean design, user testing, and an understanding of what makes an application accessible.
 +
 +
* [http://chrispederick.com/work/web-developer/ Web Developer Plugin for Chrome and Firefox]
 +
 +
* [http://wave.webaim.org/ WAVE Web Accessibility Evaluation Tool]
 +
 +
* [http://www.paciellogroup.com/resources Colour Contrast Analyser (Win/Mac), Web Accessibility Toolbar (WAT) for Internet Explorer, and Accessibility Viewer (aViewer)] from The Paciello Group.
 +
 +
* [http://leaverou.github.io/contrast-ratio/ Contrast Ratio] colour contrast checker.
 +
 +
* [http://usabilitygeek.com/10-free-web-based-web-site-accessibility-evaluation-tools/ List of 10 free web accessibility tools]
 +
 +
* [http://www.w3.org/WAI/demos/bad/Overview.html BAD: Before and After Demo] shows a demo web site before and after coding for accessibility.
  
 
== Bugs  ==
 
== Bugs  ==
Line 109: Line 147:
  
 
When you run into an issue, check the
 
When you run into an issue, check the
[https://bugs.eclipse.org/bugs/buglist.cgi?keywords=accessibility;keywords_type=allwords;classification=Eclipse;query_format=advanced;bug_status=UNCONFIRMED;bug_status=NEW;bug_status=ASSIGNED;bug_status=REOPENED;product=Orion Orion accessibility bug list].
+
[https://bugs.eclipse.org/bugs/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&classification=Eclipse&f1=short_desc&f2=keywords&j_top=OR&o1=allwordssubstr&o2=substring&product=Orion&query_format=advanced&v1=accessibility&v2=accessibility&order=bug_id%20DESC Orion accessibility bug list].
  
 
If your issue isn't in the list, [https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Orion&keywords=accessibility file an Orion accessibility bug].
 
If your issue isn't in the list, [https://bugs.eclipse.org/bugs/enter_bug.cgi?product=Orion&keywords=accessibility file an Orion accessibility bug].
  
 
If you know how to fix it, please [[Orion/Contributing_Code|submit a patch]].
 
If you know how to fix it, please [[Orion/Contributing_Code|submit a patch]].
 +
 +
[[Category:Orion]]

Latest revision as of 18:18, 11 February 2014

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. Zoom in/out/restore? Ctrl +, Ctrl -, and Ctrl 0 (or Cmd on Mac). 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

Screen Readers and other Assistive Technologies

Screen readers interpret what is being displayed on the screen, and then read the information aloud or send it to a braille display to assist low-vision or blind users. Magnifiers enhance the screen with magnification and highlighting to benefit low-vision users. Inspectors are testing tools that present semantic information to developers.

Windows

  • Narrator screen reader for IE10+ in Windows 8 (but not Firefox or Chrome)
  • AccProbe inspector for Firefox and Chrome
  • 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 inspection tool for Chrome browsers shows you visually what a screen reader user would hear

Orion Documentation

Accessible documentation includes making sure that the written 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 the context. For example, here are HTML5: Techniques for providing useful text alternatives.

Make sure that links have meaningful text. Link text for a link in a wiki follows a space after the link url, for example: [http://www.google.com Google]. Avoid using words like here and here and here and more... and more... as link text because screen reader users rely on the link text to tell them what the link is for.

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/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 a dialog, 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.

Tips of the Day

Orion committer Carolyn MacLeod wrote a very useful series of "tip of the day" messages that are a great place to get started with writing accessible web UIs.

  1. Whenever possible, use semantically appropriate HTML elements
  2. Add or augment the semantics of HTML elements with WAI-ARIA
  3. Every focusable element needs a name
  4. Use HTML5 section elements and ARIA landmark roles to semantically organize pages
  5. More on role="application", role="document" and role="presentation"

Web Accessibility Links

  • The ARIA wiki is still being developed, but it has some good resources.
  • 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.
  • The Paciello Group is a good website containing a web accessibility blog and other resources.

Automated Testing Tools

Automated testing tools can find that low-hanging fruit, such as missing alt text on images, or pages without any headings. However automated testing does not take the place of clean design, user testing, and an understanding of what makes an application accessible.

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.