It’s estimated that about 8% of males and 0.5% of females are born colorblind. That may seem like a low number but if you’re designing for a large audience, having a site that’s unusable for eight out of every hundred males is definitely less than desirable.

Fortunately, you can fairly easily make sure that your site is colorblind friendly by always keeping in mind the information below. We’ll take a look at what colorblindness really means and how you can tweak your designs based on a few simple principles.

I’d like to start by saying that even though I am by no means an opthamologist, most of the men in my family are colorblind and any examples given below have been run by bonafide colorblind men. If you’re a colorblind person, your description of the examples below might be slightly or even considerably different as no two set of colorblind eyes will quite be the same.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Science

A discussion on colorblindness can get really scientific really fast. Terms like Protanopia and Anomalous Trichromacy are enough to get even considerably intelligent people tongue tied and confused.

Fortunately, as a designer you don’t need to become an expert on colorblindness. Instead, you can make widely applicable generalizations about what colorblind users do and don’t have trouble perceiving. This not only saves you a science lesson, it helps ensure that you are designing so that nearly all colorblind users can effectively use your site rather than only a single type.

Keep this in mind as you read the information below. Every statement made will not be true for all colorblind users, but at least some of it will apply to a very large majority of them.

If you are interested in the science, check out Wikipedia’s explanation as it is far more advanced that is appropriate in this article.

Busting the Myth

First of all, you can confidently bet that no one you know is literally colorblind. The title is in fact (in most cases) a complete misnomer. A tiny percentage of humans are born with truly monochromatic vision.

Far more accurate terms include “color impaired” or “color deficient.” Instead of seeing the world in black and white, colorblind people can usually perceive and understand almost every color in the spectrum. One of the silliest, and most annoying, questions you can ask colorblind people is whether or not they can “see” yellow, green or any other color.

The real problem is that it is quite difficult for colorblind users to distinguish between two colors that are similar. This is really tricky to figure out when you consider that colors that don’t seem similar to you in the least might seem very similar to a colorblind person, and vice versa.

It’s All About Shades

To make this easier to understand, think about all the shades of all the colors you’ve ever seen. For instance, when you think of the color “green,” think about how many completely different color swatches could match your definition of green. Bright, dark, muted, watercolor, neon; on and on. This includes the slightest variations where one green might contain just a tiny bit more red or blue light than the another green.

Now imagine you counted all of these different shades of green that your eyes are capable of perceiving and they equaled, say 1 million (completely arbitrary number). Now give the same task to a colorblind person and they might come up with 500,000 or less.

So you see, it’s not that colorblind people (in most cases) are incapable or perceiving “green,” instead they merely distinguish fewer shades of green than you do. So where you see three similar shades of green, a colorblind user might only see one shade of green

To make it even more complicated, similar shades from different colors often run together and make it difficult to determine precisely what color something actually is.

Examples

It’s always a bit easier to understand with a few solid examples in front of you. Consider the following four swatches.

First look at the bottom two swatches. Consider primarily the brightness of the swatches, even more so than the basic color. Colorblind users should easily be able to distinguish between these two swatches; just like you can. Whether or not a colorblind person will correctly identify the colors is a completely different story, but at the very least, it’s easy to tell that they are different colors.

Now, the top two swatches are a different story. The previous example might have you thinking that colorblind users can easily differentiate between brown and green, but you’d be wrong. Again, comparing only the relative brightness/darkness of the two swatches, you can probably see how these two swatches might look more similar. Now consider that, to many colorblind individuals, the top two swatches will be identical.

To travel even further down the rabbit hole, let’s repeat the dark brown and add a shade of dark red.

Again we see two shades that are different colors, but again the relative brightness of the swatches is so similar that a colorblind user will have trouble distinguishing between them.

A set of normal eyes should see five different color swatches in the arrangement above (one is repeated). A set of colorblind eyes will probably see three or less!

Painful Color Combinations

Mix similar shades as in the examples above and your colorblind users either won’t notice of will be mildly annoyed. But if you really want to make your site completely unusable, start overlapping shades of colors that have similar brightness values but have the potential to seriously clash.

Reds and blues, purples and reds, pinks and blues and almost any combination of these are a great example. As an example of what not to do, consider the image below.

Whereas you might see merely some ugly text, many colorblind users will see such vibrating colors that their eyes nearly begin to water (the further away they are the worse it becomes). It’s difficult to explain properly when you can’t see it but basically what happens is that it’s evident that the colors are very different but they’re actually similar enough that the edges where the two colors meet become very difficult to distinguish. This causes an altogether unpleasant experience for many colorblind users when viewing an image like the one above.

So What? How Does This Affect My Designs?

This information is all well and good but how does it practically apply to design? The answer is that there are a few key areas where you should really pay attention to how colorblind users might experience your site differently.

One of the most common mistakes that I see is in link hover effects. Countless designers simply apply a color shift as a hover effect and call it a day because they can perceive it just fine.

When in doubt, remember that colorblind users can perceive brightness shifts, for the most part, just like you can. A really dark blue and a really light blue will be an obvious switch. So if you switch colors on a hover, make sure the two colors are very different in their relative brightness. You can switch from a dark brown to a bright green, just not from a dark brown to a dark green.

Further, it’s always better to add something else visually in addition to color shifts. When the user hovers over a link, add a stroke, drop shadow, or anything else you can think of to make for an increased visual difference that doesn’t simply rely on a color change.

Infographics

Another key area where color differences are important is with data visualization. Choosing the wrong colors for a chart can make it literally unreadable for a colorblind user.

Even if your colors are very different, it’s often a good idea to add a little pattern or texture to different parts of a chart to make for easier visual differentiation.

In the example above, even though the colors are still similar enough that a colorblind user might not be able to see the difference, the stripes make for a quick and easy visual reference for all users.

Games

As you can imagine, the possibilities for colorblind users to be left out are endless, but one final place I want to discuss where this can be particularly frustrating for them is with games.

Imagine trying to play the iPhone game below as a colorblind user. Matching the colors up to complete the puzzle could be quite difficult!

