Alt text and form buttons set as images

There is something I always used to forget, and I didn’t realise this until a website I developed in the past was the recipient of a very comprehensive, postmortem accessibility review.

I am quite pleased to say the majority of the results were decent. The pedantic standardista in me had in fact hacked up the correct semantic code and anticipated most potential problems that might be encountered when users browse my website using alternate methods.

One thing that completely slipped passed me while coding this website though, was using alt attributes when coding form buttons set as images.

What do I mean?

Search form with images turned on
Foxsports search with images turned on

A sighted user will be able to see clearly where the submit button is and how to complete the search functionality displayed above on this website.

Search form with images turned off
Foxsports search with images turned off

A user with images disabled would not know where the submit button was to complete the search functionality above.

This example above is using Internet Explorer 6. Firefox will show the button in a usable format, but the point here is to make this button work for everyone.

How to solve this?

Simple, using the alt attribute when coding your input type=”image” elements in your forms.


<input type="image" src="⁄images⁄go.gif" value="go" alt="Submit" ⁄>

Another method is to use the button element, this way you would probably automatically use the alt attribute as you would be inserting a plain image element within the button element.


<button type="submit"><img src="⁄images⁄go.gif" alt="Submit" /></button>

Why am I bringing up something so obvious?

Or is it? I have probably audited almost twenty websites since then, combing markup for web standards compliance and accessibility or SEO hiccups… and one thing that consistently gets overlooked is this exact problem.

I am not talking about CSS newbies here either. Most of the websites are high quality, but it just seems this little issue keeps slipping through the cracks. Once you notice it once though, you won’t do it again.

Comments (11)

My Facebook Story

I find it interesting that at times, we as web professionals, get so involved in minute details of code, design and the usability of websites that we lose sight of the bigger picture. Often I think it would be nice to forget this detailed knowledge I have of the online space and be able to view the web as most others do, day to day.

It also amuses me that some technologies are dismissed simply because they go mainstream quickly, or are just mainstream at all. Alienation of an emerging technology or web 2.0 fad… but you often have to wonder just what keeps so many people returning again and again?

This post is not about Facebook suicide pacts or pissing on about how useless Twitter is. This is simply one of my Facebook stories.

In 1999 I travelled Europe for one year on my own. I arrived in Cork, Ireland and met an American guy named Brendan. We bonded over a few beers and ended up moving to the next town of Killarney where we continued to hike all day, drink Guinness all night. Rinse and repeat for the next 6 days.

We parted ways after Killarney, only to meet in the town of Galway for a final meeting in a pub before he was to head back to America and I was to push on to the mainland of Europe. I would safely say that Brendan and I clicked, and that we would be friends for life , even after this relatively small amount of time that we had known each other.

Almost 9 years later we had talked a few times on Hotmail, which I keep only for those friends I still know or hear from occasionally from that year in Europe. Hotmail is inconsistent at the best of times nowadays, with people migrating over to Gmail or just by chances your emails get binned by the useless Hotmail spam filters.

I have been on Facebook for less than a year, and I found Brendan on there somewhere along the way. We had brief contact, I followed his photos and wrote on his wall. Nothing too groundbreaking, but it was a connection.

Then Brendan mentioned he was coming to Sydney, which I noted after receiving a Facebook message. I replied back and told him my details to get in touch and almost instantly received a reply. Frequent messages bounced back and forth, before finalising plane times, pub locations and other important details.

Now this never happened with any of my Hotmail contacts from Europe, but Facebook has suddenly created an almost real time connection to many of these non-web contacts I have that would never respond to simple email.

This Sunday I will be sitting in a bar with this buddy from America (now living in Japan), that I met in Ireland almost 9 years ago. What’s really interesting is that I have been following his life to some extent for the last year via Facebook imagery, updates, wall writings and other absurd app-fuelled connections that make me feel like I know what his life has been about for the last year.

I know of his trips to Utsumi beach on the weekend and wonder about the Gajin parties in Tokyo… but there will still be lots of catching up to do over many pints on a Bondi patio.

