Web Accessibility Evaluation Tool Code Snippets

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

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;
}