Website Accessibility Evaluation Methodology

Being an Accessibility Enthusiast, I generally get a question – How to evaluate accessibility of a website? Is there any approach or methodology which guarantees the accessible website? Well, I don’t think any methodology would guarantee a 100% accessible website until you get the website tested from real users – the users who face the pain of inaccessible websites.

Anyway, when the question became too common – I thought it's time to work on this and here I am presenting a methodology to evaluate accessible website. This methodology is evolved from fine tuning of industry’s best practices and Website Accessibility Conformance Evaluation Methodology by W3C.

This methodology includes the different phases of accessibility evaluation starting from collecting the baseline information to the last phase of retesting the fixed issues. This methodology can be used for existing websites and during earlier development stages of the website. This methodology can be used for evaluating static, dynamic, mobile and other types of websites.

Draw a Line
The objective of this phase is to collect the information and understand the accessibility requirement of the customer. This is accessibility evaluation preparation phase wherein tester collects prerequisite information such as target website, business nature, current accessibility status, identification of Assistive Technology and conformance standards to be implemented.

Let’s Explore
The tester explores the target website to get thorough understanding of website functionality, use and purpose. The exploration carried out in this phase helps in later stages when evaluation of target website takes place. The objective of this phase is to identify:
• Critical web pages of the website – The website is explored to identify mandatory functionality and critical web pages which are core of the website and might directly impact the business. The outcome of this step is the list of all critical web pages and mandatory functionality that user performs on the website.
• Common web pages of the website – The website is explored to identify the common web pages of the website. These web pages are generally directly linked to home page and main navigation of website and sometimes represent the different states of website. The outcome of this step is the list of all common web pages on the website.
• Dynamically generated web pages – The website might have web pages which are generated dynamically based on user input and important for the website. For example, product listing page on a website. The website is explored to identify such web pages on the website.
• Other relevant web pages – Here, the website is explored to identify the web pages that are more relevant to users with disabilities and accessibility of website such as web page informing about the website accessibility features, settings, shortcuts etc. The outcome of this step is list of such web pages.
• Variety of web page types – The target website may have web pages of variety of styles, templates, layout and structure, navigation and visual design etc. In this step, the website is explored to identify such web pages on the website. The outcome of this step is the list of all such web pages differentiated by varieties.

Collect the Samples
The objective of this step is to pick up the sample of all type of web pages which represent the target website. The purpose of this sampling procedure is to ensure the good enough accessibility evaluation of website with reasonable confidence. The sample set should include:
• Sample set of all critical web pages of the target website
• Sample set of Common web pages of the website
• Sample set of each dynamically generated web pages
• Sample set of Other Relevant web pages
• Sample set of each web page type
• Sample set representing the complete process
The sampling procedure could be skipped where it is feasible to evaluate all web pages in the target website; all the web pages are considered for accessibility procedure in such situation.
The selected sample sets are further evaluated to identify the common components such as navigation menu bars, headers and footers, search form etc. which do not require the re-evaluation on each occurrence.

Use Automation Tools
During this step, the selected sample set of web pages are evaluated by multiple automation tools as per the conformance standard selected in first step. The objective of automatic testing is to quickly identify the accessibility issues in the selected set of web pages of the website. The outcome of testing in this phase is:
• a list of confirmed accessibility issues which are failed to meet success criterion of selected conformance standard
• a list of potential accessibility risks which require manual intervention before next action
• a list of features which meets with the success criteria of selected conformance standard

Manual Testing with Assistive Technology
The tester further evaluates the selected set of web pages of target website manually to conformance with each success criterion of selected standard. The objective of this step is to identify the issues a disable user might be facing in using the target website. All content of the website is evaluated:
• to find out any occurrence of failure to meet success criteria of selected conformance standard
• to find out any occurrence of failure during the interaction of each web page and web page state along with complete process
• to find out any occurrence of failure in using the website with assistive technologies selected in first step
• to verify the list of potential accessibility risks generated in previous step
• to ensure that all content is supported by accessibility features

Make a Report, Retest
This step focuses on the analysis of reports collected from automated testing and observation made during manual testing process. The purpose is to identify all false positives and false negative before reporting the issues in the bug tracker. A report is produced with analysis outcome and recommendations and suggestions for all stakeholders.

