Web accessiblity for shiny app

shiny
#1

Hello,

I tried to assess web accessibility of the following small application using the tool WAVE and I get an error related to selectinput (no label for a form control)

Here is the code:

x=c("Cylinders" = "cyl","Transmission" = "am","Gears" = "gear")

shinyApp(
  ui = fluidPage(
    selectInput("variable", "Variable:",x),
    tableOutput("data")
  ),
  server = function(input, output) {
    output$data <- renderTable({
      mtcars[, c("mpg", input$variable), drop = FALSE]
    }, rownames = TRUE)
  }
)

Here is the wave ouput:

12 PM
12 PM918×717 97.6 KB

Could you help me solve the labeling issue?

Thanks,

FE

2 Likes
#2

Hello,

I was trying to test if the described shiny app was 508 compliant. One of the errors was the labeling in the select input. I think the command "selectInput" generate a HTML code not 508 complaint (with extra div).

Using HTML code solves the issue: Here is the new app code:

library(shiny)
x=c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear")

shinyApp(
ui = fluidPage(
HTML('
Variable:


'),

# selectInput("variable", "Variable:",x),

tableOutput("data")

),
server = function(input, output) {

output$data <- renderTable({mtcars[, c("mpg", input$variable), drop = FALSE]}, rownames = TRUE)

}
)

As you can see in Wave the label error is gone:

18 PM
18 PM895×801 91.1 KB

Any other suggestions without Html raw code?

FE

1 Like
#3

Here is the HTML code

     <label class="control-label" for="variable">Variable:</label>
    <select id="variable"><option value="cyl" selected>Cylinders</option>
    <option value="am">Transmission</option>
    <option value="gear">Gears</option></select>
    <script type="application/json" data-for="variable" data-nonempty="">{}</script>