Tagged: , , , , , , , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 24, 2024 at 4:04 pm #1440693
    S24-Marketing

    Hey guys!

    We use the Enfold theme for our corporate website. As part of the approaching implementation of the European Accessibility Act (EAA), we tested our site for barriers. Some barriers were homemade, others were based on the semantics and role names used in the theme.

    For example, for tabs, a role “tablist” is correctly defined on the div construct. The tab has the role “tab”. Unfortunately, the child, i.e. the actual content, is missing the “tabpanel” role. This fact is criticized during exams. Furthermore, also correctly, the id of the child to be controlled (tabpanel) is defined in the tab with aria-controls=id-des-child. Unfortunately, the child (tabpanel) itself is missing that it is described by the tab. So, on the one hand, the tab is missing the corresponding id (id=id-of-the-tab) and, on the other hand, the child (tabpanel) is missing an aria-labelledby=id-of-the-tab.

    Another unpleasant barrier is the empty list

      above any form. Notes are added to this list in the event of an incorrect form being sent. Without error, an empty list without child elements is detected and this is non-compliant. In case the empty list must remain, you should assign the attribute <ul aria-hidden=true> to the element. Then it is hidden in the accessibility tree. As soon as the list has a child, the value true should be changed to false.

      In general, care should be taken in the theme to ensure that elements that are not used but are relevant to the structure of the page, such as headlines, lists, buttons, etc., are not kept as empty or placeholder elements for later dynamic processes. These elements can be accessed through assistive technologies (e.g. screen readers) and then cause confusion. If it cannot be implemented differently in the code, then the elements must be given the attribute aria-hidden=true and, depending on the element, also hidden in the tab navigation with tabindex=-1. For example, if you do not want to use the <h2> element (milestone date) in the theme content element “Timeline” for design reasons, the H2 is kept empty in the code as a placeholder <h2></h2>. A screen reader therefore reads an empty heading.

      Can these barriers be resolved in a next update to the Enfold theme? Or what tools do I have to exclude or resolve the barriers in a roundabout way without creating cumbersome Javascript workarounds?

      For your information, the test was carried out using the highly recommended plugin for checking accessibility (WCAG 2.2) from Eye-Able. The tool is called Audit.

      Note: The two plugins “One click Accessibility” or “WP Accessibility” suggested in the theme extensions do not help.

      Thank you for your feedback.

      Best regards, Marko

      April 30, 2024 at 8:41 pm #1441500
      Mike

      Hey S24-Marketing,
      Thank you for your patience, for the tab_content not having the tabpanel role, and to add the ID as aria-labelledby, please try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

      function add_tabpanel_role_to_tab_content() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function ($) {
$(".av_tab_section .tab_content").attr('role','tabpanel' );
$('.tab_content').each(function() {
    var id = $(this).attr('id');
    $(this).attr('aria-labelledby', id);
  });
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'add_tabpanel_role_to_tab_content');

      and then test the site and see if that corrects.

      Best regards,
      Mike

    • Author
      Posts
    Viewing 2 posts - 1 through 2 (of 2 total)
    • You must be logged in to reply to this topic.