Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1489554

    Hi,

    We got a a11y report according the avia_textblock section tag:

    The homepage, productdetail page and many more has parts which are represented with <section>. According to the [MDN definition of a section](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section): “Sections should always have a heading, with very few exceptions… It should only be used if there isn’t a more specific element to represent it.”

    In these cases the wrapper is used solely for styling purposes, meaning a <div> is better suited.

    Would it be possible to change the section to a div?

    All the best,
    Patrick

    #1489587

    Hey Patrick,

    Thank you for the inquiry.

    Are you using the Color Section element? By default, its main wrapper is a <div> element, not a <section>. Please create a test page and provide the URL in the private field.

    Best regards,
    Ismael

    #1489588

    Hi Ismael,

    I’m talking about the Text-Block.

    <section class="av_textblock_section " itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock" itemprop="text"><p>Klicke hier, um Ihren eigenen Text einzufügen</p>
    </div></section>

    It’s a section no matter if it’s in a color section or outside.

    All the best,
    Patrick

    #1489626

    Hi,
    Please note that the “av_textblock_section” is a section that wraps the “avia_textblock” div that holds the actual text content. Several other elements also wrap the content div in a section, I’m not sure what effect changing this text section into a div would have, but you could try this javascript in your child theme function.php

    function custom_script() { ?>
      <script>
    document.addEventListener("DOMContentLoaded", function () {
      document.querySelectorAll('section.av_textblock_section').forEach(function (section) {
        const textblock = section.querySelector('.avia_textblock');
        if (textblock && textblock.parentElement === section) {
          const newDiv = document.createElement('div');
          for (let attr of section.attributes) {
            newDiv.setAttribute(attr.name, attr.value);
          }
          while (section.firstChild) {
            newDiv.appendChild(section.firstChild);
          }
          section.parentNode.replaceChild(newDiv, section);
        }
      });
    });
    </script>
      <?php
    }
    add_action( 'wp_footer', 'custom_script', 99 );

    If you would like to request this feature the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.

    Best regards,
    Mike

    #1489639

    Hi,

    I know how to fix it by myself via js.

    This feedback comes from an accessibility testing company, and they flagged it as an issue. I’m just passing their feedback on to you for free, so you can consider implementing it directly into the core. That way, Enfold can become accessibility-compliant out of the box.

    All the best,
    Patrick

    #1489676

    Hi,

    Thank you for the info. We’ll forward this to our channel.

    Best regards,
    Ismael

    #1490018

    Hi Patrick,

    We’ve just released Enfold 7.1.3. Now you can select the Div tag in Text Block element > Advanced > Accessibility.

    Thanks again for your feedback!

    Regards,
    Yigit

    #1490109

    Hi Yigit,

    Thank you very much. Would it be possible to make a filter so that we can change it by default?

    Regars,
    Patrick

    #1490192

    Hey Patrick,

    We’ve forwarded your request to our development team. A filter will probably be added in upcoming versions.

    Best regards,
    Yigit

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