Designing Sites For Universal Success

By: Maneet Puri at LeXolution IT Services P. Ltd.

Submitted on Wed, Feb 27th, 2008 1:20 am

If the word ‘Infinite’ demands personification, then in all probability, the internet may be the ideal answer. The Web is an ever expanding pool of information, growing by the second. It transports imagination, transcends boundaries and connects the world.

But as it continues to develop, the users with special needs would have to keep in sync too. People with disabilities need to have equal access to the web. One in five people in the United States, between the ages 15 and 64 have a disability. 30 percent of all American families have a member with some form of disability.

This calls for all the web designers and developers to reinvent their designs to cater to the needs of this population. And with the advent of technology, this might as well be a norm. Moreover, designing a website for visitors with special needs gives way to more cleanliness and increases the user-friendly interface. By incorporating some simple changes to the website design, designers can have invite visits from people from all walks of life.

These special needs might be

1. Visually impaired (blind, color-blind)
2. Deaf
3. Motion impaired; difficulty using a keyboard or mouse
4. Cognitive impairments
5. Text only browsers (Lynx)

Website Design
A good website design accommodates special needs visitors. It clearly specifies the purpose of the page and lays out navigation logically in addition to the JavaScript. In addition, it also uses alt tags for images to cater to even those visitors who have their graphics turned off.

Aids For The Visually Impaierd

Blind people use screen reader software, that reads out the page to them word-by-word and row-by-row. But the disadvantage of the software creeps from its very purpose of work. Reading the whole page word-by-word straight across including any alt tag information and links ends up confusing the listener altogether. It is advisable to either label the links as ‘links’ or to use a clear gif with the alt tag information ‘navigation bar.’ The speech synthesizer will thus read all the alt tag information and then proceed to the links. The graphics on the site can be explained by using ALT text. For decorative images, the description ‘’’’ can be used, that would be ignored by the speech synthesizer. For the links, the ALT text should be surrounded with brackets.

Aid For People With Motiom Impairments

For people with motion impairments, an ideal design would be having good sized buttons as alternate method of access. This helps those who are unable to click on a small are map. Also the page layout and navigation should maintain consistency Throughout The Pages Of The Website.

Navigation Bar

The navigation should be clearly labeled and the links should be underlined. Showing the links in different colors would be completely useless for people who are colorblind or those using black and white display.

Website Colors

The colors in a website should be used judiciously. About 8% of web users are unable to distinguish colors. There should be sufficient contrast between the foreground and background colors so as to avoid any confusion. The web friendly colors should be preferred.

Html Tags

The navigation design layout should use HTML tags identifies the text for what it is and not just how it looks. Speech synthesizers read these HTML tags like h1, h2, h3 and EM, STRONG, B and give proper emphasis to headings and subheadings.

Applets And Plug-Ins

If the site relies on any scripts, applets plug-ins or frames fro navigation and information then an alternative path should also be provided to access the same. For example, audio scripts should be accompanied by a transcript of the same to aid the hearing impaired visitors. Video clips should have with them a hyperlink to an information page that conveys the information in a textual manner. An explanatory ALT description should be clubbed in with animated presentations for the visually impaired. All the description should be within the size limit of the speech synthesizers.

Image Location

Any picture that appears alongside the text should be aligned towards its right or left so that the speech synthesizers maintain a flow and the description is read separately.

Tables And Cells

If there are any tables in a particular page, all the information about one specific topic should be clubbed into one cell. This enables the screen reader to proceed without any confusion.

Bullets And Numbering

Bulleted and numbered lists are an ideal way to presents information on a page. Apart from being attractive, it also facilitates easier reading.

Caveat

Always perform a spell check on the text matter. This is because the speech synthesizer would always try to read every word even if it is misspelled.

About the Author

Maneet Puri
LeXolution IT Services P. Ltd.

Maneet Puri heads LeXolution IT Services (LIT), a renowned web development company in India. He is an expert of web solutions which includes web design & development, website maintenance, internet promotion, website redesign services. Besides, he has also successfully added KPO to his company. He has efficiently handled many off-shore projects related to web design, web development for his overseas clients. If you want more information on web application services offered by LIT, visit www.lexolutionit.com or visit his blog http://www.lexolution.in/blog

Elite Firms

Top Web Designers

Directory Sponsors

Lounge Lizard

White Media

VivaNet 2.0

MindSmack Web Design

Glide Interactive

Hostway

Write for Us

Are you a creative genius? Do you want to share your gift with others and enjoy recognition as an industry leading author? Write for us and get your voice heard.

Learn More