TOP

2021 ADA Updates

Over the course of our 2021 website accessibility audit, we have made several improvements to our templates and back-end code to allow users of all abilities to more easily utilize our website templates. There are a few instances where some changes need to be added manually by a designer on a template-by-template basis.

We recommend reaching out to one of our certified designers to implement the below changes.


New ADA Updates

Dynamic Email Widget Label

The Dynamic Widget Email Label is a small label that appears automatically above the "Email" text box of our email subscribe widget when a user clicks into the text box. See below screenshot as an example.

 

JS to Implement

$(function(){
var onClass = "on";
var showClass = "showLabel";

$("#v65-emailSubscribeWidget").bind("checkval",function(){
var label = $(this).prev(".v65-emailSubscribeWidgetLabel");
if(this.value !== "" && this.value !== "Email"){
label.addClass(showClass);
} else {
label.removeClass(showClass);
}
}).on("keyup",function(){
$(this).trigger("checkval");
}).on("focus",function(){
$(this).prev(".v65-emailSubscribeWidgetLabel").addClass(onClass);
}).on("blur",function(){
$(this).prev(".v65-emailSubscribeWidgetLabel").removeClass(onClass);
}).trigger("checkval");
});

CSS to Implement

None needed!

Top Of Page

 

 Quantity Label to appear on all quantity boxes on site

Quantity Labels are added on top of the Quantity boxes for products that show up on the homepage, product list, or product drilldown page.

Note: We offer CSS suggestions on how to make this label appear aesthetically pleasing on most of our templates, however you may still need to make css adjustments.


 

JS to Implement

None needed!

CSS to Implement

label.v65-quantity-label{ 
	display: inline;
} 
input.v65-quantity-box, input#v65-quantity-box, #v65-subsku-quantity-box{ 
	margin-top:1.2rem; 
}


Top Of Page

 

SubSku Dropdown Label

SubSku's are added on top of the Size boxes for products that show up on the homepage, product list, or product drilldown page.

Note: We offer CSS suggestions on how to make this label appear aesthetically pleasing on most of our templates, however you may still need to make css adjustments.

 

JS to Implement

None needed!

CSS to Implement

.v65-subskulabel{
	display: block;
}

.v65-product-addToCart-selectBox {
    margin: 1em 0;
}

Top Of Page