Make sliderInput() accessible for keyboard and screen readers #3011

cpsievert · 2020-08-20T19:08:37Z

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)

…2845

jooyoungseo · 2020-08-21T13:42:44Z

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 · 2020-08-21T13:49:02Z

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 · 2020-08-21T14:02:24Z

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 · 2020-08-21T23:32:39Z

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 · 2020-08-22T00:46:42Z

srcjs/input_binding_slider.js

+ }
+ line.attr("tabindex", "-1");
+ var from = data.slider.find(".irs-from");
+ setAriaLabels(from, label "-lower", data.from, data.min, data.max);


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.

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 · 2020-08-22T00:47:32Z

srcjs/input_binding_slider.js

+ }
+ line.attr("tabindex", "-1");
+ var from = data.slider.find(".irs-from");
+ setAriaLabels(from, label "-lower", data.from, data.min, data.max);


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 · 2020-08-22T00:48:45Z

srcjs/input_binding_slider.js

+ var from = data.slider.find(".irs-from");
+ setAriaLabels(from, label "-lower", data.from, data.min, data.max);
+ var to = data.slider.find(".irs-to");
+ setAriaLabels(to, label "-upper", data.to, data.min, data.max);


The same issue as the above.

mciethan · 2024-03-26T17:02:34Z

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

cpsievert mentioned this pull request Aug 20, 2020

Improving sliderInput accessibility #3003

Closed

2 tasks

jooyoungseo linked an issue Aug 20, 2020 that may be closed by this pull request

sliderInput control inaccessible for keyboard or screen reader users #2845

Open

jooyoungseo added the Type: Accessibility label Aug 20, 2020

Make sliderInput() accessible for keyboard and screen readers, closes #…

2691bcd

…2845

cpsievert force-pushed the carson/feature/accessible-slider branch from d9982a4 to 2691bcd Compare August 20, 2020 20:55

cpsievert changed the title ~~Add ARIA labels for sliderInput()~~ Make sliderInput() accessible for keyboard and screen readers Aug 20, 2020

cpsievert requested review from wch and jooyoungseo August 20, 2020 20:57

Move Aria labels to .irs-line

3068554

jooyoungseo approved these changes Aug 21, 2020

View reviewed changes

jooyoungseo added this to the 1.5.1 milestone Aug 21, 2020

Attempt at making double slider accessible

7579fb2

jooyoungseo reviewed Aug 23, 2020

View reviewed changes

cpsievert modified the milestones: 1.5.1, 1.6 Oct 30, 2020

wch modified the milestones: 1.6, 1.7 Dec 4, 2020

cpsievert removed this from the 1.7 milestone Jun 29, 2021

mciethan mentioned this pull request Mar 26, 2024

additional features for screen reader compatibility bpda-research-division/neighborhood-change#59

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make sliderInput() accessible for keyboard and screen readers #3011

Make sliderInput() accessible for keyboard and screen readers #3011

cpsievert commented Aug 20, 2020 •

edited

Loading

jooyoungseo commented Aug 21, 2020 •

edited

Loading

jooyoungseo commented Aug 21, 2020 •

edited

Loading

jooyoungseo commented Aug 21, 2020

jooyoungseo left a comment

cpsievert commented Aug 21, 2020

jooyoungseo left a comment

jooyoungseo Aug 22, 2020

jooyoungseo Aug 22, 2020

jooyoungseo Aug 22, 2020

jooyoungseo Aug 22, 2020

mciethan commented Mar 26, 2024

Make sliderInput() accessible for keyboard and screen readers #3011

Are you sure you want to change the base?

Make sliderInput() accessible for keyboard and screen readers #3011

Conversation

cpsievert commented Aug 20, 2020 • edited Loading

Testing notes

jooyoungseo commented Aug 21, 2020 • edited Loading

jooyoungseo commented Aug 21, 2020 • edited Loading

jooyoungseo commented Aug 21, 2020

jooyoungseo left a comment

Choose a reason for hiding this comment

cpsievert commented Aug 21, 2020

jooyoungseo left a comment

Choose a reason for hiding this comment

jooyoungseo Aug 22, 2020

Choose a reason for hiding this comment

jooyoungseo Aug 22, 2020

Choose a reason for hiding this comment

jooyoungseo Aug 22, 2020

Choose a reason for hiding this comment

jooyoungseo Aug 22, 2020

Choose a reason for hiding this comment

mciethan commented Mar 26, 2024

cpsievert commented Aug 20, 2020 •

edited

Loading

jooyoungseo commented Aug 21, 2020 •

edited

Loading

jooyoungseo commented Aug 21, 2020 •

edited

Loading