Having trouble with a full width image header that scales responsively

My problem is that the full width easy slider is not seen as accessible by our Accessibility vendor, as it presents as a list item.

https://www.integralrecoveries.com/leadership-copy/

Per the team:

Lists: Remove List HTML
Content that does not function as a list should not be coded as such.
The header thumbnail image is coded as being a part of a list when it should not be.

Remediation Recommendation
Ensure this content is not coded as a list. Generally, this will mean removing <ol>, <ul>, <dl>, <dt>, <dd>, or <li> elements that are holding this content.

Here is a snippet of the code displaying the Full width easy slider:

Here is the code snippet I'm referring to '''<li class="avia-slideshow-slide av-juo9jzkl-8700c68c0f38de355eb6ad66836a0d85__0 av-single-slide slide-1 slide-odd next-active-slide active-slide" style="visibility: visible; opacity: 1; transition: none; transform: translateZ(0px);"><div data-rel="slideshow-1" class="avia-slide-wrap "><img decoding="async" fetchpriority="high" class="wp-image-621 avia-img-lazy-loading-not-621" src="https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300.jpg" width="2000" height="300" title="Header_About2000x300" alt="" itemprop="thumbnailUrl" srcset="https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300.jpg 2000w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-300x45.jpg 300w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-768x115.jpg 768w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-1030x155.jpg 1030w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-1500x225.jpg 1500w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-705x106.jpg 705w, https://www.integralrecoveries.com/wp-content/uploads/2019/06/Header_About2000x300-450x68.jpg 450w" sizes="(max-width: 2000px) 100vw, 2000px" style="left: 0px;"></div></li>'''

I’ve tried several options:

The image is set as 2000px x 300px btw.

1) Displaying as an image (no scaling, original width & height) – why doesn’t this work, it would solve many problems.

2) Color section – I’ve tried all options under Section Height including – Minimum Custom height in % based on browser windows width (responsive). However, it is not responsive (using 15% custom height for example). When you minimize for phone, it just blows up the left portion of the image height and does not adjust horizontally.

3) full width easy slider – This is what I’ve been using on all pages, which is responsive and is being rejected by the accessibility team as it uses a list element to display.

I’ve setup the following test page to show the differences of the three approaches with text headers

https://www.integralrecoveries.com/leadership-copy/

Inspect the page and display as an iphone 14 Max and you will see what happens. See attachment below

Three options in mobile

How can I fix this? I’m just trying to display a page header that is not coded as a list.

Thank you very much in advance!

• This topic was modified 15 hours, 16 minutes ago by hostworks. Reason: Forgot to present code per your editing window requirements