User:Bigpeteb/Image alt tags

Here is how the globe and map icons currently appear:

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

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)

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

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.

[[Image:P geography 3 b.png|14px|alt=Link to {{{name}}}'s website|link={{{url|}}}|Website]]

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

[[File:Map mag16.png|14px|alt=Map of {{{name}}}|link=special:mapsources/{{{lat|}}},{{{long|}}}|Map]]

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 }}