How to create accessibility option in HTML or asp.net website ?


Accessibility

Hi
So many time we will get scenario to create accessibility option in HTML or asp.net website. Where user can change the color or font of all web pages of html and .aspx page.
We can do this task using 2 approaches
1. Using LocalStorage or SessionStorage feature of HTML 5.0
2. Using Cookies in Javacscript.
If you have to implement this feature in IE8 onward browser then using localstorage or session storage will be very easy.
If you have to implement in all older version browser then cookies approach is the best option
We can do this task like this. I have written this code on basis of my requirement.

Step1: Create the HTML page like this for HTML website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleAccessilility.css" rel="stylesheet" type="text/css" />
    <script src="Accessilility.js" type="text/javascript"></script>

    <script type="text/jscript">
        function getRadioCheckedValue() {
            var rblopts = document.getElementsByName("group1"); 

            if (rblopts[0].checked) {
                FontSize('FontSmall');
                // alert('Small');
            }
            if (rblopts[1].checked) {
                FontSize('FontMedium');

            }
            if (rblopts[2].checked) {
                // alert('Extra Larger');
                FontSize('FontLarge');
            }
            if (rblopts[3].checked) {
                // alert('Extra Larger');
                FontSize('FontExtraLarge');
            }
            //code for color change
            var rbl1 = document.getElementsByName("group2"); 
          
            if (rbl1[0].checked) {
                //ColorSilver
                ColorChange('ColorHighContrast');

            }
            if (rbl1[1].checked) {
                ColorChange('ColorStandard');
            }
        }
       
    </script>
</head>

<body onload="GetColorChange();GetFontSize();">

<input type="radio" value="Small" id="radio1" name="group1" /> Small    
 <input type="radio" value="Medium" id="radio2" name="group1" /> Medium   
  <input type="radio" value="Large" id="radio3" name="group1" /> Large 
  <input type="radio" value="X-Large" id="radio4" name="group1" /> X-Large
 <br />  <br /> 

 <input type="radio" value="Small" id="radio5" name="group2" /> High Contrast    
 <input type="radio" value="Medium" id="radio6" name="group2" /> Standard Contrast 
  <br />  <br /> 
<input type="button" id="btnClik" value="Click Here" onclick="getRadioCheckedValue();" />  

    <div id="DivColor">
    <div id="DivFontSize">
    Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad. 
    Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  

        <br />
        <br />

    </div>
    </div>

</body>
</html>

For aspx page design and javascript code will be like this


<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link rel="shortcut icon" href="http://www.domain.com/iconname.ico">
    <title></title>
    <link href="StyleAccessilility.css" rel="stylesheet" type="text/css" />
    <script src="Accessilility.js" type="text/javascript"></script>

    <script type="text/jscript">
        function getRadioCheckedValue() {
            var radio1 = document.getElementById('<%=RadioButtonList1.ClientID %>');

            var rblopts = radio1.getElementsByTagName("input");
            if (rblopts[0].checked) {
                FontSize('FontSmall');
               // alert('Small');
            }
           if (rblopts[1].checked) {
               FontSize('FontMedium');
            }
           if (rblopts[2].checked) {
            // alert('Extra Larger');
               FontSize('FontLarge');
        }
        if (rblopts[3].checked) {
            // alert('Extra Larger');
            FontSize('FontExtraLarge');
        }
        //code for color change
        var radio2 = document.getElementById('<%=RadioButtonList2.ClientID %>');
        var rbl1 = radio2.getElementsByTagName("input");
        if (rbl1[0].checked) {
            //ColorSilver
            ColorChange('ColorHighContrast');
        }
        if (rbl1[1].checked) {
            ColorChange('ColorStandard');
        }
    }
    function EnableColorChange() {

        var radio2 = document.getElementById('<%=RadioButtonList2.ClientID %>');
        var rbl1 = radio2.getElementsByTagName("input");
        var y2 = GetColorChange();

        if (y2 == "ColorHighContrast") {
            rbl1[0].checked = true;
        }
        else if (y2 == "ColorStandard") {
            rbl1[1].checked = true;
        }
    }
    

    //on page load for applying the font size on all pages
    function EnableFontSize() {

        //  var size = window.sessionStorage["myKey"];
        var radio1 = document.getElementById('<%=RadioButtonList1.ClientID %>');
        var rblopts = radio1.getElementsByTagName("input");
              var y = GetFontSize();
                if(y == "FontSmall")
                {
                    rblopts[0].checked = true;
                }
                else if (y == "FontMedium") {
                    rblopts[1].checked = true;
                }
                else if (y == "FontLarge") {
                    rblopts[2].checked = true;
                }
                else if (y == "FontExtraLarge") {
                 rblopts[3].checked = true;
                }
            }

    </script>


    <style type="text/css">
        .style1
        {
            width: 100%;
            font-size:25px;
            background-color:Blue;
        }
    </style>


