-
Posts
-
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
DianaHey 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
- You must be logged in to reply to this topic.