R Shiny selectizeInput Accessibility缺少表单标签

k7fdbhmy  于 2023-05-04  发布在  其他
关注(0)|答案(1)|浏览(120)

bounty明天到期。回答此问题可获得+50声望奖励。jasbner正在寻找一个答案从一个有信誉的来源

例如,我有一个非常基本的闪亮应用程序,您可以选择一个字母:

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(3, selectizeInput("Letters", "Choose a Letter",
      choices = LETTERS, multiple = TRUE)
    )
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

我需要这个闪亮的应用程序是508兼容/访问。如果我通过像WAVE这样的Web可访问性测试运行它,我会得到一个关于此selectizeInput部分缺少表单标签的错误。

我相信这是因为添加了一个随机的div,它不具有与“选择一个字母”标签引用的相同的ID。标签是Letters-selectized的,显示可访问性错误的div的ID是Letters。有没有办法解决这个错误?我知道你可以添加render到selectizeInput的选项中,但是我还没有找到一种方法来纠正这个特殊的div。
基于ismirsehregal的注解如果我尝试使用tagQuery为ID“Letters”添加额外的标签,我会得到一个重复的表单标签错误。我相信这是因为即使我指定了"for" = "Letters",输出仍然是for = "Letters-selectized"

library(shiny)
library(htmltools)

ui <- fluidPage(
  {queryfluidRow <- tagQuery(fluidRow(
    column(3, selectizeInput("Letters", "Choose a Letter",
      choices = LETTERS, multiple = TRUE))
    )
  )
  queryfluidRow$find("#Letters")$parent()$prepend(tag("label hidden",list("class" = "control-label","for" = "Letters", "Custom Tag")))$allTags()}
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

添加的tagQuery标签html如下所示,并产生其他错误。我可能不理解标签和表单控件选择之间的底层html关系。但是,我假设在tagQuery中设置"for" = "Letters"会将标签分配给正确的ID:

<label hidden="" class="control-label" for="Letters-selectized">Custom Tag</label>
<select id="Letters" class="form-control selectized shiny-bound-input" multiple="multiple" tabindex="-1" style="display: none;"></select>
cidc1ykv

cidc1ykv1#

{shinyjs}允许您i.a.在客户端执行javascript代码。因此,您可以通过其id查询label元素并设置其for属性,如下所示:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),  # include shinyjs
  fluidRow(
    column(3, selectizeInput("Letters", "Choose a Letter",
      choices = LETTERS, multiple = TRUE)
    )
  )
)

server <- function(input, output, session) {
  runjs('document.getElementById("Letters-label").setAttribute("for", "letters")')
}
shinyApp(ui = ui, server = server)

顺便说一句,除了上面的库,**Shiny Awesome**列出了更多,好吧,为闪亮的应用程序真棒扩展。Nan Xiao的荣誉。

相关问题