Title text on text links
Sunday, 29 November 2009
Following a discussion I had with a colleague on Friday, I have decided to post a few paragraphs on the topic of using 'title text' on textual hyperlinks in HTML.
In one of the corporate websites I am working on, title text (the title attribute of the HTML anchor tag) is everywhere. You can't move your cursor without title text popping up left, right and center. What makes this worse, is that the title text is the same as the hyperlink text- this is unnecessary duplication, and just adds 'noise' to the website.
My colleague said that this "aids accessibility for blind user's", but it clearly doesn't. In fact, screen readers such as JAWS do not read title text as a default setting. This functionality has to be configured manually (through the JAWS verbosity options window).
The basic rule of thumb is : Title text should only be used to provide more information about the link destination. Use with caution, and certainly don't just duplicate the link text in the title attribute.
Title text is misused in many websites… don't let yours be one of them!
Please let me know if you have and thoughts or comments on this topic.
Posted byCharlie M at 03:16 0 comments
Labels: accessibility, html, TITLE attributes
ALT and TITLE attributes for Accessibility & Web Design
Monday, 10 August 2009
I have been asked several questions about the use of ALT and TITLE attributes in webpage design recently, so thought I would write a brief summary here.
'ALT text' or 'ALT attributes' (nb. not ALT 'tags' as many people call them) should be included on all non textual elements of your webpage, such as images. The ALT attribute should be provided as an alternative textual description for all relevant images. ALT attributes are coded like this:
ALT = "textual description of image".
If the image in question is purely decorative, the best practice is to use an 'empty alt attribute', i.e. with no textual description:
ALT = "".
ALT text should be used to improve the accessibility of your page particularly for those using assistance technology such as screen readers. They also enable search engine crawlers to "see" your non-textual page content- potentially improving your search engine ranking.
The ALT attribute is required.
The 'TITLE attribute', in contrast, should be used to provide additional information about the page element. Most modern browsers show the title attribute as well as the image (or other page element). The title description is shown in a yellow box when the user hovers over the element with their mouse. It is coded using:
title = "title text".
I like to use title text in three main situations:
1) When additional information about a image is required, such as source information or the photographer's name when using a photograph.
2) If a field in a form requires explanation this information can be given via a title attribute. I would also include this information in plain text above the field for completeness.
3) To explain more about a hyperlink- such as a warning if a link opens in a new window.
The ALT attribute is optional.
This is a very basic overview of ALT and TITLE attributes- if you have any questions or queries, please don't hesitate to contact me at via : Simplicity User Experience Optimisation
Posted byCharlie M at 05:29 1 comments
Labels: accessibility, ALT attributes, TITLE attributes