-
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 }); });January 24, 2026 at 9:26 am #1494256I remember the team members very well. Didn’t we write an extra pop-up script for that? Maybe it would be better to add a call-back there.
You could also try hooking into the magnificPopup script and using the callback function to insert the aria labels.function add_magnific_popup_aria_labels() { ?> <script type="text/javascript"> (function($) { 'use strict'; // Extend the existing MagnificPopup callbacks if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') { // Save the original open callback function var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open; // Overwrite the open callback function $.avia_utilities.av_popup.callbacks.open = function() { // Execute the original function if (typeof originalOpenCallback === 'function') { originalOpenCallback.call(this); } // Add aria-labels to the navigation arrows setTimeout(function() { $('.mfp-arrow-left').attr('aria-label', 'Previous Bio'); $('.mfp-arrow-right').attr('aria-label', 'Next Bio'); $('.mfp-close').attr('aria-label', 'Close Lightbox'); }, 50); }; // Also add a change callback to ensure // that the labels are still present when the images change. var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change; $.avia_utilities.av_popup.callbacks.change = function() { // Execute the original function if (typeof originalChangeCallback === 'function') { originalChangeCallback.call(this); } // Ensure that aria-labels are present $('.mfp-arrow-left').attr('aria-label', 'Previous Bio'); $('.mfp-arrow-right').attr('aria-label', 'Next Bio'); }; } })(jQuery); </script> <?php } add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);January 24, 2026 at 9:46 am #1494258It depends a little on how you want to use it. If you only want to change this to “next bio” and “previous bio” for certain custom classes, we would need to rewrite this code a little.
f.e. if you have a gallery – then you can give a custom class to that gallery element (f.e. team-member)
function add_magnific_popup_aria_labels() { ?> <script type="text/javascript"> (function($) { 'use strict'; if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') { var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open; $.avia_utilities.av_popup.callbacks.open = function() { if (typeof originalOpenCallback === 'function') { originalOpenCallback.call(this); } var self = this; setTimeout(function() { // Determine labels based on the gallery container var prevLabel = 'Previous image'; var nextLabel = 'Next image'; var closeLabel = 'Close lightbox'; // Check if the clicked element (currItem.el) is inside a container with a custom class if (self.currItem && self.currItem.el) { var $link = $(self.currItem.el); // Find the parent lightbox container element var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery'); if ($lightboxContainer.hasClass('team-member')) { prevLabel = 'Previous person'; nextLabel = 'Next person'; closeLabel = 'Close biography'; } else if ($lightboxContainer.hasClass('products-gallery')) { prevLabel = 'Previous product'; nextLabel = 'Next product'; closeLabel = 'Close product gallery'; } else if ($lightboxContainer.hasClass('projects-gallery')) { prevLabel = 'Previous project'; nextLabel = 'Next project'; closeLabel = 'Close project gallery'; } // Add more conditions as needed } $('.mfp-arrow-left').attr('aria-label', prevLabel); $('.mfp-arrow-right').attr('aria-label', nextLabel); $('.mfp-close').attr('aria-label', closeLabel); }, 50); }; var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change; $.avia_utilities.av_popup.callbacks.change = function() { if (typeof originalChangeCallback === 'function') { originalChangeCallback.call(this); } var self = this; // Update labels when changing images var prevLabel = 'Previous image'; var nextLabel = 'Next image'; if (self.currItem && self.currItem.el) { var $link = $(self.currItem.el); var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .isotope, .av-horizontal-gallery'); if ($lightboxContainer.hasClass('team-member')) { prevLabel = 'Previous person'; nextLabel = 'Next person'; } else if ($lightboxContainer.hasClass('products-gallery')) { prevLabel = 'Previous product'; nextLabel = 'Next product'; } else if ($lightboxContainer.hasClass('projects-gallery')) { prevLabel = 'Previous project'; nextLabel = 'Next project'; } } $('.mfp-arrow-left').attr('aria-label', prevLabel); $('.mfp-arrow-right').attr('aria-label', nextLabel); }; } })(jQuery); </script> <?php } add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);you see this line includes masonry etc. if you like:
// Find the parent lightbox container element var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');January 24, 2026 at 6:36 pm #1494270i remember we made for your “leadership” members an own popup script f.e.
if you only want to change that aria-labels of that popup script – then the solutions above are not neccessary. Only change that inline popup script
so try to replace that script inside the functions.php snippet by (remove temporarly the observer script above)window.addEventListener("DOMContentLoaded", function () { (function($) { $('#people').each(function(){ var that = this; $('.flex_column', this).each(function(i){ if($(this).find('.mfp-hide').length){ $(this).find('.bio-link').attr('href','#bio-'+(i+1)).addClass('no-scroll'); $(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll'); $(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup'); } }); }); $('#people .flex_column').find('a[href^="#bio-"]').magnificPopup({ type:'inline', midClick: true, removalDelay: 500, mainClass: 'avia-popup mfp-fade people', gallery: { enabled:true, arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>', tPrev: 'Previous Biography', tNext: 'Next Biography', }, }); $('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({ type:'inline', midClick: true, removalDelay: 500, mainClass: 'avia-popup mfp-fade people', gallery: { enabled:true, arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>', tPrev: 'Previous Biography', tNext: 'Next Biography', }, }); })(jQuery); });better see next solution
PS you can get rid of style part – and place the css inside quick css.January 24, 2026 at 8:02 pm #1494275or even better – just use the team-member element as it is and parse a popup by your own.
see with snippet on that example page: https://webers-testseite.de/teammember-vitae-2/
PS: It is always best to examine each individual case closely, as this is the only way to offer a customized solution. Otherwise, one indulges in speculation.The last solution has the advantage that you only use the pure Enfold element for team members and then create your own lightbox with it. Disadvantage: you would have to rebuild your page and discard our previous design. In the window on the right side of the page, you can see that only plain text is entered in the Description Input Fiele — the Lightbox retrieves the image, name, and position from the existing DOM elements.
To change the aria-label – just edit these lines:tPrev: 'Previous Biography', tNext: 'Next Biography', -
AuthorPosts
- You must be logged in to reply to this topic.
