Improve accessibility of HD image comparison range slider in Lighthouse report

Is your feature request related to a problem? Please describe. I just ran a Lighthouse report on my website (WordPress, YOOtheme Pro, HD for WP) and Lighthouse identifies the following accessibility issue Form elements do not have associated labels.

Describe the solution you'd like I want a label being added to the HD image comparison input elements. There are different options described here for achieving this. I would suggest adding an ID to the input element and adding a non-displayed label for the input element like this.

<div id="hd-6554cd8b5fa79" class="hd-image-comparison" style="margin-right: 30px; margin-left: 30px; width: auto;">
    <div class="hd-image-comparison-after">
        <div class="hd-image-comparison-after-label">After</div>
        <picture>
             <source type="image/webp" srcset="/wp-content/themes/yootheme/cache/aa/case-study-accounting-banking-after.drawio-aa26b5af.webp 751w" sizes="(min-width: 751px) 751px">
             <img decoding="async" src="/wp-admin/admin-ajax.php?action=kernel&amp;p=image&amp;src=file%3Dwp-content%252Fuploads%252F2023%252F11%252Fcase-study-accounting-banking-after.drawio.png%26thumbnail%3D%2C%2C&amp;hash=d6ef8644" width="751" height="561" class="el-image-after" alt="Business Process after automation" loading="lazy">
        </picture>            
    </div>
    <div class="hd-image-comparison-before" style="height: 543px; width: 100%;">
        <div class="hd-image-comparison-before-label">Before</div>
        <picture>
             <source type="image/webp" srcset="/wp-content/themes/yootheme/cache/6d/case-study-accounting-banking-before.drawio-6d1bf931.webp 751w" sizes="(min-width: 751px) 751px">
             <img decoding="async" src="/wp-admin/admin-ajax.php?action=kernel&amp;p=image&amp;src=file%3Dwp-content%252Fuploads%252F2023%252F11%252Fcase-study-accounting-banking-before.drawio.png%26thumbnail%3D%2C%2C&amp;hash=a75e9826" width="751" height="561" class="el-image-before" alt="Business Process before automation" loading="lazy" style="width: 727px;">
        </picture>
    </div>
    <label for="hd-6554cd8b5fa79-range" style="display:none;">Before / After visibility ratio</label>
    <input id="hd-6554cd8b5fa79-range" type="range" min="0" max="100" class="hd-image-comparison-range" style="margin-left: calc(-40px); width: calc(100% + 80px);">
    <div class="hd-image-comparison-slider uk-background-default uk-icon" uk-icon="icon: code; width: 40; height: 40" data-start="100" data-width="40" style="left: 100%;">
        <svg width="40" height="40" viewBox="0 0 20 20"><polyline fill="none" stroke="#000" stroke-width="1.01" points="13,4 19,10 13,16"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="7,4 1,10 7,16"></polyline>
        </svg>
    </div>
</div>

This is just my first suggestion. May be there is a more elegant solution.

Describe alternatives you've considered Well, I don't know of any other element to replace the HD image comparison.

Additional context My website is build with WordPress, YOOtheme Pro 4 (version 4.1.5) and HD for WP.

forrestkirby / herzogdupont-joomla

Improve accessibility of HD image comparison range slider in Lighthouse report #56