Accessibility | Seb2.0

I’m quite happy to say that I’m finally going home for the Holidays. It’s about time; I haven’t been home in 14 months. It wasn’t planned at first but a little hiccup with my Visa is giving me no choice so why not take advantage of it.

Well I was looking for plane tickets and decided to go with Air Transat because they offer the best price. So for 700€ return-trip I’ve got my credit card in my hand ready to pay when I get to the options page and I’m confronted with “Would you like insurance with that?” Well the answer is, I might. Since I don’t really know how long it will take to get my Visa, I may have to change my return ticket. So I guess I’m willing to consider additional insurance if it suits my needs.

So, I said, “tell me more about this insurance”. Air Transat doesn’t reply.

You see, the site offers 3 insurance plans but with no information as to what they do, how they work or what are the conditions. Just 3 radio buttons with insurance plans from 12 to 35€. Ideally, there should be little question mark links next to each plan that opens a pop-up window and explains what the plan is. If not to serve the customers, at least to save their own asses if anything happens.

I decide to postpone my purchase and email them to find out more about the insurance because I may very well need it. So I’m off to the contact page where I find the next problem, email addresses to the different departments at the airline. And to top it off, they’re mailto links. I don’t think I need to explain how annoying and useless mailto links are. Now if I was working as a consultant and had Air Transat in my office there would be some red flags going off. This is not making life easy for your customers.

Wanting to get to the bottom of this insurance thing and determined to pay no more than 700€ for my tickets, I copy the general information email address into Gmail and fire one off asking about what I’ve been dying to find out about, the insurance.

About an hour later I get a reply but to my disgust it’s an automated email telling me I have to call their customer support line… in Canada! I’m in France! They’re lucky I’m so determined to fly with them because usually, knowing myself I would have gave up swearing a long time ago. I hope Air Transat realizes that now I’m going to have to charge up my Skype account and call them at who knows what time because of the time difference.

Metaphorically speaking, let’s say you walk into a [insert generic electronics retailer here]. Can you imagine the sales guy telling you he’s got a great extended service option for you but can’t tell you anything about it. Of course that wouldn’t happen, it’s the most profitable part of the business. I would think the same goes for airlines. If you’re trying to sell this stuff, make it simple for the customer.

I don’t know how tech savvy the CEO of Air Transat is but I have 3 takeaways for him:

Online, it needs to be simple

Bringing and keeping customers on your site is difficult enough that you should be doing everything possible to keep them happy when they’re there. It takes a split second for a user to decide that something is too complicated and click the back button; a lot less time and effort than walking out of a store. Users expect extreme simplicity because online shopping has always been sold to them as more simple than conventional shopping.

Make information easily accessible

Especially when this information has the potential of growing your profit margin. Much like my previous point, if the user can’t find the information he needs, he won’t stay very long. Technically speaking, keeping information at a user’s reach means using smart tooltips, popup windows or modal windows that inform the customers when they’re in doubt. Good e-commerce sites have little question mark links all through the order process that help reassure customers while they’re buying.

Have a real contact page

This is as important as having a toll free number. Not only is a good ticketing system relatively easy to implement but also it’s a major cost saver in a long-term perspective. Online support is much more cost efficient that conventional methods such as phone support and is becoming the medium of choice for many e-commerce sites. To save your company time and money, you should be encouraging our customers to use online support.

With CSS3 still in its implementation phase, as a Web Developer I’m just itching to use it as I’m sure many are. Many of the new properties and selectors are extremely handy and will make the language much more complete and streamlined. Although it’s semi-compatible with some of the more modern browsers out there, the more seasoned browsers still in use don’t and probably will never support the new version of CSS. Of course, by the time it’s fully implemented, the old guys will be out and we won’t need to worry about that anymore… NOT! We’ll still be in the same conundrum when CSS4 comes out and people are still using IE7, FF2 and FF3. Will it ever end?

In the mean time there is a short term solution that can help you take advantage the new selectors in CSS3. By using jQuery, we can harness the power of CSS3 selectors as it understands them fully and it’s compatible with browsers dating back to IE6.

Say for example you want to add alternate row color to a table. You can do that pretty easily with CSS3 by using the :nth-child(odd) selector but even Firefox 3 doesn’t support this one; the only browsers currently supporting this very useful selector are Opera 9.51 and Safari 3.1.2 (at the time of writing). The other ways to do this would be to hard code a class directly in the markup (yuck!) or if the table is PHP generated you could easily add it with a loop. More simply, you could use jQuery!

Here’s how it’s done. In your head tag, you must include the latest version of the Javascript library. Once jQuery is linked, add this bit of Javascript to your head.

$(document).ready(function() { $(”table tbody tr:nth-child(odd)”).addClass(”odd-row”); });

With this simple code, every odd tr tag of a table will have the odd-row class added to it. It’s that simple. We can also take advantage of attribute filters. Say you also want to add a class to links to PDF files:

$(document).ready(function() { $(”table tbody tr:nth-child(odd)”).addClass(”odd-row”); $(”a[href*='pdf']“).addClass(”pdf-link”); });

The possibilities are endless (as is usually the case with jQuery). You can see a list of the supported selectors in the jQuery Documentation pages. You can also see these examples in action.