Many iPhone games have compensated for this by having an optional colorblind mode, but to make it simple just consider adding symbols in addition to color to make it easier for everyone to play. As an illustration, consider a deck of playing cards. There’s more going on than red cards and black cards. Everyone playing, colorblind or not, knows that the diamonds and hearts are the red cards while clubs and spades are the black cards. Even when you see these symbols in a black and white photograph, you can confidently distinguish between the red and the black cards. This is exactly how your games should be developed.

Conclusion

In closing, just remember that it’s actually really easy to make your site accessible for colorblind users. You only have to put forth a conscious effort where it affects how the site works or when color perception could impair the readability of text. Who cares If you have a brown background that colorblind users think is green? Most of the time, they sure won’t.

Just make sure that when it matters, such as with links, charts and games, you look for ways to add contrast. Use highly contrasting colors colors, implement patterns, apply symbols, and use tricks with strokes, shadows and the like to make sure there is significant visual difference in all the right places. It can often be helpful to use a colorblindness simulator to help decide how the colors on the page affect the overall experience.

Leave a comment below and let us know if you ever consider colorblind users when designing a site and how you accommodate their needs.

Today we’ll look into the web design practices and trends of the single biggest name in software to see if we can learn anything about some mistakes to avoid in our own work.

Feel free to comment to either agree or disagree with the suggestions below. As professional designers your insight is valuable and I look forward to your thoughts.

The Occasional Rant

To everyone who hates articles filled with rants, I apologize that this post is a little harsh at times. I normally favor praising good design over criticizing bad, but when David Appleyard and I decided to do a post on the design trends of Microsoft, there just seemed to be a lot more to learn about the messy, ugly, and/or inadvisable things that they do than the alternative.

To cut you off in the comments, I won’t mention or make a single comparison to Apple in the analysis below. This is not meant to be a PC versus Mac argument in the least, but rather a look at what we believe to be genuinely poor practices in web design and development. In all fairness, Microsoft is a hugely successful company and is not exacting failing due to any of these problems. In fact, as we point out below, Microsoft really seems to have some stellar designers on the team for certain sites, we merely suggest that a greater level of quality control be implemented across the board.

With that in mind, let’s analyze a few places that Microsoft seems to fall short in its design and development practices and how you can benefit from this knowledge.

#1 Beware of Mandating Certain Plugins

If we’ve learned anything from the recent scrapes between Apple and Adobe it’s that creating sites entirely dependent on closed third party plugins can eventually lead to some serious backfire. Microsoft seems to be repeating this same blunder as its own network of sites becomes more and more deponent on Silverlight.

As I browsed Microsoft’s various sites preparing for this article I was constantly harassed by windows informing me that I had not installed Silverlight and therefore could not experience the webpage the way it was meant to be viewed. My question is, “why go this route?” Especially when we’re talking about simple slideshows and animations that can be done with more ubiquitous technologies. Granted, Microsoft owns Silverlight so it makes good business sense for them to back up their investment, but that doesn’t mean that it’s the best choice for you to go jumping on their bandwagon.

Whether you’re a huge fan of Silverlight or not, my advice is to be extremely cautious about basing the functionality of your site on this or any similarl technology. As the debate about whether or not it makes good sense to develop sites with Flash continues to heat up, second in line systems like Silverlight become even more of a gamble. Where possible, stick to cross-browser, standards-compliant code and tools that don’t require any additional work or installations from your visitors.

#2 Watch Your Resolution

This is one of my biggest complaints about Microsoft simply because it just seems like sloppy design. There is undoubtedly a fine line to walk between keeping your file size down to increase usability and keeping your pictures clean and crisp, but I can’t help but feel that Microsoft seems to be more prone to display ugly, jagged JPGs than literally any other professional site that I’ve seen in the past few years.

The ever decreasing amount of dial-up Internet users continues to push acceptable image sizes up and up. This by no means implies that you should not take special care to make everything as small as is reasonable, but the moment it starts to weigh so heavily on the design that it dramatically reduces the apparent quality of the site, the images become self defeating!

You’re living out pure irony if you use images to make your site look better but ultimately reduce your aesthetic appeal in the process. When possible, preview your processed images on different monitors and pay close attention to how much distortion and artifacting you find to be acceptable.

#3 Organized Clutter

Sometimes you can follow all of the obvious design rules and still end up with something that seems visually subpar. Browsing Microsoft’s sites I came across countless areas like the one below that just seemed cluttered despite their attempts at column-based organization.

So what’s the problem? Simply put, there is a ton going on in a relatively small space here. Even thought they’ve definitely attempted to arrange the content and enhance the visual readability through icons, the end result is still quite off balance.

If you take a close look at what’s going on here it feels like four columns of information designed by four different people that have been crammed together. The left side seems really heavy with images compared to the right, the text color is a little sporadic, the content is awkwardly staggered, and the columns lack enough breathing room to make them seem like the independent areas that they are.

The lesson here is to be careful of packing a single area of your page too full of disparate information. There are undoubtedly plenty of times when the situation will demand lots of content, but the organization should be handled in a consistent and attractive manner as seen in the beautiful examples below (from non-Microsoft sites).

#4 Inconsistency

Starting from Microsoft.com, open up the gargantuan navigation dropdown menus and choose an area of the site to visit. No matter which link you click, the resulting page will look quite different than the homepage and different still from most of the other links available in the same dropdown.

Exploring the Microsoft site is like spinning a roulette wheel. You have virtually no idea where you’re going to land and what to expect from the next page. Some pages feature swooshy backgrounds while other use soft gradients or even exploding circles. Most pages seem to favor blue but not necessarily the same blue and there are also plenty of pages that ignore the blue trend altogether.

The point is, whether your site has two pages or two hundred, consistency is a must. It makes users feel more comfortable when they can become familiar with the way a site works and looks within a few seconds. Giving them something drastically different every few pages makes browsing a more confusing and less efficient experience.

in addition to this there’s the idea that creating a strong, consistent brand is just good business as it helps customers relate to your company in a more personal way. Admittedly, Microsoft is juggling many different brands and microsites that all stem from the homepage, but even among what could be considered the core Microsoft.com pages, the image themes and navigation methods seem drastically diverse.

#5 Clipart-centric Design

This suggestion is obviously a little absurd seeing as how clip-art and Microsoft Office have always been inexorably intertwined. However, icon design has come a long way since 1995 and it’s about time to give up that specific style in the images you use.

