1. I built out this great design and had it working perfectly in Safari and/or Firefox, but when I looked at it on Internet Explorer, the stupid browser broke everything! I hate Internet Explorer. Why do people insist on using such a dopey browser, huh? Now I have much more work to do. Grr.
2. Who cares how the site works with JavaScript turned off! If someone’s online with JavaScript disabled, they have problems. Don’t worry about making the site work without it. We’ll save time on developing the backend and shift all the weight-lifting to the front end.

This kind of thinking is wrong. Just right out. But, there is logic behind the above:

1. Internet Explorer has not always been a stellar browser. IE 8 and up are the only versions you can reasonably expect to handle CSS properly. People really should keep their browsers up to date, but IE users tend to get stuck on versions, meaning that if you develop for IE users at all, you have to hold back the rest of the class, so to speak.
2. In ye olden days, people would turn off JavaScript in their browsers for performance and security reasons. Nowadays, very few desktops don’t have it enabled. Ostensibly, JavaScript should be a given when developing for standard web browsers.

But this logic is flawed.

Whenever you create anything for any platform, a seasoned developer will tell you to test often on every platform during the development cycle, not at the very end. Only real veterans can pull together a magical site in one go and look at it in IE6/7 at the very end without needing to go back and make massive changes.

I see developing for “lamed” browsers as an accessibility issue. Not everyone has control over what browser they use, like the elderly and those who use corporate or school computers. I would as soon get upset about accommodating those IE-users as I would get huffy about putting alt-text on images. (I mean, seriously, who browses with images turned off these days, am I right? Oh, wait, I forgot about search engines, blind people, and mobile browsers on iffy connections…) It’s arrogant to think everyone should use the browsers you like that you approve of. Users aren’t you, and they don’t care about what you care about. So get over yourself.

I actually like using IE as a testing browser because it’s so unforgiving of incorrectly ordered tags. I’ve had broken markup that neither Safari nor Firefox noticed, but IE absolutely had a nervous break down over. If IE hadn’t started having an epileptic fit, I never would have corrected the issue, which could have spelled all sorts of problems for mobile users, screen readers, and search engines. And trust me, once you know how to make IE happy, you can do so much more with other browsers because you’ve also learned how to tip-toe around its weak spots.

As for JavaScript, lots of people still use devices that might not understand it very well even if it’s enabled, like Blackberries and screenreaders. And search engines just shrug their shoulders at it. You can make a blank HTML page where all the content is handled with JavaScript. But how is that better than a Flash site?

AJAX and JavaScript are great enhancements, but if you don’t know why you’re using it or how the site will function without it, you need to step slowly away from the text editor, man. You’re making broad assumptions, and we know what kinds of trouble that leads to.

So stop whining. Start testing more. Do the heavy lifting. Anticipate the unexpected. It’s what you’re paid good money for, and it’s your duty as a web developer. The Internet is counting on you.

End rant.

