Dials ALT text?

Thanks StevenBenassi

The slider part is actually ok. It is how screen readers identify this kind of input type. As there is technically no such thing as a dial component in HTML, the input type=range is used, which by default displays as a slider component. The visual appearance is changed to look like a dial. In terms of accessibility, it identifying as a slider is fine as it indicates to screen reader users how it can be operated.

Hi DonnaWestwood if you would like to add a "hotfix" to this particular issue, if you add this Execute JavaScript trigger to the Dials timeline starts event, this will update the aria-label to your required value. I've made it configurable so you can include the range details, or just go with a user defined ALT text value.

// ----------------- START configuration options ----------------- //
// Replace Volume with your required ALT text.
const alt = "Volume";
// Use type 1 to include the range information, and type 2 for just the text you define in alt.
const type = 1;
// ------------------ END configuration options ------------------ //
const dial = document.querySelector('input[type=range]');
let min, max;
if(type === 1) {
    min = dial.getAttribute('min');
    max = dial.getAttribute('max');
}
const aria = (type === 1 ? `${alt} dial range from ${min} to ${max}` : `${alt}`);
dial.setAttribute('aria-label', aria);

If you look at the details within the configuration options in the script, there are two values you can change, alt and type. The existing value of alt is currently defined as Volume.

The type value is currently set as 1 which means the value you define in alt will be used in conjunction with the following information dial range from X to Y, where X is the minimum value in the dial range and Y is the maximum value in the range.

Changing the type value to 2, will drop this information from the updated ALT text value dial range from X to Y. 

In my example, if I have the type set as 1, the full ALT text value will be Volume dial range from 0 to 100. If the type is set to 2, the ALT text value will be simply Volume.

Hi JoseTansengco I have also tested this and can confirm DonnaWestwood concerns with ALT text for dials. I just conducted my own experiment. 

I added a dial to the slide, and set the range from 0-100 (arc of 180degrees), Step = 1, Initial = 0.

I then added my ALT text value of "Volume" and assigned the dial to a variable called "Volume" as well.

I then published the content and inspected the text in the browser, and also used JAWS screen reader to work with the dial.

The ALT text that is being automatically created for the dial is incorrect. I think the developers have intended to construct a meaningful ALT text value using the ALT text provided by the user, and then appending extra information. However, the extra information is incorrect, and appears to be hard coded: "Volume Dial 2 range from 0 to 12"

As you can see, the following information is added to my ALT text "Dial 2 range from 0 to 12".

This information is incorrect, as the dial will always report "range from 0 to 12" regardless of the setting on the dial. This information appears to have been hard coded.

The other information "Dial 2" just appears to be junk.

This needs to be fixed as it is not reporting the correct information to screen readers. It should be working as follows: "{user defined alt} range from {user defined minimum} to {user defined maximum}". In my example, is would read "Volume range from 0 to 100".

The culprit is the aria-label on the input, but the text is also reflected in the data-acc-text attribute too.

Fortunately the min and max attributes are being correctly set using the user defined values, and so when the screen reader user interacts with the slide, they are correctly told that the range is 0-100 and reports the current value.

See the following short video: https://app.screencast.com/HMEgoGT8hrFUa

Here are my settings:

Thanks - Sam.