The examples of art above pulled from various Microsoft pages simply make me cringe, especially that awful “Beginner Developer” logo. I have no idea why a boomerang is attacking a plant or whether the magical hovering computer monitor is aiding in the attack or fleeing the scene. All I know is that the visual communication here is an indecipherable mess.

This is one of the primary reasons CSS galleries like our own exist. Not so you can steal the design of others, but so you can get a glimpse into the state of design in the decade you’re developing in. Browsing through these galleries is like visiting popular clothing stores at the mall to show your crazy aunt that she doesn’t have to dress like someone from the Sunny and Cher show.

Always feel free to break boundaries and move beyond current deisgn trends by starting your own. Just be cautious of staying stubbornly stagnant for years while the rest of the world moves on.

#6 Misaligned Overflowing Text

Another trend that’s hard to miss across Microsoft’s sites is the constantly broken columns of text that overflow their obvious bounds.

This one is fairly easy to fix and really only requires a bit of effort and attention. Just make sure to take advantage of free tools like Adobe’s browser lab to ensure that your layouts don’t break when viewed on any major browsers.

Though CSS layout is an admittedly tricky beast when it comes to cross-browser consistency, small mistakes like this really bring your site quality down and are worth the troubleshooting time they take to resolve.

#7 Poor Alignment

Sometimes a given page presented me with the challenge of deciding which design foible to point out. For instance, on the page below I originally considered picking on the use of a tiny screenshot that doesn’t get bigger when you click on it, but the more I looked at the page the more I became confused as to what was going on with the layout.

If you’re familiar at all with basic design theory, you know that learning to implement solid, consistent alignments is the key to good page layout. The odd mixture of left, center and right visual alignments taking place on the site above, in conjunction with the awkward empty space near the top, make for a really odd visual flow of the information being presented.

Further, if you visit the page above you’ll see that the content as a whole seems like it’s trying to be centered but is really thrown off by the strip across the middle, which makes the page seem quite right of center.

#8 Ad Clutter

Free design blogs like this one have to feature plenty of ads, it’s simply the way we make an income and continue to provide you with content. However, if you’re running a professional business site, you have to consider carefully if you want to detract from your message and professionalism with advertising.

The pages of Microsoft.com are littered with various ads that really bring down the aesthetic of the page that they’re on. Sometimes these ads point directly to other Microsoft pages, sometimes to other companies or partners. There’s nothing wrong with the concept of directing traffic to other parts of your site, but how you accomplish this can make a huge difference.

If there’s one thing most web users have learned to spot, ignore and possibly even resent, it’s a banner ad. Not to say that this type of advertising doesn’t work with proper targeting and design, or to even say that Microsoft users aren’t clicking on these, but I do wonder if there isn’t a better way.

If Microsoft wants to direct traffic to their mobile phones and other projects, the easy way out is to setup a cluttered, non-standard (design wise) ad system that rolls across their entire site. However, it seems like integrating this content as part of the actual site would have a much better click-through rate as more users would take note of the message and not have to break any internalized rules about avoiding banner ads at all costs.

Plus, such integration would force the designs to be more consistent because they are created as a single unit rather than by separate teams. Again, this is a scenario where I can understand the cost-efficiency of Microsoft’s approach, but want to caution you against following their lead. Odds are, the sites you design won’t rival the mega-network of Microsoft sites and will therefore more likely lend themselves to solid, integrated design so you can avoid the visual clutter of excess ads.

Obviously, there are plenty of sites genres where this doesn’t apply at all as advertising is expected to be present. Just make sure you consider whether your site should be dedicated to selling your product or service, or requires the extra income and distraction of advertising.

#9 A Lack of Breathing Room

In print design, designers setup every page with a “live area.” This is usually a rectangular inset from the trim of the page that defines the area in which it is safe to place content to avoid page cutoff or edge crowding. Most web designers do this intuitively as it’s fairly obvious you don’t want your content to be too far crammed up against the side of the browser.

However, as the screenshot above shows, there are a few Microsoft pages that don’t seem to put stock in such opinions. Instead, the content starts as soon as the page does with zero horizontal padding or margin (at least on the browsers that I checked with).

The navigation panel doesn’t feel like it’s built-in to the side of the page, it feels like it’s getting cutoff (again, it may be doing just that due to the fact that I don’t have IE). The lesson here is simple: always be conscious of the edge of the browser window. Unless you’re breaking the rule for an obvious visual bleed effect, place your content, especially interactive portions and links, well within a safe margin so that users don’t feel crowded when they try to use it.

If you look closely at the screenshot above you can see some more examples of Microsoft’s designers simply not considering whether or not their text will flow properly on all major browsers. This is quite the amusing trend for Microsoft as many web designers spend their days attempting to make special accommodations for Microsoft’s Internet Explorer, but the multi-billion dollar company can’t be bothered to return the favor by checking their own work on other systems.

#10 Failing to Leverage Your Talent

Though there are plenty of negative comments above about the web designers over at Microsoft, I was pleasantly surprised to see that they do in fact have quite a few sites and pages that look simply amazing.

The examples above are just two of the many places I believe Microsoft really knocked it out of the park with their layout, color choices, graphics, and cross-browser compatibility. What this tells me is that somewhere among the vast pool of cubicles in this company there sits some really talented individuals capable of taking the company completely out of its design slump.

These designers, whoever they are, should be promoted to positions that would allow them to cooperate together and set consistent standards that literally every Microsoft web designer would be forced to follow. In place of a labyrinth of disconnected jumbles of content they could create a strongly branded network of beautiful sites that all clearly belong in the same family.

The final suggestion I present to you is to find these types of outstanding individuals in your own company and give them a voice. Rather than lamenting at the lack of talent among the other members of your team, appoint the strongest designers and developers to positions where they can influence every piece of visual communication that rolls out associated to a specific brand.

This can be done efficiently and effectively by creating clear, consistent and strict brand guidelines that are distributed to every designer and developer for every distinct brand that you work with.

Closing Thoughts

To sum up, though Microsoft possesses quite a few extremely talented web designers, the work of these individuals is almost completely overshadowed by the vast amount of content that doesn’t even meet standards that we would expect from rookie designers and developers in their first year.

