Pro Forms - Slider Accessibility (Aria Label)

How To
1

Hi, I’m using the slider field in a Pro Form and I’m getting knocked down on page speed insights because “ARIA input fields do not have accessible names”. I have set a field label and value but can’t see anywhere else to control this through the ui.

Claude is saying the solution is to add a custom piece of javascript:

document.addEventListener(‘DOMContentLoaded’, function() {
const slider = document.querySelector(‘#years-experience-slider .noUi-handle’);
if (slider) {
slider.setAttribute(‘aria-label’, ‘Years of experience’);
}
});

or target more specifically with:

const sliderContainer = document.querySelector(‘[data-field-id=“years-experience-slider”]’);
if (sliderContainer) {
const handle = sliderContainer.querySelector(‘.noUi-handle’);
if (handle) handle.setAttribute(‘aria-label’, ‘Years of experience’);
}

Not sure if this is the right approach or if something can be added to the field to allow you to set an aria label through the UI?

Alex

2

Here’s the code snippet I added that fixed the accessibility error for reference:

document.addEventListener(‘DOMContentLoaded’, function() {
setTimeout(function() {
const handle = document.querySelector(‘.noUi-handle.noUi-handle-lower’);
if (handle) {
handle.setAttribute(‘aria-label’, ‘Years of experience’);
console.log(‘ARIA label added to slider handle’);
} else {
console.log(‘Slider handle not found’);
}
}, 1000);
});