Further, a decision should be made on retesting based on the outcome of the analysis. Retesting would have similar approach of testing - using automation tools followed by manual testing with AT.

Web A11y* Beyond Guidelines

(A11y* - Accessibility)

Think about accessibility testing of a website - "WCAG" - the first word which comes in mind (Section 508, in some cases), why?

We are so obsessed of following the guidelines. When I second these guidelines are important piece of information, we also need to understand that these guidelines are mere documents for reference, they are not the laws. We shall start thinking of accessibility beyond the guidelines. The presentation is an attempt to point out the issues of blindly following the guidelines and how can we get over such issues.

Questions are welcome :)

Audio Accessibility

In my last blog post, I discussed about making the accessible videos. This post is dedicated to audio accessibility. The mind map presented below provides an insight on audio accessibility.

For Questions, Suggestions and Feedback; please leave your comment below.

Making Videos Accessible – 7 tips for making videos accessible on the website

A website has many ways to share the information with their users such as textual content, Pictures, Audios and Videos. As a picture is worth a thousand words, similarly, a video is worth a thousand pictures. Thousands of articles, blog posts and white papers are written and available over internet on how to make images accessible for users with different abilities but there is not much information on how to make videos accessible to the users.

The little information which is available is not much helpful as either it is incomplete or it revolves more around visual and auditory disabilities and does not focus on other kind of disabilities. The possible reason for this could be that the less number of videos are published when compared to the images on any website. But this should not allow web masters to ignore the accessibility around the videos. The purpose of writing this article is to provide a feasible solution for making the videos accessible for all class of users of the websites.

Why Videos should be made accessible?

A video is more informational than any other medium. For example, an image can only show how to use a device but a video can be more informative by mimicking the uses of the device; this makes a video more user friendly for the users. Making videos accessible will help the different classes of users who can’t effectively use the videos for whatever reasons.

How to make videos accessible for the users?

The ideas listed below are outcome of brainstorming I did on the subject and can be used to make the videos accessible for any class of website users.

Remember, these ideas do not help web masters to make accessible videos; they help web masters to make videos accessible for their website users.

1. Provide Captions/ Script Transcriptions along with the videos

The Captions help users with aural disabilities to learn the content of the video. There are two types of captions – Open and Closed. The Open captions are burned-in with the video while Closed Captions are written in separate file which run with video. Personally, I think that Closed Captions should be used with videos because user can control them by switching on/off.

Script Transcriptions are the text content of the video’s provided in separate file. They are similar to Closed Captions file except time stamp is not needed for Transcriptions.

2. Alternative Text for Videos

Does this sound weird to you to provide alternative text for videos as it is supposed to be for images and not for videos?

What is a video? – A collection of moving visual images.

The first guideline to make any website accessible is to provide alternative text for all meaningful images; then why videos are exceptional. It is perhaps because of videos make more sense to user. So, why do we need alternative text for videos?

We need alternative text for those videos which do not make sense to the users. For example, when I watched the movie ‘The Matrix’ for the first time, I liked the action sequences in the movie but the story didn’t make much sense. By the second time, the movie made some more sense to me; but still a few things were unclear. Then, I read the plot of the movie and I got the gist of it. Next time, it was all clear. In fact, reading the plot of the first part of this movie made it easier for me to understand the rest of the sequels.

Decision of providing alternative text with the videos should be context – based. For example, if Caption/Script Transcription is already available and descriptive enough, the alternative text can be ignored. But, a video with no audio should have alternative text to explain the content to users with visual/cognitive disabilities.

3. Accessible Media Player

An accessible media player could help more than anything else to make the video content accessible for the users. For Example,

• Having a keyboard accessible media player can help users with visual, aural, mobility or cognitive disabilities.
• For low vision/partial blind users, I advise users to use media player with Full Screen and zoom options so that users can set the video to adequate size to view it.
• Providing a volume control in the media player can be a good idea for the users who are hard of hearing. They can set the volume to an adequate hearing level.
• The web media player being used should also have features such as Play/Pause, Forward/Backward and Captions On/Off buttons. These features might seem common and available in almost every web media player but they do help the website users to a great extent. For example, If a user is hard of hearing, he can go back to hear the missed word or a user with cognitive disability might want to control the video and play according to his comfort.

