I'm currently working on designing one of my initial websites and have encountered a dilemma. I have three different stylesheets - one for low vision, one for large font, and the default one. I have three buttons to select these stylesheets, but I'm only able to select one at a time. I am wondering if it is feasible to select two simultaneously, such as low vision and large font, or if I would need to create a fourth stylesheet for this purpose.
Below is the current setup I have:
<link rel="stylesheet" type="text/css" href="css/style.css" title="default" />
<link rel="stylesheet" type="text/css" href="css/large_font.css" title="large_font" disabled />
<link rel="stylesheet" type="text/css" href="css/low_vision.css" title="low_vision" disabled />
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll();
});
</script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/JavaScript" src="js/slimbox.js"></script>
</head>
<body>
<div id="background">
<div id="wrapper">
<div id="accessibility">
<ul id="access_list">
<li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Default</a> | </li>
<li><a href="#" onclick="setActiveStyleSheet('large_font'); return false;">Large Font</a> | </li>
<li><a href="#" onclick="setActiveStyleSheet('low_vision'); return false;">Low Vision</a></li>
</ul>
</div>
<div id="header">
<div id="site_title"><a href="#">Sean's Site</a></div>
</div>