itmaybejj / editoria11y

A user-friendly automatic content accessibility checker.
https://itmaybejj.github.io/editoria11y/
Other
40 stars 8 forks source link

Consider adding Bookmarklet version? #12

Open mrwweb opened 1 year ago

mrwweb commented 1 year ago

Since both tota11y and Sa11y have bookmarklet versions, I was curious if Editoria11y should as well.

I tweaked the Squarespace injector code like this:

const ed11yInit = function() {
  let ed11yConfig = {
    // Insert custom config here as per https://github.com/itmaybejj/editoria11y
    allowOK: false,
        ignoreByKey: {
            'img': '[aria-hidden], [aria-label], [aria-labelledby], [aria-hidden] img, [aria-label] img, [aria-labelledby] img',
        },
  }
  const ed11y = new Ed11y(ed11yConfig);  
}

let ed11yGetScript = function() {
  // h/t stackoverflow.com/questions/16839698/jquery-getscript-alternative-in-native-javascript.
  let script = document.createElement('script');
  script.async = 1;
  script.onload = script.onreadystatechange = function( _, isAbort ) {
    if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
      script.onload = script.onreadystatechange = null;
      script = undefined;
      if(!isAbort) setTimeout(ed11yInit(), 50);
    }
  };
  script.type = 'text/javascript';
  script.src = 'https://cdn.jsdelivr.net/gh/itmaybejj/editoria11y@2/dist/editoria11y.min.js';   
  document.head.appendChild(script);
}

ed11yGetScript();

Then I ran it through this bookmarklet maker tool to produce this:

javascript:(function()%7Bconst%20ed11yInit%20%3D%20function()%20%7B%0A%20%20let%20ed11yConfig%20%3D%20%7B%0A%20%20%20%20%2F%2F%20Insert%20custom%20config%20here%20as%20per%20https%3A%2F%2Fgithub.com%2Fitmaybejj%2Feditoria11y%0A%20%20%20%20allowOK%3A%20false%2C%0A%20%20%20%20%20%20%20%20ignoreByKey%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20'img'%3A%20'%5Baria-hidden%5D%2C%20%5Baria-label%5D%2C%20%5Baria-labelledby%5D%2C%20%5Baria-hidden%5D%20img%2C%20%5Baria-label%5D%20img%2C%20%5Baria-labelledby%5D%20img'%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%7D%0A%20%20const%20ed11y%20%3D%20new%20Ed11y(ed11yConfig)%3B%20%20%0A%7D%0A%20%20%0Alet%20ed11yGetScript%20%3D%20function()%20%7B%0A%20%20%2F%2F%20h%2Ft%20stackoverflow.com%2Fquestions%2F16839698%2Fjquery-getscript-alternative-in-native-javascript.%0A%20%20let%20script%20%3D%20document.createElement('script')%3B%0A%20%20script.async%20%3D%201%3B%0A%20%20script.onload%20%3D%20script.onreadystatechange%20%3D%20function(%20_%2C%20isAbort%20)%20%7B%0A%20%20%20%20if(isAbort%20%7C%7C%20!script.readyState%20%7C%7C%20%2Floaded%7Ccomplete%2F.test(script.readyState)%20)%20%7B%0A%20%20%20%20%20%20script.onload%20%3D%20script.onreadystatechange%20%3D%20null%3B%0A%20%20%20%20%20%20script%20%3D%20undefined%3B%0A%20%20%20%20%20%20if(!isAbort)%20setTimeout(ed11yInit()%2C%2050)%3B%0A%20%20%20%20%7D%0A%20%20%7D%3B%0A%20%20script.type%20%3D%20'text%2Fjavascript'%3B%0A%20%20script.src%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fitmaybejj%2Feditoria11y%402%2Fdist%2Feditoria11y.min.js'%3B%20%20%20%0A%20%20document.head.appendChild(script)%3B%0A%7D%0A%0Aed11yGetScript()%3B%7D)()%3B

In my tests, that worked as I would hope. I can't figure out how to make a functioning link here in the Github issue so I made a Codepen with the bookmarklet for testing.

I imagine I'm not the only person interested in this approach, so you might consider adding it as an installation method on the editoria11y site and/or in this repo.

Thanks for the really great tool!

itmaybejj commented 1 year ago

Oh nice.

Yes I'm interested in adding this, and will do some testing.