Fortunately, we can use companies like Microsoft as instructional aids to clearly illustrate that there is in fact a wrong way to do things. Never imagine that just because you’re a lonely freelancer or small design firm that you can’t completely outperform mega-corporations and design firms when it comes to the quality of work you produce.

I’ve found that it is often easier to find examples of quality designers in home offices around the world than sitting at the desks of large firms. Take comfort in the fact that you don’t have to coordinate and control the quality of hundreds of designers. Do your best to create some of the best sites on the web with the small amount of resources you possess in conjunction with a mass amount of personal drive to create beautifully functional designs.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Making your website accessible to everyone is not only a moral duty, it’s a legal obligation. Many organizations, including the International Olympic Committee, have been sued for not making their websites accessible enough. With 50 million Americans suffering from some disability or other, improving your site’s accessibility makes clear commercial sense too.

It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

1. WAI-ARIA

When improving your site’s accessibility, your first port of call should be a set of documents, published by the Worldwide Web Consortium, called WAI-ARIA. These documents basically set out the ways in which developers should add metadata to HTML for improved accessibility.

2. Progressive Enhancement

Progressive enhancement means designing a website in a layered fashion so that everyone can access the most basic functions and users with better bandwidth and advanced browsers can see an enhanced version. Sites built using a strategy of progressive enhancement can be read much more easily by screen reading software, used by people with a range of disabilities.

3. Alternate Content

It’s absolutely vital that you provide a text equivalent for non-text content in your site. Images and videos need alt tags, so that people using screen reading software can find out exactly what’s on a page. Links need relevant title tags too.

4. Captions

As well as alt tags, images, audio and video clips need captions, so that the visually impaired know exactly what they’re looking at. If you’re uploading videos or podcasts, provide a paragraph of text summarizing its contents, or even better, provide a full transcript. Don’t forget, captions really help with SEO too.

5. Screen Reading Software

Most blind and partially sighted people use screen reading software when browsing websites. One of the best ways to make sure that your website is accessible to them is to try using the same software yourself. Turn off your monitor and run the software to find out exactly what your site’s saying to these valuable readers and potential customers. If the software starts spouting gibberish, you know you need to make some changes!

6. Audit

No amount of accessibility testing you do yourself can compare to having a real specialist cast their expert eye over your site. There are a number of companies and individuals who will carry out an accessibility audit for you, telling you exactly which changes you need to make.

7. Usability Testing

Usability testing is another valuable way to identify potential accessibility problems with your site. Get a group of people with a range of different needs to try your site out for real, navigating around and performing tasks. They’ll be able to tell you in detail about any problems they encounter, lots of which, you’re bound to find, will not be included in WAI-ARIA guidelines.

8. Stylesheets

When you’re building or redesigning your site, make sure that your stylesheets permit variable font sizes and never use fixed fonts. You’d be amazed by how many users, from old people to those with slightly poor eyesight, resize their fonts on a regular basis.

9. Font Controls

Firefox and Internet Explorer users can enlarge fonts but lots of people are not aware of this and others still are using older browsers that do not have this capability. For them, consider embedding font resizing controls into your site.

10. Consistency

Consistency in design from page to page is really important for people who can’t take in a whole page at a glance, and those using screen readers. If you’re site’s consistent, with the same things in the same place on each page, they’ll be able to get to navigate around much more easily. Sighted users often find consistency beneficial too.

11. Text for Navigation

Avoid using images for navigation on your site, at all costs. Use text instead. Screen readers can understand it and it’s much easier to resize. If your navigation controls can’t be enlarged, make sure they’re written in a clear font, at least 16 point in size.

12. Colors

Using different colors in websites is great, but you have to consider how they work together to create a clear image. Foreground and background colors must contrast sufficiently and you can forget about using light-grey text it’s difficult enough for people with 20-20 vision to read. Links must be a different color from the rest of the text on your site, preferably blue and always underlined.

Conclusion

Accessibility is an often overlooked aspect of web design, but it’s something that should be at the core of your design process right from the start when you’re wireframing a layout. Without sounding too self-serving, ensuring that your website meets the standard for accessibility means one thing: more happy customers. And you know what that means!

Use the comments below to tell us if you agree with the tips above and how you’ve made your site more accessible.

Today we’ll take a quick look at what A/B testing is, the benefits of implementing it, and some tools to get you going.

What is A/B Testing?

A/B testing is extremely simple in concept. It’s basically testing the effectiveness of different designs to find the optimum solution. These tests are usually performed on live sites with real users who are completely unaware of the test. To clarify, lets look at an example.

Is Bigger Better?

Let’s say Vanilla Forums wanted to know if their current homepage could be improved by increasing the size of the sign up button. The first thing they would do is create an alternate version of their page containing the desired revisions. The image below shows their current page followed by the page they’d like to test:

As you can see, the new version differs enough to theoretically impact the way users perceive the page. However, in order to get a good idea of the impact of the placement of that single button, we haven’t moved much else on the page. You can of course use this method to test the difference between two completely different designs, but the thing I really want to highlight is that A/B testing provides you with solid information on how to improve a current design without making a complete overhaul of the site.

Now Vanilla Forums would setup their site to show version one to half the visitors for a specified amount of time and version two to the rest. Then they would compare the results of the two pages to see which snagged the greatest amount of users (using some tools we’ll discuss later).

Benefits

I’m sure you can immediately name several of the benefits this method would bring to your own site. Let’s go over a few.

It’s Easy!

First and foremost, moderate A/B testing is neither expensive nor difficult to implement all on your own; no expensive consultants or outside agencies required. It definitely takes some work but fortunately there are some great resources out there to help you do the heavy lifting.

Hard Evidence

Using A/B testing lays to rest any usability arguments you might be having around the office or even within your own mind. If your team is torn over two possible scenarios for your site, you can have the various parties dispute the matter all day long but the bottom line is you simply can’t know for certain what will appeal to your users most without testing it out in the real world. A/B testing provides you with an easy way to prove who is right through actual statistics from user interactions.

Incremental Improvement

I’ll again stress that one of they key pieces of potential here is the ability to incrementally improve the interface and/or messaging on your site. As a site owner, this can provide you with a solid way to improve your earnings over time. As a developer, this could provide you with a way to form long-term contracts with your clients.

