Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Thx! Questions? Find me Online [email protected] 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