Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Orion/Accessibility"

(Testing Web Accessibility)
 
(124 intermediate revisions by 5 users not shown)
Line 1: Line 1:
Accessibility is one of the [http://eclipse.org/projects/project-plan.php?planurl=http://www.eclipse.org/eclipse/orion/plans/orion-project-plan-0-5.xml#themes_and_priorities plan items for 0.5].
+
==Testing Web Accessibility==
  
With that in mind, here's some homework and light reading to get everybody on the same page.
+
A great accessibility test is to put your mouse out of reach (and/or disable your trackpad) 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"?
 +
Use '''Tab''' and '''Shift+Tab''' to navigate between controls (or grouped controls, like radios), '''arrow keys''' to navigate within controls (or control groups), and '''Space''' or '''Enter''' to select or activate. To tab out of the editor, type '''Ctrl+M''' first (to switch to ''Traversal Mode'' instead of ''Insert Tab Character Mode'') and then type '''Tab''' or '''Shift+Tab'''. Need a context menu? Type '''Shift+F10'''. Exit a menu or dialog? '''Esc'''. Zoom in/out/restore? '''Ctrl +''', '''Ctrl -''', and '''Ctrl 0''' (or '''Cmd +''', '''Cmd -''', '''Cmd 0''' on Mac). List of keyboard commands in Orion? '''Alt+Shift+?'''.
  
==Testing Orion Accessibility==
+
Every platform and every browser has a set of keyboard shortcuts. For platform shortcuts, check out [https://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts 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, then maybe that something needs to be fixed.
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, "How do 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. Refer to Wikipedia's [http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts Table of Keyboard Shortcuts] and external links if necessary.
+
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.
 
If an important function takes too many keystrokes, maybe a key binding - or a refactoring - is needed.
 +
If you get lost and can't figure out where the focus is, maybe you're not drawing the focus ring, or maybe it needs more contrast, or perhaps nothing has focus - which is a fairly serious bug for a keyboard-only user.
  
After you become more proficient with keyboard navigation, start testing with a screen reader. Learn some of the screen reader's keyboard commands.
+
After you become more proficient with keyboard navigation and you have ironed out any serious keyboard navigation bugs, start [http://webaim.org/articles/screenreader_testing/ 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.
+
Try listening without looking at the monitor as you navigate around your page. Does every focusable element have the label and type that you expected? Or is the screen reader saying "button" when an element you consider to be a "menu" gets focus? If you give focus to the "Create a project" text field, does the screen reader say "Create a project; Edit; type in text", or does it just say "Edit; type in text"?
 +
Think you've got this aced? Turn off your monitor and see if you can last more than 30 seconds before turning it back on.
  
==ARIA==
+
==Browser Accessibility and Keyboard Shortcuts==
  
Read up on [http://www.w3.org/WAI/intro/aria WAI-ARIA].
+
* [http://support.mozilla.org/en-US/kb/Accessibility Firefox] accessibility and shortcuts on all platforms
  
Make sure the user can navigate to every focusable control or item with the keyboard.
+
* [http://www.microsoft.com/enable/training/ie9/default.aspx IE9] accessibility and shortcuts, [http://windows.microsoft.com/en-CA/internet-explorer/ie-keyboard-shortcuts#ie=ie-10 IE10] shortcuts, [http://windows.microsoft.com/en-CA/internet-explorer/ie-keyboard-shortcuts#ie=ie-11 IE11] shortcuts
Read [http://www.w3.org/TR/wai-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 "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.
+
* [https://sites.google.com/a/chromium.org/dev/developers/design-documents/accessibility Chrome accessibility], [https://support.google.com/chrome/answer/157179?hl=en&topic=25799&rd=1 Chrome shortcuts] by platform
  
Here is an [http://www.w3.org/TR/wai-aria/appendices#quickref ARIA Role, State, and Property Quick Reference].
+
* [http://www.apple.com/accessibility/ Apple accessibility], [http://help.apple.com/safari/mac/8.0/#/cpsh003 Safari shortcuts]
  
Here's the full [http://www.w3.org/TR/wai-aria/ ARIA specification].
+
==Screen Readers and other Assistive Technologies==
  
For examples of ARIA in Orion, search for <code>aria-</code> or <code>role=</code> in the code.
+
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.
  
===HTML5 and ARIA landmark roles===
+
===Windows===
  
This [https://bugs.eclipse.org/bugs/show_bug.cgi?id=365363 Orion bug] discusses HTML5 section elements and ARIA landmark roles,
+
* [http://www.freedomscientific.com/Downloads/JAWS JAWS] screen reader for Windows (free demo runs 40 minutes then needs reboot) ([http://www.freedomscientific.com/Products/Blindness/JawsDocumentation JAWS Documentation] and a good overview article: [http://webaim.org/articles/jaws/ WebAIM JAWS Overview])
and this [http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/ ARIA Landmark Roles blog post] has further discussion.
+
  
==Browser Accessibility and Keyboard Shortcuts==
+
* [http://www.nvaccess.org/ NVDA] screen reader (free, but requests donation) ([http://www.nvaccess.org/files/nvda/documentation/userGuide.html NVDA Documentation] and 2 good overview articles: [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://support.mozilla.org/en-US/kb/Accessibility Firefox]
+
* [http://windows.microsoft.com/en-us/windows/hear-text-read-aloud-narrator#1TC=windows-8 Narrator] screen reader in Windows 8 for IE10+ (but not Firefox or Chrome) (Note that prior to Windows 8, Narrator was very basic and could only be used for rudimentary accessibility testing)
  
* [http://www.microsoft.com/enable/training/ie9/default.aspx IE9]
+
* [http://www.microsoft.com/enable/products/windows8/default.aspx Magnifier and other Windows tools] native Windows 8 magnifier, on-screen keyboard, high contrast and speech recognition
  
* [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.zoomtext.com/products/zoomtext-magnifierreader/ ZoomText] magnifier/reader
  
* [http://www.apple.com/safari/features.html#accessibility Safari]
+
* [http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/ AccProbe] inspector for Firefox and Chrome
  
==Screen Readers and other Assistive Technologies==
+
* [https://msdn.microsoft.com/en-us/library/dd318521%28v=vs.85%29.aspx Inspect] (available with Windows SDK)
  
===Windows===
+
===Mac===
  
* [http://www.freedomscientific.com/jaws-hq.asp JAWS (search page for Free Demo)] ([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.apple.com/accessibility/osx/voiceover/ VoiceOver] screen reader (comes with OS X and iOS; here's a good overview article: [http://webaim.org/articles/voiceover/ WebAIM VoiceOver Overview])
  
* [http://www.nvda-project.org/ NVDA (free, but recommend donation)] ([http://www.nvda-project.org/wiki/Documentation NVDA Documentation] and [http://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/ NVDA Overview])
+
* [https://developer.apple.com/library/mac/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html Accessibility Inspector and Accessibility Verifier] (installed with [https://developer.apple.com/xcode/downloads/ Xcode]).
  
* [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
+
===Linux===
  
When Windows 8 comes out (October?) you will be able to use the built-in screen reader called [http://www.full-windows8.com/2012/01/how-to-use-new-feature-narrator-in.html Narrator] for testing accessibility in IE (but not in Firefox or Chrome).
+
* [https://wiki.gnome.org/Projects/Orca/DownloadInstall Orca] screen reader ([https://help.gnome.org/users/orca/stable/ Orca Documentation])
  
===Mac===
+
* [https://wiki.gnome.org/Apps/Accerciser Accerciser] inspector ([https://help.gnome.org/users/accerciser/stable/ Accerciser Documentation])
  
* [http://www.apple.com/accessibility/voiceover/ VoiceOver]
+
===Chrome===
  
* [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://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
  
===Linux===
+
==Automated Testing Tools==
  
* [http://projects.gnome.org/orca/ Orca] ([http://library.gnome.org/users/orca/stable/ Documentation])
+
Automated testing tools can find low-hanging fruit, such as missing alt text on images, pages without any headings, or colors that have little to no contrast for some users. However automated testing does not take the place of clean design, user testing, and an understanding of what makes an application accessible.
  
* [http://live.gnome.org/Accerciser Accerciser] ([http://developer.gnome.org/accerciser/stable/ Documentation])
+
* [http://chrispederick.com/work/web-developer/ Web Developer Plugin] for Chrome, Firefox and Opera
  
===Chrome===
+
* [http://www.paciellogroup.com/resources/wat/ Web Accessibility Toolbar (WAT) for Internet Explorer] from The Paciello Group
  
[http://www.techshortly.com/2012/02/google-releases-chromevox-feature-for.html# ChromeVox for Chrome browsers on all OS platforms]
+
* [https://addons.mozilla.org/en-us/firefox/addon/accessibility-evaluation-toolb/ Accessibility Evaluation Toolbar for Firefox]
  
==Orion Documentation==
+
* [http://www.paciellogroup.com/resources/aviewer/ Accessibility Viewer (aViewer)] web accessibility inspector from The Paciello Group
  
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.
+
* [http://wave.webaim.org/ WAVE Web Accessibility Evaluation Tool] by WebAIM
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].
+
  
==Other Web Accessibility Links==
+
* [http://www.paciellogroup.com/resources/contrastanalyser/ Colour Contrast Analyser (Win/Mac)] from The Paciello Group
  
* The [http://www.w3.org/TR/wai-aria/ Accessible Rich Internet Applications (WAI-ARIA) 1.0] specification.
+
* [http://leaverou.github.io/contrast-ratio/ Contrast Ratio] colour contrast checker
  
* The [http://www.w3.org/TR/wai-aria-practices WAI-ARIA 1.0 Authoring Practices] is an excellent best practices guide.
+
* [http://usabilitygeek.com/10-free-web-based-web-site-accessibility-evaluation-tools/ List of 10 free web accessibility tools]
  
* The [https://developer.mozilla.org/en/aria ARIA wiki] is still being developed, but it has some good resources.
+
==Accessible Wiki Documentation==
  
* The [https://groups.google.com/forum/#!forum/free-aria Free ARIA] email list can answer tough questions that google search can't answer.
+
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>.
 +
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].
 +
 
 +
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.
 +
 
 +
==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.
 +
 
 +
# [http://dev.eclipse.org/mhonarc/lists/orion-dev/msg02345.html Whenever possible, use semantically appropriate HTML elements]
 +
# [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"]
 +
 
 +
==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.
 +
 
 +
The [http://www.w3.org/WAI/ W3C Web Accessibility Initiative] is the overarching body that publishes the standards and guidelines for web accessibility.
 +
 
 +
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].
 +
 
 +
Make sure the user can navigate to every focusable control or item with the keyboard.
 +
Read [http://www.w3.org/WAI/PF/aria-practices/#kbd_generalnav section 3.1.2 and 3.1.3]
 +
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 a dialog, tree, breadcrumb, or toolbar.
 +
 
 +
Here is an [http://www.w3.org/WAI/PF/aria/appendices#quickref ARIA Role, State, and Property Quick Reference] showing the states and properties (attributes) supported by each role.
 +
 
 +
For examples of ARIA, search for <code>aria-</code> or <code>tabindex</code> or <code>role</code> in the code.
 +
 
 +
==Online Web Accessibility Tutorials & Courses==
 +
 
 +
* [[Orion/Web Accessibility Starting Point|Web Accessibility Starting Point]]
 +
 
 +
* [https://webaccessibility.withgoogle.com/course Google's Web Accessibility Course]
 +
 
 +
* [http://www.w3.org/WAI/tutorials/ W3C's Web Accessibility Initiative Tutorials]
 +
 
 +
* [https://www.webucator.com/tutorial/web-accessibility/index.cfm Webucator's Web Accessibility and Section 508 Free Tutorial]
 +
 
 +
==Web Accessibility Links==
  
 
* 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/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.
 +
 +
* [http://www.w3.org/WAI/PF/aria-practices/ WAI-ARIA Authoring Practices] is an excellent best practices guide.
 +
 +
* The [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ARIA wiki] is still being developed, but it has some good resources.
 +
 +
* [http://lists.w3.org/Archives/Public/w3c-wai-ig/ W3C's WAI Interest Group] and [https://groups.google.com/forum/#!forum/free-aria Free ARIA] are email lists that 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.
  
* [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.alistapart.com/topics/topic/accessibility/ A List Apart] is a good website containing many articles on web accessibility.
+
* [http://www.webaxe.org WebAxe] is a web accessibility blog and podcast with news and practical tips.
  
* [http://www.paciellogroup.com/ The Paciello Group] is a good website containing a web accessibility blog and other resources.
+
* [http://www.paciellogroup.com/blog/ The Paciello Group blog] has useful articles on web accessibility.
  
* [http://www.hhs.gov/web/508/index.html Section 508] is a U.S law governing accessibility. (See also [http://www.section508.gov/ Section 508]).
+
* [http://simplyaccessible.com/archives/ Simply Accessible] contains many good articles on web accessibility.
  
== Bugs  ==
+
* [http://alistapart.com/topic/accessibility A List Apart] is another good web accessibility blog.
 +
 
 +
* [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.
 +
 
 +
* [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/section-508/index.html Section 508 (for Web)] is a U.S law governing accessibility. (See also [http://www.section508.gov/ Section 508]).
 +
 
 +
== Reporting Bugs and Contributing Code ==
  
 
Orion is an open source project. Testing, bug filing/triage, documentation and code contributions to the accessibility support are very welcome and greatly appreciated.
 
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
 
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=ECD&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?classification=ECD&product=Orion&keywords=accessibility file an Orion accessibility bug] (first-time users need to create an account).
  
 
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 11:51, 23 August 2016

Testing Web Accessibility

A great accessibility test is to put your mouse out of reach (and/or disable your trackpad) 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"? Use Tab and Shift+Tab to navigate between controls (or grouped controls, like radios), arrow keys to navigate within controls (or control groups), and Space or Enter to select or activate. To tab out of the editor, type Ctrl+M first (to switch to Traversal Mode instead of Insert Tab Character Mode) and then type Tab or Shift+Tab. Need a context menu? Type Shift+F10. Exit a menu or dialog? Esc. Zoom in/out/restore? Ctrl +, Ctrl -, and Ctrl 0 (or Cmd +, Cmd -, Cmd 0 on Mac). List of keyboard commands in Orion? Alt+Shift+?.

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, 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. If you get lost and can't figure out where the focus is, maybe you're not drawing the focus ring, or maybe it needs more contrast, or perhaps nothing has focus - which is a fairly serious bug for a keyboard-only user.

After you become more proficient with keyboard navigation and you have ironed out any serious keyboard navigation bugs, start testing with a screen reader. Learn some of the screen reader's keyboard commands. Try listening without looking at the monitor as you navigate around your page. Does every focusable element have the label and type that you expected? Or is the screen reader saying "button" when an element you consider to be a "menu" gets focus? If you give focus to the "Create a project" text field, does the screen reader say "Create a project; Edit; type in text", or does it just say "Edit; type in text"? Think you've got this 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 accessibility and shortcuts on all platforms
  • IE9 accessibility and shortcuts, IE10 shortcuts, IE11 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 in Windows 8 for IE10+ (but not Firefox or Chrome) (Note that prior to Windows 8, Narrator was very basic and could only be used for rudimentary accessibility testing)
  • AccProbe inspector for Firefox and Chrome
  • Inspect (available with Windows SDK)

Mac

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

Automated Testing Tools

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

Accessible Wiki 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.

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"

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.

The W3C Web Accessibility Initiative is the overarching body that publishes the standards and guidelines for web accessibility.

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 showing the states and properties (attributes) supported by each role.

For examples of ARIA, search for aria- or tabindex or role in the code.

Online Web Accessibility Tutorials & Courses

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.

Reporting Bugs and Contributing Code

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 (first-time users need to create an account).

If you know how to fix it, please submit a patch.

Back to the top