Things to Keep in Mind

Despite the straightforward nature of the concept of A/B testing, there are several things you should be aware of and considering as you implement it on your site.

What’s Your Goal?

“Better” is quite the relative term. You can’t know if one page is better than another unless you define the terms of the judgement. Similarly, when performing a test, you can’t run wildly into it without consideration of what it is you want to observe. For instance, the Vanilla Forums example above was meant to increase the number of users that click the button to sign up for the service. Note that this is a clear goal that is easily testable, not simply a vague statement regarding the aesthetic nature of one layout over another.

There are several possible goals and metrics to use when testing the efficacy of one design over another. These include the total time spent on the site, the number of pages visited, the percentage of users who navigated to a specific page, etc.

There Won’t Always Be a Clear Winner

Despite the fact that A/B testing can give you clear proof of the superiority of one design over another, sometimes the result isn’t so clear cut. It’s possible that something that you imagined would play a key role in the actions of the users doesn’t really affect them in any significant way. Further, even if you observe a difference, that doesn’t necessarily mean that the difference was a result of the variable. Basic statistical principles prevent a degree of random fluctuation between the results of each version, the goal is to spot differences beyond what would normally occur even if each of the two groups received the same page. Keep in mind that the more users you have to take part in the test, the greater the accuracy of the results.

Resist the urge to nit-pick every tiny portion of your site and change something every time you see the slightest increase in conversions. Look for significant ways to improve your site through clearly met goals.

Multivariate Testing is Also Possible

If you want to go beyond testing the effect of a single variable, multivariate testing provides a way to change up the mix of elements shown to a given user to track which variables have the greatest impact.

Tools and Resources

Now that we’ve briefly gone over the ins and outs of A/B testing, I’m sure you’re eager to get started. Check out these great resources to get you on your way to enhancing your sites.

Google Website Optimizer

If you’re just getting started with A/B testing, Google Website Optimizer should be your first stop. It’s fairly straightforward and easy to use and has a lot of resources to walk you through the process of testing (A/B or multivariate). Best of all: it’s completely free.

Alternatives to Google

If you’re not impressed with Google’s offerings, check out these other options.

Visual Website Optimizer

SiteSpect

Vertster

ABTests

More Info

Want to know more about A/B testing? Check out these other great articles.

• Fundamentals of A/B and Multivariate Testing (Pro Blog Design)
• How To Increase Site Performance Through A/B Split Testing (UX booth)
• Split A/B Testing (Webcredible)
• How to do A/B Testing in WordPress (Carsonified)
• Ultimate A/B Testing resources and how I used them (Brian Cray)
• An Introduction to Website Split Testing (Six Revisions)

Conclusion

You should now be equipped to begin testing your site for potential improvements. Get started today and let us know in the comments below what section of your site you think A/B testing is most appropriate for.

Here’s a screenshot of what we’ll be building. Click on the picture to see the live example:

Photoshop Work

To start things off, open Photoshop and create a new 800px by 600px document at 72dpi.

Radial Gradient

Next grab the gradient tool and stretch a radial gradient over the background. Your foreground color should be set to #343636 and your background color to #121414. Make sure the lighter color doesn’t run into the edges of the document or you’ll get a hard edge when we place it into our CSS.

Type

Now grab the type tool and choose a font. I chose Helvetica Neue. Type some text for your homepage like above, then copy that layer and change the type to read “About Me.” Repeat that step for “My Portfolio,” and “Contact Me.”

Inner Shadow

Now place an inner shadow on all the text layers you just created using the settings above. You can apply the effect to one layer, then right click and go to “copy layer style,” then right click on the other layers and paste the layer style.

Navigation Key

Now create a key to instruct users how to use the keyboard navigation feature. Using the same font, type out the text in blue and apply an outer glow to give it a nice, radiant effect. Look at the screenshots above for the specific settings. Be sure to leave some space in between parentheses for the arrows in the next step.

Arrows

Grab the custom shape tool (found under the rectangle tool fly out menu) and select an arrow as your shape. Draw four arrows (up, down, left, and right) and apply the same color and outer glow as the type. Now place the arrows in the parentheses from the previous step.

Save the Four Versions

Now go to “Save for Web & Devices” under the file menu. Save out each version (Home, About, etc) as a jpg into a folder named “images.” Now we’re all done in Photoshop so close that out and move over to your favorite text editor or web development suite. I use the fantastic Mac application Espresso.

The HTML

Create an index.html file in the same directory as the images folder you create before. Add in a basic HTML structure that links to a CSS and JavaScript file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Page Title</title>
       <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
 
		<SCRIPT SRC="script.js">
		</SCRIPT>		
 
</head>
 
<body>
 
</body>
 
</html>

Adding a Navigation Menu

We don’t want our site to run purely on keyboard navigation so we’ll add in a visual navigation menu as the primary method of getting around. To do this we’ll create a “nav” div inside a “container” div in the body portion of our HTML. Inside the nav div, place an unordered list of links like below.

<body>
 
	<div id="container">
		<div id="nav">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
				<li><a href="portfolio.html">Portfolio</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</div>
	</div>
 
</body>

Create the Other Pages

As I said before, we want to keep the HTML in this tutorial simple so we’ll stop there for the homepage. Duplicate this code into three more html files: about.html, portfolio.html and contact.html. In each of these files, change only the name of the container div. In the about file, change it to “aboutContainer.” Follow suit with “portfolioContainer” and “contactContainer” in the other two.

Adding the CSS

You should now have four essentially blank web pages containing only a list of unstyled links. Create a style.css file and start it off with the following basic styling.

body {
   margin: 0px; padding: 0px;
   background-color: #121414;
   color: #000000;
   width: 800px;
   margin: auto;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
      "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
}

Here we’ve essentially just set a background color (matching the background color of our PSD) and set the font-family to be a nice, thin Helvetica. Margin auto will make sure our content stays centered.

Adding the Background Images

Here’s where everything starts to look right. Style each of the four container divs to have the four backgrounds we setup in Photoshop.

 
#container {
	padding: 0px; margin: 0px;
	background-image: url(images/background.jpg);
	height: 600px;
}
 
