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>
  • Link to Hard Rock Cafe's 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
  • <span class="noprint listing-coordinates">[[File:Map mag16.png|14px|alt=Map of {{{name}}}|link=special:mapsources/{{{lat|}}},{{{long|}}}|Map]]</span>
  • Map of Hard Rock Cafe
  • 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)

  • Link to Hard Rock Cafe's website "Website (http://www.hardrock.com/)"
  • Map of Hard Rock Cafe "Map (40.756872, -73.986493)".
  • Or we could be more verbose and have Map of Hard Rock Cafe "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}}}&deg;&nbsp;{{#ifexpr: {{formatnum:{{{lat}}}|R}} > 0 | N | S }}, {{{long}}}&deg;&nbsp;{{#ifexpr: {{formatnum:{{{long}}}|R}} > 0 | E | W }}