How to Display Alt Text for an Image in Chrome

How to display alt text for an image in chrome

If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.

There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.

Alt tag not displayed on browser

The alt property sets or returns the value of the alt attribute of an image.

The required alt attribute specifies an alternate text for an image, if the image for some reason cannot be displayed (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Note: Internet Explorer displays the value of the alt attribute as a tooltip when mousing over the img element. This is NOT the correct behavior, according to the HTML specification. All other browsers are following the specification, and will only display the alt text if the image cannot be displayed.

How to force an image's alt text to display instead of the image?

Pretty sure this is not something you can currently do with just CSS. You need a userscript.

Install Greasemonkey, or Tampermonkey, or similar. Then this userscript will work:

// ==UserScript==
// @name     _Hide pics except for alt text
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( "                                 \
    * {                                         \
        background-image: none !important;      \
    }                                           \
" );

waitForKeyElements ("img", hideImageExceptForAltText);

function hideImageExceptForAltText (jNode) {
    var oldSrc  = jNode.attr ("src");
    jNode.attr ("src", "");
    jNode.attr ("data-oldSrc", oldSrc);
}

It uses waitForKeyElements to handle images on AJAX-driven sites.

How to display alt text for an image in chrome

If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.

There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.

alt text not showing when hovering over image

#protip - it can be a painful (and very un-DRY) exercise to add titles for all your images. To make this a lot less painful all my apps ship with this JS (require jquery):

$(function() {
  $('img').each( function() {
    var o = $(this);
    if( ! o.attr('title') && o.attr('alt') ) o.attr('title', o.attr('alt') );
  });
});

This sets the title of any img without a title to the value of it's alt attribute.

Is there a way to get the alt tag of an image from chrome.contextMenu.create

Solution 1.

The usual advice is to declare a content script that runs in all tabs and listens to contextmenu event, saves the clicked event target element, then processes it in onMessage listener (example).

However, such a content script will be needlessly running 99.99999999% of the time, it also requires broad host permissions which puts such an extension into the extremely slow manual review queue in Chrome Web Store and possibly other extension galleries.

Solution 2.

A possibly better approach is to use activeTab permission and a dynamically injected content script that retroactively gets the clicked element by looking for image src reported to the contextMenus callback.

manifest.json excerpt:

"permissions": ["activeTab", "contextMenus"],
"background": {
  "scripts": ["background.js"],
  "persistent": false
}

background.js:

chrome.contextMenus.onClicked.addListener((info, tab) => {
  chrome.tabs.executeScript(tab.id, {
    code: `(${findElement})(${JSON.stringify(info)})`,
    frameId: info.frameId,
    matchAboutBlank: true,
    runAt: 'document_start',
  }, ([result] = []) => {
    if (chrome.runtime.lastError) {
      console.error('Error: ' + chrome.runtime.lastError.message);
    } else {
      console.log('Alt:', result);
    }
  });
});
// this function's code will be executed as a content script in the web page
function findElement({mediaType, srcUrl}) {
  const tagName = mediaType === 'image' ? 'img' : mediaType;
  for (const el of document.querySelectorAll(tagName)) {
    if (el.src === srcUrl) {
      return el.alt;
    }
  }
}

This code doesn't try to pierce ShadowDOM which is an exercise for the reader (example in the wild). The shortcomings are a) the inability to pierce a closed ShadowDOM root and b) the possibility of a duplicate image with the same src but a different attribute that you want to retrieve (specifically, alt).

img alt text is not displayed when it is long

Assuming you can break alt text in new line (meaning it's not generated dynamically) a simple idea to have alt text in new line is :

<img src="foo.jpg" alt="Line 1
Line 2" /> <br > // new line here is next line for alt text

So for your case :

<img src="invalid url" border="0" alt="AAA BBBB 
AAA BBBB 
123456789" style="width:237px;height:100px;">

Reference : Newline in alt text

---

Related Topics