The question arose at the office last week, \u00e2\u0080\u009cis there a best practice on using the title attribute on the <a> vs. <img> tags when the link wraps the image?\u00e2\u0080? With so many attributes available it can be confusing to know which ones to use when.<\/p>\n
The The So, the best practice for links around images would be:<\/p>\n Make sense? Now I have to go clean up all my code to make sure I am using them correctly.<\/p>\n The first code example here was stolen from Dan Cederholm\u00e2\u0080\u0099s<\/a> Web Standards Solutions: The Markup and Style Handbook<\/cite><\/a>. It\u00e2\u0080\u0099s an excellent reference for such questions.<\/p>\n","protected":false},"excerpt":{"rendered":" The question arose at the office last week, \u00e2\u0080\u009cis there a best practice on using the title attribute on the <a> vs. <img> tags when the link wraps the image?\u00e2\u0080? With so many attributes available it can be confusing to know which ones to use when. The title attribute tells you where a link is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6","post","type-post","status-publish","format-standard","hentry","category-code"],"_links":{"self":[{"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=\/wp\/v2\/posts\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":0,"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=\/wp\/v2\/posts\/6\/revisions"}],"wp:attachment":[{"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/markup.thekraemers.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}title<\/code> attribute tells you where a link is going. They will appear as a tool-tip when moused over (in modern browsers) and they can be read aloud by screen readers. They aid the user in letting them know where a link will take them. Anchors (a<\/code>) should have title<\/code> attributes as a matter of manners. As an example:<\/p>\n
\nI just read <a href=”http:\/\/www.downwithwallpaper.com\/tips.html” title=”DownWithWallpaper.com | How to take down wallpaper” \/>a great article<\/a> that gave me some home improvement tips.<\/samp><\/p>\nalt<\/code> attribute tells you what you’re looking at. Screen readers use this as the verbal description for the image.<\/p>\n
\n<a href=”http:\/\/navigatorsystems.com” title=”NavigatorSystems.com | Home” ><img src=”logo.gif” alt=”Navigator Systems logo” \/><\/a>
\n<\/samp><\/p>\n