Web Accessibility Evaluation Tool Code Snippets

Below are some code snippets to help resolve accessibility errors found using the WAVE accessibility evaluation tool.

Table of Contents

Remove redundant title text

$(‘.slick-slide-inner-wrapper img, .hs_cos_wrapper_type_logo img, .hs-image-widget’).removeAttr(“title”);

window.addEventListener(‘load’, function() {
$(‘.cta_button’).removeAttr(“title”);
})

Empty links used for javascript behavior like dropdown menus

$(‘.hs-menu-item a[href=”javascript:;”]’).each(function() {
$(this).prepend(‘<span class=”sr-only”>child menu</span>’);
});

.sr-only CSS class to help bring meaning to visual elements like icons

.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important; /* 2 */
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important; /* 3 */
font-size:18px;
}

/*
Use in conjunction with .sr-only to only display content when it’s focused.
@note Useful for skip links
@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@note Based on a HTML5 Boilerplate technique, included in Bootstrap
@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
@author Sylvain Pigeard
@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
margin: auto !important;
overflow: visible !important;
width: auto !important;
white-space: normal !important;
}