From Challenge Gallery
This is a planning page for the Grab and Go Gallery for Accessible Web Authoring, for easier authoring of accessible Web content.
- 1 Testing Your Submissions for Accessibility
- 2 Testing of Submissions by Reviewers
Testing Your Submissions for Accessibility
- Web components that we will include in the "Grab and Go Gallery" should be accessible to people with disabilities. Even though we will review your submissions, please submit only templates and components that you have pre-tested for accessibility.
- When you submit your template or widget, verify that you have evaluated your submissions for accessibility support using the following protocol.
- Test for conformance to W3C/WAI Web Content Accessibility Guidelines (WCAG) 2.0 at least Level AA, using How to Meet WCAG 2.0. Additional resources for WCAG 2.0 are below.
- If your submission is a rich internet application, use WAI-ARIA techniques. See WAI-ARIA for techniques, practices, and additional resources. Also see "Extended test procedure for dynamic template and widgets" below.
- If your submission requires an authoring tool to operate (e.g. a template that only works within a particular authoring tool) then test with the W3C-WAI Authoring Tool Accessibility Guidelines (ATAG) 2.0 level AA (Working Draft includes recommendations concerning templates and pre-authored content. The following guidelines and their associated success criteria are particularly applicable to templates and widgets:
- If your submission is itself an authoring tool (for instance, a widget for editing HTML), then test for conformance of the authoring tool to ATAG 2.0 Level AA.
- In addition, please describe any additional accessibility tests that you have performed.
Sample basic test procedure for templates and widgets
- Create a demo web site that uses your submission.
- Unplug your mouse and make sure you can operate your demo site using only your keyboard.
- Use your browser to change the default size and color of text and make sure your demo site responds.
- Look for structure and order:
- Using a browser function or add-on that supports viewing page structure, such as the IE7 Developer Toolbar, IE8 Developer Tools (built-in, use the Tools -> Developer Tools menu) or Firefox Web Developer add-on:
- Disable “CSS”. Are there things that are acting as headings that aren’t big and bold in this mode? Do things that feel like lists have bullets? Are the clickable things either gray buttons or blue underlined links? Are things in a usable order?
- Check high contrast mode (Windows procedure follows.) @@ add high contrast test procedure for other operating systems @@
- In Windows, choose Start Menu/Control Panel/Ease of Access Center/Optimize Visual Display
- Check "turn on or off high contrast mode with left ALT + left SHIFT + PRINT SCREEN"
- Click "Choose a High Contrast Theme", scroll down to the bottom and pick one of the high contrast themes. Include the test for High Contrast Black, as this mode is visibly distinct from the standard theme.
- If the system isn't in high contrast mode after this, close the control panel dialogs, and press left ALT + left SHIFT + PRINT SCREEN
- Is the web app/widget black with white text? Are all background colors and images gone? Are all important images either still there or replaced with text? (It's a common bug to have all images, including buttons, disappear in high contrast mode since they have often been added with CSS background-image.) Is the layout not in a logical sequence? Can you read all the text?
- Run through the tasks again. Is all the information readable and tasks operational in all the states and steps?
- Press left ALT + left SHIFT + PRINT SCREEN to restore your display to how it was previously.
- Check your demo web site with an accessibility checker set to WCAG 2.0 AA (How to Meet WCAG 2.0). See Web Accessibility Evaluation Tools for a list of tools. Many are free online tools.
- Test your demo site with a screen reader. Some free screenreaders are: VoiceOver for MacOS, NVDA for Windows, Orca for Linux.
- If your submission is a rich internet application (where the web content changes without reloading the page), be sure to continue to the following "extended" steps.
Extended test procedure for dynamic template and widgets
- Widgets and dynamic sites where the web content changes without reloading the page need additional testing. A suggested approach follows:
- Provide clear documentation on what your app or widget is supposed to do, because the Gallery's reviewers need to know what behavior to test for when they perform their own tests.
- Install an API viewing tool, such as Inspect (download as part of Windows SDK) or AccChecker. There is also one for the Mac platform.
- Instantiate it in a test page.
- Open your app and a test page in different browsers.
- Launch Inspect. Disable “watch cursor” so it follows keyboard focus. Enable “Show Highlight Rectangle” to make the focus rectangle big and yellow.
- Tab through the app or widget and attempt to do tasks it is documented to do without using a mouse.
- Can each task be accomplished using only the keyboard?
- For each tab stop, examine the MSAA and UIA information in the tool. (note that these can be set either from ARIA or by using native HTML controls.)
- Does the role/control type match the function of each control? For example do things that look and act like buttons have a role/control type of button?
- Does each tabstop have a name? (note that alt text from images doesn’t bubble up to containing links in this tool, even though it works in real AT)
- Try this in multiple browsers in case browser sniffing is making something inaccessible in a particular browser.
- The Grab and Go Gallery welcomes templates and widgets that are specific to particular applications or platforms, but to be useful to others, we will need to categorize your web components appropriately. Please clearly identify and describe any specific authoring tool, browser or viewer requirements necessary to use your submission.
WCAG 2.0 Resources
- WCAG 2.0 at a Glance
- How to Meet WCAG 2.0
- WCAG 2.0 Overview
- WCAG 2.0
- Selecting Web Accessibility Evaluation Tools
- Web Accessibility Evaluation Tools
- Accessible Rich Internet Applications (WAI-ARIA) 1.0
- WAI-ARIA 1.0 Primer
- WAI-ARIA 1.0 Authoring Practices
- WAI-ARIA 1.0 User Agent Implementation Guide
- WAI-ARIA FAQ
Testing of Submissions by Reviewers
- The tests above and additional tests may be performed by the reviewers when evaluating your submission.