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.
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:
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
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.
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.