Posts Tagged: accessibility – ARIA
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
1 2 3 | $('.slick-slide-inner-wrapper img, .hs_cos_wrapper_type_logo img, .hs-image-widget').removeAttr("title"); |
1 2 3 4 5 | window.addEventListener('load', function() { $('.cta_button').removeAttr("title"); }) |
Empty links used for javascript behavior like dropdown menus
1 2 3 4 5 | $('.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .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; } |
Category: Code Snippets