background-image: url(img/people.png) .left-column50[ # Document and Presentation Accessibility CSE493e, Fall 2024 ] --- name: normal layout: true class: --- # Important Reminder .left-column[ ] ## Make sure zoom is running and recording!!! ## Check on zoom buddies ## Make sure captioning is turned on --- # Access requests Deadline reminders - Slides due today (latest Wednesday) - Timing impacts presenting accessibly grade - Participation weekly survey (on [canvas](https://canvas.uw.edu/courses/1746643)) Arrival & breaks - Class is short, but I won't call anyone out for coming and going - I will try to integrate a SHORT break Shorter bullets Captions --- # From the participation survey Are asking questions during section/lectures mandatory for a grade? -- No Other comments: Noted --- [//]: # (Outline Slide) # Learning Goals for Today - Creating Accessible Presentations and Documents - Presenting Accessibly - Get comfortable with basic image description (images, people) - 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! --- # When presenting live (1/3) - 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!) --- # When presenting live (2/3) .left-column[  ] If there are 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) ??? --- # When presenting live (3/3)* Share your (accessible) slides at least 1d ahead (2d is best) 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 - Sans serif fonts - This is a sans serif font - .times[This is a serif font] ??? Sans 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 - Sans 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 - Sans 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> Wrong: “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) - Use structure properly - Color contrast - Sans 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 --- # PowerPoint / Google Slides order - tab-order == reading order - Slides go back (highest z) to front --- # Document Basics (7/11)* - 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/) --- # Document Basics (8/11) - 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) - 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) - 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 a multilingual document). --- # Document Basics (11/11) - 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 a multilingual document). - Provide ALT text --- # 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? --- # How to describe photographs    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 .left-column50[  ] .right-column50[ .quote[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]] --- exclude: true # 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. - 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 because 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 --- # 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. .left-column60[ ![:youtube 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,By6nzFefcxs] ] ??? 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) .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[ Think / Pair / [Ed post](https://edstem.org/us/courses/67367/discussion/5376196) ] --- # Bennett 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] ] --- # Many different situations to consider 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 --- # Image Description Competency You will be evaluated on this any time you turn in a document that has images in it. 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. **Breadth matters too** Excellence is only possible after at least two different types of images are successfully described. --- # More on Presenting Accessibly (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? --- # More on Presenting Accessibly (2/4)* - Describe images with equity in mind - 9/10, you don’t need sound effects or visual effects --- # More on Presenting Accessibly (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) --- # More on Presenting Accessibly (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 --- # Accessible Presenting Competency - Follows almost all guidelines / Violates no guidelines: Excellent - Follows most guidelines / Violates only a few guidelines: Competent - Follows only a few guidelines / Violates guidelines: Not Competent [Canvas](https://canvas.uw.edu/courses/1746643/outcomes) has the guidelines --- # Accessible Documents Competency This applies to presentations, word documents, and PDFs. You’ll need to demonstrate this on - At least one presentation - At least one assignment write up that is long and complex enough to have headers and structure Similar rubric --- # Try this - 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) Post your image + ALT text on [this Ed thread](https://edstem.org/us/courses/67367/discussion/5384148)!