If your media player has such features, don’t disable them. Let the users use them.

4. Validate Videos with PEAT

An animated segment of a film promoting the 2012 London Olympics was blamed for triggering seizures in people with photosensitive epilepsy. The charity Epilepsy Action received telephone calls from people who had seizures after watching the film on television and online. In response, it was reported that London 2012 Olympic Committee removed the offending segment from its website. (Courtesy: Wikipedia)

If your videos have red flashes, it is advised to use PEAT (Photosensitive Epilepsy Analysis Tool) to validate the videos to identify the seizures risk.

5. High Quality/High Definition Videos

The quality of the videos is reduced when viewed in full screen mode or zoomed-in, making it difficult for user to view the videos; especially users with low vision. To avoid degraded video quality and better viewing, it is advised to provide high quality videos.

6. Explicitly mention if there is ‘No Sound’

Most of users think that Captions/Transcript scripts are not needed for videos with no sound but that is an incorrect perception. Providing Caption or Transcription Script for such videos is also as important as compared to videos with audio. For example, if not informed about ‘No Sound’, a user with aural disabilities might think that supported transcript is not provided and may feel discomfort about it. In such cases, mentioning it explicitly can help user in a great way as he can concentrate totally on the video without having to look elsewhere for the transcript.

7. Keep the Content Simple

Keep the content of the video simple, if possible. Using small sentences/dialogs and simple words can make the content more accessible for users with cognitive disabilities. Provide alternative text for complex or third parties videos where content can’t be controlled as webmaster.

Why Sign Language translation can be avoided?

Although, WCAG 2.0 suggests using Sign Language Translation; I personally feel that using Sign Language Translation is not a mandate and can be avoided for various reasons listed below:

• The sign language could differ in different geographical locations
• The approach is costlier than any other approach such as providing Transcription Script or Captions.
• Limited user base – Sign Language Translation would be useful only for single class of users suffering with aural disabilities.

These ideas are based on my understanding with the subject. Let me know if you think otherwise.

Thanks to Jyothi Rangaiah for reviewing this article coming back with her valuable feedback.

Are Text-version websites really needed?

Today, while browsing through the web, I found a website named Office for Disability Issues. As mentioned on their website, “The Office for Disability Issues (ODI) is part of the Department for Work and Pensions and works closely with the Minister for Disabled People, other government departments, disabled people and a wide range of external groups.”

As expected from description published above, the website is well designed to make accessible to users with different abilities. WAVE could find one and only one accessibility issue in the Home Page. Isn’t it Impressive?

The site provides different accessibility features such as Update Font Size, Change background and foreground colour etc. but the feature which caught my interest was Text version of the website.

Initially, I found the Text version of the site very useful; especially, to users with visual disabilities who use screen reader programs to access the web. Later, I couldn’t think of any other user who prefers a website without images. (Quasi-disabilities such as slow internet connection are not in scope in this context. That can be achieved by disabling the images in browser, if needed.)

A text version website may be useful to visually challenged users; but it will not be friendly to the users who can see. In fact, they might find such websites boring or difficult to use.

There is very old proverb – A picture worth a thousand words. A website having images with correct, sensible and comprehensive alt text will be useful to large group of website visitors including users with cognitive and visual disabilities. A website designed to make accessible to everyone might be a better choice rather than creating separate versions of a site for users with different disabilities.

Think.

Nokia N8: Is it really accessible? Find yourself

This report might concern to some people same as it initially did to my dear friend and very good tester Santhosh Tuppad -Why am I testing and writing a report for a phone which is ousted from the market? The simple reason is that I currently own only this phone and I don’t have any other option until it stops working or I loose it somewhere or somebody gifts me a latest phone. 

I have Nokia N8 with me since last two years but it was first time when I tested it from accessibility point of view - The reason is my current interest in the area of accessibility testing.

