我正在使用reactable在R Markdown中的一个HTML文档中创建交互式表格。为了让我的表格更好地符合WCAG标准，我需要为表格中嵌入的按钮分配唯一的aria标签，以便屏幕阅读器可以区分哪些按钮做什么。我可以通过reactableLang和detailsExpandLabel用字符串自定义aria标签。然而，这只允许我用另一个静态标签替换默认的静态标签（“Toggle details”）。我想根据同一行中另一列的值为每个按钮创建一个唯一的标签。但是，我无法弄清楚语法，或者我想做的事情是否可以使用这种方法。谢谢！
有问题的行是detailsExpandLabel = . . .，我尝试使用paste0("Notes for ", df$Unique.ID)，但为每个按钮创建了相同的aria标签，其中包含df$Unique.ID的所有值。我还尝试使用[index]和for循环编写函数，但没有任何成功。
library(tidyverse)
library(reactable)
df <- iris %>% dplyr::mutate(Unique.ID = sample(500, size = nrow(iris), replace = FALSE),
Notes = dplyr::case_when(Petal.Length < 1.5 | Petal.Width > 2.1 ~ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
TRUE ~ NA_character_)) %>%
dplyr::relocate(Unique.ID, .before = Sepal.Length)
reactable::reactable(
dplyr::select(df, -Notes),
details = reactable::colDef(
name = "Notes",
details = function(index) {
note <- df$Notes[index]
if (!is.na(note)) {
return(note)
}
}
),
language = reactable::reactableLang(
detailsExpandLabel = "Notes for {Unique.ID}"
)
)
1条答案
按热度按时间m528fe3b1#
我不熟悉框架，所以我不知道生成它的代码是什么样子的，但是你要找的是行标题。
示例：
使用这种方法，用户可以从表格标题中获得他们需要的所有上下文。如果他们水平浏览第1行，他们知道他们仍然在James行中（或者可以很容易地找到）。从那里，如果用户向下浏览到下一个Details按钮，它将宣布它与Goku行标题单元格的关系，为他们提供足够的上下文。
关于按钮本身的快速说明。我推断Details按钮将显示内联或类似的附加内容，因此值得查看WAI-ARIA文档中的Disclosure design pattern。