This is my personal, social review of a web 2.0 ‘fad’. No technical audit, usability research or professional critique of interface design. Minor annoyances aside (vampire bite anyone?) what is your social, web 2.0 app doing for you?

What’s your story?

Comments (4)

SEU, Search Engine Useless

Lately I have been asked again and again, “What can I do to improve my rankings in Google?”. This is a bit of a loaded question, but one I always attempt to answer when I am dealing with anything search related.

I usually begin with a quick glance at the website using the 30 second test, a skim of the source code to view the semantics of the HTML and then check out the basic structure of the document and a few other technical bits here and there.

In most instances this process is just a formality as the real answer is usually quite obvious, Search Engine Useless content, or SEUs. Content that is invisible to the search engines that you are just throwing away, usually without being aware of the real consequences.

This content may be semantic and validate by W3C standards, it could even be fully accessible in some instances, but to search engines it means nothing. Search Engine Useless (SEU) content is something that plagues our industry and drives people to inquire, “Why isn’t my website getting exposure?”

Listed below are some of the most common offenders.

Iframes

Usually used on a website where you need to quickly pull in a 3rd parties content without the bother of dealing with server-side implementations. Stemming from quick deals established by sales departments that have little or no communication with developers or just the job that had to get out the door with no fuss.

The interesting thing is most of this content I encounter is very useful and engaging to the users, which would bring in relevant referral traffic if you could only expose the content.

Flash

Flash can be fully accessible when developed correctly with the new tools available over the last couple of years. It can even aid in screenreader detection in some instances, improving accessibility for websites.

Yet this accessibility, which would usually aid search engine optimisation efforts, will do nothing to help search engine spiders crawl Flash content.

The <embed> or <object> elements are the SEU offenders in this instance. Hiding good content in a plug-in that cannot be crawled by search engines. Alternate content can be offered, using great standards compliant techniques, but is rarely executed in a truly efficient or consistent manner.

AJAX

Often developed with improved interfaces for content delivery to users, but AJAX and JavaScript still tend to be used as blankets to cover content from search engines.

HIJAX has been coined as an accessible and searchable way of exposing content to the users (and search engines) but most current Web 2.0 implementations tend to ignore this idealistic technique of development.

Video and Audio

Engaging and a great way to present content but you won’t see it turn up in the search engine result pages unless you are going through Google Video. Transcripting is a great alternative but I have yet to see a corporation excited about this solution.

Lack of Content

If you don’t actually produce original content and lots of it… that could be strategy to think about. This is a problem I deal with regularly. No, FAQs and Terms & Conditions don’t count.

Why Can’t We Fix This?

It’s the bottom line that pushes these blind spots in content out to the users. It’s sales, advertising and marketing having to make targets each month without having a well thought out process to be able to implement things efficiently and being able to slow down and provide minimum standards for development on large, public websites.

It’s about SEO being the buzzword for quick results, until someone suggests long term solutions to make a real difference and solve the real problem and suddenly you don’t hear the topic brought up at meetings so much anymore.

We know the technical solutions, so why aren’t they being implemented? Well, it’s just easier to implement this way. No fuss, no problems with technical implementation or developers adding further bottlenecks to a deal that had to be out yesterday.

The Solutions Right Now

Education is always a big factor in reducing SEUs littering our industry. Slowly suggesting how to rebuild these SEU elements next time they redesign, rework or just have time to factor some of these elements that are hurting chances at returning great search results.

Having these methods and techniques as a slow mantra to be repeated at every opportune moment. This can slowly find it’s way into future builds and into future project plans without people even realising it.

One last solution is the optimisation of the actual page the SEU is embedded on. Optimising the usual page titles, meta-data and semantic headers that surround these elements. Also thinking about adding items such as introduction paragraphs, tags for users to contribute descriptive data and captions, summaries and anything else that may be relevant to the user.

It’s just small steps, but these can help to slowly eliminate one SEU at a time.

Comments (8)

« Previous entries · Next entries »