(Image Credits: http://www.livechennai.com)

Before moving to my report, I would like to share brief history of Nokia N8: (Credits: Wikipedia)

The Nokia N8 is a touchscreen-based smartphone developed by Nokia. The Nokia N8 is the first device to run on the Symbian^3 mobile operating system and Nokia's flagship device of 2010. The N8 became the product with the most customer pre-orders in Nokia's history up to the point of its release and sales in Q4 2010 have been estimated to be almost 4 million. The N8 has a capacitive touchscreen and the first Nokia phone with multi-touch.

Believing the numbers it can be interpreted that it was one of popular phones from Nokia so this report might interest to many mobile testers and phone users.

For ease of understanding, I have divided my reports into three zones: Red, Yellow and Green. Red zone is danger zone which lists the accessibility issues of the phone. Contrary to Red zone, Green zone is the safest zone which lists the accessibility features. Yellow zone is placed somewhere mid of these two.

Red Zone

No Compatibility for Hearing Aid: One of the biggest drawbacks of Nokia N8 from accessibility  perspective that it doesn’t not provide compatibility with Hearing aids which could have helped user with Hear loss.

Voice Command: Nokia N8’s Voice Command feature seems most problematic area to me. There is no hard button for Voice Command which makes it difficult to use for visually challenged user. Placing a shortcut can’t be helpful as user can not open Voice Command by giving a voice command. Other drawbacks which I noticed are:

• The shortcut buttons are small in size which can make it difficult to use for user with partially eye sight / motor disabilities.
• It has limited functionality. You can use it for single word basic commands, don’t expect much from this.
• The other most irritating feature is that it auto closes after 5 seconds. User needs to enter commands within 5 seconds otherwise ‘Poof’. For a user who stutters (for example, stuttering which causes involuntary silent pauses or blocks) can be quite difficult to use it.

No Stylus: Nokia N8 is delivered without any stylus. A stylus can be useful for the user’s with motor disabilities and not every stylus can be used with Nokia N8 because of Capacitive Touchscreen which requires an electrical conductor such as Human body to send the signal. Such devices need special capacitive stylus to work upon.

No Screen Magnifier: A screen magnifier is a very good and one of essential tools for users with low vision but Nokia N8 is missing it. Although they  have provide Zoomer which have limited functionality  and placed in Yellow Zone.

Yellow Zone

Font Formatting: This is an area which could have been made most useful for users with low eyesight but N8 miserably fails here. N8 has feature to change the font size, which ironically, applicable on text messages only. The other text such as application labels remain same.

Also, user can use only one default font style provided in the phone. I couldn’t find any feature which changes the font style used in the phone.

Zoomer: Nokia provides Zoomer to zoom in the pictures and the text content. That’s all. You are unable to see any icon, it’s not their problem. Their is no feature of screen magnification or resizing the icons.

Screen Reader: There is no default screen reader provided in Nokia N8. Users need to install a 3^rd Party tool if they need one. Thankfully, Nokia N8 has a Message Reader which can read inbox messages for user.

Green Zone

The features listed in green zone might be common to any other smart phone but they definitely need a mention here.

Alert: N8 can alert user in many ways according to user’s preference. It has different alert options like Ringing, Vibrating, Flashing which finally adds some plus points to its credits.

Conversation: Messages are displayed in conversation form. It means a user can view complete conversion made with another user quickly without any hassle. This feature can be useful for users with bad or short term memory.

Help: This is the feature which I liked most about N8. It provides relevant help on every single screen. Help is just one tap away from the user.

Shortcut: Although, this feature doesn’t seem anything special for a smart phone but I believe it as one of the important accessible feature. It helps user to open an application quickly and avoids the longer path. Important feature for users with motor disabilities.

Consistency: The phone has consistent functionality on each screen.

Associating Caller’s Image and Tone: User can associate caller’s image and separate tone with the number which could help user to identify caller easily. The feature can be useful for short term memory and visually challenged users.

Compatible with Text Phones: N8 is compatible with the Text Phones. A text phone can help user to type and read conversation during a call, rather than using speech and hearing communication.

***************************************************************************************

Conclusion: Nokia has provided some basic accessible features in N8 which every other phone in market have. They should give more importance to accessibility and usability in their new upcoming phones if they really want to have an edge over other mobile giants such as Apple or Samsung.

Hope you find this post useful and informative. Please share your feedback in comment section.

ALT Text - Alternative, Not Optional

When, as testers, we talk about testing a web application for accessibility, first test which comes in mind to verify the alternative text for the images available on the webpage and why not? - After all, it is one of the simplest and most important tests to perform.


The alternative text is meant to provide the information about the image to the users who are visually disabled and using the screen readers or text browsers or who have disabled the images in their browsers. An alternative text should only provide the information what the image is all about and unnecessary information should be avoided.

An alternative text

• should be written based on context of the image and content. Providing a description is not necessarily useful every time. For example, following alternative text is detailed enough - “A horizontal rectangular flag with three colours in order of Saffron, White and Green with a 24 spoke wheel in Navy Blue at centre” but it will take time for user to process all provided information. Instead, “Indian Flag” or “Tricolour” or “Flag of India” could make more sense to user.

•  should be set as Null for decorative images and images which do not convey any information. Providing unnecessary information slows down the browsers which render the images into speech or Braille output. Moreover, it will frustrate the user.
  The decorative images should be used in CSS instead of HTML. For some reason if decorative image is being used in HTML, don’t forget to set ALT attribute as NULL.

Now, we will see how alternative text renders in different browsers: For example purpose, we have stripped of a section of the Infibeam home page. Here, our point of concentration is “Magic Box” image as highlighted in the below picture:

Original Image:

In below section of this blogpost, we will see how the images are displayed in different browsers:

IE9

Scenario 1: Disabled Images with alternative text

Scenario 2: Disabled Images without alternative text

Mozilla Firefox

Scenario 1: Disabled Images with alternative text

Scenario 2: Disabled Images without alternative text

Google Chrome

Scenario 1: Disabled Images with alternative text

As depicted above, Google Chrome is unable to render the alternative text if image is disabled which makes users unable to read the content who have disabled the images for any reason. Here, web content is made accessible but user agent is not accessible. Hence, Accessible User Agents is also an important factor for making web accessible.

Personally, I liked the way how IE9 depicted the information to its user compared to other user agents.

There are few misconceptions about ALT attribute which I would like to mention here:

• ALT is not an HTML tag, it is an attribute of IMG tag. The term tag is commonly misused with ALT and should be avoided.
• Alternative text is not optional for Images available on a webpage. According to HTML 4.01 specification, the ALT attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
• ALT and TITLE attributes are not interchangeable. In days gone by, browsers used to render the text in ALT attribute as Tool Tip Text instead of TITLE attribute which is intended for that purpose. The issue is fixed in new versions of the browser.

Complex images:

Sometimes, an image might be too complex for user and may require descriptive information for example a complex chemical structure of an element or a map or a char. We can provide the information by the mean of ALT text but a long description by screen reader doesn’t sound well in between of main topic. User might also lose track from original document. In such scenario, user must facilitate with different attribute.

One such attribute is LONGDESC which is purposely used when a long description is needed to explain the image. LONGDESC attribute of image tag must contain the URL of the page where description of image is available and should not have description text itself. Although, LONGDESC is useful but it is not supported anymore by major browsers and subsequently, has been dropped from HTML5 specification.

The other way around is to use the D-Link which is also out of fashion. The D-Link is a normal text link hyperlinked with long description page. The D stands for Description. See below how it can be used.

When user clicks on link [D] in the below screenshot, it will be redirected to “LONGDESC.html” page.

As both methods mentioned above are not in use anymore, the best and effective way is to provide the description along with the image itself and it will benefit everybody.

Why This Kolaveri?

One of the most innovative discovery of 20th Century is the world wide web and by the starting of 21st century, means in the era we are living, it has become life line of most of the business and non business activities. Statistics says that number of internet users  in 2012 has increased by more than 500% from the users in year 2000. If I take my example, I was not using internet in 2000 but now, most of the time, I am connected to internet. There are multiple things which I do regularly on web:

• Earning - My job is totally dependent on Internet.
• Mails/Chat – All business and personal communications
• Connecting with friends through different Social Networking
• News
• Entertainment – Music, Movies, Games
• Study and blogging
• Shopping
• Travel planning and bookings
• Bank Transactions
• etc.

The list is long and I am sure most of you are also using the web for same or different purposes. So, We live in a world which runs over cloud. Imagine a day when you wake up in the morning to find out that you can’t use the web and the reason is neither technical nor electric but physical and you can’t do anything to fix this. What will you do?

I have a story before coming to the main point.

Once Upon a time: Thousands year ago, there was a blind king named Dhritarashtra who is father of Kauravas, his hundred sons. Then, the famous war of Mahabharata between Pandavas and Kauravas started at Kurukshetra. As the king was blind he couldn’t go to war but being a father and a king he wanted to get every news from the war field. Dhritrarashtra had an advisor and charioteer named Sanjaya, who had the gift of seeing events at a distance granted by the sage Vyasa, he narrated to Dhritarshtra the action in the climactic battle of Kurukshetra. So, with the help of Sanjaya, Dhritarshtra could get update of every single second of war field.

That was a different time but need of Sanjaya is still there. Looking at the dependency on web, it could be quite difficult to survive without Sanjaya but having Sanjaya as assistant could be quite costly so we need an alternative in form of web accessibility.

Web Accessibility: For me, Web accessibility is about making the web possible for everybody – people with all abilities and disabilities. There are multiple kinds of disabilities which Web accessibility should address:

• Visual
• Motor/Mobility
• Auditory
• Cognitive/Intellectual
• Seizures

So, we have an option to survive provided web accessibility but unfortunately, most of the websites and web software available have accessibility barriers which make it difficult or impossible for people with special abilities or disabilities to use the Web.

Why This Kolaveri? – Developing an accessible website is not a rocket science; the only reason which has built up this barrier is Ignorance. Most business people claim that their sites aren't used by people with disabilities, so they don't need to pay attention to web accessibility but this is most ridiculous claim ever made and there is no basis of this claim. When constitution of our country gives the right of equality then who are me, you and anyone else to take that away.

The other crucial reason is lack of awareness, the same reason which prompted me to write this blog post.

Here is few statistics data which I collected from various websites. This data should be an eye opener for all those business people who only trust numbers. Below are the numbers of incidence of disabilities recorded by government agencies in different countries

1. New Zealand, 20% of the population (Statistics New Zealand, 2001)
2. United States, 19.3% of the population (US Census Bureau, 2000)
3. United Kingdom, 18% of the population (National Statistics, 2001)
4. Australia, 17% of the population (Australian Bureau of Statistics, 2003)
5. Canada, 12.1% of the population (Statistics Canada, 2001)
6. European Union, across the 15 EU countries in 2001, 19.3% of the population was hampered by physical or mental health problem, illness or disability, with 9.3% severely hampered. (Eurostat, 2003)
7. One in every two Americans of 65 and above has a disability.
8. Nearly 30% of all families in the U.S. are affected by a member who has a disability.
9. People with disabilities boast a population of 54 million and have a discretionary income of more than $175 billion – that’s nearly twice the buying power of the teen market

Why Stop This Kolaveri?: If the statistics data provided could not change your mind, I have other reasons for you to stop this Kolaveri.

• Social Responsibility: Humanity is one of the qualities which keep us human above anyone else. As a human being we should make sure to provide a better and independent life to those who need it. For web users, we can do it by providing the accessibility on our website.
• Grow your Business: More users mean more business and providing web accessibility can bring more users on your website.
• Save your Ass: If above two reasons are not good enough; that only means you are one of the tough nuts to crack and we have one fool proof reason for you: Most of the countries has some standards to regulate the web accessibility. If you are working from such country – better go for web accessibility rather than getting screwed your ass someday.

A single blog post is not sufficient for this topic so I will be publishing some more blog posts on accessibility testing in coming days. Please let me know your feedback and suggestions on the same by yours valuable comments. Don’t forget to share if you liked it.

Come, Let’s make web a place accessible to all.

References:

• http://www.internetworldstats.com/stats.htm
• http://www.usability.com.au/resources/statistics.cfm
• www.wright.edu/web/access