Some time after reading Steve Krug’s fascinating Don’t Make Me Think, which is a fantastic introduction to usability and accessibility that any web monkey worth their salt should read immediately, I began implementing something I like to call my Three Minute Accessibility Test. It’s a fast, simple way of making sure that your page makes sense to 90% of the population–and search engines as well! Mind you, it works best if you use it several times during the development of aone site rather than all at once at the end. Let’s have a look.

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!