Jump to content

ProcessWire Accessibility Tools


marcus
 Share

Recommended Posts

Hi y'all! Long time no see. Here's a little module aiming to help you build accessible websites

ProcessWire Accessibility Tools

Download: http://modules.processwire.com/modules/pwat/

Github: https://github.com/marcus-herrmann/PWAT

A small, but hopefully growing toolkit for creating accessible ProcessWire sites. Right now it consists of the following little helpers:

  • tota11y visualization toolkit by Khan Academy
  • A toggle button to see view site in grayscale. The w3c recommends checking your page without colours to see if your design still works (accompanied by a colours contrast check, which is part of tota11y)
  • A link to test your webpage with WAVE, webaim's Web Accessibility eValuation Tool. By the nature of this tool, the website under test must be available online, local hosts won't work.

tota11y menu opened Grayscale active

Installation

Once you have downloaded PWAT, go to your module Install page and click "Check for new modules". Find "ProcessWire Accessibility Tools" and click "Install". During installation, PWAT creates a new role 'pwat_user'. To use the Accessibility Tools, you have to grant user this role.

Following, you can start configuring the module.

PWAT config page

Usage

PWAT starts with only the tota11y script activated. On the configuration page you can decide

  • whether PWAT is visible on admin pages
  • if tota11y is active
  • if the grayscale toggle is active
  • if the link to WAVE will be visible

PWAT config page

Credits


Best,

marcus
 

  • Like 23
Link to comment
Share on other sites

On 5.1.2018 at 7:14 PM, dragan said:

Don't know if you heard about it: There's a great CKEditor plugin called Accessibility Checker: https://ckeditor.com/ckeditor-4/accessibility-checker/

I have started to include it in every new PW installation and tell clients about it. Perhaps there's a way to include this as well?

That's a really great tool I never heard of, thanks for mentioning it, but I have no idea how to include it to PWAT (except maybe a reminder / link on the module settings page)

  • Like 1
Link to comment
Share on other sites

On 5.1.2018 at 7:14 PM, dragan said:

Don't know if you heard about it: There's a great CKEditor plugin called Accessibility Checker: https://ckeditor.com/ckeditor-4/accessibility-checker/

I have started to include it in every new PW installation and tell clients about it. Perhaps there's a way to include this as well?

 

13 hours ago, marcus said:

That's a really great tool I never heard of, thanks for mentioning it, but I have no idea how to include it to PWAT (except maybe a reminder / link on the module settings page)

But maybe this CKE-plugin is an addition for AOS? @tpr

If tpr adds it, @marcus you may only check if AOS is installed (incl. the min version this plugin gets added) and displays a reminder.

Link to comment
Share on other sites

I dont know if I miss something, but the module only works in backend in my case. I have checked the loading of the js files in the frontend, but they are not there, if I am logged in as superuser. Is there something else that I have to do?

Link to comment
Share on other sites

This is odd. Usually, PWAT showing in the backend proofs that everything is fine (= your user has the needed role). Have you tried to clear compiled files (on the bottom of your Modules › Site)? Since the modules only does a very simple Page hook I strongly believe your experience has something to do with caching

  • Thanks 1
Link to comment
Share on other sites

No, unfortunately not. The module cache is not responsible, also not the template cache. I have a lot of custom hooks inside my ready.php. Maybe one of them interferes with your code and prevents the adding of the js file. If no one other has to deal with this problem so it must be on my side.

Its not a relevant issue for me at the moment. I guess I will find the reason - some day, some time ^-^

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...