So naturally I was a bit bewildered. What’s so bad about UXers? The reasoning went that good web design should naturally equate a good user experience, and that the user experience as a whole consists of more than what happens when you press x, y, or z. While it is great that we all feel responsible for the user’s experience, I feel this approach is flawed in two ways:

1. This argument assumes that UXers work within a very limited scope that does not encompass the entire system. While it is true that some specialists, like Information Architects, User Interface Designers, User Researchers, do limit the scope of their work, these people usually only live in larger design and development ecosystems which can afford specialists (DBA’s, copywriters, and others included). Many user experience designers/engineers draw on all these job descriptions to offer a broad range of skills in a more affordable package.
2. It also assumes that designers should take full responsibility for the wireframing, testing, user research, interviews, and information architecture that UXers customarily take upon themselves. By these standards, 98% of all current web designers are inadequate. So what should we do with them? Retrain them? Give them new job titles? Tell them to get out of the swimming pool and go back to print? I know plenty of fantastic, stunningly talented web designers who have no competency or interest in the sorts of tasks UXers perform. I personally cannot imagine telling them they are unqualified to do their job.

Perhaps, the user experience as a whole should be decided upon by the web site’s team. But it’s hard to imagine an entire team creating and testing wireframes, interviewing and researching users, hashing out the IA–I’m sure it can be done, especially on small projects. But as soon as you start looking at anything with more than 10 users or with any app-like qualities, you need someone to own this stuff or it will go to pot.

Designers, especially green ones, aren’t usually designing for users–they design for themselves or for the clients. The clients aren’t thinking about users. They’re thinking about their goals, budgets, and themselves. Developers just want to make the thing work so they can get on with it! There is no one representing the user in this model. And even if magically all parties had a consensus about what was best for the users and diligently tried to make that happen, they would still make a lot of newb mistakes that a seasoned UXer would sidestep.

Design is the hand. Development is the head. Between the head and the hand, there must be the heart, the advocate for the user. That’s what “UX” is about. It’s not a buzzword to be tossed around lightly, although many do. It’s a calling. It’s a fight. It’s an obligation. By all means, if you’re a designer or developer who wants to learn more and start with a users-first attitude, bully for you. But remember that there’s a lot more to it than good intentions and a few articles on UX Booth.

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!