To apply accessibility features to a site (contrast / major font / smaller font), I created alternate .css files with the formatting I wanted, and called those files via javascript. However, especially when the connection is slow, when the function is called, the page stays for 1 second without css and then the formatting is applied. Does this "blink" give a clutter in usability do you know?
But I do not know how to solve it. Any suggestions?
This is the function that changes the css according to the button clicked:
function fontegrande()
{
var css = document.querySelector('#css');
document.cookie = "fonte=grande";
var fonte = Cookies.get("fonte");
var contraste = Cookies.get("contraste");
if(fonte=="grande"){
css.setAttribute('href', '/Content/cssaumento.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/cssaumentocontraste.css');
}
}
function fontepequena ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
//Cookies.set("fonte","pequena", { expires: 365 });
document.cookie = "fonte=pequena";
var fonte = Cookies.get("fonte");
if(fonte=="pequena"){
css.setAttribute('href', '/Content/cssmenor.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/cssmenorcontraste.css');
}
}
function fontenormal ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
document.cookie = "fonte=normal";
var fonte = Cookies.get("fonte");
if(fonte=="normal"){
css.setAttribute('href', '/Content/Application.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/csscontraste.css')
}
}
function contraste ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
var fonte = Cookies.get("fonte");
if (contraste != "contrasteativo")
{
document.cookie = "contraste=contrasteativo";
css.setAttribute('href', '/Content/csscontraste.css');
if (fonte=="pequena")
{
css.setAttribute('href', '/Content/cssmenorcontraste.css');
}
if (fonte=="grande")
{
css.setAttribute('href', '/Content/cssaumentocontraste.css');
}
if (fonte=="normal")
{
css.setAttribute('href', '/Content/csscontraste.css');
}
}
else
if (contraste != "contrasteinativo")
{
css.setAttribute('href', '/Content/Application.css');
document.cookie = "contraste=contrasteinativo";
if (fonte == "pequena")
{
css.setAttribute('href', '/Content/cssmenor.css');
}
if (fonte=="grande")
{
css.setAttribute('href', '/Content/cssaumento.css');
}
if (fonte=="normal")
{
css.setAttribute('href', '/Content/Application.css');
}
}
}
This is the function called on page load to check which css is active:
function checafontegrande()
{
var css = document.querySelector('#css');
var fonte = Cookies.get("fonte");
var contraste = Cookies.get("contraste");
if(fonte=="grande"){
css.setAttribute('href', '/Content/cssaumento.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/cssaumentocontraste.css');
}
}
function checafontepequena ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
var fonte = Cookies.get("fonte");
if(fonte=="pequena"){
css.setAttribute('href', '/Content/cssmenor.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/cssmenorcontraste.css');
}
}
function checafontenormal ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
var fonte = Cookies.get("fonte");
if(fonte=="normal"){
css.setAttribute('href', '/Content/Application.css');
}
if (contraste=="contrasteativo")
{
css.setAttribute('href', '/Content/csscontraste.css')
}
}
function checacontraste ()
{
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
var fonte = Cookies.get("fonte");
if (contraste != "contrasteativo")
{
css.setAttribute('href', '/Content/Application.css');
if (fonte=="pequena")
{
css.setAttribute('href', '/Content/cssmenor.css');
}
if (fonte=="grande")
{
css.setAttribute('href', '/Content/cssaumento.css');
}
if (fonte=="normal")
{
css.setAttribute('href', '/Content/Application.css');
}
}
else
if (contraste != "contrasteinativo")
{
css.setAttribute('href', '/Content/csscontraste.css');
if (fonte == "pequena")
{
css.setAttribute('href', '/Content/cssmenorcontraste.css');
}
if (fonte=="grande")
{
css.setAttribute('href', '/Content/cssaumentocontraste.css');
}
if (fonte=="normal")
{
css.setAttribute('href', '/Content/csscontraste.css');
}
}
}
I put this check like this:
$(document).ready(function()
{
checafontegrande();
checafontepequena();
checafontenormal();
checacontraste();
}
);