Articles, Tips

Website Accessibility and Usability: Ten Tips On How To Make Your Website More Viewer-friendly!

October 20, 2009 • By

Most websites are developed with the sole purpose of spreading information about a product or service in mind. However the different viewer scenarios are not normally envisioned and it is assumed that all the site’s visitors have perfect physical or cognitive ability and fast computers with broadband connections to the internet. Statistics show that on average most internet users have some form of disability or disadvantage that hinders them from accessing web content as it was intended. In 1997, the World Wide Web Consortium, the non-profit organization in charge of the internet, established the Web Accessibility Initiative that set guidelines for web developers to adhere to so as to ensure accessibility to all users. The W3C define web accessibility as “the ability of people with disability to perceive, understand, navigate and interact with and contribute to the web” These are disabilities are present in the form of:

Physical disability:

These may lack limbs such as hands that are necessary in using an input device such as a mouse or keyboard. They use tailor made devices to interface with the computer for ease of access.

Visual disability:

These have next to no vision at all. To browse your site these visitor use read-out-loud applications like Microsoft Narrator which read the topmost window, in this case being the website page. They may also increase the web browser’s text size and contrast to make it more readable.

Hearing disability:

These are visitors who use hearing aids or a totally deaf and cannot hear audio content on your website. Technologically disadvantaged: These are viewers with poor internet facilities like slow access speeds and frequent network outages or are using devises with limited capabilities such as data enabled mobile phones. If you develop your website with the above audience in mind, you will make it better for all users. Website accessibility and usability requires that the content be presented in a simple, consistent, clear and memorable manner. You may be forgiven to ask “So how do you achieve these parameters?” Here are ten tips that will not only make your site easy to navigate through for any possible use case, but also presents your content in the most effective and satisfying way.

1. Learn to use the alt attribute for each visual feature on your page.

This tag is used to show alternative text in case the images have been disabled to save on bandwidth or the connection is too slow to load images. Good tags should define the image they stand in for in the shortest way possible without losing any meaning. They are read by screen reading software thus should be concise and to the point. So instead of use instead. For alternative text a good example comes to mind is the songbird home page. All visual features have descriptive text on mouse hover. That is if you place the cursor over any visual feature, a small colored pop-up window appears containing precise descriptive text of the visual feature.

2. Use link text that describes the destination.

Normally even visitors of normal ability do not read the entire content of a page that allegedly contains the solution to the problem they are searching for. Instead they skim through looking for the link to the answer. Links such as click here and follow this link should be avoided as they are not descriptive of the destination they are linking to. Not unless one reads their context, they are not likely to communicate the fact that they are the answer to the visitor’s search. Instead use short descriptive text such as visit our home page or learn more about our gadget. This allows the visitor to go directly to what they want instead of wasting time reading lines and lines of lip-service to something they already know. Take a peek at open office website to see what proper links should look like. They not only lead you to where you probably want to go but also unobtrusively suggest better destination with more useful information based on the searched keywords.

3. On diction and readability:

The words used must be simple enough to efficiently pass the information but not too simple to appear childish. Avoid irrelevant information, stick to the content. Unless it’s a personal website, avoid talking about yourself. Visitors want answers to their problems and even though you are the inventor of the award-winning solution, talk less about you and more about the product or service. Use correct grammar and spell check before posting it on the site. If there are abbreviations or technical jargon, remember to include a glossary to help readers understand the content. If there content covers several pages, provide a succinct summary covering the main points and a table of content to save the readers going through irrelevant text. The table of content should preferably consist of placeholders or links to the position of that topic in the page. The text should be in a legible font. San-serif fonts are considered the best for body text as they are rendered well by all browsers. Using the right font that is in tune with the theme of the content is not only enticing but also ensures easy comprehension and even enjoyment when reading. Use different fonts or color for links for them to stand out from the descriptive text. This is convenient for skimmers of content to get what they want. Keep paragraphs brief to keep the reader engrossed and interested in what you have to say. To this end keep the word count per sentence at 75 words. The white space between lines should preferably be less than half the font height used. Never full justify text to avoid “rivers of white”: large irregular white spaces forming patterns throughout the page.

4. Provide text version of all audio and video content.

It is not uncommon to find a website that uses audio to convey the entire content it has to offer. This is disadvantageous for those short on hearing or with slow internet connections. Provide a mechanism to have the content in visual or text format by either transcribing audio content and posting it on the same page or captioning video files. One could also describe briefly the theme of the video to save the viewer watching irrelevant content. Use a buffering system that downloads the video in the background and plays the downloaded content simultaneously. One could also provide different formats for video or audio that compromise on either quality or size. for example provide both .flv and .mp4 file formats for viewership. Flash files are smaller but low on quality while MP4 files are high in quality but large in size. This caters adequately for different bandwidths.

5. Use a site map, search mechanism and place holders

On average websites have several hundreds if not thousands of pages. Each has some form of information that is of interest to different viewers. To save the viewers wading blindly through the pages looking for keywords, include both a site map outlining the main topics covered in each page and each title should be a link referencing that part of the website. Alternatively or additionally integrate a search mechanism for the users to search for keywords that will conveniently lead them to the pages they are interested in. One could also use open source tools such as Google Search that offer customized search engine capabilities for the users. On proper navigation usability take a look at the nclud site that allows moving from one page to the next in one fluid and logical process. All the information is available at the click of a link within the pages of the site.

