$30 off During Our Annual Pro Sale. View Details »

Let's talk about accessibility

Colin Fay
November 08, 2021

Let's talk about accessibility

NHS-R / 2021-11-08

Colin Fay

November 08, 2021
Tweet

More Decks by Colin Fay

Other Decks in Technology

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

    View Slide