CODEWITHSUNDEEP
javascripthtmltooltipaccessibilityimage
Chris
Chris

Reputation: 4810

Image Alt and Title Attributes

I have a client who hates the tooltips shown in browsers by the alt and title attributes of images. They requested they be removed. Obviously this is an issue for both SEO and Accessibility.

While the accessibility thing is not a huge deal to me, the SEO factor is. My initial thoughts are to remove the alt and title attributes of the images with a quick JS script. Anyone see any issues with that?

Upvotes: 1

Views: 2266

Answers (4)

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

The alt and title attributes are two different things.

The alt attribute is used for accessibility reasons and is required by the standards set by the W3C. In the United States, it's also part of the Section 508 laws and regulations. The alt attribute behaves poorly in older versions of Internet Explorer by showing it's contents via a tooltip. I know for a fact Internet Explorer 9 no longer has this behavior.

The title attribute is used to force the browser in to showing a tooltip with it's contents.

My advice to you is use the alt attribute exclusively instead of the title attribute. Advise your client to update their browser to a more standards compliant browser if a tooltip irks them that much.

Modern screen readers read the generated DOM. This means if you remove tags via JavaScript, you are not only invalidating your code after the fact, you are possibily hurting those who will visiting the site using assistive technology.

I highly recommend you don't do it.

More information
Target was sued and settled because of the alt attribute: http://www.sitepoint.com/target-settles-accessibility-lawsuit-for-6-million/

Because of this landmark case, it's safe to say that Section 508 DOES NOT only apply to federal and government websites.

Upvotes: 6

David Thomas
David Thomas

Reputation: 253318

In vanilla JavaScript, you could use:

var images = document.getElementsByTagName('img');

for (i=0; i<images.length; i++){
    images[i].removeAttribute('title');
    images[i].removeAttribute('alt');
}

JS Fiddle demo.

Reference:

Upvotes: 2

Alex
Alex

Reputation: 5439

You should consider if you want to remove these features only under certain circumstances. I experience a lot of similar ideas in daily business, because some people do not like to understand what certain things a good for, and maybe handle them by themselves ...

... which brings me to the idea to eventually add a Greasemonkey script, which provides the desired functionality instead of worsening the website by means of accessibility, etc. At least it should be an additionally configurable option, maybe by setting a cookie or stuff like that.

Maybe you can convince the client it is a better than getting rid of something, to allow to make everyone the choice for their own, and activate the default settings for best SEO and accessibility.

Upvotes: 0

James Hill
James Hill

Reputation: 61802

If accessibility is not an issue, I see no issues using JavaScript to remove the content. Assuming you're OK with using jQuery, this is the easiest way in my opinion:

$(document).ready(function()
{
    $('[title]').removeAttr('title');
});

You could also remove the title content in the onmouseover event and then add it back on the onmouseout event for the sake of SEO.

Upvotes: 2

Related Questions