History: Using a11y.css with Tiki
Source of version: 4 (current)
Copy to clipboard
{DIV(class="lead")}The question came up as to whether [https://ffoodd.github.io/a11y.css/|a11y.css] should be added as a library for Tiki, or if it might be helpful to devs.{DIV} To test the possibilities, I first added the browser extension to Firefox and Edge to test it. I don't know if I was missing something, but it only identified images without an alt attribute. That's useful but seems like there must be more functions that somehow I couldn't find. Next, I downloaded the CSS file, renamed it custom.css, and put it in themes/css/ to see what effect it would have in Tiki. A screenshot image uploaded on this page shows the appearance with this file added. As the image shows, the CSS file does identify quite a few issues but there's a real usability problem in that reports of problems are stacked on top of each other, and I couldn't find a way to access the ones that were visually blocked. The "head must start with a charset" find was useful information as I did some research and found Tiki was doing this in a way that was a bit obsolete so made a commit to use updated syntax. For comparison, I made a screenshot of the same page being checked by the [https://wave.webaim.org/|WebAIM] browser extension and it's clearly more full-featured and user-friendly. Maybe a11y.css reports problems that WebAIM misses, or doesn't focus on, so maybe more research should be done to see if there's a way to dig down through the stacks of issue reports on the page and otherwise get the most out of the browser extensions and ally.css, but I think this would be something a developer or designer would do on test sites, by temporarily including the file to check pages. I don't think it would be appropriate to add this to the Tiki package, though. If it worked brilliantly then it might be worth the time to make an interface to activate/deactivate it as a tool within Tiki, but in my opinion, it isn't useful enough to justify that. {DIV(class="row")}{DIV(class="col-sm-6")}{img type="fileId" fileId="487" thumb="zoom" desc="a11y.css screenshot (click to open in new tab)" width="100%" height="auto"}{DIV}{DIV(class="col-sm-6")}{img type="fileId" fileId="485" thumb="zoom" desc="WebAIM WAVE screenshot (click to open in new tab)" width="100%" height="auto"}{DIV}{DIV} As the screenshots show, WebAIM is quite a bit more informative, and doesn't require any integration with Tiki, just add the extension to your browser.