[Skip to content]

Search our Site
Easysite Resource Centre
Understanding Anchor, IMG and MAP elements - TITLE, ALT Attributes, Alternate Text and Tooltips

Understanding Anchor, IMG and MAP elements - TITLE, ALT Attributes, Alternate Text and Tooltips

This article provides technical information behind how different types of anchors or links are created and includes further details regarding the specific HTML tags and attributes which are present depending on the type of link being created.

Text / Content Editor Links

An anchor is another word for an internal link or bookmark on a website. Some designers use the term anchor to refer to any hyperlink on a web page although this definition stems from the fact that the HTML tag to create a link is the A tag or anchor tag. The anchors or 'A tags' will be present in the following format if viewing the source code or HTML of the page directly:

<a href="http://www.eibs.co.uk">EIBS Ltd</a>

The 'TITLE' attribute referenced as 'Alternative Text' when creating a text based link in the Easysite Content Editor element specifies extra information about an element present on a website. The information is most often shown as a 'tooltip' text when the user hovers the mouse over the element.

Whilst the labeling in the Easysite 6.0 and 6.5 releases asks for alternate text when adding a link, this is actually referring to the TITLE attribute of the link although alternate text is seen as a less technical, more user friendly term. The title or alternate text will be present in the following format if viewing the source code or HTML of the page directly:

<a href=http://www.eibs.co.uk title="Why not visit EIBS Ltd?">EIBS Ltd</a>

The implication remains that the text supplied should be different from the link text (the text used to create the anchor shown on the web page).

Having links present with identical alternate and link text will fail accessibility validation due to the way screen readers are known to read out both strings causing confusion for the visitor. 

With this in mind, Easysite automatically validates links created within the Easysite 'Content Editor' element to prevent this situation from occurring and to allow our none technical users to follow these guidelines without having the background knowledge to be aware the duplication breaks best practice guidelines.

If you hover over _any_ tag with a 'TITLE' attribute, the majority of browsers then show the title text as a tooltip popup.

Images / Asset Placeholder Links

The method of rendering text associated with images is required to differ from that for standard text based links. Alternate text displayed against images is through the use of the ALT attribute rather than the TITLE attribute and is use if the image cannot be displayed. The ALT attribute is important for images and provides alternative information for an image if a user for some reason cannot view it. For example, due to a slow connection, an error in the image source, or if the individual viewing the website uses a screen reader.

When accessing websites in old browsers this was treated like a TITLE attribute and would provide a tooltip, but no modern browser does this anymore. Internet Explorer (prior version 9) still displays the value of the alt attribute as a tooltip although this is NOT the correct behavior, according to HTML specifications. 

The 'Alternate Text' added within the Easysite Content Editor element for 'Links / Anchors' will provide a popup tooltip message based on the TITLE attribute, however for images and the associated ALT attribute, it will not. It is problematic offering a TITLE attribute for an image alongside the ALT attribute as including a duplicate value will fail accessibility on the same basis as duplicate link and title text for links.

Vertical / Side Navigation

The MAP element is used to define a client-side image-map and the vertical / side navigation links found on websites are typically contained by a MAP tag for accessibility purposes. The presence of this tag allows screen readers to skip blocks of links rather than having to step past each one sequentially. 

The MAP element is used in Easysite to render the vertical / side navigation created within the XSLT style navigation document. If the MAP element were to have a TITLE attribute, hovering over a navigation link or any child navigation link displayed would provide the generic MAP element TITLE attribute as the tooltip. I.e. A generic term such as “side navigation”.

When creating Easysite styles for customers we do not provide TITLE attributes for links 'Anchors' in the vertical / side navigation or breadcrumb trail due to there being no capacity to provide alternate text for these. With this in mind, navigation or breadcrumb trail links will not have dynamic or specific tooltips present when hovering in any browsers. 

If you believe this TITLE text to be present against the MAP element used to display the navigation in a style created by EIBS Ltd, this can be resolved by updating the specific Style XSLT document to remove the TITLE attribute thus preventing the generic tooltip from being displayed. Please log any instance of this through the Service Request Portal and we would be happy to correct the issue.

When creating your own Easysite styles, the MAP element within the vertical / side navigation should NOT include a TITLE attribute as this will result in a generic tooltip being displayed for the whole navigation.

Article comments