As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, yellow on black, and black on yellow contrast settings. While I consider myself an average front-end developer, I don't often work with JavaScript or jQuery.
To address this requirement, I plan to define classes in the HTML "body" element to handle each case.
In pursuit of this goal, I have developed the following jQuery script:
// Accessibility
// Check for cookies and set body class accordingly
if($.cookie("bodyclass-text")) {
$("body").addClass($.cookie("bodyclass-text"));
}
if($.cookie("bodyclass-contrast")) {
$("body").addClass($.cookie("bodyclass-contrast"));
}
// initialize the jquery code
$(document).ready(function(){
// add or remove classes to body as appropriate
// return false keeps the browser from following the link's '#' target
// Text size
$("#defaultText").click(function(){
$("body").removeClass("small-text");
$("body").removeClass("large-text");
$.cookie("bodyclass-text", null);
return false;
});
$("#smallText").click(function(){
$("body").removeClass("large-text");
$("body").addClass("small-text");
$.cookie("bodyclass-text", "small-text", { expires: 365, path: '/' });
return false;
});
$("#largeText").click(function(){
$("body").removeClass("small-text");
$("body").addClass("large-text");
$.cookie("bodyclass-text", "large-text", { expires: 365, path: '/' });
return false;
});
// Contrast
$("#defaultContrast").click(function(){
$("body").removeClass("black-on-yellow");
$("body").removeClass("yellow-on-black");
$.cookie("bodyclass-contrast", null);
return false;
});
$("#yellowOnBlack").click(function(){
$("body").removeClass("black-on-yellow");
$("body").addClass("yellow-on-black");
$.cookie("bodyclass-contrast", "yellow-on-black", { expires: 365, path: '/' });
return false;
});
$("#blackOnYellow").click(function(){
$("body").removeClass("yellow-on-black");
$("body").addClass("black-on-yellow");
$.cookie("bodyclass-contrast", "black-on-yellow", { expires: 365, path: '/' });
return false;
});
});
While I have succeeded in implementing the text size adjustments, I am facing challenges with the contrast settings. It seems like a CSS issue because when I inspect the page using Firebug, the body classes are being correctly applied but the yellow on black and black on yellow contrasts are not working as expected. I even attempted to include larger font sizes in the CSS, which worked for adjusting the text size.
Here is an excerpt of my relevant CSS styles:
/* Accessibility options */
body {
font-size: 1em;
color: #777;
background: #fff;
}
body.yellow-on-black !important{
color: yellow;
background: black;
font-size: 3em;
}
body.black-on-yellow !important{
color: black;
background: yellow;
font-size: 3em;
}
body.small-text {
font-size: 0.8em;
}
body.large-text {
font-size: 1.4em;
}
For reference, here is a snippet of my HTML structure:
<div id="defaultText"><a>Normal text</a></div>
<div id="smallText"><a>Smaller text</a></div>
<div id="largeText"><a>Larger text</a></div>
<p>
<div id="defaultContrast"><a>Default Contrast</a></div>
<div id="yellowOnBlack"><a>Yellow on Black</a></div>
<div id="blackOnYellow"><a>Black on Yellow</a></div>
If anyone has suggestions on how to resolve this issue, please feel free to contribute your insights.
You can access the test web page at this URL:
The accessibility options can be found at the bottom of the right column on the webpage.
Thank you in advance for your assistance!