Monday 21 March 2011

Accessibility

Introduction


A couple of weeks ago, I had a chat with a colleague and friend of mine; who is also a User Experience Analyst, regarding the Do’s and Don’ts when designing a user interface (UI). He explained that before starting the design stage of a web page or a software application, one should investigate what type of audience and users will be using this application. He explained that one of the most difficult tasks he ever had, was to design a UI for a product that was localized in 14 different languages. Reasons being, that when you are designing such UI, one should take in consideration Cultural and National differences especially when choosing UI colours and icons. One should be aware that a colour in one country may mean peace of mind and success, while in a different country it means danger and failure. On the other hand choosing an icon is a bit trickier. Let’s assume that we need an icon that represent a user account, is the following icon valid?
Some will say YES, but I think women will complain because the icon represents a male. Same applies for different races having different skin colour. So Icons should be generic as much as possible.
I thought that catering for different cultures and races are the only concerns when designing a suitable UI. I was wrong. This week, our lecturer invited a professional web designer consultant that during the presentation she explained that we should also consider Accessibility.
Accessibility is defined as the ‘ability to access’, and in web development this means that a web site has to be fully accessible by users with physical disabilities.

In this blog I will explain what I’ve learned during the presentation.

Sensory impairments


After the presentation, I did some research on what type of disabilities exist that may prevent users from accessing a web site. Several sources mention Sensory impairments, disabilities related to the human five senses; sight, hearing, smell, touch and taste. Obviously when dealing with web accessibility the main concerns are sight, hearing and touch.
Not everyone is aware that unfortunately these conditions can be combined; a person can have more than one disability. In fact, complex conditions like deaf and blindness exist (dual sensory impairment) and is not rare amongst conditions.
Some disabilities are Congenital (from birth) or Acquired (developed as time goes by). For example, some people may lose sight as they get older, others are born blind.

Frustration


Part of the presentation we did in class, the presenter showed us a couple of videos where persons having difficulties and disabilities shared their experience. Mainly I noticed that these persons are more interested in the contents of a web site rather than the aesthetical appearance. Some background colours and animations we add to make an eye catchy web site sometimes make accessibility difficult or impossible for disabled persons. Not being able to read the latest news or to play a game makes a person emotionally frustrated.

I must help


What should web developers do to make a web site fully accessible?
To describe this, I created a list that I collected from various sources:
  • A web page should enable the user to increase fonts and zoom without altering the web page contents.
  • Use online resources to check how a colour blind person will see your web site. (http://www.vischeck.com/vischeck/vischeckURL.php)
  • Use heading tags to enable users to using key strokes to navigate between titles.
  • When using images, use the <img>, alt attribute and provide a short description. Screen readers will read the description and will skip the image.
  • Extra care should be taken when using animation (Example: Flash and JavaScript). Flashing colours may disturb the user.
  • Try to make your web site accessible only by keyboard. Some users are not able to use the mouse.

Some examples


Colour vision

Using an online simulation http://www.vischeck.com/vischeck/vischeckImage.php I processed an image and the following images shows the result obtained. Some of the flags are completely different:

Text resize

A well designed web page will not change the layout when increasing and reducing the font size. The following two examples show how the BBC news web page maintains the layout while changing font size.

Alternative text

When using screen readers, images are skipped. So a visually impaired person using a screen reader will not be aware that the web page contains images. When using the <img> tag to include an image, web developers should provide a short description in the alt attribute. Screen readers are able to detect and interpret the text within the alt attribute. The following example shows the images within the BBC news ‘Features and Analysis’ section. Each image within this section contains a suitable alternative text.

Some resources


I found the following resources very interesting:

Conclusion


Web sites have no geographical boundaries and can be accessed by users from different cultures and locations, 24 hours a day, 7 days a week. To ensure that a web site content is well interpreted by different users, organizations provide a localized version of their web site.
Sometimes when we design a web site we assume that everyone can see our animation, listen to a background music or able to click a button.  We forget that lot of users have difficulties doing basic tasks like clicking and using the mouse.
When web sites are not accessible, users are frustrated. Lot of tools exist to test your web site for accessibility.
Having a disability is not easy. Let’s not make it more difficult...


Posted by Omar Zammit at 12:51
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)