6.4 Web accessibility

6.4.1 About accessibility

Audience: large audience

Figure 6.4: Accessibility in Context

6.4.2 Making your app accessible

A. Hierarchy: respect the order of importance

B. HTML element: Semantic tags, and tag metadata:

• without “meanings”:

  <div> or <span>

• have a specific “meanings”: meaningful (Semantic tags)

  <title> or <article>
  <address>, <video>, or <label>

• metadata

  alt we can use the tagAppendAttributes()

ui <- function(){
  
  tagList(
    plotOutput("plot") %>% 
      # Adding the `alt` attribute to our plot
      tagAppendAttributes(alt = "Plot of iris")
  )
}

It will be crucial to screen-to-speech technology: the software will read the <title> tag, jump to the <nav>, or straight to the `

on the page.

C. Navigation: make everything doable with a keyboard

  textInput() with a validation button and {nter} package

# Adapted from https://github.com/JohnCoene/nter
library(nter)
library(shiny)

ui <- fluidPage(
  # Setting a text input and a button
  textInput("text", ""),
  # This button will be clicked when 'Enter' is pressed in 
  # the textInput text
  actionButton("send", "Do not click hit enter"),
  verbatimTextOutput("typed"),
  # define the rule
  nter("send", "text") 
)

server <- function(input, output) {
  
  r <- reactiveValues()
  
  # Define the behavior on click
  observeEvent( input$send , {
    r$printed <- input$text
  })
  
  # Render the text
  output$typed <- renderPrint({
    r$printed
  })
}

shinyApp(ui, server)

D. Color choices: recommended to use provided color composition such as viridis or other specific combinations.

Here as an example is the build of a function, but other packages can be used such as {dichromat} packages which simulates color blindness.

with_palette <- function(palette) {
  x <- y <- seq(-8 * pi, 8 * pi, len = 40)
  r <- sqrt(outer(x^2, y^2, "+"))
  z <- cos(r^2) * exp(-r / (2 * pi))
  filled.contour(
    z,
    axes = FALSE,
    color.palette = palette,
    asp = 1
  )
}

with_palette(matlab::jet.colors)

6.4.3 Evaluating your app accessibility and further reading

How to evaluate accessibility?

A. Emulate vision deficiency using Google Chrome

B. External tools