Need code to remove link property for slider buttons at lower breakpoints

Design help Custom code
1

I use a slider with custom code in the page head tag that makes small (but very elegant-looking) slide nav buttons that work very well for desktop breakpoints but that are too small for tablet and lower breakpoints. (Lighthouse flags pages with tap targets that are smaller than 48 px by 48 px; mine are 16x16). To placate Google, I would like to disable the navigation functionality of the nav buttons on the tablet and lower breakpoints (reducing their functionality to visually indicating the number of slides, but without linking to them) but retain the navigation functionality of the arrows on either end (which I have sized at 50x50px). Could anyone suggest custom code that I could place inside the page’s head tag that could achieve this?

Thank you in advance for any advice you can offer.

Here is a link to my site: https://www.newyorkjazzbands.com/

Here is a link to a 2 1/2 minute video explaining what I’m trying to achieve in further detail: Loom | Free Screen & Video Recording Software | Loom

Here is my site Read-Only: Webflow - New York Jazz Bands)

2

I’m just replying to my own tread to put it back at the top in case anyone who knows of a solution might notice it.

Here’s the problem this situation creates with Google:

Screenshot 2023-09-27 at 12.36.10 PM
Screenshot 2023-09-27 at 12.36.10 PM1174×1044 88.4 KB

3

Hi Chuck, you’d add a CSS media query after your custom CSS to handle specific breakpoints.
For landscape and below it would look something like this;

  @media screen and (max-width: 991px) {
    .w-slider-dot, .w-slider-dot.w-active, .w-slider-nav.w-round > div {
      width: 32px;
      height: 32px;
    }
  }

Note I think there’s a typo in your CSS, I’m pretty sure .w-slider-nav.w-round]div should be .w-slider-nav.w-round > div

Some more notes on breakpoints here;

4

Thank you, @memetican, for taking the time to understand and offer a solution to my problem.

I corrected the typo you identified in my existing code.

For my original question, What I was hoping to achieve was not to increase the size of the slider dots, but to disable their links to the slides, so that they would function visual indicators of the number of slides rather than navigation tap targets. Do you have any suggestions regarding code that might be able to achieve this?

To test the code you gave me, I tried adding it to the end of my existing code:

Screenshot 2023-09-28 at 4.28.51 PM
Screenshot 2023-09-28 at 4.28.51 PM1218×1130 98 KB

But this produced unexpected results:

Screenshot 2023-09-28 at 4.27.51 PM
Screenshot 2023-09-28 at 4.27.51 PM1000×1484 121 KB

As you can see, I really don’t have an understanding of code, especially this particular very specialized code…

5

The code I gave you for increasing the size is CSS styling, so it needs to be in that <style> block just above, just after the rest of your CSS code.

To disable the dot navs instead, you would need to write some custom code to modify these controls so that Google does not flag them as a usability issue.

  • These are already DIVs rather than buttons, which works well in this case
  • Remove the role=button attribute
  • Remove the tabindex
  • Maybe, remove aria-pressed, you’ll need to check a11y standards, that may be a button-specific indicator

The link I shared above contains some notes on how to do breakpoint-specific work in Javascript. In your specific situation, I actually wouldn’t remove the elements, I’d suppress them by changing the attribute names as you cross your breakpoint boundary. This makes it easy two switch between your two button “modes” as the browser resizes.

I know you’re not familiar with JS work so if this is an important feature and you don’t have someone on the team to do this kind of work, you can direct message me if you like. I do this kind of work often for designers and agencies.

6

Hi Chuck, a few details on how I’d like to approach this.
I typically bill for a 3h block and then just use time as you need it, so I’d send you an invoice for $295, but for this specific feature it’s likely the work will be around 90 mins of that and you’ll have plenty left for other things if you like.

Let me know if that works for you, I’ve put a link below the video for more details on micro-consulting.