Let's talk about accessibility

NHS-R / 2021-11-08

Transcript

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

   View Slide

2. $ 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
   

   View Slide

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

   View Slide

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

   View Slide

5. 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
   

   View Slide

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

   View Slide

7. 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
   

   View Slide

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

   View Slide

9. 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
   

   View Slide

10. 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
    

    View Slide

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

    View Slide

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

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. 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
    

    View Slide

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

    View Slide

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
    

    View Slide