Web Accessibility 103 – Forms

    When a user using screen reader, visits a page that has forms, the screen reader enters into this special mode called “Forms Mode”.

The screen reader tries to match the form elements with corresponding labels. Such as if you have input element (except button), the screen reader will try to find a <label> element or a title attribute.  When it finds the matching label tag for the input element, it will read the input element and the label together so it will make sense to the user.
Let’s assume you have the code below:

<p>First name: <input type='text' id='fname' name='lname'></p>

As you can see we didn’t put the label tag for the text. When the screen reader hits this part; it will say “First Name” and it will say textbox, but no details about the textbox. A sighted person can visually make the connection between the First Name and the textbox; however a user who needs screen reader may not be able connect this 2 elements.

The right way to do this is :

<p><label for='fname'>First name:</label><input type='text' 
id='fname' name='fname'/>

What we did is to add a label for the input. The id we write for label for has to match with the id of the input element.
Now the screen reader has enough information to make a relation with the input element and what this is for. When the screen reader hits this place, now it will say input text for first name, and the user will understand the form elements better.

What if we can’t put a label for the form element? Such as we have a 3 textboxes that will make up a date. Below is the code:

Date of Birth: <input type='text' id='month' name='month' maxlength='2'>
 <input type='text' id='day' name='day' maxlength='2'>
 <input type='text' id='year' name='year' maxlength='4'>

We can not have 3 labels for each of the input element, as it will look ugly, but also we want to make this form accessible to all users. So what do we do? Now we can use title attribute of the form element to help the screen reader.  Here is the fixed form:

Date of Birth:<input type='text' id='month' name='month' maxlength='2'
               title='Date of Birth Month'/>
<input type='text' id='day' name='day' maxlength='2'
               title='Date of Birth Day'/>
<input type='text' id='year' name='year' maxlength='4'
               title='Date of Birth Year'/>

This time we put title attribute to the input elements, to help the screen reader understanding what these input elements are about. You should prefer label for whenever possible and use titles if labels are not applicable. There is also a nice benefit when you use labels, whenever the user clicks on the label text, the browser will move the cursor to the corresponding form element, think how useful this is with checkboxes.

Another things to be watch out when making forms accessible is the required fields, their location, error message etc. Assume you have a form where user can create an account for himself, and this form is asking first name, last name and email. All these 3 fields are required, and if the form fails the validation (such as the email is not valid, first name is left blank etc), you put an error message right below the form.  Now when a user who uses a screen reader, fill this form, and submits the form; if he makes a mistake filling the form element or writing his email wrong, he may be confused. After the form submission the screen reader will the read form again, so user knows he is still on the filling form page, after reading the input elements, the screen reader will read the error message. The user has to listen to the form that he filled in again before he listens the error message, after listening the error message tab back into the form element to fix it. Sighted person can easily skip the form, and concentrate on the error message, however a blind person has to listen the form again. If you move the error message right above the form, now whenever the form fails to validate, user know what has failed, and can tab into the form element to fix it.

As you can see forms requires little more special attention to make it accessible however it is still pretty simple.

Tags: , ,

E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


Web Accessibility 102 – Skip Navigation

    Yesterday I talked about Web Accessibility 101 - Images, and today I will be talking about skip navigation.
    If you have a repetitive navigation on your website, then you should supply a method to your users to skip these navigation links. First let’s try to understand why the people using assistive technology needs a skip navigation.
Let’s assume your user is a visually impaired person, and he uses a screen reader. Your website has probably either an upper menu, left menu or right menu. The first time visually impaired person visit the page, he listens the pages (screen reader reads the page), including the navigation section of your page. He clicks or selects one the links on the menu, and new page has the navigation of course, and the user listens the navigation again before he gets a chance to listen the content. So every time the user selects a link on the site, he has to listen the same navigation again and again. 
    You have 2 options to help your user to reach the content without listening the navigation all the time. One method is the old method which is putting a skip navigation link on your page as the first item. This link could be 1 pixel image link on the top-left of your screen that takes the user to the body part of the page. This also helps the people that visits your page with their mobile phones as they can skip everything to the content.
You don’t have to put only 1 skip navigation link on your site, you can put as many as you want. Actually in one of my projects, I had to use 3 skip navigations. The first one was to jump from the upper company menu to the department site content, the second link is to skip the department site navigation, and the third one is to skip the filter options on the page.
An example code for the skip navigation could be like this:

<a href="#mainContent"><img src="/images/skipNav.jpg"
alt="Skip to Main Content" ></a>

