This week AvePoint released our new educational solution Compliance Detector. Compliance Detector checks your web page against the Worldwide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) success criteria as well as Section 508 requirements, and of course Privacy. Many organizations state that you cannot have accessibility and privacy without each other. We think, for the most part, they are right! The following guide walks you through step-by-step instructions on how to make good use of this tool.
First you have to go to the Compliance Detector page, where you will meet AvePoint’s English Springer Spaniel whose job it is to sniff out Compliance issues. So first, visit the site http://www.compliancedetector.com/ to get started with the Compliance Detector.
Figure 1: Compliance Detector Home Page
To get started you need to enter a website page URL you want to test against. The URL could be in different format, take http://www.AvePoint.com as an example, it can be entered as:
Each way would work and the program will auto access the one available.
Next, select the standard you want Compliance Detector to validate. From the drop down menu, select the guideline(s) by ticking the checkbox(s) and select the [OK] button. When multiple standards are selected, each standard result will show in individual tabs of the report page.
· Section 508 – Refers to the detailed checks from: http://www.access-board.gov/sec508/guide/
· WCAG 2.0 – Refers to the detailed checks from: http://www.w3.org/TR/WCAG20/
It is important to remember that this is intended to be an educational tool and remember most of these test suites would need some customization to work in your environment. Compliance Guardian from AvePoint is more suited for commercial use. However, if you want to learn about accessibility and privacy, this community-based product is the place to start!
Figure 2: Test Suites Selection
Once you select your test suites, simply select the [Test] button to perform the scan. By the way, it is fast! While the reports are rich in design, please note that they are 100 Percent keyboard accessible and you will find no keyboard traps. Below is a list of keyboard navigation methods.
Compliance Detector is fully compliant with accessibility standards and can be operated without mouse.
è Use Tab to navigate to URL box and enter a URL
è Use Tab to navigate to the drop-down menu and press Enter to expand the selections
è Use Tab to set focus on one option and press Space to select or unselect it
è Use Tab to navigate to OK or Cancel and press Enter to submit the selection
è After selected the focus is automatically set on Test button, Press Enter to perform the test
The reports are standard as well as accessible and usable. They are built with Standards Based HTML and CSS. Below is a list of information about the reports, a legend of sorts.
Status – Fail, Pass, User Review Required, Not Applicable
The report shows check result against each and all regulations tested. There are 4 types of status:
1. Fail – Some instances found violate the regulation.
2.Pass – The regulation was tested and no instance was found.
3. User Review Required – There are some regulations which require human review. For example, all information conveyed with color should be available without color.
4. Not Applicable – The elements of the check is not used on this web page.
Figure 3: Report Status
Tip: A filter is provided for reviewing the reports. Select Status or the filter icon next to it with the keyboard or mouse, and pick the status to be reviewed such as:
Figure 4: Status Filter
Some of the larger guidelines have subgroup details and it is easy to view these. You can view the rules checked or violated in each of the Regulations. There are several granular checks and by expanding the regulation group you will gain the visibility of what exact checks had been performed as well as the result to each one.
Select the Arrow icon or the row to expand the regulation details. You can use the mouse or the [Enter] key to toggle the details. The [Enter] key can be used in many instances to activate keyboard options.
Figure 5: Regulation Subgroup Details
Note, by selecting the regulation title, in this example Guideline 1.1 Text Alternative, it links to the policy URL http://www.w3.org/TR/WCAG20/#text-equiv and makes easy to understand why this is checked.
View Error Inline allows user to see the errors highlighted inline HTML coding and also provides what check it violates. It should be noted that this page while rich in design is also keyboard accessible and the instructions follow.
Figure 6: Inline Error for WCAG violation
An example of a Privacy violation:
Figure 7: Inline Error for Privacy violation (human review)
– Use [Tab] to navigate through this page;
– Press [Enter] to bring up Filter box, use [Space] to select or unselect the options and press enter to submit the filter selection.
– After navigate to regulation area, press [Enter] to expand or shrink the sub group details.
Re-perform the test or scan to another page
After the page is tested, Compliance Detector allows the user to re-test the same page or test another page easily by the top area of the report page. Simply enter/change the URL and select desired test suites and then hit [Test] to go.
Figure 8 Retest or Test a new page
I hope this brief introduction whets your appetite for some more learning about accessibility and privacy. Go ahead, start testing your site, and remember you are limited to one page per minute for your site, but that should not matter! Take your time to explore the reports, make your page a bit more accessible, and just have fun getting to know Compliance Detector. Remember this is a community-based site and we want your feedback, so email us today!
Good stuff, Compliance Detector is easy to use.
Zoe, good job with the blog and the explanations :-). Detector is really easy to use
Good tool for web developers to check WCAG and Section 508 rules