Alt-Titler: fill blank image TITLE attributes with what's in their ALT attribute, if found.

readme.md

Alt-Titler

A WebExtensions-compatible browser extension that should fill in each image's title attribute with whatever's in their alt attribute, if there's nothing there already.

Originally made because Red Long pointed out that you can add accessibility descriptions to images on Twitter.

Yes, yes, I know: alt and title attributes are different things and should not be confused. When there's no title attribute I can't see the harm in showing the alt under mouseover tooltips. It seems like sighted people would be more likely to use it if they knew each other could see it; see any cartoon on XKDC for example.

To try this out:

• Save manifest.json and content.js into a new directory.
• Open up chrome://extensions
• Enable Developer Mode
• Drag your new folder into the window and drop it when it says Drop to Install.

content.js

// Fill blank image TITLE attributes with what's in their ALT attribute, if found.

((w, d) => {
  let $ = {
    // w = window
    w: w, 
    // d = document
    d: d,
    f: {
      // return an event's target element
      getEl: e => {
        var r = e.target;
        // is this a text node?
        if (r.targetNodeType === 3) {
          // use the text node's parent
          r = r.parentNode;
        }
        return r;
      },
      // mouse over
      over: e => {
        // what element are we over?
        let el = $.f.getEl(e);
        // do we have an element with a tag name whose tag name suggests that this is an image?
        if (el && el.tagName && el.tagName === 'IMG') {
          // do we have an alt attribute?
          if (el.alt) {
            // do we NOT have a title attribute?
            if (!el.title) {
              // fix it up
              el.title = el.alt;
            }
          }
        }
      },
      // start looking
      init: () => {
        // do we have document.body?
        if ($.d.body) {
          // listen for mouseover
          $.d.body.addEventListener('mouseover', $.f.over);
        } else {
          // see if we can find document.body again in one second
          $.w.setTimeout($.f.init, 1000);
        }
      }
    }
  };
  $.f.init();
})(window, document);

manifest.json

{
  "version": "0.0.1",
  "name": "Alt-Titler",
  "description": "Fill blank image TITLE attributes with what's in their ALT attribute, if found.",
  "permissions": [
    "*://*/*"
  ],
  "content_scripts": [
    {
     "js": [ "content.js"],
     "matches": [ "*://*/*" ],
     "all_frames": true
    }
  ],
  "manifest_version": 2
}

Here's what it looks like in action: