SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    abbr, IE6, what is the best solution?

    New post, because a new topic but on the same site I was working on with the lists.
    *edit I moved this at the last minute, was in CSS*
    Same site has lots and lots and LOTS of abbr's. It's a future webshop for a technical gadget which, in hardware and description from the manufacturing commpany, has lots of trendy Wireless protocols listed in their 3GHSPAWiFi black-turtleneck iMac-toting way. The abbr's are nice in that I can also use them like Mike Cherim does to liven up a black page with otherwise only white text with some colour.

    Ie6 (of course) doesn't support it. Also, the title doesn't even show up on abbr for non-mousers unless you Jabba-da-script it (that I know of, and I'll bet Opera can somehow read those titles out).

    So I get it seems a few choices; I'd like to know which seems best.

    A List Apart has an XHTML2 article (so yes, I should ignore it completely because I have to go to war with the Web we have, not the Web we want) who suggests a span and an abbr, both with titles.

    Code:
    Blah blah <span class="abbr" title="Full name of Blah"><abbr title="Full Name Of Blah">blah</abbr></span> rest of sentence.
    Gah, nasty. Article: http://alistapart.com/articles/hattrick/

    Or
    I could have acronym for IE6, but I can't see it doing anything, so what the heck does it even do?? Either case, IE6 doesn't seem to bother showing titles on those anyway. So that's out. Plus I'm tired of the whole Grammar Nazi thing-- let's just use abbr for EVERYTHING and be done with it.

    Or
    I could use an empty anchor, which has a title attribute IE6 supports. Since I have a big list with funky Opacity tomfoolery and other silly visual tricks which pleased the boss with its empty content-less trendy black-turtleneck iMac-toting appearance, I already have a bunch of empty anchors anyway-- so what's a few more?
    Another advantage of anchors is keyboarders can get the titles too, because they a can has focus now.

    Except I still want abbr cause yeah, JAWS will say the title of the thing but it'll also say "link" which I'm already getting with my list-that's-not-a-menu. Plus it's more CSS 'cause my abbr's have one colour and my anchors have another and my random visually ephasizsng spans have yet another.

    I'm leaning to #1 though not sure if I'd do it with the [if lte IE6] conditional comments to really keep that extraneous content (and my CSS styling) from other browsers,
    or leave it be without abbr
    or use the span out in the open.

    I don't think I'll post a URL with all my pieces of tries and failures because it's pretty much selling a product (even though not yet available).

    *edit ah this should be moved to Accessibility huh?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oh ho, I did make a page with all sorts of junk on it, modifying the original page, scattering techniques around. Surprise, acronym DOES do something... but not in IE6. So, fooey.

    http://stommepoes.nl/Viu/abbrtag.html

    Code:
     Enige benodigdheden zijn een <acronym title="werld wide web internetz browser">browser</acronym> met <a title="Hyper Text Markup Language" href="#">HTML</a> ondersteuning en een <!--[if lte IE 6]><span title="Subscriber Identity Module"><![endif]--><abbr title="Subscriber Identity Module">SIM</abbr><!--[if lte IE 6]></span><![endif]--> kaart met data abonnement bij je mobiele netwerk operator.</p>
    The hidden span thing seems to work rather well, and no matter that the colours for spans appears here instead of the colours for abbr's (since colour isn't all that important anyway) but it can haz a title.

    Except for keyboarders. And not sure about teh extra bloat with the if IE stuff...

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stomme - I usually just use the span 'way' to minimize the 'conditional' code bloat. I feel 'span' conveys semantics via using the 'title' attribute.
    Code:
    <span class="abbr" title="Cascading Style Sheets">CSS</span>

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    I feel 'span' conveys semantics via using the 'title' attribute.
    Try telling that to a screen reader.

    Span elements are semantically neutral. A title attribute doesn't add semantics at all; it's just an 'advisory title'.

    Marking up an abbreviation with span is like marking up a paragraph with div.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy, I know hehe

    I am just trying to 'make' myself feel better for using the span tag

  6. #6
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you wrap the span tag around the abbr tag?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, I don't cater that much for broken browsers. The title attribute is only an advisory title anyway. It mustn't be used for anything critical. In other words, the full expansion of the abbreviation should be present in clear text if it's necessary.

    There's no guarantee that a screen reader will read the title, either. It's a configurable setting in JAWS, for instance, although I don't remember offhand what the default setting is.
    Birnam wood is come to Dunsinane

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stomme, Jason (you know who ) once wrote a bit of JavaScript that would replace <abbr></abbr> tags with <span></span> leaving everything else intact. Why don't you check with him to see if he still has it?

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There's no guarantee that a screen reader will read the title, either. It's a configurable setting in JAWS, for instance, although I don't remember offhand what the default setting is.
    Default for my thumb version (7) is titles on. Also with links. You can turn them off for when a page uses them for every single instance of the abbr in question, which can be a pain if you're used to hearing the shortened version in normal conversation (like AIDS, I'd title it once per page and no more).

    Oh hmmm, Dan, that's very interesting. I feel I need to support IE6 with this, and currently got everything with the stupid bloated IE Conditional Comments. I'll ask him.

    Try telling your boss you're not supporting broken browsers when 50% if his clients are using it. I code for the Web We Have not the One We Want. Damn that quote is so useful, thanks Rummy.

    While I could (if this were MY content) write everything out first, I dunno, this might not make sense to do any of this, so I'm just covering my butt.

    I mean, this is a Dutch-language page with all these English acronyms and initialisms (really really bad initialisms) which make no sense to anyone spelled out (most people would not understand their "Global System for Mobile communication phone" but they would understand GSM and esp in Dutch people wouldn't necessarily know what the Short Message Service is but everyone's kids are "SMSsen" or "SMSjes sturen"). So I feel that with a silly product like this were the little tiny bit of copy I get is all these acronyms and initialisms, that while it would be better to actually explain all this (like in the glossary suggested by A List Apart, I think that would go a long way here for those unfamiliar with the terms while leaving the tech-savvy alone), for now I'm at least making the first appearance of the terms have a title with a full name (even if the name is gibberish).

    I've even tried to have links to wikipedia, since the copy will say things like, "in order to use this device you are required to have a HSPA-capable phone", or something. There is no wiki page for that in Dutch, and even if there was, the English page doesn't really help the average consumer know if their phone is good enough anyway. And the title's pretty useless: High Speed Packet Access. I just have it in there anyway.

    So this is I think an instance of a page trying to be accessible to the non-technical (most of the terms have to do with wireless streaming mobile-phone video/audio specs and codecs and protocols and things) while actually not helping things : (

    However, even some of these things I cannot really explain to anyone either. Some terms I've tried to look up and I'm like, okay, why does the customer even need to know this, if every device they could possibly buy or have already has it? But I'm building a site without Content (and doing not too bad considering : (
    so I'm using every scrap of copy I can grab from the stupid brochures and PDF's I get sent.

    If I dared post the real page you'd see how terrible it is, though you can get an idea with the fakie page I made, most of the original text is there with just ABBRTAG stuck wherever a goofy term or the product name was. That page, the front page, is the closest to having any real content. The rest I made up out of frustration. : (
    I'm supposed to build a web shop out of this thing. It's actually already past the deadline but I just can't work with nothing. That I had to hunt down my own photos over at Stock Exchange is also terrible. The company should be sending their own photos to us if they want us to sell their product.

    Okay enough ranting. Thanks for the input esp Dan... I'll compare the two sizes and whoever is lower, the IE CC's or the JS, I'll use. When IE6 gets low enough in usage, I'll remove them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •