The Criteria Series: 12 Ways to Increase the Usability and Accessibility of Your Weblog
/
Being that the 2010 Canadian Weblog Awards are a juried competition, meaning that there will be a panel of jurors to judge each weblog against a particular set of criteria, we have made that set of criteria available from the outset. It only seemed right not only to share our basis for judgment with all the nominators and nominees but also to be clear about what each criterion meant within the context of weblogs, so this is the first of a series of articles about how to "do blogging good" in terms of both design and content.
This first article in our Criteria Series is about the usability and accessibility aspects of weblog design.
In the Canadian Weblog Awards set of criteria, usability and accessibility refers to the general user-friendliness and ease of navigation for people of all abilities. Creating a weblog with readily available and negotiable navigation and design is essential to creating a weblog that others will visit repeatedly over time. By taking usability and accessibility into account, you will create a website that physically acknowledges the needs of your readership and develops a more transparent relationship between you and the reader.
In short, designing an easily usable and accessible website tells your audience that you are aware and engaged and that they are important to you.
12 Ways to Increase the Usability
and Accessibility of Your Weblog
If your website will not show up properly or even at all on some browsers, you will alienate readers before they can even access your content. A good tool for testing browser compatibility is Browsershots, a service that loads your website in different browsers and shows you screenshots of the results.
Make sure that you use a legible font size, especially for your main content.
You might like the look of a smaller font — I don't know why, but you might like your text this small for some reason — but the fact is that a good number of people have difficulty reading a smaller font size and will not stay to read your content.
Make sure that the colours you choose for backgrounds, fonts, and links are of a high enough contrast that one will not obscure the other.
For instance, if I use a light font on a light background — this yellow font is really hard to read — most readers will be unable or flat out unwilling to bother with the effort it would take to read your content.
Likewise, link text should stand out from both the background colour and the non-link text so that users can easily identify which text leads to information external to the present page. Use a high contrast colour for the font, and adding an underline to link text is also helpful. Links that are barely distinguishable from the surrounding text are rendered nearly useless by their invisibility.
It is also optimal if link text reflects what the link actually points to and does not merely say something like "click here". For example:
✔ There are some web pages that really suck.
X Some web pages really suck. Click here to see them.
The reason for this is that auditory users, people who cannot scan webpages quickly due to visual disabilities, and individuals like myself who sometimes use link text as a brief content overview will tab through a page to see what links are available. If the link text does not reveal what the link is referring to, some users will skip a majority of the content in favour of a website that is more clear about its sources and other link content.
It is also important to take colour blindness into account when it comes to contrast and colour in design. Approximately seven to ten percent of the population has some form of colour blindness or colour deficiency, the majority of those being red-green colour blind, so it is a good idea to test your website colour scheme using the Color Scheme Designer.
When posting images, make sure to use alternative text attributes, otherwise known as "alt text".
Alt text describes the content of the image, which is especially useful for readers who are unable to see the image shown due to the technology they are using or visual disability. Read "Writing effective ALT text for images" to learn more.
Make sure that your weblog's title is apparent.
This may seem logical, but a lot of weblogs are not clear about what they are called at all. I frequently come across weblogs that have one title in the browser tab and another on the actual weblog that does not act as a link to the weblog in question.
Place the weblog title in a spot at or very near the top of the page, make sure that it is also a link to the main page, and make sure that it also agrees with the title you have set to appear in the browser tab. Otherwise, no one will know how to refer to your website.
Make sure that you place your website's primary navigation links above the fold, which is approximately within the top 600 pixels of your website.
There are exceptions to this rule, such as TMZ's dynamic link that takes users to the next page at the bottom of their website, but static primary navigation links that do not change with page content are best placed where users can easily and consistently find them. Placing the links to static content like an about/FAQ page, contact information, and an archives page above the fold so that a user can navigate through the different pages on your website without having to hunt through all of your content creates a positive experience with an eye to transparency.
With this in mind, though, do not try to cram as much content as you can above the fold, because it will put you in danger of overcrowding the space and losing the emphasis on certain links over others. This is merely a reminder to keep your main navigation links prominent and accessible.
Don't provide multiple navigation areas for the same set of links.
If you have a set of links pointing to your best writing at the top of your page, do not also put them in your sidebar and/or at the end of each entry. This is needlessly repetitive, and, rather than underscore the importance of those links, it confuses the reader. Instead, show the links' importance by their visual prominence on the website.
Regularly check your links to make sure that they are not broken.
Broken links mean a frustrated reader, and it tells your audience that you don't care whether they can access the information or not.
Make sure that you have a static about/FAQ page devoted to some kind of explanation of yourself and/or the weblog.
Readers like to know whose material they are reading, and since they are likely not going to pile through twenty weblog entries to find out who you are, it is a good idea to make that clear on a static page aside from your string of weblog entries. Perfectly good weblogs are often passed over because there is no way to find out who it is that stands behind the content. An about/FAQ page acts as an introduction of yourself to the reader. Think of your about/FAQ page like the author blurb on a book's dust jacket.
Make sure that you have the archives listed on either your main page or a static page that you link to from the main page.
It is both a common and an irritating mistake not to allow access to your weblog's archives if you want to have a regular readership. When a new reader finds a weblog that they like, it can be frustrating if there are not archives available to pour through, and it creates an air of unfriendly exclusion.
Avoid installing pop-up content or advertising that appears over your main content.
This is irritating to the people who just want to access your content. If you don't know why this is irritating, there is something wrong with you.
Make sure that links pointing to pages within your own weblog open within the same window.
Clicking on a link only to have it force open a new tab or browser window is unnecessary and forces the reader to have to click back and forth between windows. It is usually a good idea to leave the choice to open new tabs or windows up to the individual reader rather than force unnecessary activity that could mean driving them away from using your website.
Weblog Usability: The Top Ten Design Mistakes
Top 7 Usability Blunders Of The Big Players
Web Accessibility Initiative (WAI) home page
W3C's Shawn Henry on Website Accessibility
To further test your weblog for accessibility, use WAVE, a web accessibility evaluation tool. It will show you exactly where on your website you are meeting or falling short of accessibility concerns.
Most aspects of web design, if not directly, are related in some way to usability and accessibility, so whether you are a designer or an author who values your readers, I would love to hear your feedback. If you have any questions or suggestions, please open up the discussion in the comments.
