Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shiny HTML element has no lang attribute #2844

Closed
gtritchie opened this issue Apr 24, 2020 · 6 comments · Fixed by #3087
Closed

Shiny HTML element has no lang attribute #2844

gtritchie opened this issue Apr 24, 2020 · 6 comments · Fixed by #3087
Assignees
@jooyoungseo
Labels
Type: Accessibility

Comments

@gtritchie
Copy link
Member

System details

  • Shiny 1.4.0.9002
  • R 3.6.3

Repro Steps

  • Create a simple Shiny App following tutorials or use the default template created in the RStudio IDE (New Project / Shiny Web Application)
  • Run the app and load into browser (I'm using Chrome on macOS)
  • Examine the HTML or run an accessibility validation tool such as Axe (https://www.deque.com/axe/axe-for-web/)

Problem

The HTML element has no lang attribute. This is a WCAG 2.1 A violation: https://www.w3.org/TR/WCAG21/#language-of-page

Expected

Pages should be accessible by default. Thus, there should be a reasonable default, and the ability to specify a different language. For English:

<html lang="en">

This is critical for screen readers, otherwise you can have (for example) a Spanish user's screen reader trying to pronounce English words using Spanish language rules.

There was a community question on this:
https://community.rstudio.com/t/how-to-specify-the-language-to-a-shiny-app/26472
@bklingen
Copy link

Making shiny more accessibility friendly would be huge. There is some discussion on it also in issue #2494 regarding alt text.

@daattali
Copy link
Contributor

What would you suggest - adding 'en' by default and exposing it as a parameter to fluidPage and other similar top-level page tags?

@daattali
Copy link
Contributor

By the way, anyone can add this to their shiny apps by just including anywhere in the UI the line

tags$html(lang="en")

@gtritchie
Copy link
Member Author

@daattali Nice, thanks for the tip! Just need to make that more prominent in our documentation and included in our examples and templates and that's probably sufficient.

@jooyoungseo
Copy link

By the way, anyone can add this to their shiny apps by just including anywhere in the UI the line

tags$html(lang="en")

Yes, that's possible; however, having document-level lang attribute would be ideal; local use of lang attribute should be limited to only when there is a language change to force screen readers to switch different speech synthesizers. Let me take care of this issue.

@jooyoungseo jooyoungseo self-assigned this May 30, 2020
@jooyoungseo jooyoungseo mentioned this issue Jun 9, 2020
Closed
@schloerke schloerke mentioned this issue Oct 5, 2020
Merged
@wch wch closed this as completed in #3087 Oct 5, 2020
@cderv cderv mentioned this issue Mar 3, 2021
Open
@r-leyshon
Copy link

r-leyshon commented Jun 26, 2023 •
edited
Loading

By the way, anyone can add this to their shiny apps by just including anywhere in the UI the line

tags$html(lang="en")

Yes, that's possible; however, having document-level lang attribute would be ideal; local use of lang attribute should be limited to only when there is a language change to force screen readers to switch different speech synthesizers. Let me take care of this issue.

@jooyoungseo Does this do what you need? Passes a WAVE check...

# set content language for screen reader accessibility   
  tags$head(HTML("<html lang='en'>"))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jooyoungseo jooyoungseo

Labels
Type: Accessibility
Projects
None yet
Milestone
No milestone
5 participants
@daattali @bklingen @gtritchie @jooyoungseo @r-leyshon