Accessibility

[callumacrae]

Hey!

This component currently doesn't work with screen readers - because it's made of divs, the screen reader doesn't know it's an input element and goes straight over it. I'd recommend duplicating the state to a hidden range input for screenreaders to use.

Also, are you fine if I use this library as an example in a talk of an input library which doesn't work with screen readers? It 100% isn't intended as an attack and it won't be the only library I talk about - most libraries in the Vue ecosystem have the same problem!

[NightCatSama]

Because I do not have a screen readers, so it is difficult to reproduce the problem.

About add a hidden range input element to compatibility, is refers to the events would only on the range input trigger on a screen reader？

If yes, that would be very complicated to modify.

[callumacrae]

It wouldn't be tricky. Just add an <input type="range"> slider with a screen reader only class, and put aria-hidden="true" on the current HTML. Then you can bind the range slider to the variable with v-model and they would reflect each other's state.

[NightCatSama]

Whether only need to add a hidden input(<input type="range" aria-hidden="true" style="opacity: 0">), and then synchronize the value of the component to the input value can be completed.

[callumacrae]

you want the aria-hidden attribute on the current HTML for vue-slider-component, or it will hide the range slider from the screenreader - exactly the opposite of what you want to do!

[NightCatSama]

I get it, I will support this feature.

thank for your issue, this will be a meaningful update.

[callumacrae]

amazing, thank you!

[NightCatSama]

I added some accessibility attributes, but I do not have a device to test, so can you please help me test it?

I did not update the new version because I did not know if it was available.

test url: https://nightcatsama.github.io/vue-slider-component/example/

this is my references ant's slider.

[callumacrae]

Still doesn't work, because the screenreader doesn't know it's a slider. trying setting role="slider": https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role

[NightCatSama]

This attribute exists.

<div 
  //...
  role="slider"
  :aria-valuemin="min"
  :aria-valuemax="max"
  :aria-valuenow="val"
  aria-disabled="false"
  aria-hidden="false"
>
..
</div>

[callumacrae]

I'm not able to change it using a screen reader :(

[NightCatSama]

Can you tell me whether the slider on the ant can be used? slider

[callumacrae]

Nope, unable to use that with VoiceOver on Safari.

[NightCatSama]

It may still have to use the <input type="range">, but I don't know how to hide the input tag in the common equipment.

[callumacrae]

See the article I linked to before: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

stuff like that is pretty bulletproof

[NightCatSama]

I thought that this applies only to the text.

I'll give it a try.

[callumacrae]

nah, works for everything - it's more commonly implemented as .sr-only

[NightCatSama]

I have already corrected. demo

Then I found that there is a problem with this scheme, not support for the range mode and custom data mode.

[callumacrae]

huh? not sure i follow

[NightCatSama]

Don't work?

[callumacrae]

Oh, right, I misunderstood.

That works, mostly! It reads out the existing value and it's possible to change it. The only problem is that the visually displayed slider, while the number displayed changes, the position of the handle does not.

[NightCatSama]

Do you mean that the slider position does not move when the value of input changes?

[callumacrae]

Yes, exactly. The value has changed, but it isn't reflected in the UI. Not a huge issue as it won't really affect anyone (the people using screenreaders generally won't see the UI anyway), but worth fixing if it's an easy fix.

[NightCatSama]

I do not know where the problem is, and it's hard for me to debug.

[callumacrae]

¯\_(ツ)_/¯

I think what you've done is enough - it works for people using screen readers now. Good job, thanks!

[aphofstede]

Range mode is currently not supported for accessibility. Would it make sense to add two inputs in that case? (from/to) Not sure how screen readers will pick that up.

[spatras]

Hello,
I see that the slider doesn't support the screen reader. It has aria-hidden=true. Do you intend to change this? Or at least to give the option to change the aria-hidden value?
Thanks

[NightCatSama]

@spatras

So aria-hidden can't be set to true? I don't understand very well, I wrote it according to the previous version (v2).

vue-slider-component/src/vue2-slider.vue

Line 9 in bc68cbe

<div ref="elem" aria-hidden="true" class="vue-slider" :style="[elemStyles, bgStyle]">

I can't debug on the screen reader, if you can, please mention pr perfect components. Thanks

[spatras]

aria-hidden si set to trueby default. I would like to be customisable to set it false. If I add aria-valuemax, and other aria properties on the handler, it doesn't work becasue the parent has aria-hidden true. It would be great if you could add a prop for aria-hidden value.
Thanks!

[NightCatSama]

@spatras

So is aria-hidden= "true" a remained problems? If so, then I set it to false by default to have other effects.

[spatras]

Yes. aria-hidden="true" is hiding the element and all it's childrens from the screen reader. You could remove the attribute entierly.

[NightCatSama]

@spatras Cancel this attribute in v3.0.34, and support adding custom attributes directly.

[spatras]

Awesome! Thanks!

[spatras]

Hi again!
Your last update helped a lot and many thanks for that but I found that there is an hidden input .vue-slider-sr-only which appear only when there is 1 slider handle and is read by the screen reader but can't interact with it. Can you remove that?

[NightCatSama]

@spatras This is the code that was previously contributed by others. Can it be compatible with screen readers if it is removed?

[spatras]

@NightCatSama That code doesn't make the slider screen reader compatible. It only appears when there is only 1 handle and also, it cannot be changed from the screen reader. Maybe was doing more previously, but right doesn't do anything. And previously, when you had aria-hidden it was not read by the sr. For example users can add aria-valuenow, aria-label... and so on, to a custom handle and then you achieve fully sr compatibility.

[NightCatSama]

@spatras Sorry, I don't know much about the compatibility of screen readers. Is it only necessary to delete <input class="vue-slider-sr-only" />?

[spatras]

Yes. Just that.

…

On Sun, 11 Aug 2019, 13:02 NightCat, ***@***.***> wrote: @spatras <https://github.com/spatras> Sorry, I don't know much about the compatibility of screen readers. Is it only necessary to delete <input class="vue-slider-sr-only" />? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#68?email_source=notifications&email_token=ADBYPXZI6XGX3CST2ISCONDQD7PUNA5CNFSM4DPAWHVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4A5YRQ#issuecomment-520215622>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADBYPXZFFLWS6ETS36FYVLTQD7PUPANCNFSM4DPAWHVA> .

[NightCatSama]

@spatras Already removed, please update to v3.0.35.

[spatras]

Works great! Thank you!