home

Little steps to accessibility : Title tags, part 1

[Note: the title of this post should be “Little steps to accessibility : Title attributes, part 1” but I’ve found that editing post titles in WordPress can cause problems so I’ll leave it as is but refer to title attributes rather than tags from now on. Thanks to Matt Andrews for pointing me to Roger Johansson’s article, HTML tags vs. elements vs. attributes]

Anyway, a bit of tinkering under the hood took place last night and if you’re reading this with Internet Explorer you can now resize the text by clicking the “View” button on the top menu bar of the browser window, choose Text Size then Larger or Largest.

For your commenting pleasure, we now have live preview (via this plugin), with the option to add title attributes to your links – hooray!

Not sure about title attributes?

Let’s say you wanted to leave a comment on a discussion about books. We’re all recommending our favourite books and you would like to add your twopenorth (that’s around 2 cents for our American cousins) but rather than just type the author and title of the book, you’d like to link to a specific version of the book on, say, the Amazon website.

Copy and paste the text from just above the comment box, it’ll look like this:

<a href="" title="">

Between the first set of double quotation marks, add the url of the site you want to link to.

<a href="http://www.amazon.co.uk/etc." title="">

Then between the second set of double quotation marks add a descriptive title of the link you’re using, in this case you might write

<a href="http://www.amazon.co.uk/etc." title="Amazon listing for Nevil Shute's book A Town Like Alice">

You’ll then produce a link like this:

Nevil Shute, A Town Like Alice

Now, I’m still on the learning curve with title adding. I’ve a feeling that you should avoid using single quotation marks and I’m very unsure about the duplication in the example above but I’ll research it further. Contributions are, as always, welcomed.

It’s also really helpful to use title attributes on links within your blog posts – not only are they read out by screenreaders (with the option switched on?), sighted readers can hover over the link to find out more about the url you’re sending them to.

Later

I’m also unsure about omitting the title attribute if the link text itself is self-explanatory. For example, the link in the new first paragraph:

Roger Johansson’s article, HTML tags vs. elements vs. attributes

I’ve used the author’s name and the title of the article so I would lean toward not adding a title attribute here but I’m wondering if that’s correct. More research to be done!

11 Responses to “Little steps to accessibility : Title tags, part 1”

  1. daisy
    December 2nd, 2005 14:19
    1

    Apologies, I’m trying to edit some errors in the above post but the server is either down or very slow. I think it’s time for a dog walk.

  2. matt andrews
    December 2nd, 2005 14:23
    2

    Since I’m in a pedantic mood for some reason, I’ll point out that they’re title attributes, not title tags…

    Roger Johansson covered this nicely in a recent article.

  3. daisy
    December 2nd, 2005 14:28
    3

    Matt, thank you! Pedants are welcome when it comes to getting the terminology right. As soon as I can edit the post I’ll change that.

    Thank you too for the Berea Street article – complete with title attribute :-)

  4. Richard
    December 2nd, 2005 21:13
    4

    If you get really techy, you’ll start referring to elements as “nodes”. That’s the point at which you become lost to humanity.

    Incidentally, single quotes within your title are fine. And I would say a title should be used where it’s not obvious from the text node – er, text of the link – where the link is going. But, if it is obvious, then a title is superfluous. Visually impaired people are no more stupid than the rest of us.

  5. daisy
    December 2nd, 2005 21:30
    5

    Thank you Richard – I wasn’t implying any stupidity on the part of the visually impaired, rather pointing out my stupdity at not yet having managed to hear an example of a screenreader ;-) (on the long list things to do).

    There’s also an awful lot of bollix being written about accessibility around the interweb, sorting out the truth and what’s needed on a practical level is far more challenging than any code!

  6. David
    December 3rd, 2005 19:54
    6

    Out of interest, what sort of problems occur when you change the title?

  7. Karan
    December 3rd, 2005 20:40
    7

    I used title attributes when I using “foreign” words…the idea was that a mouseover would reveal the english definition. I thought it worked pretty cool…except you weren’t able to see the effect. oh woe.

  8. daisy
    December 3rd, 2005 22:46
    8

    Welcome back David! I must confess I can’t remember exactly what happened but I was new to WordPress and to php so was probably in a bit of a tizzy and it was probably all my fault. I’ll try it again when I’ve had a bit more sleep :-)

    Karan, do you use a pen and tablet? I know that I don’t see many title atrributes with the pen but see them as soon as I switch back to the mouse.

  9. daisy
    December 3rd, 2005 22:47
    9

    Hang on, was it me who couldn’t see them? I’m starting to have a flashback here… (and yes, it was a really cool idea!

  10. Karan
    December 4th, 2005 01:23
    10

    I use a pen and tablet (the WACOM Digitizer II) only for graphics stuff and a mouse for everything else. Yes…I do recall that it was you who were left with no translation. Maybe it works for you now: A cosa serve quel guanto di gomma?

    Hehehe

  11. daisy
    December 4th, 2005 01:33
    11

    Yep, definitely works with a mouse. I tend to use the pen for everything, switching only to the mouse when I have to. Wonder if there’s a way to progamme the Wacom differently… will check it out tomorrow.

Leave a Reply

For added zing, you can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

But you can also just type in the box and hit the Submit button. Easy peasy lemon squeezy.

Your email address is not displayed and will NEVER, EVER be shared with any other party. We hate spam mail as much as you do.

Spotlight on...

Delicious links

These links are updated frequently thoroughout the day. Should you miss any they're all stored on my Delicious pages.

What I'm listening to