and at the beginning of the your content part:

<a name="#mainContent"/>

Another solution is using header on your page which will a topic of another blog post as there is more than skipping the navigation with headers, however a small tip is : if you use h1,h2..h6 in your pages, users can easily navigate on your page using these headers.

Have fun making your site accessible :)


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


Web Accessibility 101 – Images

    If you work for any federal agency, or you sell a product to a product to a federal agency, this product must be complained with Section 508 Guidelines. Although Section 508 guidelines covers a lot of stuff, I will be talking about Web Accessibility. So I will assume you either work for federal agencies (universities, colleges …), or you sell products to these organizations, or simply you want to target everybody as your potential client and you want to be accessible. There is so many things when it comes to accessibility, so in this post I will only cover images.

    When a visually impaired person visits your site, he may not see the images, or he may disable the images, he may be using a screen reader to surf your site. You have to accommodate his needs, and give him a chance to visit and understand your site as much as you accommodate a sighted person. How will you achieve this?

  • Your images that have a content should have an alt attribute that explains what  the image is.
    Bad Example: <img src=”/images/acrobat.gif”> or <img src=”/images/acrobat.gif” alt=”acrobat”/>
    Good Example: <img src=”/images/acrobat.gif” alt=”Acrobat Pdf Logo”/>
    As you can see not having an alt attribute and  a bad description in the alt attribute is not accessible.
    Put yourself in the shoes of a blind user, who is visiting your site with a screen reader, this will help to improve your common sense.
  • If you are using the images for decorative purposes, you should put an empty alt attribute to the image tag.
    Bad Example: <img arc=”/images/background.gif”/>
    Good Example: <img src=”/images/background.gif” alt=””/>
  • If you have a complex description for your image, that you can not possibly use alt attribute to describe the context, use longdesc attribute of the image. For example if your image is a graph that shows the monthly sales, for different departments, it will be very difficult to explain this graph in the alt attribute. Luckily image has a longdesc attribute, you can link to another text or html file for more description. Here is an example:
    <img src=”/images/JanuarySales” alt=”January Sales per department” longdesc=”/reports/januarysales.htm”/>
  • If the images are disabled from the page, you should not lose any of the content from the page. Sometimes this happens because the image does not have an alt attribute, or the image is used as  a background decoration, and the front text color is same as background color and text disappears.

It is easy to test your page for this type of violation,  simply disable the images from your browser, and see if you still get the content :)


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


Silverlight, WCF, SecurityAccess Error?

    I am working on a small Silverlight project where I have to make a web service call to a remote server and display the returning data. I don’t have any control on the remote server, and unfortunately the remote server doesn’t have the necessary cross domain access policy file. In case you don’t know what this is file(s) is; Silverlight can make calls back to the domain that hosts the Silverlight control. However when you want to make a web service call to other domains such as Facebook, Twitter, Amazon, Flickr etc; you need have a special permission file in those servers: Clientaccesspolicy.xml or Crossdomain.xml. This file must be at the root of the remote server (Note: If the clientaccesspolicy.xml is not in the root, you will get a security access exception). Not all the time you can ask somebody to put the file on their servers, so then what?

    You may find different solutions, including trying to get the cross domain access policy file to be put on to the server; but if you can’t, maybe you can use proxy design pattern. In this design pattern, you create a proxy object, and your application communicates with this proxy object, and your proxy object communicates with the actual object. Basically your proxy is the messenger in between; however you can put business logic here in the proxy, that you possibly can’t in the actual object.

    In my scenario what I decided to do is, create a WCF service on the host the Silverlight app is running, create the clientaccesspolicy.xml on this domain, so the Silverlight app can access the WCF service. WCF is acting like a proxy here; and it is calling the actual web service on the remote server. After  I created the WCF project, and created the clientaccesspolicy.xml file, I ran the app, and got the security access exception error!!. Spending some google time, and trying different variations of unlimited number of solution offers, my problem is solved with 3 things.

  1. When you out the clientaccesspolicy.xml file on the WCF project, change its copy to output directory option property to Copy always
  2. If this is a WCF service, make sure in the clientaccesspolicy.xml file, you have:
    <allow-from http-request-headers="*">
    in stead of :
  3. Silverlight supports basic binding, whereas default WCF binding is wsHttpBinding; so go to web.config on the WCF service project and change the binding from wsHttpBinding to basicHttpBinding.

Tags: , , , ,

E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses



