Viewing 1 post (of 1 total)
-
AuthorPosts
-
January 24, 2026 at 1:25 am #1494250
My client’s accessibility consultants said we need to add aria labels to the lightbox arrows/controls (for example for the image popups on https://abodecommunities.org/communities/231-grant/) and for the bio popups on https://abodedev.wpengine.com/about/people/#leadership-team (those are coming from code provided by @guenni007). I worked with Claude to implement the code below (added via my custom css/javascript plugin), which seems to do the trick. Do you think this is a decent solution or do you think I should handle it some other way? Thanks so much and lmk if you have any questions!
jQuery(document).ready(function($) { $.extend(true, $.magnificPopup.defaults, { closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close" aria-label="Close popup">×</button>', gallery: { arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>', tPrev: 'Previous bio', tNext: 'Next bio' } }); // Watch for when Magnific Popup adds arrows to the DOM var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { mutation.addedNodes.forEach(function(node) { if (node.nodeType === 1) { // Element node var $node = $(node); // Check if this node or its children contain arrows if ($node.hasClass('mfp-arrow') || $node.find('.mfp-arrow').length) { // Determine if it's an image gallery by checking for mfp-figure var isImage = $('.mfp-figure').length > 0; var prevLabel = isImage ? 'Previous image' : 'Previous bio'; var nextLabel = isImage ? 'Next image' : 'Next bio'; $('.mfp-arrow-left').attr('aria-label', prevLabel); $('.mfp-arrow-right').attr('aria-label', nextLabel); } } }); }); }); // Start observing the body for child additions observer.observe(document.body, { childList: true, subtree: true }); }); -
AuthorPosts
Viewing 1 post (of 1 total)
- You must be logged in to reply to this topic.
