Add ALT to imageOutput/plotOutput

[trafficonese]

Optional parameter to add alt attribute to img-tag in renderPlot and renderCachedPlot.

closes #612

Shiny-App to Test it

library(shiny)
ui <- fluidPage(
  fluidRow(
    column(4,
      sliderInput("obs", "Number of observations:",
                  min = 1, max = 1000, value = 500)
    ),
    column(8,
      plotOutput("distPlot"),
      plotOutput("distPlotALT"),
      plotOutput("plotCach"),
      plotOutput("plotCachALT")
    )
  )
)
server <- function(input, output, session) {
  output$distPlot <- renderPlot(alt="alternative text", {
    hist(rnorm(input$obs))
  })
  output$distPlotALT <- renderPlot({
    hist(rnorm(input$obs))
  })
  
  output$plotCach <- renderCachedPlot({
    Sys.sleep(2)  # Add an artificial delay
    seqn <- seq_len(input$obs)
    plot(mtcars$wt[seqn], mtcars$mpg[seqn],
         xlim = range(mtcars$wt), ylim = range(mtcars$mpg))
  },
  cacheKeyExpr = { list(input$obs) }
  )
  output$plotCachALT <- renderCachedPlot(alt="alternative text", {
    Sys.sleep(2)  # Add an artificial delay
    seqn <- seq_len(input$obs)
    plot(mtcars$wt[seqn], mtcars$mpg[seqn],
         xlim = range(mtcars$wt), ylim = range(mtcars$mpg))
  },
  cacheKeyExpr = { list(input$obs) }
  )
}
shinyApp(ui, server)

[wch]

I think it makes more sense to put the alt argument on plotOutput and imageOutput, given that the alt text is not dynamic. Then it also does not need to be added to renderPlot, renderCachedPlot and renderImage.

[trafficonese]

But in plotOutput / imageOutput I don't have access to the img tag just the surroundig div or?

I think it makes more sense to put the alt argument on plotOutput and imageOutput, given that the alt text is not dynamic. Then it also does not need to be added to renderPlot, renderCachedPlot and renderImage.

[wch]

Yes, this would require adding data to the div and then on the JavaScript side, adding the alt property to the img tag. That would be in srcjs/output_binding_image.js.

[CLAassistant]

All committers have signed the CLA.

[trafficonese]

I'm having problems resolving the JS-checks.

I did run yarn clean and yarn build. I then rebuild the package and submitted the changes.
Is that the right procedure? Or should I not re-build the package after yarn build?

Another problem (on Windows 10) is that the build process errors with this message:

..\srcjs\_start.js
  9:20  error  Parsing error: Unterminated string constant

   7 |   var exports = window.Shiny = window.Shiny || {};
   8 |
>  9 |   exports.version = "1.4.0.9001
     |                     ^
  10 | ";  // Version number inserted by Grunt

I have to manually insert the version and then run build.

[leonawicz]

@wch I'd like to add that I was working on some wrapper functions to apply dynamic alt text on the server side and came across this issue and PR. I routinely get requests from people for dynamic alt text in Shiny apps. The static option is a bare minimum, but I think it makes more sense and is more critical to expose this attribute in the render* functions so it can be dynamic.

