Creating Accessible Modal Dialogs

In the previous article we have seen what 'Modal Dialogs' are, and how can we create simple dialogs. Basically we create a modal dialog by calling a JavaScript function in the href attribute of an anchor tag.

<a href="javascript:OpenPopUpPage();">Open Dialog</a>

Modal Dialogs created using this approach are not accessible. What if the end users have JavaScript disabled? The anchor tag (which is supposed to open the modal dialog) will not function as expected.

To solve this, we can make the anchor tag as a simple link to the URL (which we want to be opened in the modal dialog). And using jQuery we should manage the behavior of this anchor tag. If JavaScript is disabled, it acts as a simple link, and when JavaScript is enabled it opens the page in a modal dialog.
Please visit the jQuery home page to know about its usage.

To bring this to action follow the below steps.

• Get the jQuery script library and attach it to the master page or page layout where you want the accessible modal dialog to be created.
• Create the anchor tag to the URL (which is to be opened in the modal dialog) with some unique CSS class.
  <a href="http://www.spdeveloper.co.in" class="sp2010-dialog">Show Dialog</a>
• Create a JavaScript file with the below code

(function($){
  $.fn.sharePop = function(){
    if(typeof OpenPopUpPage == 'function'){
      return this.each(function(i){
        if($(this).attr('href') != null){
          $(this).click(function(e){
            e.preventDefault();
            OpenPopUpPage($(this).attr('href'));
          });
        }
      });
    }
    else{
      return false;
    }
  };
})(jQuery);
$(document).ready(function(){
$('.sp2010-dialog').sharePop();
});

• Attach this JavaScript file to the page where we want the modal dialog (the page in which the anchor tag for modal dialog is to be shown).

So, when a user opens the page, the link renders as a simple navigation link. And if JavaScript is enabled, then the jQuery function (shown above) will execute. This method will override the default behavior of all the anchor tags having class name as 'sp2010-dailog', and opens the link in a modal dialog. So, this becomes an accessible modal dialog link, as users and search engines which do not use JavaScript can still view the content.