I am working on an open source blogging project (with mvc). I try to contribute this as much as I can with TDD approach. Today; I came to a situation that List.ForEach() really helped me to save some lines of code; and I decided to share this :). The project has an entity called Post which represent a post in a blog; and this entity has a field "IsApproved" which basically determines if this post should be displayed or saved but not displayed. The controller has an action method "List" that generates the posts; and send it to the View; however; I would like to test List so that It only sends the IsPublished==true posts to the view. Simplified List method is :
public ActionResult List()
    return View("List",postRepository.Posts.Where(p=>p.IsApproved==true));
My test function for this is:
public void List_Should_Only_Pass_Approved_Posts_To_View()
    IPostRepository repository = new FakePostRepository();
    PostsController controller = new PostsController(repository);
    var view = (ViewResult) controller.List();
    var posts = view.ViewData.Model as IQueryable<Post>;
     posts.ToList().ForEach(c => Assert.True(c.IsApproved == true));
I had to iterate through the list of Posts and confirm that, each of these posts have IsPublished=true. Instead of writing a foreach loop and calling assert for each post; I decided to ListForEach().

Let’s goto MSDN and checkout “List<T>.ForEach()”';  according to the definition; this function performs the specified action on each element of the List<T>; and the declaration of the function is:

public void ForEach(
    Action<T> action

Basically it is taking Action as a parameter; and calling this for each element of the List. In case you are not familiar with this delegate; it is basically any function that takes a single parameter and does not return anything. Going back to my test function; I should be Asserting each element and checking if IsPublished==true or not. An Action<T> delegate could easily be c=>Assert.True(c.IsApproved==true)).
Assert.True(bool condition) is a function which returns void; and takes only 1 parameter which a condition; so I can pass this to the ForEach function and test my assumption.


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


How productive am I?

   I am a software engineer (nowadays everybody calls themselves as engineer; but when I ask them about the measuring, calculating their metrics; they usually can’t answer; if there is no metrics; there is no engineer), and I was thinking how productive am I during a day. I couldn’t find a good metric for myself to answer this question.

I am a member of Inland Empire .NET user group and our user group has incredible number of raffle offs. I am not bragging but I visit 3-5 user groups in a month; and I compare it :). A few months ago, I won TimeSnapper tool; and decided to give it a try. It is a very simple too that runs in the background, and takes snapshots of your desktop in a frequency that you determine. You can also set the applications as a productivity tool; such as in my case I mark Visual Studio, google.com, outlook as productivity applications. The application monitors the processes that are running and comparing it with the list of productivity applications. Anytime you want; it tells you how productive you are by comparing your list and running programs. You can also replay the snapshots to see your day :).

After running this tool for 3 weeks; I wanted to see my productivity ratio, and I got ~65%. This means during an 8 hour of working day, I do 2.4 hours not work related stuff . TimeSnapper also considers the time that you are not using your computer; so being in a meeting and not using your computer does not decrease your productivity. This is a pretty low number for me; and I thought about ways to increase this number. During a day; facebook; twitter; msn messenger; forum.ceviz.net (a turkish forum about programming), stackoverflow.com are the items that take most of my time. I decide to cut my time for these things; but some of them are addictive :). It is an easy task to disable my network connection; so that I can concentrate on programming more;  and enable it for 10 mins every other hour or so; however it is not that easy as I use google.com a lot. Also I get calls during the day about a site that is not working right.

So to cut the long story short; I don’t have a quick solution for this; but I decided to cut back my time on facebook,twitter, msn, forums starting in August at last %50. Let’s see how this works :)


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


A Bug in ASP.NET CheckboxList

I work for a state university; which requires our websites to be compliant with Section 508 guidelines. It is not that much of a work you have to do; if you follow a few things while you are coding. One of the requirements of this guideline is; if you have checkboxes and no text next to them (think like a table where in the column header it says:”Click if you will attend”; and checkboxes in each row); then these checkboxes should have title attribute with a description value. The reason behind this requirement is; if a blind user is visiting your page; they wont see the table layout; and relate the checkbox with the column header. So in this application that I was working on; I had asp.net checkboxlist control on the page; and in the codebehind file I was creating the ListItems dynamically and adding them to checkblostlist as below:

ListItem li = new ListItem(String.Empty, program.ID.ToString());

It is a simple code that just inside a loop; ListItems are created; adding the title attribute to them; and then they are being added to CheckBoxList. I was so sure that the above code will generate “<input type=”checkbox” title=”… I didn't even test it.

