Review Multi-Thumb Slider Example

[mcking65]

The multi-thumb slider example
is ready for review.

Task Force Reviews requested as of Nov 7, 2017

• Review by Ann (@annabbott)
• Review by Evan (@sh0ji)
• Review by James (@jnurthen)

[devarshipant]

1. The range on the first slider is from 0 - 400, but the title attribute says 'Select...0 and 500'.

<div title="Select a hotel between $0 and $500" class="rail" style="width: 300px;"> <img ...</div>

2. Title attribute on div is not read by JAWS (IE 11 / JAWS 18 [with default settings]), and probably not supposed to be, but could be helpful information to convey to screen reader users. Note -- If the title is added to the IMG tag, JAWS picks it up (it speaks aria-label -> aria-value -> title attribute).

Works nicely with JAWS 18 / IE 11.

[annabbott]

All text in this example appears to be 'bold', which is not the case in other example pages. No other issues noted.

[mcking65]

Thank you @devarshipant and @annabbott for the review.

I pushed commit 1d23c41 for these issues.

@devarshipant commented:

1. The range on the first slider is from 0 - 400, but the title attribute says 'Select...0 and 500'.

Corrected the title attribute.

2. Title attribute on div is not read by JAWS (IE 11 / JAWS 18 [with default settings]), and probably not supposed to be,
   but could be helpful information to convey to screen reader users.
   Note -- If the title is added to the IMG tag, JAWS picks it up (it speaks aria-label -> aria-value -> title attribute).

JAWS 18 is reading the title for me on the div. NVDA does not.

I suppose we could add a hidden element for aria-describedby.

@annabbott commented:

All text in this example appears to be 'bold', which is not the case in other example pages. No other issues noted.

It was an incorrectly closed <strong> tag.

[devarshipant]

@mcking65: JAWS 18 is reading the title for me on the div. NVDA does not. I suppose we could add a hidden element for aria-describedby.

Not sure why I get opposite results (NVDA works, while JAWS does not). However, a quick check by adding tabindex 0 on div resolves the issue, unless we take the aria-describedby route. Something like:
<div tabindex="0" title="Select a hotel price range between $0 and $400" class="rail" style="width: 300px;"> ... </div>
BTW -- I think it should be okay even if we don't change it.
thanks!

[jnurthen]

@devarshipant This is not meant to be focusable so I don't want to add tabindex=0 - that would put it in the focus order which is not desirable. Things without a role should not be in the focus order.

[sh0ji]

The title attribute doesn't have any kind of accessibility mapping according to the current HTML AAM for title, and should not be read by screen readers that strictly conform. The inconsistency across screen readers is because they're all employing different heuristics to know when to read it. Those heuristics have always been rather opaque to me.

Echoing @devarshipant, I think it'd be good to expose the title text in a more conformant way (aria-describedby, perhaps), or remove it entirely if it's non-essential to this example.

Everything else looks good to me on VoiceOver and NVDA.

[mcking65]

I think the title is not necessary and the example would be more clear without it. The purpose of this example is to demonstrate making a slider; we can do that more effectively if the example is simpler.

PR welcome.

[devarshipant]

@sh0ji -- thanks for the insight. The value of the title attribute "Select a hotel price range between $0 and $400" complements the slider, which is meaningful text when exposed to screen reader users.

[mcking65]

Per discussion in the Monday, Nov 27, 2017 meeting, we are removing the title attribute.

[mcking65]

All work is done on this issue. Thank you everyone, especially @jongund for all the coding work!