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

【问题标题】：How to implement ARIA tags for Shiny applications to meet WCAG requiremnets?如何为 Shiny 应用程序实现 ARIA 标签以满足 WCAG 要求？
【发布时间】：2022-01-31 16:16:39
【问题描述】：

我正在 Shiny 中编写一个应用程序，旨在通过使用 ARIA 标签（可访问的富 Internet 应用程序）来满足 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) 或更改语言属性 (link) 的讨论，但关于实际实现 ARIA 标记的讨论并不多。

感谢您的见解。

【问题讨论】：

你所有的例子似乎都有不匹配的引号，如src = "logo.png'，这是你真实代码的一部分，还是只是这个问题的一个特殊错字？
感谢您的回复 r2evans！这实际上是一个错字。我会看看我是否可以通过编辑来纠正它。这只是我尝试过的事情的一个例子，我更好奇是否有人在闪亮的环境中使用 aria 标签成功。或者正确的方法。干杯！
这是一个公平的问题，我对这个话题很感兴趣。当问题有可能导致解析错误或完全不相关的错误时，试图知道您实际拥有什么可能会令人沮丧。感谢您进行编辑。
非常感谢您的关注！尤其是在代码方面很烦人，下次我一定会仔细检查。感谢您指出它，如果不纠正它会混淆其他人。这是我第一次在堆栈溢出上发帖，在潜伏了很长时间之后，所以这仍然是一个学习过程。希望有人对此主题有一些见解:)

标签： html r shiny accessibility wai-aria

【解决方案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"/>

【讨论】：