Skip to content

Instantly share code, notes, and snippets.

@kentbrew kentbrew/content.js
Last active Jan 5, 2018

Embed
What would you like to do?
Alt-Titler: fill blank image TITLE attributes with what's in their ALT attribute, if found.

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.
// 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);
{
"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
}
@kentbrew

This comment has been minimized.

Copy link
Owner Author

kentbrew commented Jan 5, 2018

Here's what it looks like in action:

Screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.