User:Bigpeteb/Image alt tags

Here is how the globe and map icons currently appear:

• <span class="noprint listing-url"> <abbr class="url" title="{{{url}}}">[[Image:P geography 3 b.png|14px|link={{{url|}}}]]</abbr> </span>

• Alt text = "P geography 3 b.png"

• (This is what screen readers will read)

• Title not set
• Hovertext = "http://www.hardrock.com/"
• Dotted underline (because of <abbr> tag)

• <span class="noprint listing-coordinates"> <abbr class="geo" title="{{{lat|}}};{{{long|}}}">[[File:Map mag16.png|14px|link=special:mapsources/{{{lat|}}},{{{long|}}}]]</abbr></span>

• Alt text = "Map mag16.png"
• Title not set
• Hovertext = "Special:mapsources/40.756872,-73.986493"

• (I think this is broken. Apparently all browsers are showing the destination of the link as its hovertext, instead of the title of the <abbr> tag.)

• Dotted underline

Instead, we ought to use proper alt= and title= tags. Since IE, Firefox, and Chrome all display title= tags as hoverboxes, this lets us get rid of the <abbr> tag and the underline it creates.

• <span class="noprint listing-url">[[Image:P geography 3 b.png|14px|alt=Link to {{{name}}}'s website|link={{{url|}}}|Website]]</span>

• Alt text = "Link to Hard Rock Cafe's website"

• (This is what screen readers will read)

• Title = "Website"

• (This will display as hovertext in all major browsers)

• No dotted underline

• <span class="noprint listing-coordinates">[[File:Map mag16.png|14px|alt=Map of {{{name}}}|link=special:mapsources/{{{lat|}}},{{{long|}}}|Map]]</span>

• Alt text = "Map of Hard Rock Cafe" (screenreaders)
• Title = "Map" (hovertext)
• No dotted underline

---

I could see maybe changing the title= tag to contain the URL and lat/long in addition to a description. So the hovertext might be: (hover these to see the result)

•  "Website (http://www.hardrock.com/)"
•  "Map (40.756872, -73.986493)".

• Or we could be more verbose and have  "Map (40.756872° latitude, -73.986493° longitude)".

• I think using MediaWiki ParserExtensions we could also have it print like "40.756872° N, 73.986493° W", substituting N/S/E/W appropriately. The code for that is something like {{{lat}}}° {{#ifexpr: {{formatnum:{{{lat}}}|R}} > 0 | N | S }}, {{{long}}}° {{#ifexpr: {{formatnum:{{{long}}}|R}} > 0 | E | W }}