Tagged: accessibility, ada; compliance, font icons, screen reader
-
AuthorPosts
-
March 19, 2018 at 7:08 pm #929246
Hello –
We are attempting to add ADA / 508 functionality to some of our Enfold sites and we’ve had some success but I’ve hit a roadblock when it comes to the mobile menu and the frontend_icon method inside font-manager.class.php. From what I understand after looking at the template files, the mobile menu icon is output as follows –
Around lines 18-21 of helper-main-menu.php there’s an echo statement which outputs the result of method av_icon_string:
if($responsive)
{
echo ‘‘;
echo ‘‘;
}I found that method located inside font-manager.class.php (lines ~ 691-697):
//pass a string that matches one of the key of the global font_icons array to get the whole string
function av_icon_string($char)
{
global $avia_config;if(!isset($avia_config[‘font_icons’][$char][‘icon’])) $char = ‘standard’;
return avia_font_manager::frontend_icon($avia_config[‘font_icons’][$char][‘icon’], $avia_config[‘font_icons’][$char][‘font’]);
}Which basically calls a static method inside the class:
// helper function that displays the icon symbol string in the frontend
static function frontend_icon($icon, $font = false, $return = ‘string’)
{
//if we got no font passed use the default font
if(empty($font)) $font = key(AviaBuilder::$default_iconfont);//fetch the character to display
$display_char = self::get_display_char($icon, $font);//return the html string that gets attached to the element. css classes for font display are generated automatically
if($return == ‘string’)
{
return “aria-hidden=’true’ data-av_icon='{$display_char}’ data-av_iconfont='{$font}'”;
}
else
{
return $display_char;
}
}The problem is that I don’t see any filter or action hook to modify the aria-hidden=true attribute, so it’s essentially “hard coded” into the theme as far as I can tell.
I tried overriding the helper-main-menu.php file in my child theme but it seems like it could cause problems in the future as the theme is updated and we don’t want to maintain that much child theme code.
I realized I could probably use jQuery / javascript to remove the aria-hidden and then set my own attributes, but I’m wondering if there’s a php way so we can modify the output before it’s ever actually echoed out. As it stands now, it appears that all icons are hidden from the screen reader. (Including the social icons – which I was able to un-hide and add labels to using jQuery… but as I said it seems a bit clunky to do it that way?)
Any ideas would be appreciated.
March 20, 2018 at 11:04 pm #930165Hey pennapowers,
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
Basilis -
AuthorPosts
- You must be logged in to reply to this topic.