class: title-slide, middle # Teaching Accessibility in the Data Science Curriculum ## Mine Dogucu ### Department of Statistics Seminar at University of California Irvine <br> [mdogucu.github.io/uci-stats-2022](https://mdogucu.github.io/uci-stats-2022) ### 2022-06-02 --- class: middle ## Statistics - 61 million adults in the United States live with a disability - 26 percent (one in 4) of adults in the United States have some type of disability. - 4.6 percent of people with a disability have a vision disability with blindness or serious difficulty seeing even when wearing glasses. [CDC Infographic on disability](https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html) --- class: middle ## ADA Americans With Disabilities Act (ADA) of 1990 prohibits discrimination against individuals with disabilities in all areas of public life. **Ableism** is discrimination in favor of able-bodied people. --- class:center <img src="img/bayes-rules-hex.png" title="a hex shaped logo with shiny green-pink disco ball and purple starry background. There is text that says Bayes Rules!" alt="a hex shaped logo with shiny green-pink disco ball and purple starry background. There is text that says Bayes Rules!" width="25%" style="display: block; margin: auto;" /> .pull-left[ <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" data-auto-replace-svg="nest"></script> <i class="fas fa-book fa-2x" aria-hidden="true" title="Book icon"></i> [Bayes Rules! An Introduction to Applied Bayesian Modeling](https://bayesrulesbook.com) ] .pull-right[ <i class="fab fa-r-project fa-2x" aria-hidden="true" title="R logo"></i> [{bayesrules}](https://www.github.com/bayes-rules/bayesrules) ] --- class: middle .pull-left[ .center[ <img src="img/alicia.jpeg" alt="A headshot of a woman with long blonde hair wearing a brownish yellow tshirt and a red and pink floral silk scarf wrapped around her neck." style="width:165px; margin-top:20px; border: 3px solid whitesmoke; padding: 10px;"> Alicia Johnson .font-20[Macalester College] [<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://ajohns24.github.io/portfolio) [<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>](https://github.com/ajohns24) ] ] .pull-right[ .center[ <img src="img/miles.png" alt="A headshot of a man with short dark hair, and a dark moustache. He is wearing a blue button up shirt and dark gray jacket" style="width:165px; margin-top:20px; border: 3px solid whitesmoke; padding: 10px;"> Miles Ott .font-20[Twitter] [<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://milesott.com/) [<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>](https://github.com/MilesOtt) [<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>](https://twitter.com/Miles_Ott) ] ] --- class: middle [Dogucu, M., Johnson, A. A., & Ott, M. (2021). Framework for Accessible and Inclusive Teaching Materials for Statistics and Data Science Courses. arXiv preprint arXiv:2110.06355.](https://arxiv.org/abs/2110.06355) --- class: center middle ### Accessibility and Inclusion |Accessibility and Inclusion Criteria |Questions | |:------------------------------------|:---------------------------------------------------------------------------| |Accessibility |Is the cost affordable for learners from diverse socioeconomic backgrounds? | | |Are plots distinguishable to color blind learners? | | |Is alt text provided for images? | --- class: center middle |Accessibility and Inclusion Criteria |Questions | |:------------------------------------|:----------------------------------------------------------------------------------------| |Inclusivity of scholars |Do the cited scholars represent diversity across identities, experiences, and expertise? | | |Are scholars cited using the correct names and pronouns? | --- class: center middle |Accessibility and Inclusion Criteria |Questions | |:------------------------------------|:----------------------------------------------------------------------------------------------| |Inclusivity of students |Do examples avoid the necessity of specialized knowledge? | | |Do names and pronouns reflect diverse cultural and personal identities? | | |Are there examples that could potentially speak to younger as well as older students? | | |Does the delivery embrace mistakes and critical thinking? | | |Are efforts made to accommodate different academic experiences and create a shared foundation? | --- class: middle ## Teaching Accessibility I was supported by the [Teach Access](https://teachaccess.org/) network. <img src="img/teach_access_logo.jpg" title="Teach Access logo that is an illustration of a bridge" alt="Teach Access logo that is an illustration of a bridge" width="40%" style="display: block; margin: auto;" /> --- class: middle .center[ <img src="img/jooyoung.jpeg" alt="A headshot of a man with short, straight, dark hair. He is wearing a white button up shirt and black rectangular glasses." style="width:165px; margin-top:20px; border: 3px solid whitesmoke; padding: 10px;"> JooYoung Seo .font-20[University of Illonois Urbana-Champaign] [<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://jooyoungseo.github.io/) [<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>](https://github.com/jooyoungseo) [<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>](https://twitter.com/seo_jooyoung) ] --- class: middle [Computing Competencies for Undergraduate Data Science Curricula](https://dstf.acm.org/DSReportDraft2Full.pdf) by Association for Computing Machinery (ACM) Data Science Task Force Draft 2 was published in **December 2019** Analysis and Presentation, Foundational considerations, Knowledge **Accessibility considerations for different groupings of users including those with special needs** --- class: middle ## Accessibility as Career Preparation [Accessible Technology Skills Gap Report by The Partnership on Employment & Accessible Technology (PEAT), 2018](https://www.peatworks.org/infographic-the-accessible-technology-skills-gap/) 84% of industry respondents say it is important or very important to their company to hire developers and designers with accessible technology skills. 60% said it was difficult or very difficult for their organization to find job candidates with accessibility skills. 0% said it was easy or very easy. 41% of companies consider accessibility certification credentials as a differentiator in hiring. --- class: middle ## Curriculum Goal As educators, we have to ensure that the current and the next generation of data scientists, provide public-facing outputs (websites, analysis reports, etc.) that are accessible. --- class: middle ## Learning Objectives - Student should get familiar with American Disabilities Act. - Students should use at least one assistive technology (i.e. screen reader). - Students should consider different representations of data. --- class: middle ## Assistive Technology - Assistive Technology is any form of technology (software, device) that helps people with disabilities perform certain activities. Examples: - walking sticks - wheel chairs - screen readers --- class: middle ## Screen reader A screen reader is an assistive technology that supports blind or visually impaired people in using their computer. <!-- We can do a demo here--> --- class: middle Students can use screen reader on Windows and Mac - If you are on a Windows machine go to Settings > Ease of Access > Narrator,and then turn on the toggle under Use Narrator. - If you are on a Mac go to System Preferences > Accessibility > Voice Over > Enable Voice Over --- class: middle ## Data Visualization - Colors <img src="index_files/figure-html/unnamed-chunk-3-1.png" title="Three separate scatterplots in three rows showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the points representing each observation are red, green, and blue respectively." alt="Three separate scatterplots in three rows showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the points representing each observation are red, green, and blue respectively." style="display: block; margin: auto;" /> --- class: middle ### Color Blindness Simulator ```r colorblindr::cvd_grid(fig) ``` <img src="index_files/figure-html/unnamed-chunk-5-1.png" title="A 2 by 2 grid of four scatterplots. The scatterplots are the same as the scatterplot in the previous figure except for colors. From left to right and top to bottom the plots read deutanomly, protanomly, tritanomly, and desaturated" alt="A 2 by 2 grid of four scatterplots. The scatterplots are the same as the scatterplot in the previous figure except for colors. From left to right and top to bottom the plots read deutanomly, protanomly, tritanomly, and desaturated" width="40%" style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): red-blind/protanopia <img src="img/red-blind.png" title="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible." alt="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible." width="60%" style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): green-blind/deuteranopia <img src="img/green-blind.png" title="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible. The gray background is also a bright pink." alt="The same scatterplots are displayed but Adelie and Chinstrap penguin data are shown with a very similar yellow-brownish green. There is no red visible. The gray background is also a bright pink." width="60%" style="display: block; margin: auto;" /> --- class: middle [Color blindness simulation](https://www.color-blindness.com/coblis-color-blindness-simulator/): blue-blind/tritanopia <img src="img/blue-blind.png" title="The same scatterplots are displayed but Adelie and Gentoo penguin data are shown with a very similar greenish blue." alt="The same scatterplots are displayed but Adelie and Gentoo penguin data are shown with a very similar greenish blue." width="60%" style="display: block; margin: auto;" /> --- class: middle ### Okabe-Ito Color Palette ```r palette.colors(palette = "Okabe-Ito") ``` ``` ## black orange skyblue bluishgreen yellow blue vermillion ## "#000000" "#E69F00" "#56B4E9" "#009E73" "#F0E442" "#0072B2" "#D55E00" ## reddishpurple gray ## "#CC79A7" "#999999" ``` --- class: middle ```r fig + colorblindr::scale_color_OkabeIto() ``` <img src="index_files/figure-html/unnamed-chunk-11-1.png" title="Three separate scatterplots in three rows showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the points representing each observation are orange, blue, and green respectively." alt="Three separate scatterplots in three rows showing bill depth and bill length of three separate species of penguins Adelie, Chinstrap, and Gentoo respectively and the points representing each observation are orange, blue, and green respectively." width="45%" style="display: block; margin: auto;" /> --- class: middle ### Resources [Color Blindness Simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/) You can upload any image and in return get an image with colors that would be visible to color-blind people with specific color vision deficiency. [Okabe-Ito 2008](https://jfly.uni-koeln.de/color/) Color Universal Design. Color palette that is color-blind friendly. [Okabe-Ito color-palette](https://mikemol.github.io/technique/colorblind/2018/02/11/color-safe-palette.html) Color codes for Okabe-Ito palette. --- class: middle ## Data Verbalization ### Alternate Text - "Alt text" describes contents of an image. - It is used in HTML pages. - Screen-readers cannot read images but can read alt text. - Alt text has to be provided. - We can verbalize data via alternate text. --- class: center middle ## (some) Chunk Options in R Markdown <table align = "center"> <tr> <td>echo = FALSE</td> <td>hides the code</td> </tr> <tr> <td>warning = FALSE</td> <td>hides warning</td> </tr> <tr> <td>error = TRUE</td> <td>renders despite errors and displays the error</td> </tr> <tr> <td>fig.cap = "Some figure caption"</td> <td>creates a figure caption</td> </tr> <tr> <td>fig.align = "center"</td> <td>centers the figure in the page</td> </tr> <tr> <td>fig.alt = "Some alternate text for figure"</td> <td>creates alternate text for figures</td> </tr> </table> --- class: middle <img src="img/alttext-github-issue.png" title="GitHub issue created on RStudio's RMarkdown repo asking for fig.alt option to be created" alt="GitHub issue created on RStudio's RMarkdown repo asking for fig.alt option to be created" width="100%" style="display: block; margin: auto;" /> --- class: middle ### Manual Alternate Text - Chart type - Type of data - Reason for including the chart - Link to data or source (not in alt text but in main text) [Amy Cesal](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81) --- class: middle ### Data Verbalization - Automated <img src="index_files/figure-html/unnamed-chunk-14-1.png" style="display: block; margin: auto;" /> The automated alternate text for this plot is on the next slide. --- class: middle ### Data Verbalization - Automated ```r BrailleR::VI(example_barplot) ``` ``` ## This is an untitled chart with no subtitle or caption. ## It has x-axis 'transmission' with labels automatic and manual. ## It has y-axis 'count' with labels 0, 5, 10 and 15. ## The chart is a bar chart with 2 vertical bars. ## Bar 1 is centered horizontally at automatic, and spans vertically from 0 to 19. ## Bar 2 is centered horizontally at manual, and spans vertically from 0 to 13. ``` <hr> Drawback of using `VI()` is that not every type of plot can be verbalized yet. --- class: middle ### Alternate Texts are Under Utilized in the Data Science Community "Over the 3 years of TidyTuesday, there were 7,136 data viz tweets and only 215 (3%) of them had alt-text" [Canelón & Hare, 2021 ](https://github.com/spcanelon/csvConf2021) --- class: middle ## Data Sonification Data sonification is the presentation of data as sound. Examples: [SAS Graphics Accelerator Examples](https://support.sas.com/software/products/graphics-accelerator/samples/index.html) [SAS Graphics Accelerator Chrome Extension](https://chrome.google.com/webstore/detail/sas-graphics-accelerator/ockmipfaiiahknplinepcaogdillgoko?hl=en) R example: ```r sonify::sonify(1:10) ``` --- class: middle ## Data Tactualization Data tactulization refers to making data visualization in a form so that it can be touchable by fingers. .center[ <iframe width="560" height="315" src="https://www.youtube.com/embed/ClI555l4Z1M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ] --- class: middle ## Data Tactualization .pull-left[ ```r library(tactileR) brl_begin(file = 'tactile.pdf', pt = 11, paper = 'special', font='BRL') hist(airquality$Ozone) brl_end() ``` ] <!--the swell touch paper through swell form heating machine--> .pull-right[ <img src="img/hist-braille.png" title="A histogram with x and y labels, title displayed in Braille." alt="A histogram with x and y labels, title displayed in Braille." width="80%" style="display: block; margin: auto;" /> ] --- class: middle ## When? - Stats 5 - Seminar in Data Science - ICS 80 - Introduction to Data Science - Stats 295 - Scientific Computing with R --- class: middle ## Important Take-Aways - Relevant to undergraduate and graduate curriculum - Can be taught in language-specific and language-agnostic courses - Students should be assessed on the practice of accessibility practices - Students should be able to take away this knowledge to non-data specific courses. --- class: middle center ## Thank you <hr> Mine Dogucu <i class="fa-solid fa-envelope" title="Email Icon"></i> [mdogucu@uci.edu](mailto:mdogucu@uci.edu) <i class="fa-brands fa-twitter" title="Twitter Icon"></i> [MineDogucu](https://twitter.com/MineDogucu) <i class="fa-brands fa-github" title="GitHub Icon"></i> [mdogucu](https://github.com/mdogucu)