Loading...
 
Skip to main content
(Cached)

Using a11y.css with Tiki

The question came up as to whether a11y.css should be added as a library for Tiki, or if it might be helpful to devs.


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 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.

a11y.css screenshot (click to open in new tab)
a11y.css screenshot (click to open in new tab)
WebAIM WAVE screenshot (click to open in new tab)
WebAIM WAVE screenshot (click to open in new tab)


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.


Page last modified on Tuesday 11 of February, 2025 10:11:15 GMT-0000