NHS-R / 2021-11-08 Let's talk about accessibility Colin Fay - ThinkR Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 1 / 19

$ whoami Colin FAY Data Scientist & R-Hacker at ThinkR, a french company focused on Data Science & R. Hyperactive open source developer, lead developer of the {golem} project, author of the Engineering Production Grade Shiny Apps book. https://thinkr.fr https://rtask.thinkr.fr https://twitter.com/_colinfay https://github.com/colinfay https://colinfay.me Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 2 / 19

Data Science engineering, focused on R. Training Software Engineering R in production Consulting ThinkR Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 3 / 19

⚠️ Disclaimer ⚠️ Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 4 / 19

I'm no accessibility expert I only have 15 minutes No tool can ever replace an audit by a real person Why this presentation? Web development 101 Make people in the R world more aware about the importance of accessibility when building tools that are to be shared to the world Disclaimer Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 5 / 19

Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 6 / 19

What is accessibility? From Accessibility in Context - The Web Accessibility Initiative https://www.w3.org/WAI/fundamentals/accessibility-intro/ The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web. Make tools & content that everyone can use and or access. Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 7 / 19

Accessibility in Practice Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 8 / 19

with_palette(matlab::jet.colors) with_palette(viridis::viridis) Color choices Color blindness (color vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. https://www.colourblindawareness.org/ From https://engineering-shiny.org/ux-matters.html#web-accessibility Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 9 / 19

with_palette( deuteranopia_jet_color ) with_palette( deuteranopia_viridis ) Color choices Using the {dichromat} package: Simulation of deuteranopia with jet.colors and viridis. From https://engineering-shiny.org/ux-matters.html#web-accessibility Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 10 / 19

Color choices The {viridis} 📦 Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 11 / 19

Color choices Emulate this using Google Chrome. Developer console > "More Tools" > "Rendering" > "Emulate vision deficiencies" Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 12 / 19

Screen readers Liz Hare PhD @DogGeneticsLLC PDF “cheat sheets” that aren’t screen reader accessible. As far as I’m concerned they are “empty documents.” @github @rstudio 9:41 PM · Sep 24, 2021 34 1 Copy link to Tweet Tweet your reply Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 13 / 19

Use HTML whenever possible Hierarchy matters (h2, h3, ...) Semantic HTML (nav, meny, footer) Use alt text library(shinipsum) library(ggplot2) p <- random_ggplot(type = "point") + labs(alt = "A very precise description of what the plot contains.") p Screen readers Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 14 / 19

library(shiny) # Older versions of {shiny} ui <- function(){ tagList( plotOutput("plot") |> tagAppendAttributes( alt = "A very precise description of what the plot contains." ) ) } server <- function( input, output, session ){ output$plot <- renderPlot({ plot(iris) }) } shinyApp(ui, server) library(shiny) # Newer versions of {shiny} ui <- function(){ tagList( plotOutput("plot") ) } server <- function( input, output, session ){ output$plot <- renderPlot({ plot(iris) }, alt = "Plot of iris" ) } shinyApp(ui, server) Screen readers Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 15 / 19

Visitors might have issue with moving their hands / arms. Example with the {nter} package (https://github.com/JohnCoene/nter) library(nter) library(shiny) ui <- fluidPage( textInput("text", ""), actionButton("send", "Do not click"), nter("send", "text") ) server <- function(input, output) { observeEvent( input$send , { print(input$text) }) } shinyApp(ui, server) Movements Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 16 / 19

Where to go next? I repeat: No tool can ever replace a real audit by a human. But to get started: IBM Equal Access Toolkit (https://github.com/IBMa/equal-access) open source tool to monitor the accessibility of a web application, has Google Chrome and Firefox Extensions. Evaluating Web Accessibility (https://www.w3.org/WAI/test-evaluate/), reports and advice about checking the accessibility of your website. https://www.webaccessibility.com/ has an online checker for web page accessibility, and allows you to freely test 5 pages. Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 17 / 19

📖 engineering-shiny.org/ux-matters.html Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 18 / 19

Thx! Questions? Find me Online colin@thinkr.fr http://twitter.com/_colinfay http://twitter.com/thinkr_fr https://github.com/ColinFay https://thinkr.fr/ https://rtask.thinkr.fr/ https://colinfay.me/ Colin FAY (@_ColinFay) - https://rtask.thinkr.fr 19 / 19