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

I am writing an application in Shiny that aims to meet WCAG-2.0 (Web Content Accessibility Guidelines) standards by using ARIA tags (Accessible Rich Internet Applications). Doing so, I tried using html tags embedded within the built in shiny widgets / functions, but with very little success. It seems like Shiny was unable to identify the ARIA tags and there's no way to change it by changing the attributes.

For example, how do I attach an aria tag to the following?

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 second example I tried:

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 third example that didn't work for me:

    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")
    )
)

I was wondering if there's a proper way to implement this and is it even supported for Shiny at the moment? I tried searching everywhere, but this topic seems to be rarely discussed or still in development.

The closest example I found was a discussion on checking for checking accessibility (link), or changing the language attribute (link), but not a lot of discussion on actually implementing ARIA tags.

Thanks for your insights.

CodePudding user response：

When the attribute you want to add is composed of several words (like "aria" and "label"), you need to wrap it in backticks, like the following:

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"/>