A few days after the code was published; our compliance officer called me; and reminded me that I needed to put the title attribute to the checkboxes !!!. I opened the website in my browser; and checked page source view; and was shocked. The asp.net framework was wrapping the checkbox with a span block; putting the title to the span block; and not putting any titles to checkboxes; so what i was getting: “<span title=”some title”><input type=”checkbox”…. I could get around this; so I decided to send an email to Scott Hanselman who is really a great guy and helpful person. He  kindly forwarded my email to some other people at Microsoft probably working at the ASP.NET team. Scott Galloway contacted me; and told me that this is a bug with checkboxlist which is an old control hence does not follow the pattern of adding controls for each row. After Scott Galloway; Eilon Lipton sent an email too; this time he gave some explanation why this control does not work. Here is his explanation:


The CheckBox has two collections of attributes:

1. The “Attributes” collection that gets applied to the <span>

2. The “InputAttributes” collection that gets applied to the <input>

Unfortunately the CheckBoxList only allows you to modify Attributes and not InputAttributes.

So to cut the long story short; both advised me to use a repeater to generate checkboxes; which I could do; but I also asked help from my friend James Johnson before I contacted Scott Hanselman. He helped me and coded  a simple jquery function that iterates through the checkboxes; getting the title from the wrapping span tag; removing it from there to checkboxes.

I thank everybody who helped me.


E-mail | Permalink | Trackback | Post RSSRSS comment feed 1 Responses


Code Snippets

If you are using Microsoft Visual Studio, you are probably used to code snippets, which is kind alike code generation with a few keystrokes. Visual studio comes with a hand full of code snippets, however there are still sometimes where you may want to have your own code snippets. Unfortunately I never found writing code snippets easy, so I usually was skipping my attempts to write a code snippet.

Today i found this open source project at codeplex: Snippet Designer.
It is exactly what I was expecting to have for a long time :) as creating a code snippet is very easy now. I am also practicing TDD (test driven development) for some time,and below is my most popular line of code :

throw new NotImplementedException("Write a unit test");

I write this simple line to compile the code but also fail the test, and I can't tell you how many times I write this simple 1 line.
Today, I installed Snippet Designer tool, and I was checking out a simple way to create a snippet for the above line, and boom it was right there :) I wrote the line, select the line, right click , and the menu was there for me: “Export as Snippet”. I clicked on this, and the next step was this:


It is a straightforward window to fill. The most important part for me is the shortcut section, in my example I wrote “tddnot” so that whenever I write “tddnot” in the visual studio editor and hit tab, I get my most popular line :)

What if you want to have a place holder? Such as you want to have a codesnippet for a test function, and as you are using NUnit you want to have [Test] decoration around your function. I opened one of my existing test functions, highlighted the function, right click on it and click Export as Snippet menu.

This time I highlighted my function name, right click, and select  Mark as Replacement. So whenever you write your code snippet shortcut, you can tab to your Mark as Replacements and change them quickly.

