Litespeed Issue
As an accessible website design company, we have continually striven over the last 17 years to ensure that our websites are accessible as possible.
We have own Accessibility Toolbar that offers visitors the option of changing different contrasts and text sizes. As you would expect, it has gone through several incarnations and the version we now have is as robust as it could be.
When we switched to Litespeed, we have discovered that it does not work properly. We created a cookie that stores the selected contrast and, when that cookie changes every page that is then loaded will display using the selected style.
When someone selects a viewing style, the cookie is set and the page is reloaded.
No styles selected:
Style 1 selected
Other pages load with the correct style as well
If you change to another style, the cookie updates and the page reloads.
Other pages load with the new style:
However, when we switched to Litespeed, even though the Cookie had changed and the page reloaded with the correct style, all further pages were unchanged, even though the Cookie had changed correctly. This happened even though Litespeed was disabled for this website. The only way to resolve it was to switch back to Apache.
Style changed correctly
Choose another page and even though the Cookie is still correct, the page loads as previously:
Change style again
Not carried over to other pages, I had changed this to another style and that has remained even though the cookie has changed
Switching back to Apache solved the issue.
Before I list the code. I should show you the simple steps you can do to replciate it:
got to accessbydesign.uk
open the toolbar
click on a colour contrast (yellow)
choose another page, it is also yellow
change contrast to green
go back to home page
contrast is changed to green (with Apache running)
contrast is still yellow (with Litespeed running)
Please remember, this happened just by switching to Litespeed from Apaache, the plugin itself is not active.
Here is the code we use, there are 2 functions used.
The first is to create the accessibility buttons themselves:
function viewing_options(){?>
<div id="viewing">
<ul>
<li class="hidden" style="display:none;">Viewing Options</li>
<li><button type="button" id="default" aria-label="View Default Text Size" onClick="addCssoptions(this.id)">A</button></li>
<li><button type="button" id="large" aria-label="View Large Text Version" onClick="addCssoptions(this.id)">A</button></li>
<li><button type="button" id="xlarge" aria-label="View X Large Text Version" onClick="addCssoptions(this.id)">A</button></li>
<? $arrayoption = array('1','2','3','4','5','6');?>
<? foreach($arrayoption as $option):?>
<? if(get_option('backgroundcolourtitle'.$option)):?>
<li class="contrast" style="background-color:<?=get_option('backgroundcolour'.$option);?>!important;">
<button type="button" id="contrast<?=$option;?>" style="color:<?=get_option('foregroundcolour'.$option);?>!important;" aria-label="View <?=get_option('backgroundcolourtitle'.$option.'-2');?> on <?=get_option('backgroundcolourtitle'.$option);?> Version" onClick="addContrastoptions(this.id)">A</button>
</li>
<? endif;?>
<? endforeach;?>
<li><button type="button" id="off" aria-label="View Text Only Version" onClick="addCssoptions(this.id)">A</button></li>
</ul>
</div>
<script>
The second is to set the Cookie and reload the screen:
function deleteCookies() {
var Cookies = document.cookie.split(';');
// set 1 Jan, 1970 expiry for every cookies
for (var i = 0; i < Cookies.length; i++)
document.cookie = Cookies[i] + "=;expires=" + new Date(0).toUTCString();
}
function addContrastoptions(clicked_id){
document.cookie = "contrast" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "contrast=" + clicked_id +";path=/";
window.location.reload();
}
function addCssoptions(clicked_id){
document.cookie = "css" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "css=" + clicked_id+";path=/";
window.location.reload();
}
function resestviewing(){
document.cookie = "contrast" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "css" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
window.location.reload();
}
</script>
<? }
This function switches the CSS itself:
function switch_css() {?>
<? if ($_COOKIE['css'] == 'normal' ) : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<? elseif ($_COOKIE['css'] == 'large' && $_COOKIE['contrast'] !== 'reset-contrast') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_large.css">
<? elseif ($_COOKIE['css'] == 'xlarge' && $_COOKIE['contrast'] !== 'reset-contrast') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_xlarge.css">
<? elseif ($_COOKIE['css'] == 'off') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_off.css">
<? else:?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<? endif;?>
<? //if($_COOKIE['css'] == 'off') : ?>
<? if($_COOKIE['contrast'] == 'reset-contrast') : ?>
<? elseif ($_COOKIE['contrast'] == 'contrast1') : ?>
<? include(MYCSS . '/contrast1.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast2') : ?>
<? include(MYCSS . '/contrast2.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast3') : ?>
<? include(MYCSS . '/contrast3.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast4') : ?>
<? include(MYCSS . '/contrast4.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast5') : ?>
<? include(MYCSS . '/contrast5.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast6') : ?>
<? include(MYCSS . '/contrast6.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast7') : ?>
<? include(MYCSS . '/contrast7.php'); ?>
<? endif;?>
<? }
I hope this is enough information and you can resolve the issue
We have own Accessibility Toolbar that offers visitors the option of changing different contrasts and text sizes. As you would expect, it has gone through several incarnations and the version we now have is as robust as it could be.
When we switched to Litespeed, we have discovered that it does not work properly. We created a cookie that stores the selected contrast and, when that cookie changes every page that is then loaded will display using the selected style.
When someone selects a viewing style, the cookie is set and the page is reloaded.
No styles selected:
Style 1 selected
Other pages load with the correct style as well
If you change to another style, the cookie updates and the page reloads.
Other pages load with the new style:
However, when we switched to Litespeed, even though the Cookie had changed and the page reloaded with the correct style, all further pages were unchanged, even though the Cookie had changed correctly. This happened even though Litespeed was disabled for this website. The only way to resolve it was to switch back to Apache.
Style changed correctly
Choose another page and even though the Cookie is still correct, the page loads as previously:
Change style again
Not carried over to other pages, I had changed this to another style and that has remained even though the cookie has changed
Switching back to Apache solved the issue.
Before I list the code. I should show you the simple steps you can do to replciate it:
got to accessbydesign.uk
open the toolbar
click on a colour contrast (yellow)
choose another page, it is also yellow
change contrast to green
go back to home page
contrast is changed to green (with Apache running)
contrast is still yellow (with Litespeed running)
Please remember, this happened just by switching to Litespeed from Apaache, the plugin itself is not active.
Here is the code we use, there are 2 functions used.
The first is to create the accessibility buttons themselves:
function viewing_options(){?>
<div id="viewing">
<ul>
<li class="hidden" style="display:none;">Viewing Options</li>
<li><button type="button" id="default" aria-label="View Default Text Size" onClick="addCssoptions(this.id)">A</button></li>
<li><button type="button" id="large" aria-label="View Large Text Version" onClick="addCssoptions(this.id)">A</button></li>
<li><button type="button" id="xlarge" aria-label="View X Large Text Version" onClick="addCssoptions(this.id)">A</button></li>
<? $arrayoption = array('1','2','3','4','5','6');?>
<? foreach($arrayoption as $option):?>
<? if(get_option('backgroundcolourtitle'.$option)):?>
<li class="contrast" style="background-color:<?=get_option('backgroundcolour'.$option);?>!important;">
<button type="button" id="contrast<?=$option;?>" style="color:<?=get_option('foregroundcolour'.$option);?>!important;" aria-label="View <?=get_option('backgroundcolourtitle'.$option.'-2');?> on <?=get_option('backgroundcolourtitle'.$option);?> Version" onClick="addContrastoptions(this.id)">A</button>
</li>
<? endif;?>
<? endforeach;?>
<li><button type="button" id="off" aria-label="View Text Only Version" onClick="addCssoptions(this.id)">A</button></li>
</ul>
</div>
<script>
The second is to set the Cookie and reload the screen:
function deleteCookies() {
var Cookies = document.cookie.split(';');
// set 1 Jan, 1970 expiry for every cookies
for (var i = 0; i < Cookies.length; i++)
document.cookie = Cookies[i] + "=;expires=" + new Date(0).toUTCString();
}
function addContrastoptions(clicked_id){
document.cookie = "contrast" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "contrast=" + clicked_id +";path=/";
window.location.reload();
}
function addCssoptions(clicked_id){
document.cookie = "css" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "css=" + clicked_id+";path=/";
window.location.reload();
}
function resestviewing(){
document.cookie = "contrast" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
document.cookie = "css" +"=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
window.location.reload();
}
</script>
<? }
This function switches the CSS itself:
function switch_css() {?>
<? if ($_COOKIE['css'] == 'normal' ) : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<? elseif ($_COOKIE['css'] == 'large' && $_COOKIE['contrast'] !== 'reset-contrast') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_large.css">
<? elseif ($_COOKIE['css'] == 'xlarge' && $_COOKIE['contrast'] !== 'reset-contrast') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_xlarge.css">
<? elseif ($_COOKIE['css'] == 'off') : ?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/style_off.css">
<? else:?>
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/style.css">
<link rel="stylesheet" type="text/css" href="<?=get_bloginfo('template_url'); ?>/includes/css/textual.css">
<? endif;?>
<? //if($_COOKIE['css'] == 'off') : ?>
<? if($_COOKIE['contrast'] == 'reset-contrast') : ?>
<? elseif ($_COOKIE['contrast'] == 'contrast1') : ?>
<? include(MYCSS . '/contrast1.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast2') : ?>
<? include(MYCSS . '/contrast2.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast3') : ?>
<? include(MYCSS . '/contrast3.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast4') : ?>
<? include(MYCSS . '/contrast4.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast5') : ?>
<? include(MYCSS . '/contrast5.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast6') : ?>
<? include(MYCSS . '/contrast6.php'); ?>
<? elseif ($_COOKIE['contrast'] == 'contrast7') : ?>
<? include(MYCSS . '/contrast7.php'); ?>
<? endif;?>
<? }
I hope this is enough information and you can resolve the issue