</head>
<body onload="GetColorChange();GetFontSize();EnableColorChange();EnableFontSize();">

    <form id="form1" runat="server">

          <div>
            <!-- #BeginEditable "content" -->
            <h2>
            ACCESSIBILITY OPTIONS
            </h2>

            <div>
         
                <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                    <asp:ListItem>Small</asp:ListItem>
                    <asp:ListItem>Medium</asp:ListItem>
                    <asp:ListItem>Large</asp:ListItem>
                    <asp:ListItem>X-Large</asp:ListItem>
                </asp:RadioButtonList>
                <br /> <br />

                 <asp:RadioButtonList ID="RadioButtonList2" runat="server">
                    <asp:ListItem>High Contrast</asp:ListItem>
                    <asp:ListItem>Standard Contrast</asp:ListItem>
                    
                </asp:RadioButtonList>
          
                <br />
                <asp:Button ID="Button3" runat="server" OnClientClick="getRadioCheckedValue();" 
                    Text="Button" onclick="Button3_Click"  />
                <br />
          
            </div>
            <!-- #EndEditable "content" -->
        </div>
    <div id="DivColor">
    <div id="DivFontSize">

    Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad. 
    Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad  


    </div>
    </div>


   
    

    </form>
</body>
</html>

.

Step 2: Write the CSS in external css like this

    body 
    {
    
    
    }
    html
    {
     font-family:Tahoma;
     font-size:12px;
    }
    .FontSmall
    {
    font-size: small;
    }
    .FontLarge
    {
    font-size:large;
    }
    .FontMedium
    {
        font-size:medium
    }
    .FontExtraLarge
    {
        font-size:x-large;
    }
     .ColorHighContrast
    {
        background-color:#333333 !important;
        
    }
    .ColorStandard
    {
         
    }
    
 
  
   

Step3: Write the javascript code in Accessilility.js like this


// at click event, for storing font size in session
function FontSize(size) {
    document.getElementById("DivFontSize").className = size;
    //        window.sessionStorage["myKey"] = size;
    // code for storing in html cookie
    var c_name = "size";
    var value = size;
    var exdays = 365;
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}



//on page load for applying the font size on all pages
function GetFontSize() {
    // var size = window.sessionStorage["myKey"];
    //Code for fetching from cookie
    var c_name = "size";
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == "size") {
            document.getElementById("DivFontSize").className = y;
            return unescape(y);
        }
    }
}

// at click event, for storing color in session
function ColorChange(colorName) {
    document.getElementById("DivColor").className = colorName;

    // window.sessionStorage["myKey1"] = colorName;
    var c_name2 = "colorName";
    var value2 = colorName;
    var exdays2 = 365;
    var exdate2 = new Date();
    exdate2.setDate(exdate2.getDate() + exdays2);
    var c_value2 = escape(value2) + ((exdays2 == null) ? "" : "; expires=" + exdate2.toUTCString());
    //alert(value2);
    document.cookie = c_name2 + "=" + value2;
}

// for applying the color on all pages on page load 
function GetColorChange() {
    // var colorName = window.sessionStorage["myKey1"];
    var i2, x2, y2, ARRcookies2 = document.cookie.split(";");
    for (i2 = 0; i2 < ARRcookies2.length; i2++) {
        x2 = ARRcookies2[i2].substr(0, ARRcookies2[i2].indexOf("="));
        y2 = ARRcookies2[i2].substr(ARRcookies2[i2].indexOf("=") + 1);
        x2 = x2.replace(/^\s+|\s+$/g, "");

        if (x2 == "colorName") {
            document.getElementById("DivColor").className = y2;
            return unescape(y2);
        }
    }
}



.

Step 4: For apply on other page just call that Javascript and CSS library and keep in two DIV i.e for Color and font

Advertisements

2 Responses to “How to create accessibility option in HTML or asp.net website ?”

  1. restaurant pos software Says:

    Greetings! Very helpful advice within this article!
    It’s the little changes that make the most significant changes. Thanks for sharing!

  2. Williams Says:

    Whoa! This blog looks just like my old one! It’s on a completely different subject but it has pretty much the same layout and design.
    Great choice of colors!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: