# Document Accessibility Information on how to present accessibly and make presentations and documents accessible CSE443: Winter 2026; Jennifer Mankoff (Last Edited: 2026-01-09). <a href="/courses/cse443/26wi/slides/presenting.html">Live View: /slides/presenting.html</a> Important Reminder: check zoom & captioning <a href="/courses/cse443/26wi/slides/presenting.html"><img src="https://api.qrserver.com/v1/create-qr-code/?data=/slides/presenting.html&size=100x100" alt="QR for /courses/cse443/26wi/slides/presenting.html" title="" /></a> --- <div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;"> <h2 style="margin-top: 0;"> Outline </h2> <ul style="list-style-type: none; padding-left: 0;"> <li><a href="#9">Learning Goals</a> (Slide 9)</li> <li><a href="#11">Accessible Presenting</a> (Slide 11)</li> <li><a href="#17">Accessible Document Basics</a> (Slide 17)</li> <li><a href="#27">Slide Practice</a> (Slide 27)</li> </ul> </div> --- class: center, middle, inverse # Announcements --- ## AT Around Us Groups <p>Assignment Groups for AT Around Us have been <a href="https://edstem.org/us/courses/90089/discussion/7494392">posted on Ed</a></p> <p>If you were unable to connect with your groupmate(s) in Section this week, please find them in class today or reach out via email (also posted on Ed)</p> --- ## On grade weighting (Jesse was wrong!) <p>In Section, Jesse said Competencies = 3.1/4.0 of the final grade. That’s not correct! Competencies constitute 3.75/4.0</p> <p>‘Competent’ (3/4) on each competency results in 3.1 out of a possible 3.75. ‘Excellent’ on each competency results in the full 3.75.</p> <p><em>(Don’t worry, Jesse made this slide, he’s not getting called out!)</em></p> --- ## Where does the other .25 come from? <ul> <li>Extra credit points. You report them to us. Examples: <ul> <li>Share an example of using something in this class somewhere else in your life</li> <li>Provide evidence that you practice or complete an optional in-class assignment at home (such as laser cutting, accessible presenting, etc)</li> <li>Turned in answers to most reading questions</li> <li>Do extra work on an assignment</li> </ul> </li> </ul> --- ## What else can impact my grade <ul> <li>regrades – once you do a competency <em>individually</em> once you can request regrades</li> <li>not doing things – if you don’t turn in a bunch of homeworks, we will reduce your grade</li> <li>final project problems – if your final project has badly done competencies in it, this will impact your individual grade</li> </ul> --- ## Reminder: Reading Responses <p>As a reminder, there are weekly readings in this class!</p> <p>Be sure to check the course schedule for the content, and Ed for the thread of this week’s reading questions.</p> <p>Please aim to reply there by Monday (if possible)!</p> --- 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) - 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)** --- 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](../csenetid/ATSlides.pptx) (csenetid) - Run the accessibility checker - Start fixing things!