marcus

ProcessWire Accessibility Tools

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

Share this post


Link to post
Share on other sites

Looks really promising!

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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 ^-^

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By cosmicsafari
      Hi all,
      Just wondering if someone with a bit more PW knowledge than me could give a run down of what this method actually does and how its achieved.
      I get that it rebuilds image variations but based on what settings?
      If I wanted to rebuild all the websites image variations but at say a reduced image quality can this be set somewhere globally that this method would take into account?
      For some context I have built a fairly simple module to delete all the image variations connected to any FieldtypeImage which is being used on the website, for the most part this works quite well. As I was quite happy with how that turned out I figured I would give the module another option to rebuild the images also. So there would be a 'Remove' and 'Rebuild' button on the modules config page.
      The idea being that I could use this tool to delete all the image variations, update some global settings then regenerate them all but currently it doesn't appear to do that.
      I assume this is either because my codes borked or im misunderstanding something fundamental about how rebuildVariations() works.
    • By adrian
      Tracy Debugger for ProcessWire
      The ultimate “swiss army knife” debugging and development tool for the ProcessWire CMF/CMS

       
      Integrates and extends Nette's Tracy debugging tool and adds 30+ custom tools designed for effective ProcessWire debugging and lightning fast development
      The most comprehensive set of instructions and examples is available at: https://adrianbj.github.io/TracyDebugger
      Modules Directory: http://modules.processwire.com/modules/tracy-debugger/
      Github: https://github.com/adrianbj/TracyDebugger
      A big thanks to @tpr for introducing me to Tracy and for the idea for this module and for significant feedback, testing, and feature suggestions.
    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.51
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! 
    • By anderson
      Hi all,
      I'm a new to website building. Learned some CRASH course of js,jquery,php. Then I found CMS. Still learning around forum, youtube....
      Anyway, please help me with some beginer questions:
      1, About template - please correct me if I understand wrong : every page should be (or recommended) built on a template. So if in total I'll have 10 pages, 2 of them have same layout, I'll need 9 templates.  And, what fields a page includes, is not defined in page, but defined in the template that page uses. 
      2,  Where to see what modules I've installed? is it in "Modules - Site"? 
      3, I installed "PageTable Extended", then what?  As in a youtube tutorial, it should appear in Setup tab, but it doesn't.  What's in there: templates,fields,logs,comments. (I installed "Uikit 3 site_blog profile".)
      4, I did a search in Processwire website for the famous "repeater matrix" module, and can not find it, there's a Repeater, as well as a Matrix. Is it not a module?
      5, I watched this youtube tuts: https://www.youtube.com/watch?v=IHqnLQy9R1A
      Anybody familiar with this tuts please help: 
      After he analysed a target webpage layout he wanted to mimic, he created some fields, some template, then based on those he created a page and input some "content" in there, then clicked "view", it's just some text. So, here comes my question, he copied a folder "assets" (subfolders are: css,fonts,js,img) over, then the page have the appearance/layout he wanted to mimic. Where does that assets folder come from?
      Appreciate any help.