Dev Diary: Tota11y, Mr. Eagar, and Array.prototype.slice()

Of the few Chrome extensions we’re allowed to install, Accessibility Developer Tools is one of them. Problem is, not all employees here know how to use DevTools or have Chrome as their primary browser. Many times we forget to use it. I would like to automate it somehow, and…

  • Target a specific container div, not the entire 3,000+ DOM nodes.
  • An easy-to-use tool that will work with any browser.
  • Encourage developers and others to improve accessibility issues.

Tota11y caught my attention. Within minutes I was able to install it and have it up and running.

tota11y in action showing poor contrast within the webpage. Bonus points for providing a solution!

After careful review, approximately 40+ hours will be needed to implement it fully into the code build application. It will have to wait for now.


Found out something about myself — I like to code CSS in the morning and JavaScript the rest of the day. Continued with improvements to the UI — lots of inconsistency, i.e., colors, padding, and contrast, but will address later.

updated styles

Reminder: I’ll need these soon. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

If jQuery has .remove() and JavaScript has ChildNode.remove() will the browser use vanilla JavaScript over jQuery? I’m thinking jQuery will only kick in when a jQuery object is in play.

userInformation = document.getElementsByClassName('js-user-information');
userInformation.remove(); // vanilla
$(userInformation).remove(); // jQuery

I might be wrong in that assumption.

127: userInformation.remove(); // vanilla
Uncaught TypeError: userInformation.remove is not a function
updateHistory @main.js:127
x.event.dispatch@2.0.1-jquery.min.js:5
x.event.add.y.handle@2.0.1-jquery.min.js:5

And I was schooled by Matthew Eagar.

Then I realized…

userInformation = document.getElementsByClassName('js-user-information');

…should be…

userInformation = document.getElementsByClassName('js-user-information')[0];

So the error message lead me to believe, somehow, jQuery was involved when it was not. Frustrating.

Anyways, I learned something new today.

Discussed ChildNode.remove() with a David N. and he provided some tips. Always start jQuery objects with the $ symbol. Add ‘elem’ to the variable when using vanilla JavaScript.

var $jsUserInfo  = ... // start jQuery objects with $
var userInfoElem = ... // start or end JavaScript with 'elem'

Another tip was to use Array.prototype.slice() to return the object NodeList as true array.

var userInfoArray = Array.prototype.slice.call( userInfoElem ); 

The work day is over. Good bye.

Show your support

Clapping shows how much you appreciated Aaron Kahlhamer’s story.