# Document and Presentation Accessibility ## CSE513: Fall 2025 Jennifer Mankoff 2025-08-16 Important Reminder: check zoom & captioning <a href="/courses/cse513/25au/slides/presenting.html">Live View: /slides/presenting.html</a><br> <a href="/courses/cse513/25au/slides/presenting.html"><img src="https://api.qrserver.com/v1/create-qr-code/?data=/slides/presenting.html&size=100x100" alt="QR for /courses/cse513/25au/slides/presenting.html" title="" /></a> --- class: center, middle, inverse # Announcements --- ## Assigned Leads & Topics for Student-run Discussions - 10/1 RJ & GB (thank you!!! -- Design) - 10/15 NP: Intersectionality - 10/27 EA: Sustainibility - 11/5 ML & KG: AI - 11/10 YM: Inclusive Studies - 11/12 JL: Viz - 11/19 JD: Higher Ed - 11/24 TKB: Collaboration in Accessibility - 12/1 EL: SE & Mobile Apps --- ## Updated Details on Readings & Discussion Leads - Discussion leads will read at most 2 papers each (framing + specific) and prepare slides. More details are in the [Discussant assignment](../assignments/discussant.html) - Class members read assigned papers and post answers to provided reading questions in Ed by 5pm the day before the relevant class. This helps your discussion leads - Class members can also volunteer to *facilitate* discussion in class (this gains a participation point). Facilitator details also in [Discussant assignment](../assignments/discussant.html), and includes leading a small group discussion, taking notes and reporting back. --- class: center, middle, inverse # Learning Goals --- ## Today's learning goals: - Creating Accessible Presentations and Documents - Presenting Accessibly - Get comfortable with basic image description Not on the list: Making PDFs accessible --- class: center, middle, inverse # Accessible Presenting --- ## Best practices for presenting accessibly **Pay attention and raise your hand when I fail to do this! If you catch me, you get a surprise :).** - Speak slowly and clearly - Read entire quotes - Describe images and videos - Non-verbal content should be described (in the video, or by you) - Finish on time (yes, this is an accessibility thing!) - Share your (accessible) slides at least 1d ahead (2d is best) --- ## Virtual attendees - Share a link to slides to follow along - Read out questions from chat or ask others to do so - Specific any accessibility needs in chat (i.e. turn your video off, or don't interrupt) --- ## Media - Describe images with equity in mind - Can a BVI person follow your presentation and get the same information as someone without any visual impairment? - Similar to [writing ALT text](05_image_description.html) (which we cover later today) - Make sure videos are accessible - Videos should be captioned (at a minimum) - Videos should be audio described (ideally) --- ## Visuals - 9/10, you don’t need sound effects or visual effects - Many best practices in document accessibility (coming up) help with presentation too - Leave space for captions - Simplify; Avoid clutter (Embellish when you speak) --- ## 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 heck 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)** --- ## Accessible Presenting Competency - Tell us which video you want to be assessed (from the class videos including discussion leads; and AT around us presentations) - Provide timestamps for places in the video where any of the following best practices are demonstrated. Note that your presentation must have positive examples of at least three of these to be assessed as excellent on this competency. - We review and check for - examples of enough good practices - no violation --- class: center, middle, inverse # Image Description --- ## Lots of best practice guidance Image descriptions should be concise, complete and accurate. Here is a good overview of [Images, SVG, and Canvas](https://dequeuniversity.com/class/images/toc) best practices. - [Photograph](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) - [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) - [Diagrams](https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=9028522&casa_token=zZw_rYBgu1AAAAAA:eozpbJ-vvMZjQNt8p6WU91X4uFumPs-yVuMn4PTPRjyMhtsVrprdIEe1JfYOCUdv8SFP_TGd9s965Q&tag=1); [Visualizations](https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9555469) - [Memes](https://dl.acm.org/doi/10.1145/3308561.3353792) - [GUIS](https://dl.acm.org/doi/10.1145/3411764.3445040) - [AR/VR](https://educatorsinvr.com/2019/05/31/accessibility-disabilities-and-virtual-reality-solutions/) - An image with people in it ([best practices in inclusive description](https://dl.acm.org/doi/10.1145/3411764.3445498)) ??? All of these require different strategies to describe them well. Read up on some of these links when you are faced with specific description needs --- ## How to describe photographs .row[ .column[] .column[] .column[] ] 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 Depends on setting. [Stangl et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) asked BLV people about News; Employment; Dating; etc. Findings: - **Include whether people are present**; text; name objects - Usually include activity; building features; landmarks --- ## Back to the maple leaf <!-- .element: width="40%" --> <!-- .element: width="40%" class="recenter" !important --> > A realistic image of a Canadian flag with a red maple leaf on a white background. Shadows and curves suggest it is blowing in the wind. Nothing other than the flag is visible --- ## QUICK BREAK Good time to stand and stretch --- ## When to Describe Identity [Bennett et al](https://dl.acm.org/doi/10.1145/3411764.3445498) interviewed BIPOC, Non-Binary and/or Transgender Blind people. <iframe width="560" height="315" src="https://www.youtube.com/embed/By6nzFefcxs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> <span class="media-title-hidden">Youtube Video: a video describing the results of a study with people with disabilities with intersectional identities about their preferences for how to describe diverse people in image descriptions</span> </iframe> ??? When is identity important - Meeting new people - Identity is the topic of discussion - Seeking specific first person perspectives - Want/need to understand representation in the media - Need to "read" a room, for example to decide whether to code switch --- ## How to Describe Identity (1/2) .column[] - OK to mention race, gender, and disability status in that case - Otherwise use appearance (skin color, "person" instead of gender, AT use but not disability status) Original announcement: Dr. Lezlie Frye has won [an award] for .red[*her*] paper; alt text (probably) written with her input. --- ## How to Describe Identity (1/2) .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. --- .offscreen[ ## ALT Text with Identity Markers? ] .left-column[ <iframe src="https://pollev-embeds.com/free_text_polls/2YvNAUA6uMrDAEaeozAEO/respond" width="800px" height="600px"></iframe>] .right-column[ Think / Pair / Share at PollEv.com/jmankoff  ] --- .offscreen[ ## Image Description Results ] <iframe src="https://embed.polleverywhere.com/free_text_polls/WpBgZOUbn6Nrk62z46bPO?controls=none&short_poll=true" width="800px" height="600px"></iframe> --- ## Disabled and Here's [description](https://affecttheverb.com/gallery/disabledandhere/tothetrail/) .column[] > A disabled Black non-binary hiker uses trekking poles and looks at a wooden sign with “Nature House” and “Trillium Trail ♿” marked ahead. The shot is framed with the hiker walking toward the camera and the hiker sports a shaved head, glasses, a gray peplum shirt, black shorts, and black tennis shoes. .footnote[Image credit: [Disabled and Here](https://affecttheverb.com/gallery/disabledandhere/tothetrail/)] --- ## Think / Pair / Post - Show your partner your hard to describe image - Discuss: How would you describe it? Which paper might help you? - [for participation credit: Post the image and alt text in Ed's classroom activities channel, along with the relevant paper you found] Image descriptions should be concise, complete and accurate. Here is a good overview of [Images, SVG, and Canvas](https://dequeuniversity.com/class/images/toc) best practices. [Photograph](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605); [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605); [Diagrams](https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=9028522&casa_token=zZw_rYBgu1AAAAAA:eozpbJ-vvMZjQNt8p6WU91X4uFumPs-yVuMn4PTPRjyMhtsVrprdIEe1JfYOCUdv8SFP_TGd9s965Q&tag=1); [Visualizations](https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9555469); [Memes](https://dl.acm.org/doi/10.1145/3308561.3353792); [GUIS](https://dl.acm.org/doi/10.1145/3411764.3445040); [AR/VR](https://educatorsinvr.com/2019/05/31/accessibility-disabilities-and-virtual-reality-solutions/); An image with people in it ([best practices in inclusive description](https://dl.acm.org/doi/10.1145/3411764.3445498)) --- class: center, middle, inverse # Accessible Document Basics --- ## Accessible Documents Competency This applies to presentations and word documents. We're sticking to Microsoft. You hand in: - Your document - A list of images and alt text - A list of best practices - A screen shot of the accessibility checker in your document editor --- ## Structure - Use structure properly - Use header styles to correctly label things - Don't skip header levels - Headings should form an outline of the page content - Use unique slide titles (makes navigation easier) - Use lists to identify all content that can be described as a list of something - Use tables used for content (not layout) and label their headers properly ??? update styles to make them look good use 1/n for slide titles --- ## Color Contrast - WCAG Level AAA requires a contrast ratio of at least - .contrast71[7:1 for normal text] - .contrast41[4.5:1 for large text (14t pt bold or larger)] - .badcontrast[Avoid anything else!] - Other tools - [Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) is an excellent tool for extracting the color value from any page element; - WebAIM has a [contrast checker](https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,value%20from%20any%20page%20element) ??? Choose colors that provide enough contrast between content and the background so that anyone with low-vision impairments and color deficiencies can perceive the content. --- ## Also: Don't depend on color Don't use color or other visual characteristics to convey meaning <i class="red fa fa-times-circle fa-1x" aria-hidden="true"></i> Wrong: “required fields are in .red[red]” <i class="red fa fa-times-circle fa-1x " aria-hidden="true"></i> Wrong: “click the circle on the right” <i class="green fa fa-check fa-1x" aria-hidden="true"></i> Correct: "required fields are labeled .red['Required'] colored red" --- ## Fonts - Sans serif fonts are better for visual display - .times[Serif fonts are better for print documents] ??? Sans serif is considered easier on the eyes for screen presentations; Serif is easier for printed documents --- ## Reading order (slide and web issue) - tab-order ≡ order - PowerPoint has a nice interface for adjusting this - Google slides does not (yet) --- ## Other Considerations - Provide a document title that describes its topic or purpose - Identify the language of the document (or individual parts of a multilingual document). - Allow users to bypass blocks of content that are irrelevant or often repeated (e.g., bookmarks in a PDF) - Links should be labeled appropriately, as described [here](https://www.washington.edu/accesstech/courses/canvas/links/). -- Just kidding! as described on the [UW page explaining meaningful link text](https://www.washington.edu/accesstech/courses/canvas/links/) --- ## Add ALT Text - HTML ```img src=... alt="Girl in a jacket" width="500" height="600"''' - "Content Creation Platforms" (e.g. WordPress, twitter) - Google Slides & PowerPoint - Word Documents --- class: center, middle, inverse # Slide Practice --- ## If there's time - Download PowerPoint from [AT Around Us](../uwnetid/) (uwnetid) or [AT Around Us](../csenetid/) (csenetid) - Run the accessibility checker - Start fixing things!