Below is my code snippet for Nunit Test Class that I created using Snippet Designer, and believe or not, it took me less than 1 minute to create this file :)

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
        <Keyword>NUnit Test Template Project</Keyword>
        <Literal Editable="true">
        <Literal Editable="true">
        <Literal Editable="true">
        <Literal Editable="true">
      <Code Language="csharp" Kind="method decl"><![CDATA[using System;
using NUnit.Framework;
namespace $SomeNamepace$
    public class $SomeTestClass$
        public void $InitializeTest$()
        public void $SomeTestFunction$()


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


Replace Nested Conditions with Guard Clauses

   I am reading “Applying Domain-Driven Design and Patterns with Examples in C# and .NET” by Jimmy Nilsson. I am at the very beginning of the book, and the book already is proved to be very useful for me. I put a post-it page with a small note on it, reminding myself what i should be checking out after I am done with the book. This book has already gotten a lot of post-its :)

One of my notes has this on it: “Replace Nested Conditions with Guard Clauses” (Martin Fowler Refactoring). I search on this phrase, and basically this is what it means I guess:
Let’s say in your code you have some if-else clauses, usually what if-else clause says, each possibility (if being true, or if being false) has almost the same weight, even whatever you are testing in one branch  is a rare condition.

Below is a calculator class, that can  divide numbers:

public class Calculator
    public int Number1;
    public int Number2;
    public Calculator(int Number1, int Number2)
        this.Number1 = Number1;
        this.Number2 = Number2;
    public Calculator():this(0,0){}
    public double Divide()
             throw ArgumentException();
         else if(Number1==0)
              return 0;
            return (double)Number1/Number2*1.0;

This is a simple class, and divide function, first checks the numbers, and throws exception or returns 0 or returns division. There is 1 if clauses with 2 else clauses. We first check if Number2 is zero or not, as any number divided by zero will throw runtime error, this  check is an unusual condition check, as the application is not expecting a zero, and shouldn't get one. This unusual conditional  should be not followed with an else clause, but return back the caller. This is called a guard clause, so if we refactor the divide function we will get this:

if (Number2==0)
    throw new ArgumentException();
    return 0;
return (double)Number1/Number2*1.0;
This new code is clearer, easier to understand and maintain :)


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses


Strategy Design Pattern

Strategy design pattern is a behavioral type of design pattern that allows to change the algorithm (strategy) to your solution dynamically. Here is a uml diagram of the pattern (Wikipedia Image)


So we have 3 main actors in this design pattern.

  • Actor #1: The Strategy: Usually an interface or abstract class  that has the signature for the function we want to change dynamically.
  • Actor #2: ConcreteStategy: The classes that implement the function that is introduced by Actor #1
  • Actor #3: Context: The client that uses actor #1 to call the functions at actor #2

Let’s come up with a few scenarios where we can implement this pattern.

Assume your application has a Notification features, depending on some configuration, this notification could send an email, page somebody, call somebody, log it to the database, log it to the event log etc…

If you don’t separate these different functions from the context, than you will have a huge switch case. Instead you can have an interface INotifyUser with a single SendMessage functionality such as:

   1:  public INotifyUser
   2:  {
   3:      public void Notify(string NotificationMessage)
   4:  }

This is our actor #2, the strategy. Our next actor could be the concrete strategies, such as the classes that implement this interface.

   1:  public class SaveToDatabase: INotifyUser
   2:  {
   3:      public void Notify(string NotificationMessage)
   4:      {
   5:           // Write to database code comes in here
   6:       }
   7:  }
   9:  public class EmailToUser
  10:  {
  11:      public void Notify(string NotificationMessage)
  12:      {
  13:           //Email to user code comes in here
  14:       }
  15:  }
  17:  public class SMSToUser:INotifyUser
  18:  {
  19:      public void Notify(string NotificationMessage)
  20:      {
  21:           //SMS code comes in here
  22:       }
  23:  }

After we have our strategy, and the concrete classes, all we need is a context that will use the interface to swap the algorithm dynamically. If you are C# developer, you can see a similarity with this pattern and delegates, lambda expressions too.

Our context could be SystemFailure class which has dependency on the interface and call the Notify function. I took the example from Dimecasts.net and modified it so that it fits into my solution.

   1:  public enum SystemNotifier
   2:  {
   3:    SaveToDatabase,
   4:    EmailToUser,
   5:    SMSToUser
   6:  };
   8:  public class SystemFailureLog
   9:  {
  10:    var _Notifiers = new Dictionary<SystemNotifier,INotifyUser>();
  12:     private void CreateNotifiers(){
  13:       _Notifiers.Add(SystemNotifier.SaveToDatabase,new SaveToDatabase());
  14:       _Notifiers.Add(System.Notifier.EmailToUser,new EmailToUser());
  15:       _Notifiers.Add(System.Notifier.SMSToUser,new SMSToUser());
  17:    public SystemFailureLog(){
  18:      CreateNotifiers();
  19:     }
  21:     public void NotifySystemFailure(SystemNotifier strategy,string message){
  22:        _Notifiers[strategy].Notify(message);
  23:     }
  24:  }

As you can see, the context, has a dictionary that holds different strategies, and by passing an enum value, you can dynamically change what functionality you will be using.

How can we use this? Imaging, you have a system monitoring tool, and the first time system fails, it uses SystemFailireLog and calls save to database function, the second time system fails, email to user, and maybe third one is sms to user.

public class SystemWatchDog
  public static int FailureCount = 0;
  private SystemFailureLog _FailureLogger = new SystemFailureLog();

  public void ReactToSystemFailure()
     FailureCount = FailureCount++;
                String.Format("System failure, restarting at {0}",DateTime.Now);
     else if (FailureCount ==2)
                String.Format("System failure, restarting at {0}",DateTime.Now);
                String.Format("System failure, restarting at {0}",DateTime.Now);
Have Fun :)


E-mail | Permalink | Trackback | Post RSSRSS comment feed 0 Responses