Accessibility for Visually Impaired

Hey bbertuzzi7,
Thanks for your question, my research points to JAWS 15 reading the link title, which I see is in place on the site that you linked to. Please link to the site that the main navigation links are read correctly by JAWS so we can compare the difference.

Best regards,
Mike

Hi,

Thank you for the update.

We can apply an aria-label attribute to the menu items by adding this code in the functions.php file.

add_filter('walker_nav_menu_start_el', function($item_output, $item, $depth, $args) {
    $item_output = str_replace('<a href=','<a aria-label="' . $item->title . '" href=', $item_output);
    return $item_output;
}, 10, 4);

Let us know if that helps.

Best regards,
Ismael

Hi,

It seems to be working correctly on our end. We provided a screenshot of the notifications that we get when hovering or when tabbing through the menu items using VoiceOver on MacOS. Unfortunately, we do not have access to Jaws at the moment.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwHc78YPYJD5Ro8z5?e=kbqZON

We noticed that you replaced the aria-label with the title attribute. Is this working?

Thank you for your patience.

Best regards,
Ismael

Hi,
Thank you for your patience, the aria-label is the attribute used for accessibility, typically screen readers will read the “title”, “alt”, or “aria-label” attributes:

While we don’t have access to “Jaws” this chart of the Screen Reader Output seems to indicate that “Jaws” looks for the Anchor Text first and I note that on your original site the main menu links only have Anchor Text, with no “title”, “alt”, or “aria-label” attributes.
The difference with our theme is that the Anchor Text is wrapped in a “span” and is not a direct Anchor Text.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function unwrap_main_menu_text_for_jaws() { ?>
  <script>
(function($){
  $('.avia-menu-text').contents().unwrap();
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'unwrap_main_menu_text_for_jaws');

and check with your “Jaws” software.

Best regards,
Mike

Hi,
Thanks for the feedback, the link seems to be a paid service not a tool. I see that your main menu links now have the title, aria-label, and anchor text, and JAWs is suppose to read each of these, so I’m not sure why yours is not. Perhaps there is a setting disabled on your JAWs, such as disabled javascript? Or it’s reading the page before it’s fully loaded.
These are guesses, but in the past I have helped other users of JAWs with other elements and they didn’t say they couldn’t use JAWs on the main menu. But unfortunately there doesn’t seem to ba a trial version of JAWs for us to test with, so we can’t test.
There are other accessibility plugins but I don’t have any experience with these and don’t know which one may help, I assume each of these would do the same as we have by adding the title, aria-label, and anchor text to the main menu links, if you test any of these plugins please remove the 3 scripts that we have posted above so there won’t be any conflicts.

Best regards,
Mike

Hi,
Thanks for the feedback, we will leave this open to hear back from you.

Best regards,
Mike

Hi,
Thanks for the update, we will leave this open to hear back from you.

Best regards,
Mike

Hi,
Glad to hear, thanks for letting us know, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike