background-image: url(img/people.png) .left-column50[ # Document and Presentation Accessibility CSE513, Spring 2024 ] --- 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) # Learning Goals for Today - Creating Accessible Presentations and Documents - Presenting Accessibly - Discussion of Readings Not on the list: [Making PDFs accessible](https://www.washington.edu/accesstech/documents/). We may offer an out-of-class tutorial though! --- # First: When presenting live (1/2) - Speak slowly and clearly - Read entire quotes - Describe images and videos - Non-verbal content should be described (in the video, or by you) --- # First: When presenting live (1/2) Also share your (accessible) slides at least 24 hrs ahead of the presentation Today: Pay attention and raise your hand when I fail to do this! If you catch me, you get a surprise :). --- # Document Basics (1/11) - 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 --- # Document Basics (2/11) - Use structure properly - Color contrast .left-column50[ 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!] ] .right-column50[ - [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. --- # Document Basics (3/11) <style>.times {font-family:Times !important;}</style> - Use structure properly - 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; Serif is easier for printed documents --- # Document Basics (4/11) - Use structure properly - 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 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)** --- # Document Basics (5/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning ] .right-column50[ <i class="red fa fa-times-circle fa-1x" aria-hidden="true"></i> “required fields are in 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 'Required' and colored red" ] --- # Document Basics (6/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] --- # Document Basics (7/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] -- .right-column50[ - Links should be labeled appropriately, as described [here](https://www.washington.edu/accesstech/courses/canvas/links/). ] -- .right-column50[ Just kidding! as described on the [UW page explaining meaningful link text](https://www.washington.edu/accesstech/courses/canvas/links/) ] --- # Document Basics (8/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] .right-column50[ - Links should be [labeled appropriately](https://www.washington.edu/accesstech/courses/canvas/links/). - Provide a document title that describes its topic or purpose ] --- # Document Basics (9/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] .right-column50[ - Links should be [labeled appropriately](https://www.washington.edu/accesstech/courses/canvas/links/). - Provide a document title that describes its topic or purpose - Allow users to bypass blocks of content that are irrelevant or often repeated (e.g., bookmarks in a PDF) ] --- # Document Basics (10/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] .right-column50[ - Links should be [labeled appropriately](https://www.washington.edu/accesstech/courses/canvas/links/). - Provide a document title that describes its topic or purpose - Allow users to bypass blocks of content that are irrelevant or often repeated (e.g., bookmarks in a PDF) - Identify the language of the document (or individual parts of af multilingual document). ] --- # Document Basics (11/11) .left-column50[ - Use structure properly - Color contrast - San serif fonts - Simplify language - Don't use color or other visual characteristics to convey meaning - Ensure that the tab and reading order are logical and intuitive ] .right-column50[ - Links should be [labeled appropriately](https://www.washington.edu/accesstech/courses/canvas/links/). - Provide a document title that describes its topic or purpose - Allow users to bypass blocks of content that are irrelevant or often repeated (e.g., bookmarks in a PDF) - Identify the language of the document (or individual parts of af multilingual document). - Provide ALT text ] --- # How to Write ALT Text (1/2) Image descriptions should be concise, complete and accurate. You should use best practices to decide when to mention the background, describe people, and so on. --- # How to Write ALT Text (1/2) Read up on some of these links when you are faced with specific description needs .left-column50[ - [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) - Formatting and text styling - Images as links - [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) ] .right-column50[ - Animations/Videos (we'll talk more about this later today) - AR/VR ([Accessibility, Disabilities, and VR](https://educatorsinvr.com/2019/05/31/accessibility-disabilities-and-virtual-reality-solutions/)) - [Comparison of IoS and Android Rich Interactions](https://dl.acm.org/doi/pdf/10.1145/2851613.2851680?casa_token=dOz4huS0TUkAAAAA:zv0PjZk3-T8Bb4X2SfNpdZFuqO2u9v1jpWn5fq0hKZ0se6t5g0oMKLfrAmhlyufcw_3AuJ-ABZ2yWQ) - ... ] ??? 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 Identity (1/2) .left-column40[  ] .right-column60[ - 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) .left-column40[  ] .right-column60[ .quote[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[ ] .right-column60[ <iframe src="https://embed.polleverywhere.com/free_text_polls/htJZwY5gCkiqZql0ZyZyT?controls=none&short_poll=true" width="800px" height="600px"></iframe> ] --- # Bennet et al's description: .left-column40[ ] .right-column60[ .quote[A Black; disabled; non-binary person with a face mask walks down a neighborhood street with one hand in their pocket and the other hand on their cane. They have a short mohawk and are wearing a jacket; shorts; tennis shoes; and glasses] ] --- # Some Presentation Specific Notes (1/4) - Describe images with equity in mind - Can a BVI person follow your presentation and get the same information as someone without any visual impairment? --- # Some Presentation Specific Notes (2/4) - Describe images with equity in mind - 9/10, you don’t need sound effects or visual effects --- # Some Presentation Specific Notes (3/4) - Describe images with equity in mind - 9/10, you don’t need sound effects or visual effects - Make sure videos are accessible - Videos should be captioned (at a minimum) - Videos should be audio described (ideally) --- # Some Presentation Specific Notes (4/4) - Describe images with equity in mind - 9/10, you don’t need sound effects or visual effects - Make sure videos are accessible - Leave space for captions --- # In Class Exercise - Work on a description of the image you brought. Be sure to address things like identity in a way that feels comfortable to you. - Share it with a neighbor, then show them the image. Get feedback - Swap and repeat. - Post in the [class discussion board]() --- # How to add ALT Text to various things - HTML ```img src=... alt="Girl in a jacket" width="500" height="600"''' - "Content Creation Platforms" (e.g. wordpress, twitter) - Google Slides & Powerpoint - Word Documents - Any other questions? --- # "Homework" (do in class if possible) - Find an image of yourself online in a place you can edit* - Update it to have ALT text - If there is not an image of yourself that is editable, select someone else who is on a website you can edit or ask them to edit - I suggest a faculty member from the UW CSE faculty page whose image does not include ALT text - generate ALT text and check if they are ok with the description you generated. - I will help update the page once they approve (for CSE faculty)
