--- layout: presentation title: Presenting Accessibly --Week N-- description: Information on how to present accessibly class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ # Welcome to the Future of Access Technologies Week 2, Presenting Accessibly {{site.classnum}}, {{site.quarter}} ] --- name: normal layout: true class: --- # Important Reminder ## This is an important reminder ## Make sure zoom is running and recording!!! ## Make sure captioning is turned on --- [//]: # (Outline Slide) [//]: # TODO: Update these slides # Learning Goals for this slide deck - Presenting Accessibly --- # Presenting Accessibly - First, make your slides accessible - Also share them at least 24 hrs ahead of the presentation (required to pass this competency, built into the assignment this week) --- # Slide Show Basics (1/9) Image Descriptions - Short description overviews image - Long description more complete - Not redundant with what access tools (e.g. screen reader) already tell the user (i.e. the type of an element such as "button" or "image" is not useful to include in ALT text) We'll talk about this a lot this quarter beacuse images, diagrams, videos, charts, and GUIs all require different types of descriptions. Today we will focus on photographs, because you will probably have them in your decks --- # Describing photographs (1/4) - Automated tools are not enough.    Is this meant to represent a maple leaf? or Canada? How would you describe the differences between these images if all are present? Only one? ??? Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. Web page authors must provide alternative text that represents the content and function of their images. --- # Describing Photographs (2/4) - Depends on setting. [Stangl et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) asked BLV people about News; SNS; eCommerce; Employment; Dating; Productivity and E-Publication). Includes a table of what to include when - Always include whether people are present; any text; names of objects present - Usually include activity; building features (if present); landmarks - Context matters, as covered in depth by [WebAim](https://webaim.org/) article on [ALT text](techniques/alttext/) --- # Describing photographs (3/4) [//]: # TODO: decide whether to show this [It's complicated](https://www.youtube.com/watch?v=By6nzFefcxs --- # Describing Photographs (4/4) - Depends on setting. [Stangl et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605). - Context matters, as covered in depth by [WebAim](https://webaim.org/) article on [ALT text](techniques/alttext/) - Pay attention to identity of people. [Bennett et al](https://dl.acm.org/doi/10.1145/3411764.3445498) interviewed BIPOC, Non-Binary and/or Transgender Blind people. --- # Context .left-column[  ] .right-column[ The Society for Disability Studies is pleased to announce that Dr. Lezlie Frye has won the Irving K. Zola Award for Emerging Scholars in Disability Studies for her paper: Cripping the “Crack Baby” Epidemic: A Feminist Genealogy. Dr. Frye is an Assistant Professor of Gender Studies and Disability Studies at the University of Utah in the Division of Gender Studies. ] --- # ALT text .left-column[  ] .right-column[ "Lezlie, a white woman, looks at us full front with curls down one size of her head and her long sleeve rolled up just on that side of a cowl neck wild abstract print shirt. Her smiling cheeks greet us." ] --- # ALT Text with Identity Markers? .left-column40[ [](https://kccnceu2021.sched.com/speaker/ian420) ] .right-column60[ <iframe src="https://embed.polleverywhere.com/free_text_polls/RnV5XziPoLsApagm1MssR?controls=none&short_poll=true" width="800px" height="600px"></iframe> ] --- # Slideshow Basics (2/9) - Image descriptions - Use structure - Use header styles to correctly label things; update styles to make them look good - Don't skip header levels - Use unique slide titles - makes navigation easier - put (x of y) in the title if repeating - Check slide order (like DOM order) --- # Slideshow Basics (3/9) - Image descriptions - Use headers & styles - Color contrast - We'll talk about this more, but you can use [this tool](TBD) to make sure that people with color blindness or other color-related accessibility needs can read your slides --- # Slideshow Basics (4/9) <style>.times {font-family:Times !important;}</style> - Image descriptions - Use headers & styles - Color contrast - San serif fonts - This is a san serif font - .times[This is a serif font] San serif is considered easier on the eyes for screen presentations --- # Slideshow Basics (5/9) - Image descriptions - Use headers & styles - Color contrast - San serif fonts - Simplify language - Simplify your slide - Embellish when you speak - Avoid clutter --- # What is clutter? Please, for the love of all that is good on this fine planet we call home, do not do this to your poor audience members They don’t deserve this! What did they do to you? They probably flew hundreds of miles and of all talks and things to do in this new place came to YOUR presentation. And what do you do? You greet them with this GIANT wall of text! How rude. It’s ugly to look at. It’s hard to read. It’s annoying as he ck for me to type out this thing just to make a point! So please, don’t do this to your audience members. Be a responsible presenter. Practice your talks so you don’t have to read off the slide (or use speaker notes! also okay!). Break up your content so looking at your slides isn’t like getting smacked in the face with a wall of text. **But there are exceptions! (e.g., if you have a thick accent)** --- # Slideshow Basics (6/9) - Image descriptions - Use structure - Color contrast - San serif fonts - Simplify language - Don't use color to convey meaning --- # Slideshow Basics (7/9) - Image descriptions - Use structure - Color contrast - San serif fonts - Simplify language - Don't use color to convey meaning - 9/10, you don’t need sound effects or visual effects --- # Slideshow Basics (8/9) - Image descriptions - Use structure - Color contrast - San serif fonts - Simplify language - Don't use color to convey meaning - 9/10, you don’t need sound effects or visual effects - Make sure videos are accessible - Videos should be captioned --- # Slideshow Basics (9/9) - Image descriptions - Use structure - Color contrast - San serif fonts - Simplify language - Don't use color to convey meaning - 9/10, you don’t need sound effects or visual effects - Make sure videos are accessible - Leave space for captions --- # When presenting - Speak slowly and clearly - Read entire quotes - Describe images and videos - Non-verbal content should be described (in the video, or by you) --- # When presenting How much to describe images Can a blind person follow your presentation and get the same informaiton as a sighted person?