Make sliderInput() accessible for keyboard and screen readers

[cpsievert]

Supercedes #3003

Testing notes

Ensure the following example is fully accessible (i.e., screen reader makes announcements of min/max/values and values can be changes without a mouse by tabbing)

library(shiny)
ui <- fluidPage(
  numericInput("min", "Set the minimum", value = 0),
  numericInput("value", "Set the value", value = 40),
  numericInput("max", "Set the maximum", value = 100),
  sliderInput("slider", "Here's a slider", value = 40, min = 0, max = 100)
)
server <- function(input, output, session) {
  observe({
    updateSliderInput(
      session, "slider", min = input$min, value = input$value, max = input$max
    )
  })
}
shinyApp(ui, server)

[jooyoungseo]

There's one extra stop before the slider widget when tabbing through because span element also has tabindex="0".

As a minimal example, I've run the following:

library(shiny)
example(sliderInput)

You'd find the following <span> has a tabindex:

• Selector: body > div > div.form-group.shiny-input-container > span > span.irs > span.irs-line

[jooyoungseo]

Current issue I've noticed is as follows:

• One sliderInput widget produces two tabbable focus.
• The first tab-focus has no label (silent for screen readers), but this is where you would press left/right arrows to change values (no feedback is heard, either).
• The second tab-focus has all the labels for screen readers, but this is just the output area that you can check the result that you changed through the previous (silent) tab-focus.

[jooyoungseo]

Ideally, we would like to integrate the two tabbable focus into one tab-focus area where we can adjust values and check the results at the same time via assistive technologies.

[jooyoungseo]

Perfect! Now it is very accessible to screen readers! Thanks a lot!

[cpsievert]

Unfortunately ion.RangeSlider doesn't seem to support keyboard control of both slider handles (just the from handle) IonDen/ion.rangeSlider#548

That restriction is likely going to prevent us from being able to have a fully accessible slider when value is of length 2 without a significant patch to ion.RangeSlider

[jooyoungseo]

Unfortunately ion.RangeSlider doesn't seem to support keyboard control of both slider handles (just the from handle) IonDen/ion.rangeSlider#548

That restriction is likely going to prevent us from being able to have a fully accessible slider when value is of length 2 without a significant patch to ion.RangeSlider

This is odd. At least, there should then be a way for us to bind aria markups to the from value of a double-handle slider.

I tested with the following classes by assigning all the necessary aria labels; unfortunately, none of them worked. We may want to find a way for keyboard users to control lower value of a double-handle sliderbar at least.

• .irs-line (you know, this is the right place for a single-handle slider, but it does NOT work for the double-handle one)
• .irs-from (this is what you've assigned, and this does not work, either.)
• .irs-line-left (I gave it a try, but it did not work)

[jooyoungseo]

el.id + "-label" is tied to ./R/input-utils.R#L7, and is calling a label string defined within shinyInputLabel().

This is not a right way to concatenate label string. Please take a look at this document.

[jooyoungseo]

We could make an invisible <span id = "lower"> with the inner text as "lower", and then pass this span id to the aria-labelledby right after the original label id using a whitespace separator to concatenate. I know, it is sort of tricky... I'm sorry.

[jooyoungseo]

el.id + "-label" is tied to ./R/input-utils.R#L7, and is calling a label string defined within shinyInputLabel().

This is not a right way to concatenate label string. Please take a look at this document.

[jooyoungseo]

The same issue as the above.

[mciethan]

Any updates on this? I have an app with a slider for which it'd be nice to have screen reader navigability.