Successful Blog

Here is a good place for a call to action.

  • Home
  • Community
  • About
  • Author Guidelines
  • Liz’s Book
  • Stay Tuned

Bikes Are Green Wheelchairs Are Not — Is the Planet More Important Than the People?

September 17, 2009 by Liz

Drive Throughs and Visible Authenticity

It seems from the second that I got into the car with Hope and Theresa to the minute they dropped me off at home, my social media road trip was an experience interwoven with more social than media. My plan had been for weekend retreat focused on bringing people back into SOBCon2010, seeing more green trees and less concrete, and getting space enough to open my mind. Time to reflect while driving or sitting alone can re prioritize which ideas bubble up to get attention. Serendipity can intervene to lend light to those thoughts.

Simple conversational phrases started trending …

  • how quiet the car is … but it’s not a hybrid.
  • I didn’t bring my metal water bottle. I’ll have to buy an earth-killing plastic one.
  • look at the view at the Grand Geneva Resort — all that green!
  • I wouldn’t call this handicapped accessible … We checked two of the buildings totally are.

We’re obsessing about causes. We were just talking. But still there it was. Statements about how we cared for the earth and how we cared about the people who more around it were coming up.

At breakfast yesterday, Beth Rosen, and I discussed small nonprofits that we want to make part of SOBCon2010: BeBrightPink.org, inclusionsolutions.com, and job angels. We made a plan to find two others one that support people and the planet — one green and one that helps teachers and kids.

The conversations were all so normal for the social media crowd that they didn’t really stand out.

Bikes Are Green Wheelchairs Are Not

Then on the way home, I got an email and shortly after a phone call from Patrick Hughes about something disturbing. Here’s some of what it said.

.. I just saw some press about the company Burgerville in Oregon who is now allowing bikes in the drive thru and touting it – good for them.

However, I am frustrated.

S woman 3 weeks ago, is denied on her bike in Oregon at a drive thru and within 24 hours they have a new bike policy and are welcoming bikes with open arms. http://bikeportland.org/2009/09/15/burgerville-announces-bike-event-new-signage/

2 years ago, as you know, Karen Putz [went] through a drive thru and is denied service because she is deaf… she does the same thing and goes home and blogs about it, but because it’s a disability issue and not a “green” issue, it goes to lawyers vs the marketing dept. why isn’t disability considered GREEN? They dragged her and this issue out for 2 years … http://www.diversityinc.com/public/3158.cfm

Several weeks ago a woman went into a drive thru in Minnesota in her wheelchair and was denied and no one really came to her rescue either… she was [labeled] as a radical … [W]hen restaurants have a 24 hour policy — meaning the main restaurant is closed but the drive thru is still open — they ARE violating the ADA by not allowing everyone to be able to spend their money.
http://thecrustycurmudgeon.wordpress.com/2009/06/17/wheelchair-woman-denied-service-at-white-castle-drive-thru/

Having legal departments tell their people to just put up disability stickers is not the answer anymore!

So what i am learning after many years in this deal is that when it comes to disability issues, it goes to the legal department and unless someone is suing them, there is no problem. you can talk all day about how big the disability market is however it’s still going to be relegated to legal and not marketing…

Will the GREEN people help ALL people? What if businesses aren’t considered green unless they are also inclusive? When will disability issues go to the marketing departments vs. legal?

Does all of this make sense? How do we tell this story?

Which brings me back to the social in social media and makes me wonder whether those corporations think planet is more important than people living on it?

How authentic is a company that can’t see the problem with policies that conflict like that?

–ME “Liz” Strauss
Work with Liz on your business!!

Buy the ebook. Learn the art of online conversation.

Filed Under: SOB Business, Successful Blog Tagged With: accessibility, bc, green, LinkedIn

How to Code Accessible Links–Part 3

January 18, 2006 by Liz

How to Code an Accessible Embedded Hyperlink
by Cas of Brightmeadow

An embedded hyperlink is when the image is the hyperlink. An example of this is the feed button found in the ‘Subscribe’ section of Successful Blog’s sidebar.

These types of links can be problematic if you can’t view the images for whatever reason and you haven’t included ALT and TITLE attributes. To all intents and purposes, these links simply cease to exist. (Both screenshots that follow were trimmed at the top and side for fit).

View this screenshot of Successful Blog’s front page with images turned off,

CAS 3 without

and compare it to this one with images back on.
Cas 3 with images

The first thing you notice is that in the top image there is no banner, and then that there is no way to subscribe.

Ooops.

Basic code

An embedded hyperlink consists of a hyperlink tag and an image tag:

