Web Accessibility Evaluation Tool Code Snippets

Download FREE Marketing Guides

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() {

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 */

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


Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter