Successful Blog

How to Code Accessible Links–Part 1

by

Cas read my article on how to code hyperlinks and in the comments shared some discussion about the importance of accessible links–a topic which had come up earlier in Successful-Blog conversations. In my usual fashion I invited Cas to write on the subject and she took up the challenge. Her response was to do a series of articles on accessible hyperlinks. I, for one, am so glad she did. She really does know so much more about such things than I do. In fact, she knows so much more that I asked her to start by just clarifying for me what is it that makes an Accessible link. –ME “Liz” Strauss

How to Code Accessible Links–Part One: The Basics
by Cas of Brightmeadow

Liz has already written a great article on how to code hyperlinks. I’d like to take this one further and show you how to code accessible hyperlinks. If you are happy with how to manually code hyperlinks, then we can continue. If you aren’t, or feel like you need a bit of a refresher, I do recommend you read the article. We’ll wait.

Ok, ready?

What is an accessible link?

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they’re using. An “accessible link” therefore, is simply a link that imparts as much information to as many users as possible. It enables the reader to preview the link, making an informed decision about whether to follow it or not, and helps to differentiate between links that may share link text but refer to different targets

So why should I worry about accessibility?

Not everyone views the Web in the same way that you do – accessibility is not just for disabled users. It is for the many potential readers who might be browsing your site on a dial-up connection, using a screen-reader, using a mobile device with a small screen, or using a text-only browser such as Lynx. By making your website accessible you are opening it up to a much wider potential audience. Making something accessible for humans also has the side effect of making it more accessible for search engines. If you make a living through your site, happy readers, and happy search engines just make good sense.

Not convinced?

Not convinced that this is necessary? Turn off the images in your browser, and then the stylesheet, and see if you can still successfully navigate your website and get meaning from your content. What you see now is roughly how someone with visual impairment, or a text-only browser, views your website.

  • Internet Explorer: Tools > Internet Options > Advanced > Multimedia > Show pictures (uncheck)
  • Firefox: Tools > Options > Web features > Load images (uncheck)
  • Opera: Tools > Preferences > Multimedia > Show no images
  • Stylesheets: View > Page Styles > No style

So how do I go about making my links accessible?

It really isn’t that hard. If you’re already manually coding your links, making them accessible is just a case of putting in a few extra bits of text.
This how-to is in three parts, and will walk you through what you need to know:

  1. How to code an accessible hyperlink
  2. How to code an accessible image
  3. How to code an accessible embedded hyperlink

Throughout this article I will be using http://www.foo.com as an demonstration. Simply replace this, and any other exemplar text with the particulars for what you are doing.

How to code an accessible text hyperlink

Basic code

Just to remind you what the basic hyperlink code looks like:
<a href=”http://www.foo.com”>Descriptive Link Anchor Text </a>

The TITLE description – how it works

It is the TITLE attribute that makes a link accessible. It is inserted after the URL but before the first closing angled bracket and contains descriptive text, enabling the reader to ‘preview’ the link. This in turn allows users to more accurately guess where the link will take them, and make a more informed decision about whether or not they should follow it. Roll your mouse over this example link and you will see what I mean. The text that appears by your mouse cursor is the preview.
Example link

Accessible code

<a href=”http://www.foo.com” title=”Descriptive text” >
Link anchor text will render like this: Link anchor text

When to use

Every hyperlink should have a TITLE attribute.

A few notes

The descriptive title can be any text you want, though to make it as accessible as possible, follow these simple rules:

  • It should say something about the destination of the link.
  • It needs to be between 3 and 80 characters long. A single sentence is normally sufficient.

–Cas and Liz

The Complete Series
How to Code Accessible Links
This one: How to Code Accessible Links–Part 1
How to Code Accessible Links–Part 2
How to Code Accessible Links–Part 3

Getting Your Blog Ready for Readers

by

In the spirit of a community blog, articles from readers are a regular feature here. Know that I read them all to ensure the content belongs in the context of Successful Blog. Know that not every submission makes it here and that some get revised before they pass muster. Still even then, not every one of them will be right for every one of you.

To be respectful of your time–who needs me going on and on?–I ‘ve made a snapshot form to help you determine easily whether the content suits your personal needs. When you keep an article, it can serve also as a summary. If you have suggestions for changes to the form, just make a comment after an article whenever you think of them. Now on to the article. . . .

gray purple strip A

Guest Writer: Katy Whitton

Katy Whitton of Katy Whitton.com sent us this article on how to Market Your Blog and Keep Your Readers from her blog, Flipping Heck!

Target Audience: Beginning Bloggers
Article Type: Overview
Content: Katy mentions the main points of bringing your blog into the world of blogging, including choosing an appropriate name, content considerations, Permalinks, pinging catalogues (directories), posting frequency, advertising, and stats. She also provides links to additional information.

Notes: This is an overview that will get a new blogger thinking on what there is to do and hopefully bring him or her back to Successful Blog to find answers to any questions the article might prompt. Katy’s writing makes her article an easy read, an investment of a few minutes. Her writing voice lets the reader know that he or she can do this.

Thanks, Katy, for contributing to the Successful Blog community.

ME “Liz” Strauss

What Is Content that Keeps Readers?

by

Everybody talks about content, but nobody actually defines it.

What is content and how can content keep readers?

Content is more than ideas, more than words and pictures on the screen, more than links to articles and data. Content is everything we communicate to our readers. Content is . . .

  • Information Quality content is both fact and analysis. It offers meat and potatoes that anyone can find together with something original–analysis, predictions, interpretation–that comes only from the writer. Everything is relevant. There’s no time waster anywhere. The writer’s decisions are the “value-added”–the secret recipe. If we have the best recipe, readers will keep coming back to us.
  • Presentation Quality content is top-notch presentation. Simple is elegant. The best information is lost, if nobody reads it. Too many long sentences; too many bullets; too many links interrupting the text–these get between the reader and the ideas. If it looks hard to read, it is. Like a great wine in a crystal glass, great presentation makes great content inviting.
  • YOU We saw from our interviews last week, how readers respond to the intangibles Indie brings to his blog. Our presence, our voice, our respect for our readers, they are the nuance, the one-of-a-kind sauce on the expensive meal. Too peppery, too sweet, too salty, too bland, and readers will think this dish isn’t worth having again. On the other hand, get the right balance and they’ll be back every night.

When a blogger provides top-notch content with something extra, readers can see it. They appreciate the writer, and they enjoy the experience. Readers notice that “value-added” difference. They’ll be back to see whether we can do it again.

And that’s when consistency is the operative word. 🙂

–ME “Liz” Strauss

Related articles:
SEO–Five Traits of Relevant Content
Turning Reluctant Readers into Loyal Fans
Audience is Your Destination