Hampus Persson
Oct 13, 2011
  6848
(0 votes)

Another Accessibility Checker

 

EPiServer and Accessibility Checker

Seems an old topic in the current CMS market. There are many ways of checking the site’s compliance in EPiServer. Allan’s post talked about how to use WAVE to achieve the goal, and EditLive provides a rich editor that checks the compliance while the editor is typing. I thought it would be good to provide yet another alternative open source solution so the control is completely yours and it is free.

It is called AChecker, an open source project hosted by Adaptive Technology Resource Center at the University Of Toronto (see project page). Currently it checks your web page against WCAG1, WCAG2, Section 508 (US), BITV (Germany) and Stanca Act (Italy). It is written in PHP/MySQL as an open source project, which means you can download it, set it up, and use it locally on your server. If PHP is not your plate of food, you can always convert it to .NET.

 

Features and why it is different:

  • Compliance selection
  • Multi-lingual support
  • Guideline creation and customisation
  • Decision making for warnings (checks that machines are not clever enough to perform)
  • TinyMCE Plug-in

For more details, check out these pages:

http://www.tinymce.com/wiki.php/Accessability

http://atutor.ca/achecker/

Here is the URL pointing to a little open source CMS (ATutor) that show how an editor interface could be integrated with AChecker.

http://atutor.ca/atutor/demo.php

Fortunately if you are not ready to do the local install, AChecker also provides a URL that can take HTML as input through POST request, and return the errors and warnings to you. Better still, it has a ready to use TinyMCE plug-in that you can take and plug straight into your EPiServer editor. This probably is exactly what editors need as they only need to care about the content they are responsible for instead of the entire page.

 

Integration with EPiServer

This is what I tried as the first step. The following screenshots shows the idea

tinymce-admin

 

tinymce-edit

achecker.ca

 

Next Steps

As you can see by now, using the URL and posting HTML to it may not be ideal for editors who normally do not understand those errors and warnings in the context of the HTML source. If you need to take a step further because of this, you will have two options:

a) Although I have not tried myself, you could utilise AChecker Web Service APIs documented here to pass in the HTML, analyse the returned message and highlight the corresponding text within the TinyMCE editor or in preview mode

Or

b) Forget about the on-line service. Download everything and install the checker locally. You can remove user interface provided by the application and just convert the checker engine to .NET (we have done that for a former version of AChecker in my previous job and it took 1 man 2 weeks), then the control is all yours how you want to integrate with EPiServer.

Oct 13, 2011

Comments

Please login to comment.
Latest blogs
Copy Optimizely SaaS CMS Settings to ENV Format Via Bookmarklet

Do you work with multiple Optimizely SaaS CMS instances? Use a bookmarklet to automatically copy them to your clipboard, ready to paste into your e...

Daniel Isaacs | Dec 22, 2024 | Syndicated blog

Increase timeout for long running SQL queries using SQL addon

Learn how to increase the timeout for long running SQL queries using the SQL addon.

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Overriding the help text for the Name property in Optimizely CMS

I recently received a question about how to override the Help text for the built-in Name property in Optimizely CMS, so I decided to document my...

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Resize Images on the Fly with Optimizely DXP's New CDN Feature

With the latest release, you can now resize images on demand using the Content Delivery Network (CDN). This means no more storing multiple versions...

Satata Satez | Dec 19, 2024