如何为 Shiny 应用实现 ARIA 标签以满足 WCAG 要求？

Question

我正在用 Shiny 编写一个应用程序，旨在通过使用 ARIA 标签（可访问的富互联网应用程序）来满足 WCAG-2.0+（Web 内容可访问性指南）标准。为此，我尝试使用嵌入闪亮小部件/功能中的 html 标签，但收效甚微。 Shiny 似乎无法识别 ARIA 标签，也无法通过更改属性来更改它。

例如，如何将 aria 标签附加到以下内容？

a( href = "http://www.thislogo.com")
    img(src = "logo.png",
    title = "The logo",
    height = "60px",
    alt = "This is a picture of the logo, clicking on it links to thislogo.com",
    HTML("aria-label = "logo")
)

我试过的第二个例子：

a(href = "http://www.thislogo.com",
            img(src = "logo.png",
            title = "The logo",
            height = "60px",
            alt = "This is a picture of the logo, clicking on it links to thislogo.com",
            aria-label = "logo"
        )
    )

第三个对我不起作用的例子：

    a(href = "http://www.thislogo.com",
        img(src = "logo.png",
        title = "The logo",
        height = "60px",
        alt = "This is a picture of the logo, clicking on it links to thislogo.com",
        tags$html(aria-label = "logo")
    )
)

我想知道是否有适当的方法来实现它，目前是否支持 Shiny？我试着到处搜索，但这个话题似乎很少被讨论或仍在开发中。

我找到的最接近的示例是关于检查检查可访问性的讨论 (link), or changing the language attribute (link)，但没有太多关于实际实现 ARIA 标签的讨论。

感谢您的见解。

Answer 1

当您要添加的属性由多个词组成时（如“aria”和“label”），您需要将其用反引号括起来，如下所示：

img(src = "logo.png",
    title = "The logo",
    height = "60px",
    alt = "This is a picture of the logo",
    `aria-label` = "logo")

<img src="logo.png" title="The logo" height="60px" alt="This is a picture of the logo" aria-label="logo"/>

如何为 Shiny 应用实现 ARIA 标签以满足 WCAG 要求？

How to implement ARIA tags for Shiny applications to meet WCAG requiremnets?

html

accessibility

r

wai-aria

shiny