<a href=”http://www.foo.com/”> <img src=”image.jpg” /> <a href=”http://www.foo.com” title=”description of link destination”> <img src=”image.jpg” alt=”description text” />
Note how the TITLE is attached to the hyperlink, whilst the ALT is attached to the image.

When to use a full ALT description

Use a full ALT description when the image forms the entirety of the hyperlink, i.e., the image is the only anchor text.

When to use a null ALT description

Once again, think carefully about using the null ALT description (<alt=””>) when the hyperlink has a text component. For example:

<a href=”contactus.html” title=”contact page”> <img src=”contact.gif” alt=”contact us” /> Contact us </a></code> will render without images as <contact us contact us>
(The first from the alt attribute, the second from the anchor text).

In this case the image was purely decorative, and would have been better coded as <a href=”contactus.html” title=”contact page”> <img src=”contact.gif” alt=”” /> Contact us </a>.

A few notes

  • In this case, the ALT description should reflect the link destination as well as the image description. For example, in the case of a feed button, ALT text such as “feed for Successful Blog” might be be appropriate
  • It is also worth bearing in mind that, if you use external hosting for your images (like Flickr and Photobucket), you are at the mercy of their servers. If they go down and you haven’t thought to use ALT or TITLE, you are stuck. If you have made your links and images accessible, then you can keep going that much better till things return to normal,

And that is it. If you are already manually coding your hyperlinks, then making them accessible will just take a few seconds longer. If you aren’t yet manually coding your hypertext links, now is a good time to start. Those extra few moments pay huge dividends in terms of usability, SEO, and the general happiness of your readers. Whilst most of them won’t consciously notice a difference, the few that do will thank you for it, and we as bloggers are nothing without our readers.

If you are interested in learning more about this subject, the W3C has Web Accessibility Guidelines, and Webcredible have some very good white papers describing all aspects of accessibility and usability in more depth.

Sources for this article: The W3C, Webcredible, general common sense, and diverse other sources.

Thanks to Cas for the obvious work this took, and apologies in advance for any errors I might have introduced. We leave you now the links to the series. –ME “Liz” Strauss

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

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

How to Code Accessible Links–Part 2

January 17, 2006 by Liz

How to Code an Accessible Image
by Cas of Brightmeadow

Basic code

Just to remind you what the basic image code looks like:
<img src=”http://www.foo.com/image.jpg” />

The ALT description–how it works

The ALT description works in much the same way that the TITLE attribute works for a link. It is inserted after the URL but before the tag is closed and contains descriptive text. Instead of previewing the image when you mouse over though, the ALT attribute is what is read out when someone is using a screen reader. It should describe the content of the image. It is also the ALT text that is displayed by your browser when, for whatever reason, an image fails to load.

Accessible code

<img src=”http://foo.com/image.jpg” alt=”descriptive text” />

When to use

Use descriptive text in the ALT attribute when the image imparts information to the viewer, for example if it contains text like many header images and buttons do.

When to use a null value

There are certain instances when the image being used imparts no information to the reader – for example a spacer.gif (though the practice of using spacer images is now frowned upon). In these instances, consider using the null attribute to make the screen readers ignore the image. To use the null value, simple use alt="" without a space between the quotation marks. Putting a space, or just ignoring the ALT description will result in non-visual readers being told that there is an image, but not being given a description. Highly frustrating!

A few notes

  • The description should not contain the word ‘image’. An image coded as
    <img src=”penguin.jpg” alt=”an image of penguins plotting” />
    will be read out as “IMAGE, an image of penguins plotting” by a screen reader.
    Repetitive. Rather, the text should be something like “penguins plotting another evil plan”.
  • Think carefully about when to use the null attribute. Users who can’t see your decorative or blank images don’t need to hear a description of them.

Meanwhile Cas and I are off to plot a plan of our own, until tomorrow.
–ME “Liz” Strauss

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

Filed Under: Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

How to Code Accessible Links–Part 1

January 16, 2006 by Liz

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

Filed Under: Audience, Links, SEO, Successful Blog, Tech/Stats Tagged With: accessibility, bc, blog-promotion, colding-links, personal-branding

Recently Updated Posts

How to Become a Better Storyteller

SEO and Content Marketing

How to Use Both Content Marketing and SEO to Amplify Your Blog

9 Practical Work-at-Home Ideas For Moms

How to Monetize Your Hobby

How To Get Paid For Sharing Your Travel Stories

7 reasons why visitors leave websites for ever



From Liz Strauss & GeniusShared Press

  • What IS an SOB?!
  • SOB A-Z Directory
  • Letting Liz Be

© 2025 ME Strauss & GeniusShared