One of the biggest annoyances I ever see in a website’s source code is layers upon layers of complexity. 20 nested <table>s, 30 nested <div>s - what’s the difference? Building a consistent and semantic website isn’t just an issue of whether or not you’re using valid code or mistreating a poor table by filling it with non-tabular data - it’s a question of whether you’re using logic to decide what element should be used to represent your content.
How deeply does a piece of information actually need to be buried in your document? Well, optimally (and arbitrarily), no more than 7 layers:
Read more: Keep it Simple, Stupid
A couple days ago, Roger Johansson published a complaint about the problems he’d been encountering recently with light text on dark backgrounds. It’s an interesting subject - is there a distinct usability difference between dark text on light versus light text on dark? For Roger, there’s no question - light text causes pain. If it hurts, it’s not going to happen. But how general is this kind of problem?
Roger points out an interesting quote from designer Mark Boulton specifying how to deal with reversed color schemes and text. However, Mark hasn’t provided a concrete usability-related reason for his reasoning.
When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.
Mark Boulton
Are these designs with inverted white on black more difficult to read because they haven’t followed this rule, or because white on black is inherently less readable?
There are studies on the readability of various color contrasts, which generally demonstrate that dark colored text on lighter backgrounds are easier to read. However, I’ve been unable to locate a study which also considered more complex design considerations such as the kerning or specific color contrast of the text - which certainly must play a role. A study by Dr. Lauren Scharff and student Alyson Hill (more information) of Stephen F. Austin State University shows the expected results - black text on a white background is the best rated combination for readability:
…the most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low. All others fell somewhere between these extremes.
Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).
Following these initial findings, the study continued to perform a more complex examination of the question including considerations of font style and font face - however, the choice of color combinations did not include any reverse pairings, so this second examination doesn’t provide any useful information.
A second study, at the Adaptive Technology Resource Centre of the University of Toronto, approaches the question in a more rigorous manner. This study uses algorithmic measurements of contrast and hue to determine whether text should have high readability. The study considered the difference between a bright text on dim background and mapped the results to discern whether there was any apparent benefit to one or the other:
In order to assess whether the direction of the brightness difference (i.e. bright text on dim background vs. dim text on bright background) is of any importance in determining readability ratings, brightness difference was calculated as the difference between background and text brightness. In the case where the background was brighter than the text, this difference was found to be positive. For those images in which the text was brighter than the background, this difference was negative. The brightness difference was then plotted against the median rating, and yielded a ‘U-shaped’ plot, shown in Figure 6 (below). This plot suggests that the direction of the brightness difference does not appear to be of importance in determining overall readability ratings.
[D]
The suggestion at this point is that a preference for one or the other is predominantly related to personal preference. It’s an interesting issue, however - I, for one, certainly have a strong preference for dark text on a light background. Anybody else?
Philipp Lenssen, of Google Blogoscoped, has written his top 9 Ways to Misunderstand Web Standards. This is a must-read!
The comments are pretty good, too - although certainly some of them just don’t get it:
QUOTE:
when your image is a mere illustration to a point you’re repeating elsewhere in the text, there’s no need at all to use the alt text.
Absolutely wrong. There is much benefit to be had, most notably for search engines. In general I find your info to be incomplete and semi-accurate but I’ll spare you a point by point breakdown. I’d just add that the tenth way to misunderstand web standards is to listen to you.
Comments from "Nope"
Kind of missing the point here, "Nope" - the point of web standards, usability and accessibility is to make a website better for users, not search engines. I can’t argue that the list is incomplete - any one of these points could be a full-length article on its own - but there’s no question in my mind that this is a sound breakdown of the fundamental misunderstandings with web standards.
Alice Tappart had an article today at WebProNews which was rather interesting. Primarily a tongue-in-cheek appraisal of Why Web Standards Could Be Making You Ill, the article does have serious points.
When it comes right down to it, the article is warning that an obsession about validation and web standards is not as important as ensuring you’ve provided great content. This is true, for the most part. Websites have errors. Undoubtedly, this site has a few errors here and there. I know that I’ve had problems with unescaped copyright symbols lately; but haven’t obsessed about it. The point of her article is that it is very easy to fall into a pattern of constantly verifying the validation of your code, and waste large chunks of time finding every unescaped ampersand rather than writing useful articles, improving your product descriptions, or making a site easier to use.
Read more: Being Obsessive about Web Standards
Inline linking is the practice of incorporating hyperlinks into text passages within the main body of your website. Generally, this is a technique for providing contextual explanations or additional information as an immediately accessible resource for site visitors. I recently read two articles concerning this subject - the first, at Wolf-Howl questions the practice of inline linking as being bad for usability. The second, by Bill Slawski, discusses Graywolf’s ideas.
Both articles make a number of valid points - but I feel that the overall question is a matter of preference. Personally, I find the presence of links within a contextual body to be extremely valuable. For context, there’s nothing to beat it. Graywolf suggests that lists of links following the text are less disruptive to the flow of reading. This may be true, in certain circumstances. I certainly agree that it helps in the specific example he provides. However, it seems to me that what he suggests only works for short, tightly focused texts.
In his example, a single paragraph is followed by four helpful links. Given this density of contextual links and the length of the content, this is clearly useful. However, provided with a document which is significantly longer - a 1500 word article, for example, this technique would be rather clumsy. Either you would end up with a block of links every couple of paragraphs, which I feel would disrupt my reading quite significantly, or you have a lengthy set of links at the foot of the document - which may provide insufficient context to be clear on the referenced point.
I have to think about this from an accessibility standpoint, as well. If the links are provided only at the end of the article, a user with a screen reader has a significant amount of ground to cover before they can reach any further information. With contextual links, the user can decide right away if they’re interested in additional information. Either way, they can use keyboard navigation to quickly skip from link to link - but with links only available in the footer, it’s may be very difficult to quickly identify the context of the link.
I also mentioned the post by Bill Slawski. One talent that Bill has is the ability to aggregate a huge number of relevant sources on a subject very quickly. Bill points out several references I thought were very apropos, including information from Jakob Nielsen, the usability guru, the psychology department at Wichita State University, and others.
Bill doesn’t come down firmly on one side or the other - which I think is very fair. There are advantages and disadvantages every way you cut it for linking — - either they’re disruptive or they’re convenient. They’re collected for easy reference or they’re separated for their immediate context. It’s always a choice you need to make — - link to the most important references within your text, and leave a collection of additional links at the end of the article may be the best choice.
And always provide well structured internal navigation!
Tags:
SiteMorse, for those of you who may not know, is a high-profile accessibility testing company based in the United Kingdom. They are well-known for the practice of releasing their "Rankings League Tables," which list the tested accessibility of government, banking, and other websites each month.
Their particularly product is entirely automated - and has, therefore, been attacked quite heavily in the world of accessibility auditors and consultants.
At the moment, there is a very interesting conversation going on at
Accessify Forum which is primarily a question and answer session between Grant Broome, a well-reputed accessibility consultant working with CDSM Interactive Solutions and Jon Ribbens, a director of the company which develops the SiteMorse product.
I will disclose, to start, the fact that I was already in the anti-SiteMorse camp before reading this interview. However, to date the Q & A session has done little to change my views. It’s my feeling that Jon has done little but attempt to avoid Grant’s question. With repeated accusations about vagueness and the irrelevance of Grant’s questions and points, Jon has done little to impress me with his company’s dedication to accessibility issues.
The core issue is whether automated testing can possibly fully address the accessibility of a website. I and many other accessibility consultants believe, quite strongly, that it’s simply not possible to judge a website entirely based on automated judgements. An automated tool can be helpful for resolving specific issues - but should NEVER be substituted for a human appraisal of accessibility.
Regardless, this conversation has already been quite interesting, and is worth following.
Tags:
I’ve been giving some thought lately to the subject of web semantics. In short, web semantics are the application of structural meaning using HTML markup. For a more palatable explanation of web semantics and their benefits for your website, I’ve written a new little article - Web Semantics and HTML Structure.
Return to Top
