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 accessi开发者_如何学JAVAbility 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?

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.

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.

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:

• removeAttribute() at the Mozilla Developer Center.

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.