npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@joomla/joomla-a11y-checker

v1.0.0

Published

ooa11y is an accessibility and quality assurance tool that visually highlights common accessibility and usability issues.

Downloads

415

Readme

Jooa11y

Jooa11y is an accessibility and quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Jooa11y identifies many errors or warnings and provides guidance on on how to fix them. Jooa11y is not a comprehensive code analysis tool - it exclusively highlights content issues.

  • Over 50 test conditions.
  • Free and open source.
  • Included by default in Joomla 4.1 and later
  • Concise tooltips explain issues right at the source.
  • Low tech: No complex API or integrations.
  • Additional (toggleable) checks: Contrast, form labels, readability, links (Advanced).
  • Dark mode.

Jooa11y began as a fork of the sa11y script to be more inline with Joomla coding styles, especially the removal of the jquery dependency and added support for localisation.

Demo

:arrow_right: View project website and demo

Installation (Joomla 4.1)

Jooa11y is included in Joomla 4.1 and later. There is nothing to install.

Installation (Manual)

To install on your website, insert Jooa11y right in the head tag. Include both Tippy.js and Popper.js before Jooa11y. Jooa11y consists of three files (located in /dist/).

  • joomla-a11y-checker.css: The main stylesheet. Should be included in the <head> of the document (if possible).
  • en.js: Global configurations and exclusions go here. All text strings and tooltip messages are located here for easy translation.
  • joomla-a11y-checker.umd..js: Contains all logic and rulesets.

Example installation:

As module:

<!--StyleSheet-->
<link rel="stylesheet" href="css/joomla-a11y-checker.min.css" />

<!-- JavaScript -->
<script type="module">
  import Jooa11y from 'js/jooa11y.js';
  import Jooa11yLangEn from 'js/lang/en.js';

  window.addEventListener('load', () => {
    // Set translations
    Jooa11y.Lang.addI18n(Jooa11yLangEn.strings);

    // Instantiate
    const checker = new Jooa11y.Jooa11y(Jooa11yLangEn.options);
    checker.doInitialCheck();
  });
</script>

As regular script:

<!--StyleSheet-->
<link rel="stylesheet" href="css/joomla-a11y-checker.min.css" />

<!-- JavaScript -->
<script src="dist/js/joomla-a11y-checker.umd.min.js" defer></script>
<script src="dist/js/lang/en.js" defer></script>

<script>
  window.addEventListener('load', () => {
    // Set translations
    Jooa11y.Lang.addI18n(Jooa11yLangEn.strings);

    // Instantiate
    const checker = new Jooa11y.Jooa11y(Jooa11yLangEn.options);
    checker.doInitialCheck();
  });
</script>

Dev environment

We have included a light server to test the example files. To use this environment just:

  1. Clone this repo on your computer
  2. Be sure you have node installed and up to date
  3. Execute npm install
  4. In a terminal execute:
npm run serve

Then open http://localhost:8080/docs/index.html in your browser.

Any change inside /src folder files will trigger the build process for the files and will reload the page with the new changes.

Other notes

Create your own rule sets

  1. Create your condition (within the QA module for example).
  2. Add this.warningCount++; or this.errorCount++; to update warning or error count.
  3. Add respective CSS classes.
  4. Add warning or error button before (or after) element using the Jooa11yAnnotate function, followed by the type jooa11yError, jooa11yWarning, jooa11yGood. Finally, reference your tooltip message.

Contributing

Want to help make Jooa11y better? Consider contributing!

Acknowledgements

Jooa11y began as a vanilla js fork of Sa11y, which was created by Digital Media Projects, Computing and Communication Services (CCS) at Ryerson University in Toronto, Canada.

Sa11y itself began as a fork of Tota11y by Khan Academy