6. Organize the page and remain consistent

Most websites have different features for the viewer to choose from. This may fall under categories like related ads, past articles, content updates, registration and support. This should be organized under headings or separated into tables that have different colors and backgrounds for readability. Ads and site map goes to the periphery of the page leaving the center of focus for product information or the main content. The top is reserved for a banner proclaiming the website and maybe some ads. Whatever the structure you opt for, stick to it throughout the website. Viewers take time to learn the structure and if it keeps changing, the soon loose interest and follow links away. Preferably, keep some aspects of the page constant. Say the site map, head banner and the ads, while the central area dynamically shows different searched content. A webpage that has paid much attention to this is pkr’s portal . With a brief glance, a visitor can take in everything without any browsing required. For further navigation a clean and clear menu is available on the left of the page which is separated cleverly from the rest of the content.

7. Ensure your webpage is versatile

A versatile page is one that can be read by most if not all browsers and can be easily formatted to be viewed on handheld devices such as mobile phones. Include support for change of sizes for the visually handicapped. Text and images should remain recognizable whether minimized or increased in size or quality. Allow the disabling of images and ensure that content is comprehensible with and without the images. Viewing pages like those of facebook from a WAP-enabled phone is like taking a picnic, literally. In fact this is so because such websites go to the extent of formatting their web pages for mobile viewership. Other such sites are Gmail and mySpace.

8. Refrain from distractive features

Most developers assume animations, pop-ups, flashing text or other visually grabbing features are good for passing the information across. Sadly to say, most people are easily disoriented by these distractions and chances of going back to what they were reading are next to none. Highlight whatever you want the visitor to consider viewing for instance using a different font, color or put it in bold, underline or italicize. Whatever effect used should not be exaggerated or over used to avoid losing the effect. Websites such as recyclenow have put the finger on the right balance between too much clashing colors for emphasis without it proving to be a distraction to the visitor.

9. Provide some control mechanism over the website for the user

When a user feels in charge of the pages, they are likely to stay longer and get interested in what you have to offer. For instance use indicators for the viewer to see where they are in the web site and a means to easily go to another area or go back. Use cues such as Home>My account> Settings or Step 4 of 6. Integrate the ability to cancel, reverse, confirm or altogether stop an important action. Generate error messages where appropriate instead of taking the user back to the home page by default without alerting them as to the nature of the error encountered however genuine it is. Else the visitor becomes frustrated and may not wish to come back even though your product is what they want. Kudos goes to facebook again where most user critical actions are preceded by a warning over the risks involved with going ahead with the action and followed by a confirmation dialogue box to ensure that you have knowingly executed that action.

10. Test your website for usable accessibility

# Now that you have designed and developed your site following the above rules of thumb, put your website to the test. It’s called the MIT Web Accessibility Guideline . It requires one to set the following settings in your browser and reload the page: Disable images
# Disable JavaScript support
# Disable style sheets
# Increase text size
# Set custom browser font and style or any other than the default settings.
Now reload your page and try to see whether the page is still legible without much effort. Is the content understandable? Are the alternative image tags visible and do they make sense in context to the rest of the content in the page? Try navigating throughout the page without the mouse. Are all links visited using the tab key? Try accessing the page on a data enabled phone. Are the main contents and all links visible? With all of these items to check on it may be a good idea to check out software testing tools from Inflectra, their software combines multiple tests to give the user faster and higher quality results. Once the website has been subjected to these tests and passed with commendations then you are ready to launch your website onto the rest of the world and start making money! Else reread this article and go back to the drawing table. Sample tools that can be used to automate the testing for website accessibility and usability are available for one’s usage to increase their websites ease of use, improve index-ability by search engines and clean it of mistakes. These include:

• Firefox Accessibility Extension:

Figure 1. Firefox Accessibility Extension

This is a toolbar add-on that is available for free from Mozilla’s support page. It enables one determine whether a page complies with conventional standards of web accessibility and usability. It also comes with install on demand testing apps such as WC3’s HTML Validator iii and Link Checker.

• WebAnywhere :

Figure 2. WebAnywhere

This is a web based app that tests a sites navigability using non traditional means of the mouse.

• Vischecker:


Figure 3.Vischecker

For the visually handicapped, this app simulates various levels of blindness that viewers may be having to see from their perspective how the page and images appear. Corrections can be made to ensure visual features appear as they are intended.

• Web Accessibility Toolbar:


Figure 4.Web Accessibility Toolbar

Another add on but with cool tools that assist in test a page of it’s usability and accessibility. For instance, you can convert an entire page to black and white to seek out clashing contrasts used.

• aDesigner :


Figure 5. aDesigner

From the makers of the first PC, IBM comes this great tool that generates reports on the fly on a page’s compliancy to industry standards on accessibility and usability. It also allows one to simulate different visually impaired scenarios to “see” how good or bad those who are actually visually impaired actually see the page for correction.