#aboutContainer {
	padding: 0px; margin: 0px;
	background-image: url(images/about.jpg);
	height: 600px;
}
 
#portfolioContainer {
	padding: 0px; margin: 0px;
	background-image: url(images/portfolio.jpg);
	height: 600px;
}
 
#contactContainer {
	padding: 0px; margin: 0px;
	background-image: url(images/contact.jpg);
	height: 600px;
}

At this point your pages should be taking shape and look something like the image below:

Styling the Navigation Menu

One last chunk of CSS will finish off the navigation menu.

#nav {
	padding-top: 50px;
	padding-left: 20px;
}
 
#nav a {
	text-decoration: none;
	color: #ffffff;
}
 
#nav a:hover {
	color: #a2def9;
}
 
ul {
	text-decoration: none;
	list-style: none;
	color: white;
}
 
li {
	display: inline;
	padding-right: 30px;
}

As you can see, I’ve applied some padding to the main nav div and removed any text-decoration from the link text. Then I set the text color to white and added a hover effect matching the color of the blue text in the “Nav Key” at the bottom of the page. Finally, I’ve added in few lines to specifically target the list items and spread them out a bit.

If you’ve followed along, your page should match the following screenshot:

JavaScript

You should now have a basic, functioning four page site! The links in the navigation menu should allow you to switch between pages with relative ease. Now we will get into the heart of the project: adding keyboard navigation. It’s actually a fairly straightforward process and should only take you a few minutes at the most. Our JavaScript will be inspired by this tutorial but taken in a different direction.

Setting up the Script

Create a script.js file and insert the following code:

document.onkeyup = KeyCheck;       
 
	function KeyCheck(e)
		{
		   var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
		   switch(KeyID)
		   {
 
		   }
		}

As you can see, this code is quite brief and very basic. Essentially, we tell JavaScript to run the function “KeyCheck” when the user presses a key. The KeyCheck function is then tied to the variable “KeyID.” This will watch what a user presses and set the value to KeyID. Now we’ll add in a line of code that tells it what to do if the KeyID matches a certain criteria.

document.onkeyup = KeyCheck;       
 
	function KeyCheck(e)
		{
		   var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
		   switch(KeyID)
		   {
 
		      case 49:
		      window.location = "index.html";
		      break;
 
		   }
		}

This code is a bit confusing. As indicated on our navigation key, we want to program the numbers 1-4 and the arrow keys to jump to specific pages. Here we’ve setup a case that says: if the code “49″ is returned, switch to the page index.html (through window.location). You’ve probably notice code 49 isn’t an intuitive way to refer to pressing the number one. To discover the key codes for a given key, go to this page and scroll down to section 3.3. We see that the numbers 0-9 are referred to by the codes 48-57. Scroll down further and see that the arrow key codes are as follows: 37 (left arrow), 38 (up arrow), 39 (right arrow), 40 (down arrow). Using this set of codes as a guideline we can program each key press to correspond to a page.

document.onkeyup = KeyCheck;       
 
	function KeyCheck(e)
		{
		   var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
		   switch(KeyID)
		   {
 
		      case 37:
		      window.location = "index.html";
		      break;
 
		      case 38:
		      window.location = "about.html";
		      break;
 
		      case 39:
		      window.location = "portfolio.html";
		      break;
 
		      case 40:
		      window.location = "contact.html";
		      break;
 
		      case 49:
		      window.location = "index.html";
		      break;
 
		      case 50:
		      window.location = "about.html";
		      break;
 
		      case 51:
		      window.location = "portfolio.html";
		      break;
 
		      case 52:
		      window.location = "contact.html";
		      break;
		   }
		}

Fin!

That’s all there is to it! You should now be able to navigate your site using just the arrow and number keys as with the opening example. Use the comments below to let us know if you think this is a good idea and whether or not you’ll be adding keyboard navigation to your site. There’s definitely more than one way to go about it so also let us know any ideas you have for an alternate method of implementing the keyboard shortcuts.

Captchas

Web developers sure seem to love captchas, but users can’t stand them. Grant it, they’re not all bad but most of them are either impossible to read or unnecessarily complicated like the one above. Another important issue is that captchas often represent a serious roadblock for the vision-impaired. If you absolutely must use a captcha, make sure most humans can read/understand it and have options in place for those users who are unable to see it.

Not Using “alt” Attributes on Images

It’s definitely a good practice to always insert a helpful bit of alt text for the images on your site. This way users who are unable to view your images are represented with a text equivalent. Note that not all browsers treat the alt attribute the same way. Because of this many developers confuse the purpose of alt and title, mistakingly thinking that images with an alt attribute should display a tool tip. In reality, the title attribute is what should display a tip on mouse over (see the Smashing Magazine example above).

Using Pop Ups for Content

Most modern browsers ensure that your content will be blocked if it comes in the form of a pop up. This means you’re running the risk of losing several possible users who simply move on when they realize that your site isn’t compatible with their setup. Only the most dedicated visitors will investigate the problem in your help pages to discover how to solve the problem.

Improper Labels on Forms

Visit Mint.com (shown above) and check out their sign up form. Notice that you can select a specific field whether you click on the field itself or on the attached label. This is because the Mint developers are using the label element properly. The lesson here is that simply labeling your forms with plain text isn’t enough. Instead, you should always use the label element to maximize usability. This not only provides easy-to-select fields, but also ensure that screen readers and auto-fill functions work properly with your forms.

Unrecognizable Links

The screenshot above shows a section of the homepage of Tutorial 9. Notice that you can instantly differentiate between the text that contains a link and the text that doesn’t. Popular ways to create link differentiation include color contrast, underlines, and rollover effects. Notice that Tutorial 9 actually employs all three methods! This dramatically increases usability because users can clearly see where to click if they wish to access more content.

Vague Link Text

Consider the following examples:

1. To visit our CSS Gallery, click here.
2. Be sure to stop by our CSS Gallery!

As you scan a page, your eyes are likely to focus on differentiated links more than the rest of the text because they stand out. The first example may seem like a good way to go because the call to action “click here” is what catches your eye. However, without properly reading the entire sentence, “click here” doesn’t inspire action because the user isn’t sure where it leads. In contrast, the second link can be instantly recognized and understood as a path to a CSS gallery, regardless of whether or not the user has read the content before it.

Cluttered Content and Insufficient Spacing

The site above is really more of a parody than a proper example, but it gets the point across and was far too funny not to include. Put simply, don’t crunch your content together or include an outlandish amount of pictures or text (news stories and blog posts are exceptions). Small business owners just getting started on the web almost always fall prey to this mistake and include paragraph after paragraph of information that no one will ever read. Like it or not, the web is a visual beast. The information on your page should be clearly organized and easily understood within seconds.

Changing Font Size Shouldn’t Break Layout

Not everyone on the web is a 19 year old with 20/20 vision. Many users, young and old, have to increase their default text size to make a page more readable. Check out what happens to Fox News (and several other popular news sites) when you increase the font size. The layout is completely destroyed: the navigation links all run together, buttons are miles from their associated text and the ads running down the right side have disappeared completely. This sort of oversight can alienate a large portion of visitors.

Poor Contrast Between Text and Background

These guys may be toting their design skills but they’ve ruined their credibility by doing so with a graphic that’s nigh upon impossible to read. I understand that sometimes clients require you to use a stock photo with zero copy space, but it’s your job as a designer to figure out how to integrate easily readable text with the image. Use bold type, strokes, drop shadows, color bars and anything else you can think of to differentiate your message from its background.

Overuse of Flash

Don’t misinterpret this as a Flash bashing mantra. Flash has brought the web to a level of richness that can make a developer’s wildest dreams come true. I am just as prone to being sucked in by an amazing and unique flash site as the next guy. However, use extreme caution when integrating Flash so much into your website that it won’t function without it.

Make sure you carefully consider the reason behind the site’s existence and your target market for the site. If you want to build an online application or eye candy for visitors, Flash may be the way to go. But if your target market is the general public, an all Flash site could be a bad idea for a number of reasons. The first is usability, Flash-based site developers can often be so obsessed with making something pretty that zero thought is put into whether a user can actually figure out how to use the site or not. I’ve noticed that big name ad agencies tend to follow this trend by making beautiful websites that can take minutes to figure out how to use. Another reason to avoid Flash is that many users are so annoyed by Flash that they disable it completely. Finally, always consider whether it’s acceptable to sacrifice mobile visitors. Many smartphones like the iPhone don’t yet support flash and are therefore shutout of many mainstream websites.

Complicated Drop Down Menus

There’s a fine line between a helpful menu and an overloaded mess and the developers at Microsoft are flirting with it. On one hand, they are providing users with easy access to their full line of products. On the other hand, they’re throwing a ton more content at users than they are used to in a simple drop down menu. This might be acceptable if clicking the “all products” button took you to a dedicated page containing the list of products, but that’s not the case (clicking only closes the menu). Spend a minute on their site and you’ll see that nearly all of the navigation menus are crammed full of small (arguably hard to read), monotonous links.

The point is that over populating menus usually springs from an attempt to increase usability while in reality resulting in decreased usability due to the inordinate amount of information that must be sifted through to get where you want to go.

Conclusion

So there you have it, twelve easy ways to make your site friendlier to the masses. I hope this article has helped you spot a few ways you can start improving the accessibility of your designs. Let us know what you think of these tips. Feel free to completely disagree on any or all of them and be sure to let us know about all the little things that bug you regarding accessibility.

Getting Started

The first thing is to implement a custom 404 error page. We’ve covered this before, but it essentially involves adding the following to your root .htaccess file:

1

ErrorDocument 404 http://www.yoursite.com/404.php

This will instruct all 404 error requests to be sent to the specified page rather than showing a default message.

The PHP Code

The following code needs to be customized and placed anywhere in your 404 php page:

1
2
3
4
5
6
7
8
9
10
11

<? 
$myemail = "insert your email address here";
$page = 'http://' . $SERVER_NAME . $REQUEST_URI;
$subject = "404 Page Error";
$message = "
     404 Page Error Report
     Visitor came from: ".$_SERVER['HTTP_REFERER']."
     Page not found: ".$page."
";
mail($myemail,$subject,$message,"From: 404errorpage");
?>

This will send you an email which will include (if possible) both the page which the user has been referred from, and the page or resource which couldn’t be found.

Useful Applications

Implementing this has a whole host of useful outcomes. However, the first thing to note is that (unless you have previously added these files), a rapid number of emails will arrive in relation to:

• favicon.ico
• robots.txt

It may well be worth adding these files in before implementing the page so that you aren’t inundated with notifications! This technique can be invaluable when designing a new site, to sift out any broken links which may have been overlooked before launch. It is even more useful when modifying an existing site structure, to ensure that current links to your site are not taking new visitors to missing pages. If this is the case, simple redirects can be added using .htaccess:

For a file:

1

RewriteRule file1.php$ file2.php [L]

For a directory:

1

RewriteRule ^oldfolder/$  newfolder/ [L]

After a while, you’ll find that the odd 404 error is due to someone mistyping a URL, or having linked to a genuinely non-existent page on your site. It wouldn’t be advisable to keep this code in place permanently, but for a few days or weeks after making significant changes it provides a fantastic fail-safe.

And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.

The need for testing

The site shown below, for example, highlights the need for thorough cross browser testing. When viewed in Firefox, the site looks fantastic; but when viewed in Internet Explorer 6, the site looks broken, because of IE6′s lack of support for PNG alpha transparency (which does seem to have been catered for in the site’s code, but the solution chosen doesn’t seem to work), and also because of some positioning issues.

Since cross browser testing for Mac has already been covered on Design Shack, this article will focus on methods for cross browser testing on PC. An obviously starting point for cross browser testing is to install each of the main browsers; the latest versions can be downloaded below:

Internet Explorer

However, it’s not quite so straightforward when it comes to testing your work in both Internet Explorer 6 and 7. By default, Windows will only run one version of IE, and while this obviously isn’t much of an issue for the average web user, it’s more problematic for web designers and developers who need to ensure that their work displays correctly in both versions. One option for overcoming this (if you’re running Windows XP) is to use the Multiple IE installer by TredoSoft. This ingenious tool allows several standalone versions of Internet Explorer to run simultaneously on the same PC, making multiple version testing very straightforward.

Another option, which doesn’t involve installing anything on your PC, is to use an online rendering service such as IE NetRenderer. Here you simply enter the URL of the page to be tested, select which version of IE you want to test it in, and NetRenderer renders a screenshot for you. The downside of this is that you only get a static screenshot, making it impossible to test dynamic features such as AJAX UI enhancements. Additionally, NetRenderer only renders down to the ‘fold’, so if you have a particularly long page it may not be of much use to you.

Safari

In my experience, installing Multiple IE is a far more foolproof way of testing web pages across multiple versions of Internet Explorer on PC. However, when it comes to testing for other browsers on other platforms, such as Apple Safari on Mac OS X, the only real way of testing locally is to buy a Mac. A much cheaper (as in free) alternative is to use another online rendering service; this time it’s BrowsrCamp which renders screenshots of web pages as displayed in Safari running on Mac OS X.

While there are many other browsers available across the various platforms, the browsers covered here are the ones in mainstream use, and as such should all be factored into every web designer and developer’s testing phase when laying out web content. And when you’ve finished making your latest design cross-browser-proof, be sure to submit it to our gallery.

How to redirect the user

You need to create a .htaccess file, using any standard text editor. Copy and paste the following code – substituting the path for your local 404 html page:

ErrorDocument 404 http://www.yoursite.com/404page.html

Once you’ve done that, you are ready to go. Here are a few ideas of things to include in your 404 page:

• A search box
• A link back to the homepage
• The same CSS and graphics as the rest of the website
• A website index or map

Get creative, make the user feel that they have an alternative route to find what they are looking for, and you’ll vastly improve their experience on your website!

Imaginative 404 Pages

To get inspiration, take a look at some other 404 pages. You’ll be surprised what you’ll find!

Safari

Let’s start with the easiest one. Safari is the browser bundled with Apple’s OSX operating system. It recently became available for Windows as well. Both copies can be downloaded from Apple.

Testing on Safari for Mac is exactly the same as testing Safari for Windows – they are built on the same engine, and your website will look the same on both. The only difference may be the variation in fonts, as some are available on OSX but not Windows and vice versa. The best way to test this is to look at your site in another Windows browser such as Internet Explorer (see below).

Firefox

Again, this is fairly straight forward. Firefox is freely available for both Windows and Mac. Testing on one is more or less the same as testing on the other. Some controls (i.e. form submit buttons, search fields etc) may look slightly different on Mac or Windows versions.

It is also worth testing your website on Camino – a Mac browser based on Firefox.

Internet Explorer (IE)

We’ve left the trickiest until last. Microsoft no longer make IE for Mac, so you need to find a way to run Windows on your Mac to test in this browser. You have two options. The first is to use Apple’s Boot Camp to install a copy of Windows on your Intel Mac – you boot into that to test your website in XP/Vista. The problem with this is that it requires you to reboot your machine every time you want to test your site… not ideal!

The second option is to use Parallels Desktop, which allows you to run a virtual copy of Windows inside OSX. This is easier, as you can simply run IE alongside all your Mac development applications and make changes as you test. It’s the only piece of software in this article which isn’t free, but well worth the money for the time it saves.

Have fun ensuring that your website looks good in each browser, and when you’ve finished remember to submit your site to us!

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

1. Validate your XHTML and CSS

Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.

2. Add alternative text for images

Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.

3. Make sure your site works without JavaScript

As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.

4. Use CSS to seperate content and formatting

As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.

5. Provide a high contrast style sheet

Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.

6. Ensure link text is descriptive

Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.

7. Add “Skip to content” links on pages

Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.

8. Ensure every form has label tags

Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.

9. Don’t open links in a new window

Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.

10. Make an accessibility statement

Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.

The basics

The idea behind web accessibility is ensuring that everyone, regardless of their platform, browser or personal situation can easily browse your website. This often (but not always) involves the need for the following things:

• High contrast versions of your pages being available
• Alternate text being placed on links and images
• Links being appropriately named, for those with text-to-speech browsers
• Testing your site without Javascript and CSS turned on
• Providing appropriate META data

It’s not just about disability…

Obviously, designing our websites with disabled users in mind is an important task, and something we shouldn’t take lightly. But the fact is that web accessibility applies to so many other areas as well. If you’re browsing websites on your iPhone, 3G Phone or even WAP mobile, you’d better hope that the designer considered accessibility when putting the site together. Nowadays, people can browse the internet on a TV or game console, kiosk machine, handheld computer, or even a fridge! Ensuring your designs are accessible mean that you don’t prevent these people from visiting your site.

…but that’s also important!

Disabled users struggle when accessing websites for many reasons. Those who have sight problems won’t be able to pick out your intricate colour scheme, so providing an alternate – high contrast – CSS document will allow them to see your site clearly. Distinguishing links may also be a problem, so providing clear roll-over effects makes it obvious what can be clicked.

For the same reason, text-to-speech browsers are available which read out the contents of a web page to the visitor. Using ALT text for images and clearly labeling links is vital here, so that someone can navigate your website without actually having the visual elements.

People commonly also struggle to use a mouse and keyboard easily, and so use voice controlled browsers and software.

Accessibility statistics

According to W3Schools, around 6% of web users have Javascript turned off in their browser, or use a browser which doesn’t support it. This alone is enough of a reason to consider what your website looks like without Javascript, or other technologies such as CSS, Multimedia, Flash etc.

In May-June of 2001, about 38% of adults with disabilities used the Internet at home, compared to about 56% of adults without disabilities, a gap of 18 percentage points. In December 1998, about 7% of adults with disabilities used the Internet at home, compared to about 26% of adults without disabilities, a gap of 19 percentage points. In that 2.5 year period, the rate of home Internet use increased by more than 400% among persons with disabilities ( from 7% to 38%), compared to about 200% among persons without disabilities (from 26% to 56%). If the Internet use by persons with disabilities continues at the same growth rate, it should match the Internet use of the non-disabled in a few years.

(*Source: National Organization on Disability, 2001)

This excerpt from CSUN shows that a large percentage of disabled people do use the internet, and that it is continuing to grow yearly. In the USA, around 7 percent of internet users are registered as having some form of disability. It’s vital not to forget about this section of your audience, and consider accessibility in design.