Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 26, 2025 at 7:12 pm #1485971
    DianaLoola73

    Dear Support Team,
    I’m working on improving the accessibility of our website https://restaurant-weichandhof.de/candle-light-dinner/ and have encountered an issue with the Timeline element in the Enfold theme that causes errors in accessibility testing tools such as Google Lighthouse / WAVE ….
    The Timeline element automatically generates the following heading structure: (Example: first milestone point)
    <h2 class=”av-milestone-date”>Wertgutschein bestellen</h2>
    <h4 class=”av-milestone-title”>direkt online · Sofortversand</h4>
    As you can see, there is a heading level h2 directly followed by an h4, skipping h3 entirely. Lighthouse / WAVE flags this as a failure:
    “Heading elements are not in a sequentially-descending order”
    Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.
    Unfortunately, there is no option within the Timeline element to control or override the heading levels, and no content can be inserted between the two to preserve proper hierarchy.
    We are trying to follow WCAG 2.1 Level AA guidelines and ensure proper semantic heading order, but this structural limitation of the Timeline element makes it impossible.
    Could you please help me in this issue?
    Thank you very much for your support!
    Best regards
    Diana

    June 27, 2025 at 7:21 am #1485990
    Ismael

    Hey Diana,

    Thank you for the inquiry.

    Try to add this code in the functions.php file to replace h4 with h3.

    add_filter('avf_customize_heading_settings', function($args, $class, $extra) {
    if ($class === 'avia_sc_timeline') {
        if ($args['heading'] === 'h4') {
            $args['heading'] = 'h3';
        }
    }

    return $args;
}, 10, 3);

    Let us know the result.

    Best regards,
    Ismael

    July 16, 2025 at 9:01 pm #1486900
    DianaLoola73

    Dear Ismael,
    Thank you very much for your helpful response and for providing the PHP snippet to adjust the heading structure in the Timeline element.
    After reviewing this internally, the client has decided not to implement further theme-based customizations via the functions.php file at this stage. As we’re working across several Enfold-based websites, they hope this issue will be resolved in a future theme update instead.
    We’ve documented the structural limitation in our accessibility report accordingly.
    Thanks again for your support and your assistance on this matter!

    Best regards,
    Diana

    July 17, 2025 at 7:30 am #1486913
    Ismael

    Hi,

    Thank you for the update.

    The filter above will simply replace the h4 tag with h3 in the timeline element, with no impact on performance or display, or very minimal at most. Please don’t hesitate to open another thread if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Accessibility Issue Timeline Element’ is closed to new replies.