Technically, dynamic alt text can be achieved directly with renderImage() already, though contextually there is less reason to need dynamic alt text for images (but it's not difficult to find a need for this with a collection of images). For dynamic plots though, the same cannot be achieved with renderPlot(), which is the context where dynamic alt text is often very useful and important in Shiny apps.

shinyApp(
  ui = fluidPage(
    actionButton("btn1", "Update plots"),
    plotOutput("plot1", width = "400px"),
    imageOutput("img1")
  ),
  server = function(input, output, session){
    output$plot1 <- renderPlot({
      list(hist(rnorm(30)), alt = "Can't do this obviously.")
    })
    output$img1 <- renderImage({
      input$btn1
      x <- rnorm(30)
      alttext <- paste("Dynamic alt text. Mean(x):", round(mean(x), 3))
      outfile <- tempfile(fileext = ".png")
      png(outfile, width = 400, height = 400)
      hist(x)
      dev.off()
      list(src = outfile, contentType = "image/png", alt = alttext)
    })
  }
)

Something like an alt argument to renderPlot() and imagePlot() makes the most sense to me. Without this option, I would use observers and attach dynamic alt text separately to any number of plot ID tags in an app, but that seems like not a good use of resources. But the static text option in the *output() functions alone doesn't address a key accessibility need for dynamic content. It forces alt text to be less informative or complete than should be necessary for many plots. Any chance this might get turned around in shiny? Otherwise I can continue working on my own dynamic option separately.

[schloerke]

Ideas of things we could support...

• alt - Text displayed when image is not found. Penn State Accessibility description on img alt
• title - Tooltip when hovering over image.
• longdesc - Specifies a URL to a detailed description of an image

@leonawicz @olyerickson Are there any other tag attributes that should also be dynamic? (Or only just alt for images?) Getting these to be dynamic would be good to have.

[schloerke]

Requesting Changes to block merging. The idea is good, but we should look to take more dynamic arguments from within renderPlot.

It might still be good to have the ... passed through in the plotOutput and imageOutput, but know that they could be overwritten by the result of a renderPlot execution.

[schloerke]

Since alt exists, let's remove it from $el. (The alt attribute is only allowed for img tags)

[olyerickson]

As I understand it, ultimately plots are embedded as img. Our objective is to make it easy to tag Shiny plots in a couple ways:

• If the plot is stand-alone, specify the alt text for the plot
• If the plot one of a group, use tags$div to specify role="img" and aria-label="The text" for the group

For details on acceptable "grouping" of img tags, see esp. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img

UPDATE: I see you are already are looking at the PSU guidelines; thanks!
https://accessibility.psu.edu/images/imageshtml/

[leonawicz]

@schloerke @olyerickson

longdesc is no longer supported

The other suggestions seem good to me if I understand correctly. arialabelledby is also helpful, but the user would want to pair that with an id elsewhere.

[jooyoungseo]

@leonawicz,

I was wondering if you were working on a separate PR for dynamic alt text.

If so, please kindly make a PR for review when you are ready.

[leonawicz]

@jooyoungseo My suggestion to accommodate server-side dynamic control rather than a static text option is still relevant, but no I am not working on this or other related PR.

[jooyoungseo]

Thanks very much for your response, @leonawicz.

@trafficonese, if you don't mind, I will do the rest of the house-cleaning stuff.

[itsozz]

Having recently read this thread in relation to improving the accessibility of my team's Shiny apps, we've published the following article on Medium: Alt text for dynamic plots in Shiny in case it is useful to the discussion.

It uses the technique @leonawicz mentions regarding observers and plot ids.

[leonawicz]

@jooyoungseo @itsozz A colleague and I also have a package we've been working on here and there called shinyaccess. We haven't been able to work on it for a while but please feel free to check it out.

While I would love for this package to grow to offer as much accessibility and inclusive design as may be possible, I think what would be best for the community in the end is for something like this to be largely redundant with respect to a future version of the shiny package; perhaps for this to become an "opinionated design/alternative collection of Shiny widgets" package. But for now we just want to add as much accessibility features and considerations that we find lacking in the base shiny package. Maybe it's not feasible in the near term for the shiny package to accommodate everything in terms of accessibility on its own, given things like backward compatibility requirements etc., I really don't know.

[jooyoungseo]

Thanks very much for the great work, @leonawicz.

Ideally, we want to make Shiny accessible itself, and I have been working on each widget for accessibility. Some widgets need to be patched and tweaked around. For example, we have just made selectInput() accessible via #2993. The next target is sliderInput(), which we will have to patch IonRangeSlider.js for accessibility improvements. Please take a look at our NEWS.md for recent accessibility improvements. It would be greatly appreciated if you could contribute to this movement either via issues or PRs.

[itsozz]

@leonawicz, I'll have a look at shinyaccess as soon as I can, thanks for letting me know. Sounds like a very useful package.

@jooyoungseo, great to hear about the accessibility improvements being made to Shiny, thanks for the update. I briefly mentioned the contrast and font size issues with sliderInput() in my article. Would this be useful adding as a comment to PR #3003?

[jooyoungseo]

I briefly mentioned the contrast and font size issues with sliderInput() in my article. Would this be useful adding as a comment to PR #3003?

Yes, it would be greatly appreciated if you could add a comment to the PR.

[jooyoungseo]

I am closing this PR in favor of another follow-up PR (#3006).

Thank you very much everyone for all the great input.