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
Chandradev's Blog 
Greetings! Very helpful advice within this article!
It’s the little changes that make the most significant changes. Thanks for sharing!
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!