1. Increase and decrease the font size by two sizes. Many visually impaired visitors have their browser’s font sizes set one or two higher than the default, and some of us, myself included, like to keep their fonts one size smaller than the default. But on many sites, resizing fonts in this manner will break the design, causing navigation elements to disappear, text to run off the page without the appearance of scrollbars, and all sorts of disasters.Example: I’m not using live examples in this article because sites change so much, but I once visited a site that had a dark navigation bar set upon a white page. The text in the navigation bar was also white. But, if you resized the text, it was pushed down, and you could not see that it was there, being white on top of white!Usually this sort of thing happens when the designer doesn’t plan for a worst case scenario. In a storm of pixel perfection, they build a house of cards with their code, and all it takes are a few non-standard settings, and the whole thing falls apart! Usually this situation can be avoided by using bulletproof CSS techniques and testing frequently.
2. Turn off images. Some people, believe it or not, browse the Internet with images disabled. I do it via my Nintendo DS browser all the time, for the poor little slugger just takes too long to download all the pertinent images. And even if your audience is eye-happy designers, chances are one of them, somewhere, sometime if going to have a slow connection, either on a cell phone or a poor hotspot–It will inevitably happen! But have you ever looked at your site without images? You may be taken aback. Headlines may go missing. Text may become illegible. Navigation may disappear. Dreadful!Example: Very often when I am browsing the sites of other designers, I like to perform this test to see how their standards measure up (I’m a curious crow). I am always surprised that about one in four does the following: Takes a page with a dark background, sets a containing element with a lighter image used for a background, and puts dark text within that element. The problem arises that when you turn off images, the light image disappears, allowing the dark text to become invisble on top of the dark background below. It’s so easy to solve this by merely declaring a light background color in addition to the background image! All you have to do is test! It’s so simple, so easy, there really is no excuse for missing this one!And for anyone shrugging that they are quite sure this won’t matter to the majority of their visitors, I can only reply that the fix for this entirely too common shortcoming is so easy that to not employ it is sheer negligence and antagonism toward your visitors! Mayhaps you have an incredibly fast connection, but even I have had periods of slow connectivity during which could read nothing on a site for a few seconds as their precious background images uploaded.
3. Turn off styles. This one is for the search engines and the screen readers, and it’s very important for that reason.
   • All pictures on the site should be visible as images, all design elements should revert to their primitive defaults. For instance, the picture of the corporate offices should still appear, but their fancy image-based bulleted lists should revert to obnoxious default bullets.This is particularly tricky, because I’m asking you to categorize all the visual elements in your design as “design elements” or “photographs/illustrations”. Design elements should all be contained completely in your CSS to improve ease of updating the look of the site. In the above example, custom list styles can easily be made by applying padding and background images in CSS. A paragraph tag with an image at the beginning is a poor substitute, for a search engine has no idea that what you’re showing it is a list where the elements have some relationship with each other. The same goes for a screen reader for the visually impaired. It just sees images and paragraphs!
   • Headers and titles should stand out from the crowd. A default h1 tag is huge! Gargantuan! Ugly. But what it says to search engines and screen readers is, “Hi there. I’m the title of this page, the chapter of this book, the boss of this text. Pay attention to me.” That’s why it’s so big. You can easily scale down its size with CSS, but several times I have come in on a project and found that all the page titles were in h3 tags because “h3 is a nicer size.” The size may be nicer, but to a search engine, an h3 says, “Hi, don’t mind me. I’m not that important.” Don’t shortchange search engines over a few lines of code!
   • Make sure the page has a discernible hierarchy. This takes from both points above. The title should be an h1, and there should only be one h1. Everything after that should use h2′s, and the things contained in the h2′s, if they need their own titles and headings, should be h3′s, and unimportant navigation headings and such should be h3′s and lower. Lists can be either numbered or bulleted (ordered or unordered). Think of the page as a term paper. (Tip: Navigation elements work well as unordered lists, like a chapter listing at the beginning of a book.) You want to make the hierarchy of the page as clean and clear as possible. If your page title is a paragraph and your lists are paragraphs and your paragraphs are paragraphs, no machine will be able to tell what is most important on the page. It will give no weight to anything. In short, your paper isn’t to form. You get an F.

And there you have it! I find that keeping these three things in mind as I build a site help keep me on the right track, separating style from content, and ensuring that the information on the page makes as much sense to machines as it does to eyes. These things are magnificently important not just to that percentage of your visitors who have slow connections or disabilities, but also to search engines, which demand well-ordered content. And these are so easy to implement, especially the first two!

I hope you will find the Three Minute Accessibility Test useful. And if you have any tips to share, please do!

Notice: I feel like I came up with these steps on my own, but truthfully, I’ve been using them so long that I cannot remember where or when I started employing them! It’s perfectly possible that I read an article outlining these steps or steps like these then adopted them as my own. There are many such articles on the Internet. (In fact, there is even a ten minute accessibility test already!) Thus, if someone out there can claim credit for this, I am by all means more than happy to give credit where credit is due!