Exploring a Web Site’s Visual Accessibility

Posted November 1st, 2007 by Mike Cherim

If your site isn’t visually accessible, you’re really missing the mark as a quality web developer…

It’s possible to get so caught up in following the rules of web accessibility that one can forget the simplicity of plain old visual accessibility and those it affects. Before I continue further, here’s a warning: this topic reaches deeply into the Camp One “accessibility for all” aspect of web accessibility. Okay, that said, I will make mention that the vast majority of your site’s visitors are of the sighted, mouse-using, up-to-date-browser, JavaScript-enabled, Flash-equipped variety. As a disclaimer I will say this is a hypothesis on my part, but I’ll betcha five bucks it’s true. And, coincidently, it is this very user-group that will benefit most from visual accessibility. That makes it important.

Considering the Majority

Web accessibility for all can be broken down into several groups for which accommodations are considered and made if needed: accessibility to the blind; accessibility to text-browsers; sans-image accessibility; sans-script accessibility; and many others. One accommodation — a highly critical one I might add — is, of course, accessibility to the most prevalent user-group as defined above. To accommodate the needs of this group one needs to see the page as they do: visually. This will be an easy one for most of you. You probably fit the common-user profile, right?

You might say visual accessibility is actually just design or usability and if you did I wouldn’t say you’re incorrect. But then again, design, to include usability, plays a role in all aspects of web development as far as I’m concerned. It’s not just pretty pictures and colors. Though pretty pictures and colors do play a big role in visual accessibility. As does the type-face, font-size, padding, margin, layout, organization, interactive elements, animations, various media, and more. But here and now I will give visual accessibility a life of its own.

Understanding the Concept

I guess “visual accessibility” is a term I just coined (at least in this context), but if anything fully captures the concept of visual accessibility, it’d have to be a combination of layout, readability, organization, usability, style, and content-clarity design considerations. This, at least to me, is important enough to warrant having its own nomenclature. When you view a web page in the traditional sense, as most do, are you able to find stuff quickly and is what you’re seeking exist? User expectations should be met. Take for instance a contact option (I think every site should have one): Is it easy to find the a contact option link assuming one exists? As another example, can you negotiate the main text content, or is it too small, crowded, or faint to make out? These are examples of design considerations that need to be made in regard to what I’m calling visual accessibility.

Delving More Deeply

Do understand that many sites which are perfect in regards to visual accessibility are not actually accessible sites and can’t claim to be. Conversely, not all sites that claim to be and actually are accessible exemplify good visual accessibility. These sites are great for blind users, text-browser users, and all sorts of minority users, for example, but they may be crowded, cluttered and confusing, visually. And as a result it may be difficult to find stuff or enjoy the content on these sites. I applaud these folks for producing accessible sites, but I’m a Camp One kind of guy so if the site in question forgets the needs of the most common user-group, then there’s something critically wrong with the picture.

It’s akin to web developers who make web sites for Internet Explorer and disregard Firefox, Opera, Safari, and other browsers. They might not like these other browsers or they may think the user-numbers are insignificant, but to disregard them and not accommodate the users of these browsers is not wise. Not wise at all. It’s foolish and arrogant, in fact. The same applies to not accommodating the common need for visual accessibility. Not a wise move.

A Study of Contrasts

I’ve had this blog theme for a long time — without feeling a need to “reboot” — and there’s a reason for that: I’m happy with this theme. Even as the owner, I still appreciate being able to locate stuff and read the content. I like the sheer simplicity of it. A couple have folks have expressed concern over the type-face used, because of Trebuchet letter-spacing issues, but the vast majority of feedback has been quite positive, from both the traditional “design” and “usability” standpoints. Most people can find what they are looking for and they can read the content with relative ease.

If my site was like the Major League Baseball site (MLB.com) — which I visited recently because I was trying to locate information about a pitcher for my kick-ass Red Sox — I’d consider it a disaster. I’d be very unhappy about it indeed. Granted, their site has a ton of content, maybe thousands of pages, but must every pixel be occupied? It’s difficult to find things on that site in my opinion. It’s, you know, like ten pounds of stuff in a five-pound bag. I feel it has terrible visual accessibility (it has terrible accessibility of many levels but that’s another matter altogether).

A Possible Solution

So what you do about a site like that to improve it visually? In my opinion it’s as easy as opening it up spatially and reducing the content-per-page by leading the user down a greater number of avenues organized in a greater number of layers so as to limit the number of avenues per layer. Think river delta. It’s what they do already, it’s what most developers do, but that site offers way too much in one shot on any given page — the river delta concept needs to be broadened and expanded considerably. This improvement suggestion will mean the page count will probably double, at least, and the number of page requests will also double, but bandwidth consumption shouldn’t fully double and most users would have an easier time with the site. It’d be more usable, better organized, and the content would be clearer. There’d be more “white space” and it would be easier on the eyes. I feel it’d have better visual accessibility. A fair trade-off in my opinion.

What You Can Do

You should start with an accessible and semantic build, then enhance it carefully and progressively taking visual accessibility into consideration as you would with any other aspect of the science and art of web accessibility. If you’re not starting at the beginning, though, grab your mouse, fire up the latest version of your favorite browser, and with both eyes wide open look at your site trying your best to empathize with the first-time visitor. How’s it fare? If you’re good to go, if it’s highly accessible in the visual sense, then you can check out its accessibility to your minority users by experimentally degrading the experience for yourself in various ways. If your site isn’t visually accessible, you’re really missing the mark as a quality web developer who wants to produce a usable, well-designed site. As much so as you would if you failed to make your site accessible to any group.

I think visual accessibility is pretty important. What are your thoughts?

7 Responses to: “Exploring a Web Site’s Visual Accessibility”

  1. Exploring a Web Site's Visual Accessibility -- responds:
    Posted: November 1st, 2007 at 9:29 am

    […] You can read the rest of this blog post by going to the original source, here […]

  2. David Zemens responds:
    Posted: November 1st, 2007 at 3:28 pm

    Bravo, Mike. Whitespace is your friend.

    I stumbled on your website by accident a long time before I ever revisited it to explore the content and ultimately to participate in the discussions. I remember being visually impressed with your site before I even knew what it was about and who you were.

    Many months later I found my way back to the site on purpose to read about web design and accessibility issues. When your home page displayed I realized that I had seen it before - and I remembered it because it was unique, easy to read and pretty to look at. Even though the majority of the page is white space (OK, it’s #fafafa space, but that’s cool) the site is really beautiful and visually appealing.

    The visual appeal of the site (along with the awesome cotent, of course) keeps me coming back. I agree with you that a site has to look great to appeal to the majority of users who are sighted and who do see the site in it’s full glory.

  3. Dan Schulz responds:
    Posted: November 1st, 2007 at 6:15 pm

    Bravo, Mike. Bravo. Very well said. Now only if more people would get the idea and start cleaning up their acts.

  4. Andy Mabbett responds:
    Posted: November 2nd, 2007 at 7:31 am

    I find your pale-green-on-white headings visually inaccessible…

  5. Matt responds:
    Posted: November 5th, 2007 at 5:45 pm

    I recently discovered a neat Firefox extension (from Juicy Studio) called the “Colour Contrast Analyser” that helps test the luminosity and contrast ratio of a web page. I’ve put it to use and have found it very helpful:


Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.