diff --git a/assets/css/style.scss b/assets/css/style.scss index 845e441e0a9df78b2a7725136fb63bde27a2ac3c..67efd9d21f0e51adb38169008e1fcdf037bc24f7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -184,7 +184,7 @@ dl dt.demonstration { padding:5px; } -dl dt.module { +h1.module { style:bold; font-size: 2em; background-color: $gradient-light; diff --git a/assignments/technology-implementation.md b/assignments/technology-implementation.md new file mode 100644 index 0000000000000000000000000000000000000000..09cf0d88176857effe581e954ed6a1d9c160fac2 --- /dev/null +++ b/assignments/technology-implementation.md @@ -0,0 +1,74 @@ +--- +layout: assignment +published: true + +title: Post GUI Implementation +description: Learn about post-GUI accessibility +code: hw4b + +assigned: Jan 31, 2023 +due: + - Feb 7, 2023, 5pm Pacific + - Two day grace period, Feb 9, 2023 + +revised: April 12, 2023 + +--- + +* TOC +{:toc} + +# Overview +The goal of this homework is to build something that is accessible and uses post-gui technologies. Specifically, you should create a *more accessible version* of something that both disabled people and people with out accessibility needs might both want to use. For example, you might create +- A screen-reader accessible COVID visualization +- A simple educational game that cane be used with switch input +- A CAPTCHA interface that can be used with an on screen keyboard for someone who uses switch input +- A simple VR environment that is supports magnification and verbal description for low vision and screen reader users +- A physical attachment for a spray bottle that makes it easier to squeeze + +It is *fine* to re-use something you've already made for a class or for fun and just make it more accessible. +If you make something from scratch, keep it simple and focus on learning how to build it in an accessible fashion. + +## Learning Goals / Competencies +This homework may contribute to your competency grade on +- TBD + +## Length and Difficulty +This is a new assignment, so we are still figuring this out! Please bear with us and reach out if you have trobule! + +# Details +To complete this assignment, please do the following + +## 1. Select a specific app or object that you will make more accessible +You should build something that makes use of the technology you studied for your report in part 1. The details on what you should do are provided in a separate homework specific to your post GUI technology. Links are below. + +{% details Possible technologies (this list is still unders construction) %} +- Educational Games for young children +- Online spaces for kids with disabilities (any age) +- Tools for learning programming +- Visualization: Create an accessible visualization +- Fabrication: Make an object more accessible using [laser cutting or 3D printeing](lasercutting.html) +- Physical Computing: Build a [button](button.html) that makes it easier to control a real world object +- Security/Privacy: Make a password or CAPTCH interface more accessible +- VR/AR: Create a better physical game controller or make a game or environment more accessible +- Other: Speak with the instructors +{% enddetails %} + +## 2. Select a target audience (which assistive technology) +Be clear about which accessibility aid (such a screen reader, magnifier or single switch input) *or* which perceptual concern (such as color blindness) your modifications are addressing. + +## 3. Record the following information for us + +- What technology did you pick +- What did the application look like before you made it accessible +- What did it look like after you made it accessible +- What audience did you improve it for? +- Record a video of yourself using it with the accessibility technology you designed your solution for +- Check with us about what to do if these requirements don't quite fit (i.e. for fabrication). + +TODO: add accessibility requirements for the turn in + +# Turnin + +You will turn your accessible write up and recorded video on Canvas + diff --git a/assignments/technology-review.md b/assignments/technology-review.md index 8d447a95186b3ff3791bde96cea5141012dfd975..459a91f5bcc8d87a5a0d772b0d843b74859185b5 100644 --- a/assignments/technology-review.md +++ b/assignments/technology-review.md @@ -2,9 +2,9 @@ layout: assignment published: true -title: Technology Review +title: Post GUI Review description: Learn about post-GUI accessibility -code: hw4 +code: hw4; assigned: Jan 31, 2023 due: diff --git a/assignments/website.md b/assignments/website.md index 2470a3a72d19a3834d5c584c825a3eea3463cbb3..533293b415ca4f0a3c53e94b2f415568e35e8262 100644 --- a/assignments/website.md +++ b/assignments/website.md @@ -95,7 +95,7 @@ Here are some resources that may help you in gaining comfort with these accessib - Advanced voice based input: [voice programming](https://www.youtube.com/watch?v=YKuRkGkf5HU) ## 3. Record the data in a *Usability Aspect Report* -Record each group of similar issues you find using this [Usability Aspect Report Template](webegs/UAR_Template.doc). Here is a [sample](webegs/DDUARS.docx) that a prior student has kindly shared with us for you to look at. Make sure that your UARs are accessible +Record each group of similar issues you find using this [Usability Aspect Report Template](webegs/UAR_Template.doc). Here is a [sample](webegs/DDUARS.docx) that a prior student has kindly shared with us for you to look at. Make sure that your UARs are accessible. Be sure to include problems that you found with an automated tool *and* things that you could only find using manual testing with a screen reader or magnification or other accessibility technology. Some key things to make note of: - **Good or Bad Feature** *If your website as very accessible* you may include UARS for particularly good features @@ -109,7 +109,5 @@ Some key things to make note of: # Turnin -Submit your UARS as an attachment to the appropriate [discussion]({{site.discussion}}) - - - +- Submit your UARS as an attachment to the appropriate [discussion]({{site.discussion}}) +- Also write an answer to this question: What are some examples of problems you could only identify with manual testing? diff --git a/schedule.md b/schedule.md index cfbb3b1a61fb152e18e24d2c1c998ccfffb5d7f8..f912503c13e6b2067438be42f6889d3b21c23f5b 100644 --- a/schedule.md +++ b/schedule.md @@ -8,8 +8,8 @@ warning: draft * TOC {:toc} -{: .module} # Module 1: Accessibility Basics -: +{: .module} +# Module 1: Accessibility Basics {: .week} # Week 1 (9/27 - 9/29): Introduction to Disability & Accessibility @@ -24,13 +24,12 @@ warning: draft : **Slides** {% include slide.html title="Introduction to Course" loc="introduction.html" %} -{: .activity} In class activity: Learn how accommodations can make a meeting more inclusive -: **In class Exercise** Put your accommodation needs into [PollEverywhere](TBD), follow along with the class discussion, reflect and [share](TBD) - {: .homework} Required Reading and Reflection -: **Required** +: + +- **Required** - Read about [Disability Dongles](https://www.vox.com/first-person/2019/4/30/18523006/disabled-wheelchair-access-ramps-stair-climbing) and [**Respond**](TBD) - **Optional** +- **If you want to dig deeper** - Defining Article [Disability Dongles](https://blog.castac.org/2022/04/disability-dongle/) by Liz Jackson {: .homework} [Class Participation survey](TBD) @@ -46,9 +45,6 @@ TBD (possibly trying out accessibility technologies) **Slides** {% include slide.html title="In Class Activities" loc="accessibility.html" %} -{: .activity} In class activity: Analyze the language & content of this video (see slides) -: **In class Exercise** Watch [The Greatest - Apple](https://www.youtube.com/watch?v=8sX9IEHWRJ8), follow along with the class discussion, reflect and [share](TBD) - {: .homework} [AT Around Us](assignments/finding-accessibility.html) Assigned: Find Accessibility Technologies : @@ -58,40 +54,41 @@ TBD (possibly trying out accessibility technologies) {% enddetails %} {: .week} -# Week 2 (10/2 - 10/6): Accessibility Testing +# Week 2 (10/2 - 10/6): Accessible Documents & Disability Justice {% details Learning Goals %} +We will start understanding how to make documents accesible +- How to present accessibly +- Get comfortable with basic image description (images, people) +- Plain Language +And study disability justice - Understand models for disability-centered design - What is Disability Justice -- What is the difference between Disability studies, Disability Justice; and various models of disability -- Plain Language {% enddetails %} -{% details Monday 10/2: Accessible Presentations %} +{% details Monday 10/2: Accessible Presentations and Plain Language%} -**Slides** {% include slide.html title="Accessible Presentations and Presenting Accessibly" loc="presenting-accessibly.html" %} +- **Slides** {% include slide.html title="Accessible Presentations and Presenting Accessibly" loc="presenting-accessibly.html" %} +- (if time) start on - **Slides** {% include slide.html title="Introduction to Plain Language" loc="disability-justice.html" %} {: .homework} Required Reading and Reflection (for Wednesday) -: **Required** -- The [10 principles of disability justice](https://static1.squarespace.com/static/5bed3674f8370ad8c02efd9a/t/5f1f0783916d8a179c46126d/1595869064521/10_Principles_of_DJ-2ndEd.pdf) and post your [Reflection](tbd) - +: + +- **Required** + - The [10 principles of disability justice](https://static1.squarespace.com/static/5bed3674f8370ad8c02efd9a/t/5f1f0783916d8a179c46126d/1595869064521/10_Principles_of_DJ-2ndEd.pdf) and post your [Reflection](tbd) +- **If you want to dig deeper** + - [Design, Disability and Knowing the 'Other'](TBD) and [**Respond**](TBD) + {: .homework} [Class Participation survey](TBD) : {% enddetails %} -{% details Wednesday 10/4: Disability Justice and Plain Language %} +{% details Wednesday 10/4: Plain Language and Disability Justice %} +- Finish **Slides** {% include slide.html title="Introduction to Plain Language" loc="disability-justice.html" %} - **Slides** {% include slide.html title="Introduction to Plain Language" loc="plain-language.html" %} -- **Slides** {% include slide.html title="Introduction to Plain Language" loc="disability-justice.html" %} - -{: .activity} Skill Goal: Analyze a topic from a disability justice perspective -: **Small Group Discussion** Analyze masking from a disability justice perspective ([share](TBD)) - -{: .activity} Skill Goal: Analyze a piece of technology from a Disability Justice perspective -: **Small Group Discussion** Analysis of the iPhone ([share](TBD)) - {: .homework} [Disability Justice Homework](assignments/disabilityjustice.html) Assigned: Pick an access topic and analyze it from a disability justice perspective. : @@ -117,268 +114,258 @@ Practice with Plain Language {: .week} # Week 3 (10/9-10/13): Accessibility Assessment 1: Guidelines and Assessment -{: .prepare} Come Prepared -: Come to class with an image, diagram, or other graphic you want to describe; Be prepared (install and try out) one of: switch control, a screen reader, or magnification on your phone - {% details Learning Goals %} - What are the current accessibility standards -- Get comfortable with basic image description (images, people) - How do we use automated tools to assess accessibility - How can we use accessibility technology to assess accessibility - Get comfortable using existing freely available accessibility technology to support assessment +- More advanced accessibility techniques + - Differences between Image description, Diagram description and UI description + - Video description & Captioning + - Math, Tables & other elements (including custom interactors) {% enddetails %} -{% details Class Plan %} +{% details Monday 10/2: Accessibility Testing %} -{: .topic} Monday: Introduction to Assessing Accessibility & Practice -: **Slides** {% include slide.html title="Assessing Accessibility" loc="assessment.html" %} +- **Slides** {% include slide.html title="Accessibility Testing" loc="testing.html" %} -{: .activity} Skill Goal: Image Description -: **In class Exercise** Break into small groups and show each other the inaccessible images you found. Work on a short and long description appropriate to your image type. ([google doc](TBD)) +{: .homework} Required Reading and Reflection (for Wednesday) +: -{: .topic} Monday: Guidelines 1.1, 1.2, and Automated Assessment -: **Slides Continue** {% include slide.html title="Assessing Accessibility Cont..." loc="assessment.html#45" %} +- **Required** + - Accessibility Testing: Read [The importance of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/) and [**Respond**](TBD) + - Read about [creating accessible images and diagrams](https://dis.acm.org/2023/creating-accessible-figures-and-tables/) and [**Respond**](TBD) + - Find a non-text content on the web that does not have ALT text (something other than a photograph) + - [Post](https://edstem.org/us/courses/31170/discussion/2394641)) a description of [the leftmost GUI](img/assessment/gui.png) + - Audio Description: Read [What is audio description?](https://adp.acb.org/articles/adprocess.html) (from [The Audio Description Project](https://www.acb.org/adp/ad.html)) and [**Respond**](TBD) + - Read the [Website Testing Homework](assignments/website.html) and [tell us the top 3 websites you'd like to be assigned to assess](TBD) +- **If you want to dig deeper** + - Read about [Switches](https://axesslab.com/switches/) + - Try out the [Image ALT Text Tutorial](https://webaim.org/techniques/alttext/) + - Watch: [Rescribe: Authoring and Automatically Editing Audio Descriptions](https://www.youtube.com/watch?v=jmyPmT5T0PY) -{: .activity} Skill Goal: Automated Assessment -: **In class Exercise** Use WebAIM [Wave](https://wave.webaim.org/) to [assess the Seattle Public Schools Website](https://wave.webaim.org/report#/https://www.seattleschools.org/) ([share](TBD) +{: .homework} [Class Participation survey](TBD) +: + +{% enddetails %} + +{% details Wednesday 10/4: Accessibility Standards %} -{: .topic} Wednesday: Guidelines 1.3, 1.4, and Manual Assessment -: **Slides Continue** {% include slide.html title="Assessing Accessibility Cont..." loc="assessment.html#52" %} +{: .prepare} Come Prepared +: Come to class with an image, diagram, or other graphic you want to describe -{: .activity} Skill Goal: Use Accessibility Technologies to assess the same website -: **Slides** {% include slide.html title="Assessing Accessibility Cont..." loc="assessment.html#65" %} +**Slides** {% include slide.html title="Accessibility Standards & Media Accessibility" loc="assessment.html" %} -**In class Exercise** Break into small groups. Each pick one of the following and try out the website -- Screen reader -- Switch input -- Magnification +{: .homework} [Website Testing Homework](assignments/website.html) Assigned: Assess a website and generate UARS for it +: -Try to find something you didn't find with an automated tool. ([share](TBD)) +{: .homework} [Class Participation survey](TBD) +: {% enddetails %} +{% details Thursday: Section %} +Practice with Accessibility Assesssment +{% enddetails %} -{% details Preparation for next week %} -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) -: +{% details Friday 10/13: More Website Standards %} -{: .homework} [Website/app accessibility](assignments/website.html) Assigned: Assess and write a report +**Slides** {% include slide.html title="More Accessibility Standards" loc="assessment2.html" %} + +{: .homework} [Class Participation survey](TBD) : + +{% enddetails %} -{: .homework} Readings for next week -: +{: .week} +# Week 4 (10/16-10/20): Building Accessible Interfaces & Remediating Problems + +{% details Learning Goals %} +- How accessibility works under the hood +- More on navigation and its impact +- What are the tradeoffs between different tools? +{% enddetails %} + +{% details Monday 10/16: What's the best way to Assess a Website?%} - - **Come to next class prepared** to use either switch control, a screen reader, or magnification on your phone. - - Accessibility Testing: Read [The importance of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/) and [**Respond**](TBD) - - **Come to next class prepared** with an image you found on the web that does not have ALT text - - ALT text: Read about [creating accessible images and diagrams](https://dis.acm.org/2023/creating-accessible-figures-and-tables/) and watch [It's complicated](https://www.youtube.com/watch?v=By6nzFefcxs) and [**Respond**](TBD) - - Audio Description: Read [What is audio description?](https://adp.acb.org/articles/adprocess.html) from [The Audio Description Project](https://www.acb.org/adp/ad.html) and [**Respond**](TBD) -- **Optional** - - [Switches](https://axesslab.com/switches/) - - [Image ALT Text Tutorial](https://webaim.org/techniques/alttext/) +**Slides** {% include slide.html title="Comparing Automated Testing and Manual Testing" loc="comparing-approaches.html" %} +{: .homework} Required Reading and Reflection (for Wednesday) +: -- **Required Readings:** Respond to the Reading Questions and Preparation Requirements. +- **Required** - Read: About how [web semantics are conveyed to screen readers](https://alistapart.com/article/semantics-to-screen-readers/) and [**Respond**](TBD) - - Read: [Is your web page accessible? A comparative study of methods for assessing web page accessibility for the blind](https://dl.acm.org/doi/10.1145/1054972.1054979) and [**Respond**](TBD) - - Read [Design, Disability and Knowing the 'Other'](TBD) and [**Respond**](TBD) - Read: [Accessibility in Software Practice: A Practitioner’s Perspective](https://dl.acm.org/doi/abs/10.1145/3503508) and Respond on Ed (TBD) - **If you want to dig deeper** + - Read: [Is your web page accessible? A comparative study of methods for assessing web page accessibility for the blind](https://dl.acm.org/doi/10.1145/1054972.1054979) and [**Respond**](TBD) - Read: [Comparison of different methods for accessibility testing](https://sol.sbc.org.br/journals/index.php/jis/article/view/1778/1848) Mateus etal, 2021 - Watch: [Google Video on Practical Web Accessibility](https://www.youtube.com/watch?v=x18vEEfpK3g) — this video provides a great overview of the Web and how to make web content accessible. Highly recommended as a supplement to what we will cover in class. - Watch: [Latte: Use-Case and Assistive-Service Driven Automated Accessibility Testing Framework for Android](https://www.youtube.com/watch?v=Z84jeO0UZFE) and read [Lies, Damned Lies, Overlays, and Widgets](https://www.linkedin.com/pulse/lies-damned-overlays-widgets-timothy-springer/) - Read: [Semantics for Eye tracking](https://dl.acm.org/doi/pdf/10.1145/3338844) - - Watch: [Rescribe: Authoring and Automatically Editing Audio Descriptions](https://www.youtube.com/watch?v=jmyPmT5T0PY) +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} -{: .week} -# Week 3 (4/10 & 4/12): Accessibility Assessment 2: Tradeoffs and Advanced Methods -{% details Learning Goals %} -- What are the tradeoffs between different tools? -- Beginning to look at study design by example -- More advanced accessibility techniques - - Differences between Image description, Diagram description and UI description - - Video description & Captioning - - Math, Tables & other elements (including custom interactors) - - Navigation and its impact on Accessibility; how to set up proper header structures. -- How to present accessibly -{% enddetails %} +{% details Wednesday 10/18: How to Build Accessible Interfaces %} -{% details Class Plan %} +**Slides** {% include slide.html title="How to build for accessibility" loc="best-practices.html" %} -<!-- {: .topic} Monday: Comparison of Accessibility Assessment Approaches --> -<!-- : **Slides** {% include slide.html title="Assessing Accessibility: Comparing Techniques" loc="assessment2.html" %} --> +{: .homework} [Website Report](assignments/website-report.html) Assigned: Write a group report about your assessment +: -{: .activity} Discussion: Value of Cumulative Assessment -: **In class Exercise** Find the students who assessed the same website as you. Talk about the UARs you generated. Did you find different problems from other students? Why do you think you did, or did not, find different problems? [share](TBD) +{: .homework} [Class Participation survey](TBD) +: -{: .activity} In Class Work Time -: Work on your website writeup. +{% enddetails %} + +{% details Thursday: Section %} +Group work on Report +{% enddetails %} -{: .topic} Wednesday: Best Practices for Improving Accessibility -: **Slides** {% include slide.html title="Best Practices: Improving Accessibility" loc="best-practices.html" %} +{% details Friday 10/20: More Website Standards %} -Discussion of Disability Dongle Paper +**Slides** {% include slide.html title="More Accessibility Standards" loc="assessment2.html" %} + +{: .homework} [Class Participation survey](TBD) +: + +{: .homework} **Post-module Reflection:** [Accessibility Basics Reflection](https://forms.gle/Wk8C51m5Sbq8RX7W8) +: -{: .topic} First Person Accounts & Finding Acessibility Assignment -: Introduction to [Finding Accessibility](assignments/finding-accessibility.html) +{% enddetails %} -<!-- {: .activity} Skill Goal: Video description --> -<!-- : **In class Exercise** Break into small groups. Pick a video from [youdescribe.org](https://youdescribe.org/) and work on a description as a group. ([share](TBD)) --> -<!-- {: .activity} In Class Work Time --> -<!-- : Finish your video description and post it. --> +{: .module} +# Module 2: Post GUI Accessibility +{: .week} +# Week 5 (10/23 - 10/27): Fabrication & Data Equity +{% details Learning Goals %} +- Work with laser cutting to make accessible technology +- Learn about fabrication tools and techniques +- Bias in Machine Learning + - What is Machine Learning (ML)? + - What are the components of ML? + - How do we collect data? Who do we collect the data from? + - Is the data "good"? + - How do we minimize disability bias? {% enddetails %} -{% details Preparation for next week %} -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) -: - -{: .homework} [Finding Accessibility](assignments/finding-accessibility.html) Assigned: Summarize a first person account of an access technology -: -{: .homework} [Plain Language](assignments/plain-language.html) Assigned: Write something up in plain language. -: +{% details Monday 10/23: What's the best way to Assess a Website?%} -{: .homework} **Post-module Reflection:** [Accessibility Basics Reflection](https://forms.gle/Wk8C51m5Sbq8RX7W8) -: +**Slides** {% include slide.html title="Introduction to 3D Printing and Physical Computing" loc="3dprinting.html" %} -{: .homework} Readings for next week +{: .homework} Required Reading and Reflection (for Wednesday) : - **Required: Respond to the Reading Questions and Preparation Requirements.** - [Consumer-Grade Fabrication and Its Potential to Revolutionize Accessibility](https://dl.acm.org/doi/10.1145/3339824), CACM 2019 and [**Respond**](TBD) + - [Areas of Strategic Visibility: Disability Bias in Biometrics](https://arxiv.org/abs/2208.04712) and [**Respond**](TBD) +- **If you want to go deeper** + - [Explaining Explanations: An Approach to Evaluating Interpretability of Machine Learning](https://www.cs.purdue.edu/homes/bb/nit/Lalana-Explainations%20of%20IAS.pdf) + - [Fairness issues in AI Systems that augment sensory abilities](https://arxiv.org/pdf/1908.07333.pdf) +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} +{% details Wednesday 10/25: Making a Laser Cut Book Opener %} +Work in class on this -{: .week} -# Week 4 (4/17 & 4/19): AT Around us Presentations + Fabrication Start -{% details Learning Goals %} - -<!-- What are the accessibility concerns when groups of people use online technologies together for communication? --> - -<!-- - Video conferencing --> -<!-- - Large gatherings (virtual or hybrid) --> -<!-- - Online text based support groups --> -<!-- - Social networks such as twitter or facebook --> +{: .homework} [Technology Review](assignments/technology-review.html) Assigned: Write a group report about your assessment +: -<!-- What are the accessibility opportunities in online networks (e.g. crowdsourcing ) --> +{: .homework} [Class Participation survey](TBD) +: {% enddetails %} - - -{% details Class Plan: %} - -{: .topic } Monday: AT Around Us Presentations -: Accessibility Assessment Assignment - -{: .topic } Wednesday: Fabrication and Accessibility -: **Slides** {% include slide.html title="Introduction to 3D Printing and Physical Computing" loc="3dprinting.html" %} + +{% details Thursday: Section %} +Finish making laser cuttable designs and print {% enddetails %} +{% details Friday 10/27: Data Equity %} -{% details Preparation for next week %} -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) -{: .homework} Create an SVG for an [accessible laser cut object](assignments/lasercutting.html) -: +**Slides** {% include slide.html title="Data Equity" loc="bias-in-machine-learning.html" %} +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} + {: .week} -# Week 5 (4/24 & 4/26): Fabrication & Physical Computing for Accessibility + +# Week 6 (10/30 - 11/3): Accessible Visulaizations & AR/VR {% details Learning Goals %} -Work with a microcontroller & sensors to actuate accessibility features +Accessible Data Visualizations + - What are the commonly-used techniques to make data visualizations accessible? + - What are the pros and cons of these techniques? + - What are some of the nuances in making data visualizations accessible? +Learn about how to make AR/VR interfaces and games accessible {% enddetails %} -{% details Class Plan: %} - -{: .topic } Monday: In Fab Lab; Manufacture & print laser cut designs; Work with Microcontroller -: Slides TBD +{% details Monday 10/30: AR/VR Accessibility%} -{: .topic } Wednesday: Continued Work with Microcontroller; Hand in finished laser cut assignment -: Slides TBD +**Slides** {% include slide.html title="AR/VR Accessibility" loc="arvr.html" %} -{% enddetails %} - - -{% details Preparation for next week %} -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) -{: .homework} Readings for next week +{: .homework} Required Reading and Reflection (for Wednesday) : -- **Required: Respond to the Reading Questions and Preparation Requirements.** +- **Required: Respond to the Reading Questions and Preparation Requirements.** - [Increasing Data Equity in Accessibility](https://arxiv.org/abs/2210.01902) No ed post for this one :) +- **If you want to go deeper** + - [A systematic literature review of handheld augmented reality solutions for people with disabilities](https://www.mdpi.com/1424-8220/22/20/7719) - [Understanding Screen-Reader Users’ Experiences with Online Data Visualizations](https://athersharif.me/documents/assets-2021-understanding-sru-experiences-online-data-viz.pdf) [**Respond**](TBD) - [Data Representation in Accessibility Data Sets: A Meta-analysis](https://arxiv.org/abs/2207.08037) [**Respond**](TBD) - - [Areas of Strategic Visibility: Disability Bias in Biometrics](https://arxiv.org/abs/2208.04712) and [**Respond**](TBD) - -- **Optional** - [The Future of Urban Accessibility for People with Disabilities: Data Collection, Analytic, Policy, and Tools](https://dl.acm.org/doi/fullHtml/10.1145/3517428.3550402) - - [Explaining Explanations: An Approach to Evaluating Interpretability of Machine Learning](https://www.cs.purdue.edu/homes/bb/nit/Lalana-Explainations%20of%20IAS.pdf) - [Rich Screen Reader Experiences for Accessible Data Visualization](https://arxiv.org/pdf/2205.04917.pdf) - [VoxLens: Making Online Data Visualizations Accessible With an Interactive JavaScript Plug-In](https://athersharif.me/documents/chi-2022-voxlens.pdf) +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} -{: .week} -# Week 6 (5/1 & 5/3): Data Equity -{% details Learning Goals %} -- Bias in Machine Learning - - What is Machine Learning (ML)? - - What are the components of ML? - - How do we collect data? Who do we collect the data from? - - Is the data "good"? - - How do we minimize disability bias? -- Accessible Data Visualizations - - What are the commonly-used techniques to make data visualizations accessible? - - What are the pros and cons of these techniques? - - What are some of the nuances in making data visualizations accessible? -{% enddetails %} - -{% details Class Plan %} +{% details Wednesday 11/1: AR/VR %} +Work in class on this -{: .topic} Monday: Bias in Machine Learning -: **Slides** {% include slide.html title="Bias in Machine Learning" loc="bias-in-machine-learning.html" %} +{: .homework} [Technology Review](assignments/technology-implementation.html) Assigned: Make something (post-gui) more accessible +: -{: .topic} Wednesday: Accessible Data Visualizations -: **Slides** {% include slide.html title="Accessible Data Visualizations" loc="accessible-data-viz.html" %} +{: .homework} [Class Participation survey](TBD) +: -{: .topic} Final Project Discussion -: [Final Project](assignment/project.html) +{% enddetails %} + +{% details Thursday: Section %} +Practice with making data accessible {% enddetails %} -{% details Preparation for next week %} -{: .homework} [Class Participation survey](TBD) -: -{: .homework} [Final Project](assignments/project.html) presentation preparation -: +{% details Friday 11/3: Technology-Implementation Meetings %} -{: .homework} Readings for next week +Check in to make sure you have a plan and it is do-able + +{: .homework} [Class Participation survey](TBD) : + +{% enddetails %} -- **Required Readings** Respond to the Reading Questions and Preparation Requirements - - Read [Anticipate and Adjust](https://dl.acm.org/doi/abs/10.1145/3491102.3501882) [**Respond**](TBD) - - Read [Alexa & Accessibility](https://dl.acm.org/doi/pdf/10.1145/3173574.3174033?casa_token=T1I2RwihIjsAAAAA:QEm3SjurdlcW7oX_1LadxaglZ7oneBX-XLIjMCHbof3gu_IFpDW2OO5tqxZfLIps-94Qik9y5wNw8Q) and [**Respond on**](TBD) -- **If you want to dig deeper** - - [How To Do Something Good In The Disability Community If You’re Not Disabled](https://www.forbes.com/sites/andrewpulrang/2020/12/16/how-to-do-something-good-in-the-disability-community-if-youre-not-disabled/?sh=4befcb377d7f) - - [COVID 19 websites violate disability laws](https://www.latimes.com/california/story/2021-02-25/covid-19-vaccine-websites-violate-disability-laws-create-inequity-for-the-blind) - - Read [How Alexa can change the life of a disabled person](https://abilitynet.org.uk/news-blogs/how-alexa-can-change-life-disabled-person) [**Respond on Ed**](https://edstem.org/us/courses/31170/discussion/2364598) -*** check with dentist -{% enddetails %} {: .week} -# Week 7 (5/8 & 5/10): Accessible Needfinding and Evaluation +# Week 7 (11/6-11/10): Accessible Needfinding and Evaluation {% details Learning Goals %} - How to assess whether a technology is accessible; and whether an accessibility technology is useful and usable, in an inclusive fashion. - How do you make sure your *product is accessible* to people with disabilities @@ -391,118 +378,132 @@ Work with a microcontroller & sensors to actuate accessibility features - Overly narrow views of disability: Multiple disabled people & multiply disabled people {% enddetails %} -{% details Class Plan %} +{% details Monday 11/6: Introduction to Assessing Accessibility} -{: .topic} Monday: Introduction to Accessible Evaluation -: **Slides** {% include slide.html title="Presenting Accessibly" loc="presenting-acessibly.html" %} **Slides** {% include slide.html title="Assessing Accessibility" loc="evaluation.html" %} -{: .topic} Monday: Practice Study Design -: **Amazon Alexa** - 1. Write down a list of accessibility assessment goals (metrics) - 2. Write down a sampling goal (who is included) - 3. Discuss - -{: .topic} Monday: Qualitative Design -: **Slides** {% include slide.html title="Designing for and with people with disabilities" loc="designing.html" %} -**Slides** {% include slide.html title="Plain Language" loc="plain-language.html" %} - -{: .topic} Wednesday: Final Project Presentations +{: .homework} Required Reading and Reflection (for Wednesday) : +- **Required Reading** + - Read [Blurring the Boundaries Between Assistive Tech and Companionship](https://www.forbes.com/sites/gusalexiou/2021/01/26/amazon-alexa---blurring-the-boundaries-between-assistive-tech-and-companionship/?sh=3bf833b75e7b) and Respond + - Read [How to do something good in the disability community if you're not disabled](https://www.forbes.com/sites/andrewpulrang/2020/12/16/how-to-do-something-good-in-the-disability-community-if-youre-not-disabled/?sh=21ef25c97d7f) +- **If you want to dig deeper** + - Read [Anticipate and Adjust](https://dl.acm.org/doi/abs/10.1145/3491102.3501882) + - Read [Accessibility came by accident](https://dl.acm.org/doi/pdf/10.1145/3173574.3174033?casa_token=T1I2RwihIjsAAAAA:QEm3SjurdlcW7oX_1LadxaglZ7oneBX-XLIjMCHbof3gu_IFpDW2OO5tqxZfLIps-94Qik9y5wNw8Q) +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} -{% details Preparation for next week %} +{% details Wednesday 11/8: Introduction to Designing for Accessibility %} +: **Slides** {% include slide.html title="Designing for and with people with disabilities" loc="designing.html" %} -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) +{: .homework} [Final Project Proposal](assignments/project-proposals.html) Assigned: Prepare your final project proposal (individual) : -- **Required: Respond to the Reading Questions and Preparation Requirements on Ed**. There is only one Ed post you need to make this week in response to either or both assigned readings. [Please post your response in this Ed thread]({site.discussion}2649283). - - [Difficulty Vs Accessibility](https://www.youtube.com/watch?v=sPehhHZvKE8&list=PLVEo4bPIUOskja9pfpqceY8qDrykFdubf&index=18) - - [My Disability Is Dynamic](https://medium.com/age-of-awareness/my-disability-is-dynamic-bc2a619fcc1) - +{: .homework} [Class Participation survey](TBD) +: {% enddetails %} + +{% details Thursday: Section %} +Work on final project proposals -{: .week} -# Week 8 (5/15 & 5/17): Chronic Illness +{% enddetails %} -{% details Class Plan: STILL TBD %} +## Friday 11/10: HOLIDAY +{: .holiday} -{: .topic } 6:30-7:30 -: Accessibility in Chronic Illness: guest lecturers: Emma McDonnell and Kelly Mack +{: .week} -{: .topic } 7:30-8:30 -: Group project check ins (you can leave if your group is meeting with Jen at a different time) +# Module 3: Everything Everywhere All at Once +{: .week} +# Week 8 (11/13-11/17): Chronic Illness & Sustainability +{% details Learning Goals %} +- How to assess whether a technology is accessible; and whether an accessibility technology is useful and usable, in an inclusive fashion. +- How do you make sure your *product is accessible* to people with disabilities + 1. Data Equity and implicit bias + 2. Beyond automated assessment: Accessible Summative Studies + 3. Importance of Intersectionality +- How do you make sure your *accessibility technology is valued* by people with disabilities + - What are potential data sources for assessing value + - Collaboration Versus Paternalism + - Overly narrow views of disability: Multiple disabled people & multiply disabled people {% enddetails %} -{% details Preparation for next week %} - -{: .homework} [Class Participation survey](TBD) -: -- **Required: Respond to the Reading Questions and Preparation Requirements on Ed**. There is only one Ed post you need to make this week. [Please post your response in this Ed thread]({site.discussion}2655576). - - [Crippin' Jim Crow](https://drive.google.com/file/d/1QaRu4T3aax6jg73quHKgpfwJe3nQ4PEv/view?usp=share_link) - - [Traumatic Brain Injury: A Guide for Criminal Justice Professionals](https://www.brainline.org/article/traumatic-brain-injury-guide-criminal-justice-professionals) +{% details Monday 11/13: Group Formation %} -- **Optional Readings** - - [Disabling Incarceration: Connecting Disability to Divergent Confinements in the USA](https://journals.sagepub.com/doi/pdf/10.1177/0896920511430864?casa_token=4JF2JifTBBwAAAAA:FOPw2ZwZDMbyKoRLloJIhzc4ZQTf25dnTt1NnvR6yaD-S8OfE96U-Un8QLA3_sOw7EGBk3ro8hUv) +In class exercise to form final project groups +{: .homework} Required Reading and Reflection (for Wednesday) +: +- **Required: Respond to the Reading Questions and Preparation Requirements on Ed**. There is only one Ed post you need to make this week in response to either or both assigned readings. [Please post your response in this Ed thread]({site.discussion}2649283) + - [Difficulty Vs Accessibility](https://www.youtube.com/watch?v=sPehhHZvKE8&list=PLVEo4bPIUOskja9pfpqceY8qDrykFdubf&index=18) + - [My Disability Is Dynamic](https://medium.com/age-of-awareness/my-disability-is-dynamic-bc2a619fcc1) +- **If you want to dig deeper** + - [Considerations for HCI accessibility practices with chronically ill people](https://dl.acm.org/doi/abs/10.1145/3517428.3544803) +{: .homework} [Class Participation survey](TBD) +: {% enddetails %} -{: .module} # Module 3: Sustainability, Urban Access and Housing - -{: .week} -# Week 9 (5/22 & 5/24): Sustainability, Urban Access and Housing - -{% details Class Plan %} - -{: .topic } 5:30-6:30 Traumatic Brain Injury and Incarceration -: guest lecturer: Mark Harniss +{% details Wednesday 11/15: Chronic Illness and Accessibility %} -{: .break} 6:30-6:45 -: Break / Food +**Slides** TBD -{: .topic } 6:45- ~8:00 -: **Slides** {% include slide.html title="Sustainability and Accessibility" loc="sustainability.html" %} - -{: .topic } 7:30-8:30 -: Group project check ins (you can leave if your group is meeting with Jen at a different time) +{: .homework} [Group Project Checkpoint](assignments/project-checkpoint.html) Assigned: Group Project Checkpoint +: -{% enddetails %} -{% details Preparation for next week %} +{: .homework} [Final Project Handin](assignments/project-final.html) +: -{: .homework} [Class Participation survey](https://forms.gle/qcjc5fSNSAVeE5pK9) -{: .homework} [End of Module survey](https://forms.gle/Ds4vkSCX69WfLkCe7) +{: .homework} [Class Participation survey](TBD) : {% enddetails %} + +{% details Thursday: Section %} +Work in groups on final projects -{: .week} -# Week 10 (5/31): TBD -{% details Learning Goals: STILL TBD %} {% enddetails %} -**MONDAY IS A HOLIDAY** +{% details Friday 11/17: Sustainability %} -{% details Class Plan: STILL TBD %} -... +**Slides** {% include slide.html title="Sustainability" loc="sustainability.html" %} +{: .homework} [Class Participation survey](TBD) +: + {% enddetails %} +{: .week} +# Week 9 (11/20-11/24): Group Checkpoint 1 -{% details Preparation for next week %} +{% details Monday 11/20: First Half of Group Presentations %} +Present in class +{% enddetails %} -{: .homework} [Class Participation survey](TBD) -: +{% details Wednesday 11/22: Second Half of Group Presentations %} +Present in class {% enddetails %} + +{% details Thursday: Section %} +Work in groups on final projects +{% enddetails %} + +## Friday 11/24: HOLIDAY +{: .holiday} -<!-- {: .week} --> -<!-- # Week 10 (3/7): Healthcare Technologies & Reproductive Justice --> +{: .week} +# Week 10 (5/31): 1:1 Project Meetings / TBD +{% details Learning Goals: STILL TBD %} +TBD +{% enddetails %} {: .week} @@ -511,13 +512,34 @@ Work with a microcontroller & sensors to actuate accessibility features {: .lecture} Final project presentations : -{% details Currently Unused %} + + +# Unused Reading and Ideas +{% details some additional readings and slides to possibly use %} +- Physical computing slides +- [Crippin' Jim Crow](https://drive.google.com/file/d/1QaRu4T3aax6jg73quHKgpfwJe3nQ4PEv/view?usp=share_link) +- [Traumatic Brain Injury: A Guide for Criminal Justice Professionals](https://www.brainline.org/article/traumatic-brain-injury-guide-criminal-justice-professionals) +- [Disabling Incarceration: Connecting Disability to Divergent Confinements in the USA](https://journals.sagepub.com/doi/pdf/10.1177/0896920511430864?casa_token=4JF2JifTBBwAAAAA:FOPw2ZwZDMbyKoRLloJIhzc4ZQTf25dnTt1NnvR6yaD-S8OfE96U-Un8QLA3_sOw7EGBk3ro8hUv) +- [A systematic literature review of handheld augmented reality solutions for people with disabilities](https://www.mdpi.com/1424-8220/22/20/7719) +- [7 benefits of AR and VR for People with Disabilities](https://arpost.co/2022/02/09/7-benefits-ar-vr-for-people-with-disability/) (a bit ableist) - [Living Disability Theory: Reflections on Research, Access and Design](https://make4all.org/wp-content/uploads/2020/09/hoffmann-living-disability-theory.pdf) - [Disability Studies as a source of critical inquiry...](https://make4all.org/wp-content/uploads/2019/10/MankoffAssets2010.pdf) - [Vital coronavirus is failing the blind and visually impaired](https://www.vice.com/en/article/4ag9wb/vital-coronavirus-information-is-failing-the-blind-and-visually-impaired) -- [Fairness issues in AI Systems that augment sensory abilities](https://arxiv.org/pdf/1908.07333.pdf) and [**Respond**](TBD) -- [A systematic literature review of handheld augmented reality solutions for people with disabilities](https://www.mdpi.com/1424-8220/22/20/7719) and [**Respond**](TBD) -- [7 benefits of AR and VR for People with Disabilities](https://arpost.co/2022/02/09/7-benefits-ar-vr-for-people-with-disability/) and [**Respond**](TBD) - [Blurring the Boundaries Between Assistive Tech and Companionship](https://www.forbes.com/sites/gusalexiou/2021/01/26/amazon-alexa---blurring-the-boundaries-between-assistive-tech-and-companionship/?sh=2821499375e7) (a little too salesy) -- **Slides** {% include slide.html title="AR/VR" loc="arvr.html" %} {% enddetails %} + +{% details slides not in use %} +**Slides** {% include slide.html title="Assessing Accessibility" loc="physical-computing.html" %} +{% enddetails %} + + +{% details topics not covered %} +- Video conferencing +- Large gatherings (virtual or hybrid) +- Online text based support groups +- Social networks such as twitter or facebook +- Crowdsourcing ) +{% enddetails %} + + + diff --git a/slides/3dprinting.html b/slides/3dprinting.html index 9bbbf9af6a47cabda7e886d4614b51909cdff19f..0c25113f67fb6ef46007037f71d93885251a0773 100644 --- a/slides/3dprinting.html +++ b/slides/3dprinting.html @@ -805,122 +805,7 @@ Combination of materials ] --- -# Phone as embedded computer -.right-column60[ - -Tactile map for the blind - - - -] - -.left-column40[ -Phone as embedded computer -- Better solution because reprinting a map is faster than making a whole new portable map for each region -- Similar to new interaction techniques, uses conductive plastic -] - ---- -# Adding in physical computing -.right-column60[ - - -C. Lee, [Intellisplash](https://www.christopherslee.org/home/cadiot#h.pstiqwwsc6zp) water purity tester - - - -] -.left-column40[ -Combination of microcontroller, 3d printing, and phone - -Uses WiFi, Bluetooth and other communication protocols - -] ---- -# Other Sensing Adaptations -.right-column60[ - - -] -.left-column40[ -[Biotoxicity -sensing](https://www.sciencedirect.com/science/article/pii/S0925400515305992) - -Dark box - -Phone case - -Many similar options -- e.g. [Ph -Meter](https://ieeexplore.ieee.org/abstract/document/6916991); -[Sensing sweat -make-up](https://pubs.rsc.org/en/content/articlehtml/2014/an/c4an01612b); -[Nanosensing by -Nasa](https://www.nasa.gov/centers/ames/news/features/2009/cell_phone_sensors.html) -[more examples](https://www.sciencedirect.com/science/article/pii/S0167779914000572) -] - -??? - By clicking the “start†button (b) the application runs and several - tabs can be selected (c). The “Procedure†box (d) provide to the - user the instructions to perform the assay, then the Begin button - allow to proceed to the “Checklist†box (e) where preset timers - guide the user through the correct incubation times before BL image - acquisition. The instructions can be also eluded by selecting “Test - sample†in the home page, which jumps the user directly to the - checklist. At the end of the countdown the smartphone camera is - activated and the user can simply touch the “Acquire†button to - capture the BL image of both the test and control wells. (f) The - acquired images are rapidly analyzed on the smartphone and the - sample toxicity result is displayed as “Cell viability†value and a - warning message (Safe, Harmful, Highly toxic). BL image and results - can be also saved for downstream application (i.e. sending results - to a central laboratory). - ---- -# Printing to enhance a mobile phone - -.right-column60[ -![:youtube Printed objects whose use can be sensed, W1V2AgDbgTQ] -] -.left-column40[ -Printed Analytics: Sensing prosthetic device use -- Uses backscatter technology -- Works in range of a modified wireless router -] - ---- -# Summary - -What does physical computing offer us? - -.left-column-half[ -New ways to interact -- capacitive sensing facilitate by conductive plastic/thread -- microphone + machine learning - -New ways to sense information -- fluid properties -- audio -- backscatter -] -.right-column-half[ -New ways to combine devices (e.g. through bluetooth sensing of physical hardware) - -Benefits: -- modify a device beyond what the manufacturer expected -- rapid prototyping of novel solutions -] - ---- -# Now back to Laser Cutting: How Can it Create Access? +# laser Cutting To Create Access <iframe src="https://embed.polleverywhere.com/free_text_polls/tyAgNOl6sJAzjQ8cwbDcx?controls=none&short_poll=true" width="800px" height="600px"></iframe> diff --git a/slides/accessible-data-viz.html b/slides/accessible-data-viz.html index 582839a0e5c073bbeefb47196eb43c87264dd0d0..b97b0b644a39dd2afadccb11aa553fe136e54f09 100644 --- a/slides/accessible-data-viz.html +++ b/slides/accessible-data-viz.html @@ -24,6 +24,12 @@ class: ## Make sure captioning is turned on +--- +# Different Types of Images + +Explain how to do something other than images that is new to the students +<iframe src="https://embed.polleverywhere.com/free_text_polls/AP4v3Tt0aTSduMm2p2V9L?controls=none&short_poll=true" width="800px" height="600px"></iframe> + --- # COVID-19 Visualizations diff --git a/slides/assessment.html b/slides/assessment.html index 5bd5eac36183b817250915987a928ffcb6ddb54a..65c154813e555d777e1f719968d3301c35e2ae72 100644 --- a/slides/assessment.html +++ b/slides/assessment.html @@ -1,13 +1,13 @@ --- layout: presentation -title: Assessment --Week 2-- +title: Assessment --Week 3-- description: Assessment of how Accessible Apps and Websites are class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ -# Week 2: Assessment +# Week 3: Assessment {{site.classnum}}, {{site.quarter}} ] @@ -27,15 +27,13 @@ class: # Learning Goals for Today - **What are the current accessibility standards** (1 and 2) -- How do we use automated tools? -- What are the current accessibility standards (3 and 4) -- Get comfortable using existing freely available accessibility technology to manually support assessment -- **How to make media accessible** (**images**; GUIs; videos) +- How to make media accessible (Diagrams; GUIs; videos) +- How do we use automated tools --- -# Introduction to Assessing Accessibility +# Introduction to Accessibility Standards -In this class we will structure our work around the Web Accessibility Initiative ([WAI](http://www.w3.org/wai/)), a service of the World Wide Web Consortium (W3) +In this class we will structure our learning around the Web Accessibility Initiative ([WAI](http://www.w3.org/wai/)), a service of the World Wide Web Consortium (W3) - WAI sets worldwide recommendations for Web authors, browsers and servers: Web Content Accessibility Guidelines (WCAG) - WCAG is "live" (regularly being worked on and updated, with input from the disability community). - There is no equivalent for non-web programming, but even though it is web focused, it can easily be applied to apps as well @@ -63,126 +61,207 @@ This is appropriate for *all* disabilities -- don't think access is only an issu Obviously there is some overlap between these, and they build on each other --- -# Example Disabilities To Consider +# Three levels of compliance -.left-column50[ -Web browsing involves -- Color -- Text of different shapes and sizes -- Content (images, words, sounds, animat.) -- Typing (e.g. input to forms) -- Mousing (e.g. clicking on links for navigation) -- Comprehension (e.g. reading level) +Some users with disabilities to be able to access and use web content (A) + +Overall accessibility and removal of significant barriers to accessing content (AA) + +Improvements and enhancements to web accessibility for more users with disabilities (AAA) + +The studies just cited were assessing whether things achieved *part* of (A) level compliance! + +--- +# POUR: Perceivable: Guidelines 1.1-1.4 + +.left-column[ +## Guideline 1.1 +Text Alternatives: Provide *electronic text* alternatives for any non-text content +] +.right-column[ +<iframe src="https://embed.polleverywhere.com/free_text_polls/PE5HizRh83pYpOuS73jfR?controls=none&short_poll=true" width="800px" height="600px"></iframe> ] -.right-column50[ -Therefore… -- Visual impairments -- Difficulty understanding content -- Difficulty hearing -- Difficulty manipulating mouse our keyboard -all affect accessibility +??? +Why non text? +- Can be rendered visually, auditorially, tactilely, or by any combination. +- Can also be easily enlarged + + +--- +# Different Types of Non-Text Content +.left-column50[ +- [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) +- Formatting and text styling +- Images as links +- [Diagrams]([Torres & Barwaldt, 2019](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) +- 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/)) +- Progress Bars (briefly described in [Cooper et al](https://d1wqtxts1xzle7.cloudfront.net/77917701/PEARL_20Paper_20for_20eLearning_202002_20submitted-libre.pdf)) +- ... ] +-- +.right-column50[ +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 +] --- -# What is the goal? -End users interact with the *same* website or app as anyone else +# Small Group Activity -End users may use browser features or a specialist accessibility tool to customize their experience +Break into small groups and show each other the inaccessible content you found. Pick one and work on a description for it. Do more if you have time [post](TBD) -**This is Key** Website or app designer provides the right structure and information to support this +--- +# Diagrams (1 of 2) +.left-column40[ + +] +.right-column60[ +When direct exploration isn't possible, consider descriptions that are *language based* +] +--- +# Diagrams (2 of 2) +<tt> +stateDiagram-v2 <BR> + [*] --> Still<BR> + Still --> [*]<BR> + Still --> Moving<BR> + Moving --> Still<BR> + Moving --> Crash<BR> + Crash --> [*]<BR> +</tt> --- -background-image: url(img/assessment/gmail.png) +# Math standard for accessibility is MathML -<audio controls="controls"><source src="img/assessment/gmail-normal.wav" type="audio/x-wav" /></audio> +Math has a hierarchy just like other systems (i.e. fractions, parantheses) -??? -But, lets back up a little to see why the web can be difficult for blind people to use. +Can support with MathML + +Can generate MathML using pandoc; MS Word; etc -To interact with their computers, blind people use software programs called screen readers. Here’s a screen reader reading the GMail inbox. +Capturing an image of an equation and describing it much worse for screen reader users --- -background-image: url(img/assessment/gmail-blackedout.png) +# Image Description: GUIs +.left-column40[ -??? -Although it may have felt longer, that was only 20 seconds. + +] -In 20 seconds, most of us would have found the message we wanted, and many of us not only would have found that message, but also read it and, possibly replied +.right-column60[ +[Investigating Visual Semantic Understanding of Blind and Low-Vision Technology Users](https://dl.acm.org/doi/abs/10.1145/3411764.3445040) -At this point, a blind user new to this site still has no idea that an inbox even exists. +- Visual attributes that convey aesthetics and usability of user interfaces. +- Desktop and smartphone screen readers provide control type and other semantic information excluding any visual semantics. +- Smartphones allow for some degree of spatial exploration. + +] --- -# But it gets much better -Accessibly design pages, combined with user expertise, work very well +# Study - +How do BLV technology users understand and access visual semantics? ---- -# But it gets much better -Accessibly design pages, combined with user expertise, work very well + - +??? +Interviews; +Screen reader tasks; +Reconstruction --- -# But it gets much better -Accessibly design pages, combined with user expertise, work very well +# Results + +.left-column50[ +.quote[ +The way I think about this is on the top is my email, to the right is my phone number. Below that [is] essentially a 2 by 2 kind of thing, which has my social profile. +] +] + +.right-column50[ +Participants were aware of the overall structure of *phone apps* - +- They developed this understanding using screen readers +- Associated size and location and function +- Layouts were understood in terms of absolute, relative, and corner positions + +] --- -# But it gets much better -Accessibly design pages, combined with user expertise, work very well +# My description of the leftmost GUI - +.left-column[ + +] +.right-column[ +This is very hard to describe without knowing what is accessible; and whether the user is more interested in content or layout. +- App has two tabs at top center: Delivery and Pickup. +- Below is a seach bar with address and time menu +- Below that is an advertisement for The Burger Joint (25% of screen) with a details button +- Next is a scrolling set of tabs for Pickup; Grocery; Prescription; Top Sites; the rest is not visible off screen +- The bottom 30% of the screen shows the title Hidden Gems (Up and coming spots you'd like) with a list of restaurants. Each row in the list shows an image, restaurant name, rating, and more. The list requires 2D scrolling to see everything. The top two are visible: Tsuki Ramen and Chocolate Co. +] --- -# But it gets much better -Accessibly design pages, combined with user expertise, work very well +# Describing GUIs is rarely necessary - +GUI description best supported dynamically through exploration. Critical needs for this +- Accessibility information available for interface +- Touch screen phone interaction techniques +Don't describe GUIs, explore them. --- -# Most Websites and Apps not Accessible +.left-column40[ + +] -- Over 60% of Android apps missing at least one label on a clickable element (out of 5721 apps tested) ([Ross et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3348797)) -- Over 80% of fortune 500 websites not accessible ([Loiacono et al, 2009](https://dl.acm.org/doi/pdf/10.1145/1562164.1562197)) -- University websites are also partly to mostly inaccessible ([Campoverde-Molina et al, 2021](https://link.springer.com/content/pdf/10.1007/s10209-021-00825-z.pdf)) -- Less than 1% of Twitter images had ALT text in 2019 ([Gleason et al, 2019](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605)) +.right-column60[ +## Developer Responsibility +Expose GUI structure -More study is needed, but overall, progress here is slow. Perhaps this is not surprising since only about 50% of universities in the US teach accessibility at all ([Shinohara et al, 2018](https://dl.acm.org/doi/pdf/10.1145/3159450.3159484)). +Provide good ALT text +- What is a good name for the "Like" Button? ---- -# Three levels of compliance +- Enable the user to understand the name of the control they have navigated to, what type of control it is, what value it has, what state it has. +] -Some users with disabilities to be able to access and use web content (A) +--- +.left-column40[ + +] -Overall accessibility and removal of significant barriers to accessing content (AA) +.right-column60[ +## Proper ALT text -Improvements and enhancements to web accessibility for more users with disabilities (AAA) +Screen reader will read out name, role, and state. Don't repeat these. -The studies just cited were assessing whether things achieved *part* of (A) level compliance! +Good alt text: Name ("Like") ---- -# POUR: Perceivable: Guidelines 1.1-1.4 +API knows: Role ("Button") -.left-column[ -## Guideline 1.1 -Text Alternatives: Provide *electronic text* alternatives for any non-text content +API knows: State ("Not selected") ] -.right-column[ -<iframe src="https://embed.polleverywhere.com/free_text_polls/PE5HizRh83pYpOuS73jfR?controls=none&short_poll=true" width="800px" height="600px"></iframe> + + +--- +.left-column40[ + ] -??? -Why non text? -- Can be rendered visually, auditorially, tactilely, or by any combination. -- Can also be easily enlarged +.right-column60[ +## Exception: Your UARs +My alt text for the like button (assuming it's the subject of my UAR, slide or etc) +A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like) +] --- # POUR: Perceivable: Guidelines 1.1-1.4 @@ -225,127 +304,59 @@ Example Best Practices: ] --- -# Alternative (ALT) Text for Images Best Practices - -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) - ---- -# Different Types of Images -<iframe src="https://embed.polleverywhere.com/free_text_polls/AP4v3Tt0aTSduMm2p2V9L?controls=none&short_poll=true" width="800px" height="600px"></iframe> - ---- -# Different Types of Images - -- [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) -- draw attention; recog. -- Formatting and text styling -- Images as links -- [Diagrams]([Torres & Barwaldt, 2019](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) -- ... - -All of these require different strategies to describe them well. You'll want to read up on some of these links when you are faced with specific description needs in your assignments and projects. - -Today we'll cover photographs and people. - ---- -# Describing photographs - -- Automated tools are not enough. - - - - +# POUR: Perceivable: Guidelines 1.1-1.4 -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? +.left-column[ +## Guideline 1.2 +Provide perceivable alternatives for time-based media +] +.right-column[ +Includes: audio-only; video-only; audio-video; audio and/or video combined with interaction +Best practices vary depending on whether it is recorded or live, and the type of media, and include: +- Video Description +- Captions +- Transcripts +- ASL interpretation +] ??? -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; 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/) +Kind of in 1.1 but also complicated so it gets its own guideline. --- -# Describing Photographs +# Making Video/Animation/Audio Accessible -- 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. +Relevant for slides; web; anywhere ---- -# 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: +Understandable live & recorded video for people who are not able to hear audio -Cripping the “Crack Baby†Epidemic: A Feminist Genealogy. +Understandable live & recorded video for people who are not able to see the screen -Dr. Frye is an Assistant Professor of Gender Studies and Disability Studies at the University of Utah in the Division of Gender Studies. -] +Other factors such as avoiding seizures & so on --- -# ALT text +# Captioning Videos -.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." -] +Auto captioning getting better, but still makes many errors +- Does not easily support multilingual settings +- Errors for people with accents +- Errors for proper nouns and names ---- -# ALT Text with Identity Markers? +Best practice is manual captioning and/or ASL live, or pre-recorded -.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> -] +Easy to apply and then correct auto captioning with existing tools (e.g. YouTube has an interface) +- You will be expected to do this if you use video in any homeworks ---- -# Small Group Activity - -Break into small groups and show each other the inaccessible images you found. Pick one and work on a description for it. Do more if you have time [post on Ed](https://edstem.org/us/courses/31170/discussion/2347293) --- -# POUR: Perceivable: Guidelines 1.1-1.4 +# Audio Describing Videos -.left-column[ -## Guideline 1.2 -Provide perceivable alternatives for time-based media -] -.right-column[ -Includes: audio-only; video-only; audio-video; audio and/or video combined with interaction +May requiring pausing video, but skillful description usually possible without that -Best practices vary depending on whether it is recorded or live, and the type of media, and include: - -- Video Description -- Captions -- Transcripts -- ASL interpretation -] -??? -Kind of in 1.1 but also complicated so it gets its own guideline. +More commonly available today than ever +Let's try it: Form groups and open [YouDescribe](https://youdescribe.org/); +([post a link to your video](TBD)) --- # POUR: Perceivable: Guidelines 1.1-1.4 @@ -357,7 +368,7 @@ Adaptable .right-column[ Ensure that all information is available in a form that can be perceived by accessibility tools (and thus spoken aloud, simplified, etc) -This includes information that is not encoded in text such +This includes information that is not encoded in text such as - page organization - relationships - cross-site or cross-app organization @@ -439,253 +450,6 @@ WCAG Level AAA requires a contrast ratio of at least - WebAIM has a [contrast checker](https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,value%20from%20any%20page%20element) ] - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.1 -Keyboard Accessible -] -.right-column[ - -No other input form has this flexibility or is universally supported and operable by people with different disabilities, as long as the keyboard input is not time-dependent. - -Examples of who benefits -- screen reader users - - blind users - - reading disabilities - - ... -- speech input users -- switch input users - -] - - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.1 -Keyboard Accessible - -Discuss with your neighbor and post -] -.right-column[ -<iframe src="https://embed.polleverywhere.com/free_text_polls/zXxJ9XBdJQPaUsFM1ie5J?controls=none&short_poll=true" width="800px" height="600px"></iframe> -] - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.1 -Keyboard Accessible -] -.right-column[ -- Drawing program -- Drag and Drop -- Drone control -- Game play -- Website navigation -- ... -] ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.1 -Keyboard Accessible -] -.right-column[ -Some common pitfalls: - -- Keyboard Traps. Content should not "trap" keyboard focus within subsections of content on a Web page. This is a common problem when multiple formats are combined within a page and rendered using plug-ins or embedded applications. -- Invisible Content. Some parts of a web page can never be reached -- Lack of Control. Users should be able to reconfigure or remove shortcuts - -Note: Not in guidelines (that I know of) but a "reverse trap" is whether you can reach text that *doesn't* have links or headers when using switch input. How would you do this? -] - -??? -Character key shortcuts work well for many keyboard users, but are inappropriate and frustrating for speech input users — whose means of input is strings of letters — and for keyboard users who are prone to accidentally hit keys. To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys. - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.2 - -Enough Time -] -.right-column[ -Many users who have disabilities need more time to complete tasks than the majority of users: -- may take longer to physically respond -- may take longer to read things -- may have low vision and take longer to find things or to read them -- may be accessing content through an assistive technology that requires more time. -] - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.2 - -Enough Time -] -.right-column[ -- Timelines are adjustable (e.g. rotating content; timeouts; etc), and minimized when not necessary - - If a timeout does necessarily occur, users should be able to resume without loss of data after re-authenticating - - If data loss will occur, users are warned about the timeout limits -- Pause, Stop & Hide all possible for all blinking text, animations and so on -- Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency (AAA) -] ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.3 - -Seizures and Physical Reactions -] -.right-column[ - Some people with seizure disorders can have a seizure triggered by flashing visual content, even for a second or two. - - Most people are unaware that they have this disorder until it strikes. - - Warnings do not work well because they are often missed, especially by children who may in fact not be able to read them. - -It is possible to avoid these types of flashes and still create appealing apps/websites -] - -??? -In 1997, a cartoon on television in Japan sent over 700 children to the hospital, including about 500 who had seizures. - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.3 - -Seizures and Physical Reactions -] -.right-column[ -- Web pages do not contain anything that flashes more than three times in any one second period -- Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed (AAA) -] - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.4 - -Navigable -] -.right-column[ -This guideline ensure that users can: -- Find the content they need / go somewhere they want to go -- Keep track of their location. -- Orient themselves within a website or app - -This guideline works closely with Guideline 1.3, which ensures that any structure in the content can be perceived, a key to navigation as well. Headings (1.3.1) are particularly important mechanisms for helping users orient themselves within content and navigate through it. -] ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.4 - -Navigable -] -.right-column[ -- Can jump over uninteresting content -] -??? -examples: Navigation (that is the same on every page on a site); Anything that is not the news article (on a news site); Advertisements; etc. ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.4 - -Navigable -] -.right-column[ -- Can jump over uninteresting content -- Each web page has a descriptive title; Links have link text that is clear about their purpose; Headings and labels describe topic and purpose -- Focus order makes sense. This can be problematic in any web page, and is requires special support when navigating trees and tables. -- Focus is visible (A) and perceivable (AA) and not obscured by other content (A) -- Users should be able to locate a web page, and orient themselves, within a website -- Section headings are used to organize the content, styling is handled through CSS not heading level -] ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.5 - -Pointers, just like Keyboards, should be able to access everything -] -.right-column[ - -All functionality should be accessible via pointer input devices. - -People operating pointer input devices may not be able to carry out timed or complex gestures. Examples -- drag-and-drop gestures and on touch screens -- swiping gestures -- split taps -- long presses. - -They may also have trouble selecting small targets, or with precision (i.e. due to tremor) -] - ---- -# POUR: Operable: Guidelines 2.1-2.5 - -.left-column[ -## Guideline 2.5 - -Pointers, just like Keyboards, should be able to access everything -] -.right-column[ -- Support a single pointer without path based gestures when possible; When not, offer alternatives to path based gestures or multi-finger gestures -- Ideally trigger content only on *up* events -- Make sure that the *accessible name* for a component matches the visual one to better support programmatic access provided by accessibility tools. -- Provide programmatic alternatives to shaking or tilting or dragging based interaction -- Make targets at least 24x24 CSS Pixels (AA) or 44x44 CSS Pixels (AAA) to make selection easier -- Allow users to use multiple possible types of input (keyboard, pointer, on-screen keyboard, stylus, etc) -] - ---- -# More on Size - -Especially hard on mobile devices - -.left-column40[ - -] - -.right-column60[ -Even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error. - -White space around targets also helps - -Minimum on mobile: 48x48 -] -??? -Solve for one, extend to many -Trying to hit a small button with one hand while standing on a moving, crowded bus - ---- -[//]: # (Outline Slide) -# Learning Goals for Today - -- What are the current accessibility standards (1 and 2) -- **How do we use automated tools?** -- What are the current accessibility standards (3 and 4) -- Get comfortable using existing freely available accessibility technology to manually support assessment -- How to make media accessible (images; GUIs; videos) - --- # Field Trip @@ -748,307 +512,4 @@ The task you are evaluating is whether a disabled family can "Report a Concern" [Post your UAR on Ed](https://edstem.org/us/courses/31170/discussion/2349808) ---- -[//]: # (Outline Slide) -# Learning Goals for Today - -- What are the current accessibility standards (1 and 2) -- How do we use automated tools? -- **What are the current accessibility standards (3 and 4)** -- Get comfortable using existing freely available accessibility technology to manually support assessment -- How to make media accessible (images; GUIs; videos) - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.1 -Readable -] -.right-column[ -Readability mean supporting people with all sorts of reading disabilities/reading modality preferences -- Some of this can be automated if tools can access text content & appropriate meta data is provided -- Some has to do with understandability, use of jargon, etc -] - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.1 -Readable -] -.right-column[ -Provide meta data about the language of a page (or parts of a page if the language switches). Also provide pronunciation information when needed to read aloud properly - -Provide a well organized, easy to find glossary or dictionary for jargon, abbreviations, and other unusual words - -Use clear and simple language at an appropriate reading level for the audience whenever possible; when not include clear and simple summaries. Possibly provide an audio or sign language version of content - -] - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.2 - -Predictable -] -.right-column[ -Present content in a predictable order that is consistent across an app or website. -- Can help screen reader users -- Can help people with cognitive impairments -- Can help people who use magnification and can only see part of a layout -] - - - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.2 - -Predictable -] -.right-column[ -- Don't trigger events that change context *just due to focus* (e.g. don't submit a form; launch a dialog; etc on focus), whether on page elements or inputs. Describe what will happen before a change to a form control. -- Locate navigation menus, search fields, skip to navigation links and so on in the same 2D onscreen position and logical (linear ordering) position throughout a site. -- Use familiar names and icons for things. As much as possible be consistent with global standards, not just within the app/site. -- Provide control over content changes (e.g. an "update now" button; "submit" button) -- Provide consistent access to help -] - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.3 - -Input Assistance -] -.right-column[ -Some people with disabilities may have trouble with input -- creating error-free input -- detecting input errors - -Try to reduce the number of serious or irreversible errors that are made -] - ---- -# POUR: Adaptable: Guidelines 3.1-3.3 - -.left-column[ -## Guideline 3.3 - -Input Assistance -] -.right-column[ -- Forms should support error identification with specific and easily found text error descriptions that provide appropriate suggestions for correcting errors. -- Provide clear instructions and labels for form inputs, along with context-sensitive help -- Provide an ability to review information before final purchase or submission of information. This is especially important when the consequences may be serious (such as an expensive purchase) -- Don't require people to re-enter redundant information (automate instead) -- Make sure authentication techniques are accessible -] - ---- -# Aside: CAPTCHA Accessibility - -.left-column50[ - -] -.right-column50[ -Commonly used security method -- Designed to be hard for computers and easy for humans -- Require vision - -] - ---- -# Audio CAPTCHA Accessibility - -.left-column50[ - -] -.right-column50[ -Commonly used security method -- Designed to be hard for computers and easy for humans -- Require vision - -<audio controls="controls"><source src="img/assessment/captcha.wav" type="audio/x-wav" /></audio> - -Answer: -] - ---- -# Audio CAPTCHA Accessibility - -No good accessible alternatives -- [audio CAPTCHA are easy to crack](https://arstechnica.com/information-technology/2008/12/computer-scientists-find-audio-captchas-easy-to-crack/) - --- -...and hard to use: - -![:youtube Example impossible audio CAPTCHA, raFXfU7_fkg] - -??? -Pointer to later 2nd wave accessibility topic: Accessibility and computer security - - ---- -# POUR: Robust: Guideline 4.1 - -.left-column[ -## Guideline 4.1 - -Compatible -] -.right-column[ -This was already a running theme but let's make it explicit: - -Don't break user accessibility technologies (AT) with things like poorly formed markup - -Don't circumvent AT with unconventional markup/code - -Expose information in standard ways - -Follow conventions and be compatible with APIs as much as possible - -] - ---- -# POUR: Robust: Guideline 4.1 - -.left-column[ -## Guideline 4.1 - -Compatible -] -.right-column[ -Example strategies to do this -- Use standard and complete start and end tags on web pages -- Use standard types of status messages to announce changes in content that are not user initiated (e.g. "18 results returned" from an asynchronous search task) -- Provide name, role, and value custom controls - -[ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) is a key standard used to do this for **A**ccessible **R**ich **I**nternet **A**pplications, read up on it if you are trying to build an accessible website -] - ---- -[//]: # (Outline Slide) -# Learning Goals for Today - -- What are the current accessibility standards (1 and 2) -- How do we use automated tools? -- What are the current accessibility standards (3 and 4) -- **Get comfortable using existing freely available accessibility technology to manually support assessment** -- How to make media accessible (images; GUIs; videos) - ---- -# Best Practices for Accessibility Assessment? - -.left-column50[ -Automated Tools -- [Review of many options](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386) -- Web: WebAIM's [WAVE](https://wave.webaim.org/); -- Browser Extensions ([Comparison Article](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386)): [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US); [Axe](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US); [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/); [Siteimprove](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/related); & other browser extensions - - Phone apps: [Google Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en&ref_topic=6376582) and [iOS.](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) -] -.right-column50[ -Design Guidelines (i.e. know them and apply them heuristically) - -Simulation (Try it yourself using accessibility technologies or simulators such as [aDesigner](https://www.eclipse.org/actf/downloads/tools/aDesigner/)) - -User Testing -] - ---- -# Simulation - -In this assignment we will use off-the-shelf, freely available accessibility technology for simulation -- Screen Readers -- Switch Control -- Magnification -- Anything else you want to try - - ---- -# Screen Readers: Typical Bugs - -.left-column40[ - -] - -.right-column60[ -<BR> -![:youtube Banking failure, b-R5r_aKmKo] -] - -??? -- Reads the words on the screen -- Keystroke to move to next area -- Screen reader users, turn this on on your phone - ---- -# Introduction to Screen Readers - -![:youtube Screen Reader Demo, dEbl5jvLKGQ] - -??? -Demo also shows an example of a screen reader finding a problem such as lack of alt text or a badly labeled table - ---- -# Switch Control - -![:youtube Explanation of how to set up switch control, GQKEE9nI1lk] - -??? -- Switch users, turn this on, on your phone - ---- -# Simulation Warning - -.left-column[ -Simulation tends to cause people to underestimate what is possible -] - -.right-column[ -![:youtube One thumb to rule them all: video of gaming with switch control,2BhHwk9qSvI] -] - -??? -Remind them about drone video - -Don't fall into the trap of assuming that your ineptitude is the standard disability experience] ---- - -# Magnification - -![:youtube How to magnify your phone's screen, yHqJOSZN1zA] - -??? -- Magnification users, turn this on, on your phone - ---- -# Break up into groups - -Decide who will -- use a screen reader -- use switch control -- use magnification - -Open your phone's web browser and load [seattleschools.org](https://www.seattleschools.org/) - -[next slide] - ---- -# In your groups - -Revisit [Seattle Public Schools](https://www.seattleschools.org/) - -The task you are evaluating is whether a disabled family can "Report a Concern" about how accessible the website is - -Generate UARs for your accessibility technology -[Post your UAR on Ed](https://edstem.org/us/courses/31170/discussion/2349808) - ---- diff --git a/slides/assessment2.html b/slides/assessment2.html index d450da4934c5d21e0720b206d827558f693cce83..d4f300a58cd14349efa6658b5647c6f687f2f3d9 100644 --- a/slides/assessment2.html +++ b/slides/assessment2.html @@ -26,370 +26,418 @@ class: [//]: # (Outline Slide) # Learning Goals for Today -- What are trade offs between assessment techniques -- Example of a carefully designed empirical study +- **What are the current accessibility standards (2 and 3 and 4)** --- -# Many Possible Techniques for Assessment +# POUR: Operable: Guidelines 2.1-2.5 -Learning design guidelines (baseline for any other technique) - -Automated Assessment - -Simulation/Using accessibility Tools - -User Studies (focus of next week) - ---- -# Which one Should You Use? - -What technique will find the most user accessibility problems? +.left-column[ +## Guideline 2.1 +Keyboard Accessible +] +.right-column[ -What technique will find the most guideline violations? +No other input form has this flexibility or is universally supported and operable by people with different disabilities, as long as the keyboard input is not time-dependent. -What techniques could someone without accessibility training successfully use? +Examples of who benefits +- screen reader users + - blind users + - reading disabilities + - ... +- speech input users +- switch input users -How do you trade off cost & value? +] -How do you get a system to the point where user testing is worth doing? --- -# Study to answer these questions - -[Is your web page accessible? A comparative study...](https://dl.acm.org/doi/10.1145/1054972.1054979) - -Gather baseline problem data on 4 sites -- Usability study +# POUR: Operable: Guidelines 2.1-2.5 -Test same sites with other techniques -- Expert review with guidelines -- Screen reader -- Automated tool -- Remote +.left-column[ +## Guideline 2.1 +Keyboard Accessible -Compare problems found to baseline study +Discuss with your neighbor and post +] +.right-column[ +<iframe src="https://embed.polleverywhere.com/free_text_polls/zXxJ9XBdJQPaUsFM1ie5J?controls=none&short_poll=true" width="800px" height="600px"></iframe> +] --- -# Baseline Study -5 blind JAWS users -- 2 to 6+ years of experience -- Used web for e-mail, shopping, information, and news - -4 tasks (each on a different site) -- Range of difficulty -- Representative activities: bus trip planner; find names on a page; register for a class; grocery item search +# POUR: Operable: Guidelines 2.1-2.5 +.left-column[ +## Guideline 2.1 +Keyboard Accessible +] +.right-column[ +- Drawing program +- Drag and Drop +- Drone control +- Game play +- Website navigation +- ... +] --- -# Think Aloud Protocol +# POUR: Operable: Guidelines 2.1-2.5 + +.left-column[ +## Guideline 2.1 +Keyboard Accessible +] +.right-column[ +Some common pitfalls: -Focused analysis on *accessibility* problems (not *usability* or *technology* problems) -- [+] “Pop up. Had to ask for sighted help to continue†-- [+] “Date entered in incorrect format†-- [-] “Their slogan is annoying†-- [-] “Forgot JAWS command for forms mode†-Ranked problems by severity, found 3-10 per site +- Keyboard Traps. Content should not "trap" keyboard focus within subsections of content on a Web page. This is a common problem when multiple formats are combined within a page and rendered using plug-ins or embedded applications. +- Invisible Content. Some parts of a web page can never be reached +- Lack of Control. Users should be able to reconfigure or remove shortcuts -Grouped like problems (e.g. all encounters with the pop-up window) +Note: Not in guidelines (that I know of) but a "reverse trap" is whether you can reach text that *doesn't* have links or headers when using switch input. How would you do this? +] ??? -AT the time, WCAG 1; Meeting WCAG priority 1 guidelines did not address all severe problems +Character key shortcuts work well for many keyboard users, but are inappropriate and frustrating for speech input users — whose means of input is strings of letters — and for keyboard users who are prone to accidentally hit keys. To rectify this issue, authors need to allow users to turn off or reconfigure shortcuts that are made up of only character keys. --- -# Results -- Grocery +# POUR: Operable: Guidelines 2.1-2.5 -.left-column50[ - -] +.left-column[ +## Guideline 2.2 -.right-column50[ - +Enough Time +] +.right-column[ +Many users who have disabilities need more time to complete tasks than the majority of users: +- may take longer to physically respond +- may take longer to read things +- may have low vision and take longer to find things or to read them +- may be accessing content through an assistive technology that requires more time. ] ---- -# Results -- Grocery - -.left-column50[ -Special, accessible website - -Easiest site -7 accessibility problems +--- +# POUR: Operable: Guidelines 2.1-2.5 -- Redundant text +.left-column[ +## Guideline 2.2 -- Problems with forms -… +Enough Time ] - -.right-column50[ - +.right-column[ +- Timelines are adjustable (e.g. rotating content; timeouts; etc), and minimized when not necessary + - If a timeout does necessarily occur, users should be able to resume without loss of data after re-authenticating + - If data loss will occur, users are warned about the timeout limits +- Pause, Stop & Hide all possible for all blinking text, animations and so on +- Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency (AAA) ] --- -# Results -- Find Names +# POUR: Operable: Guidelines 2.1-2.5 -.left-column50[ -2 simple HTML pages +.left-column[ +## Guideline 2.3 -3 accessibility problems -- Front page: Use of headers confusing -- Front page lacked clear description of contents/purpose -- Name page: too many links +Seizures and Physical Reactions ] +.right-column[ + Some people with seizure disorders can have a seizure triggered by flashing visual content, even for a second or two. + - Most people are unaware that they have this disorder until it strikes. + - Warnings do not work well because they are often missed, especially by children who may in fact not be able to read them. -.right-column50[ - +It is possible to avoid these types of flashes and still create appealing apps/websites ] +??? +In 1997, a cartoon on television in Japan sent over 700 children to the hospital, including about 500 who had seizures. + --- -# Results -- Bus +# POUR: Operable: Guidelines 2.1-2.5 -.left-column50[ -Most difficult site +.left-column[ +## Guideline 2.3 -10 accessibility problems -- Lack of ALT text -- Bad form labeling -- Non-descriptive link names -- Lack of directions/ description of purpose +Seizures and Physical Reactions ] - -.right-column50[ - +.right-column[ +- Web pages do not contain anything that flashes more than three times in any one second period +- Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed (AAA) ] --- -# Results -- Bus - -.left-column50[ +# POUR: Operable: Guidelines 2.1-2.5 -1 page +.left-column[ +## Guideline 2.4 -9 accessibility problems -- Required field marked only with “bold†text -- No directions about syntax requirements -- Fields not well labeled -… +Navigable ] +.right-column[ +This guideline ensure that users can: +- Find the content they need / go somewhere they want to go +- Keep track of their location. +- Orient themselves within a website or app -.right-column50[ - +This guideline works closely with Guideline 1.3, which ensures that any structure in the content can be perceived, a key to navigation as well. Headings (1.3.1) are particularly important mechanisms for helping users orient themselves within content and navigate through it. ] - --- -# Comparative Study +# POUR: Operable: Guidelines 2.1-2.5 -Piloted techniques to be compared +.left-column[ +## Guideline 2.4 -Gathered data on success of each technique for same tasks as baseline +Navigable +] +.right-column[ +- Can jump over uninteresting content +] +??? +examples: Navigation (that is the same on every page on a site); Anything that is not the news article (on a news site); Advertisements; etc. +--- +# POUR: Operable: Guidelines 2.1-2.5 -Analyzed results +.left-column[ +## Guideline 2.4 +Navigable +] +.right-column[ +- Can jump over uninteresting content +- Each web page has a descriptive title; Links have link text that is clear about their purpose; Headings and labels describe topic and purpose +- Focus order makes sense. This can be problematic in any web page, and is requires special support when navigating trees and tables. +- Focus is visible (A) and perceivable (AA) and not obscured by other content (A) +- Users should be able to locate a web page, and orient themselves, within a website +- Section headings are used to organize the content, styling is handled through CSS not heading level +] --- -# Comparative Study +# POUR: Operable: Guidelines 2.1-2.5 -Four conditions -- Expert Review (web experts) -- Screen Reader (web experts w/ screen reader) -- Automated (Bobby) -- Remote (expert, remote blind users) +.left-column[ +## Guideline 2.5 -Four tasks/sites (same as baseline) -- 18 current web developers (2-8 yrs exp) -- Never developed an accessible website -- Three had taken a class that covered some issues -- 9 remote, experienced JAWS users +Pointers, just like Keyboards, should be able to access everything +] +.right-column[ ---- -# Web Developers +All functionality should be accessible via pointer input devices. + +People operating pointer input devices may not be able to carry out timed or complex gestures. Examples +- drag-and-drop gestures and on touch screens +- swiping gestures +- split taps +- long presses. -All web developers introduced to WCAG Priority 1 guidelines (best available at the time) +They may also have trouble selecting small targets, or with precision (i.e. due to tremor) +] -8 web developers given a Screen Reader tutorial & practice time (~15mins) +--- +# POUR: Operable: Guidelines 2.1-2.5 -Instructed to only review task pages +.left-column[ +## Guideline 2.5 -Think aloud method +Pointers, just like Keyboards, should be able to access everything +] +.right-column[ +- Support a single pointer without path based gestures when possible; When not, offer alternatives to path based gestures or multi-finger gestures +- Ideally trigger content only on *up* events +- Make sure that the *accessible name* for a component matches the visual one to better support programmatic access provided by accessibility tools. +- Provide programmatic alternatives to shaking or tilting or dragging based interaction +- Make targets at least 24x24 CSS Pixels (AA) or 44x44 CSS Pixels (AAA) to make selection easier +- Allow users to use multiple possible types of input (keyboard, pointer, on-screen keyboard, stylus, etc) +] --- -# Remote, BLV users +# More on Size -Given parallel instructions +Especially hard on mobile devices -Asked to email problems back to us +.left-column40[ + +] ---- -# Analysis +.right-column60[ +Even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error. -Coded problems: WCAG & Empirical (baseline) +White space around targets also helps -Hypothesis 1: No technique will be more effective than any other, where effectiveness is a combination of: -- Thoroughness (portion of actual problems) -- Validity (false positives) +Minimum on mobile: 48x48 +] +??? +Solve for one, extend to many +Trying to hit a small button with one hand while standing on a moving, crowded bus -Hypothesis 2: The types of accessibility problems found by each technique will be the same +--- +# POUR: Adaptable: Guidelines 3.1-3.3 -- Categories of problems found by each technique +.left-column[ +## Guideline 3.1 +Readable +] +.right-column[ +Readability mean supporting people with all sorts of reading disabilities/reading modality preferences +- Some of this can be automated if tools can access text content & appropriate meta data is provided +- Some has to do with understandability, use of jargon, etc +] --- -# General Results +# POUR: Adaptable: Guidelines 3.1-3.3 -1-2 hours to complete +.left-column[ +## Guideline 3.1 +Readable +] +.right-column[ +Provide meta data about the language of a page (or parts of a page if the language switches). Also provide pronunciation information when needed to read aloud properly -No correlation between developer severity and WCAG priority or empirical severity +Provide a well organized, easy to find glossary or dictionary for jargon, abbreviations, and other unusual words -5 of 9 remote participants failed to complete 1 of the 4 tasks +Use clear and simple language at an appropriate reading level for the audience whenever possible; when not include clear and simple summaries. Possibly provide an audio or sign language version of content ---- -# H1: Methods Don't Differ -.left-column50[ -- Screen reader and Expert Review found more problems -] -.right-column50[ - ] -??? -Note small differences between individual developers in finding problems +--- +# POUR: Adaptable: Guidelines 3.1-3.3 -Difference between remote and screen reader group is significant +.left-column[ +## Guideline 3.2 ---- -# H1: Methods Don't Differ -.left-column50[ -- Screen reader and Expert Review found more problems -- Screen reader and Expert Review most valid +Predictable ] -.right-column50[ - +.right-column[ +Present content in a predictable order that is consistent across an app or website. +- Can help screen reader users +- Can help people with cognitive impairments +- Can help people who use magnification and can only see part of a layout ] -??? -Note small differences between individual developers in finding problems -Difference between remote and screen reader group is significant --- -# H2: Techniques find Different Problems +# POUR: Adaptable: Guidelines 3.1-3.3 -.left-column60[ +.left-column[ +## Guideline 3.2 -WCAG 1 +Predictable +] +.right-column[ +- Don't trigger events that change context *just due to focus* (e.g. don't submit a form; launch a dialog; etc on focus), whether on page elements or inputs. Describe what will happen before a change to a form control. +- Locate navigation menus, search fields, skip to navigation links and so on in the same 2D onscreen position and logical (linear ordering) position throughout a site. +- Use familiar names and icons for things. As much as possible be consistent with global standards, not just within the app/site. +- Provide control over content changes (e.g. an "update now" button; "submit" button) +- Provide consistent access to help +] -| | G1 | G2 | G3 | G4 | G5 | G9 | G10 | G12 | G13 | G14 | -|:--------------|:---|:---|:---|:---|:---|:---|:----|:----|:----|:----| -| Expert Review | Y | Y | Y | | | Y | Y | Y | Y | | -| Screen Reader | Y | Y | Y | Y | | Y | Y | Y | Y | Y | -| Remote | Y | Y | | | Y | Y | Y | Y | Y | Y | -| Automated | Y | Y | | | Y | | | | Y | | +--- +# POUR: Adaptable: Guidelines 3.1-3.3 +.left-column[ +## Guideline 3.3 + +Input Assistance ] +.right-column[ +Some people with disabilities may have trouble with input +- creating error-free input +- detecting input errors -.right-column40[ -- G1,2: AV alternatives & not just color -- G3,4: Good markup and clear language -- G5: Tables -- G9,10: Device independence & interim solutions for things like JavaScript -- G12,13: Context & Navigation -- G14; clear and simple text +Try to reduce the number of serious or irreversible errors that are made ] --- -# H2: Techniques find Different Problems - -.left-column60[ - -Empirical +# POUR: Adaptable: Guidelines 3.1-3.3 -| | E1 | E2 | E3 | E4 | E5 | E6 | E7 | E8 | E9 | -|:--------------|:---|:---|:---|:---|:---|:---|:---|:---|:---| -| Expert Review | Y | Y | Y | Y | | Y | Y | Y | Y | -| Screen Reader | Y | | Y | Y | Y | Y | Y | Y | Y | -| Remote | Y | | Y | Y | | Y | Y | | Y | -| Automated | Y | | | | | | | | | +.left-column[ +## Guideline 3.3 +Input Assistance ] -.right-column40[ -- E1: No alt text -- E2: Poor defaults -- E3: Poor formatting -- E4: Too much data -- E6: No directions -- E7: Visual pairing -- E8: Poor names -- E9: Popups +.right-column[ +- Forms should support error identification with specific and easily found text error descriptions that provide appropriate suggestions for correcting errors. +- Provide clear instructions and labels for form inputs, along with context-sensitive help +- Provide an ability to review information before final purchase or submission of information. This is especially important when the consequences may be serious (such as an expensive purchase) +- Don't require people to re-enter redundant information (automate instead) +- Make sure authentication techniques are accessible ] --- -# Aside: WCAG has come a long way +# Aside: CAPTCHA Accessibility -Many (perhaps all) of these are part of guidelines now +.left-column50[ + +] +.right-column50[ +Commonly used security method +- Designed to be hard for computers and easy for humans +- Require vision -- E1: Should have no alt text -- E2: Poor defaults -- E3: Poor formatting -- E4: Too much data -- E6: No directions -- E7: Visual pairing -- E8: Poor names -- E9: Popups +] --- -# H2: Techniques find Different Types of Problems +# Audio CAPTCHA Accessibility -- High variance among individual reviewers -- Screen reader novices did best at both major types of problems +.left-column50[ + +] +.right-column50[ +Commonly used security method +- Designed to be hard for computers and easy for humans +- Require vision - +<audio controls="controls"><source src="img/assessment/captcha.wav" type="audio/x-wav" /></audio> -??? -Explain chart -also tracks heuristic eval literature: Five Evaluators find ~50% of Problems -Individuals don't do well, but they *differ* from each other +Answer: +] --- -# Discussion +# Audio CAPTCHA Accessibility -Hyp 1: Screen reader most consistently effective +No good accessible alternatives -- [audio CAPTCHA are easy to crack](https://arstechnica.com/information-technology/2008/12/computer-scientists-find-audio-captchas-easy-to-crack/) -Hyp 2: All but automated comparable +-- +...and hard to use: -- Screen missed only tables (w3); poor defaults (empirical) +![:youtube Example impossible audio CAPTCHA, raFXfU7_fkg] -Really need multiple evaluators - -Remote technique needs improvement, could fare better +??? +Pointer to later 2nd wave accessibility topic: Accessibility and computer security -Accessibility experience would probably change results --- -# Discussion +# POUR: Robust: Guideline 4.1 + +.left-column[ +## Guideline 4.1 + +Compatible +] +.right-column[ +This was already a running theme but let's make it explicit: + +Don't break user accessibility technologies (AT) with things like poorly formed markup -Asymptotic testing needed -- Can’t be sure we found all empirical problems +Don't circumvent AT with unconventional markup/code -Falsification testing needed -- Are problems not in empirical data set really false positives? +Expose information in standard ways -More consistent problem reporting & comparison beneficial +Follow conventions and be compatible with APIs as much as possible -Limitations -- Web only -- Design of remote test limited result quality -- Very old study +] --- -# Small Group Discussion +# POUR: Robust: Guideline 4.1 -Find the students who assessed the same website as you. +.left-column[ +## Guideline 4.1 -Talk about the UARs you generated. Did you find different problems -from other students? Why do you think you did, or did not, find different problems? +Compatible +] +.right-column[ +Example strategies to do this +- Use standard and complete start and end tags on web pages +- Use standard types of status messages to announce changes in content that are not user initiated (e.g. "18 results returned" from an asynchronous search task) +- Provide name, role, and value custom controls -Post your discussion notes to the Ed Thread for your website. +[ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) is a key standard used to do this for **A**ccessible **R**ich **I**nternet **A**pplications, read up on it if you are trying to build an accessible website +] ---- -[//]: # (Outline Slide) -# Learning Goals for Today -- What are trade offs between assessment techniques -- Example of a carefully designed empirical study diff --git a/slides/best-practices.html b/slides/best-practices.html index 08118a6469666b8b66334a5ec4f0a7b0b0ac0c9c..17ec98797dd1ac9db9e0e740f4021b32923e8e94 100644 --- a/slides/best-practices.html +++ b/slides/best-practices.html @@ -1,13 +1,13 @@ --- layout: presentation -title: Assessment 2 --Week 3-- -description: Best Practices for Improving Accessibility +title: Best Practices --Week 4-- +description: Best Practices for Building Accessible Apps class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ -# Week 3: Improving Accessibility +# Week 3: Building For Accessibility {{site.classnum}}, {{site.quarter}} ] @@ -26,11 +26,18 @@ class: [//]: # (Outline Slide) # Learning Goals for Today +**Who Is Responsible for Accessibility?** + +How Screen Readers Work + Building for Accessibility +- Structure impacts navigation order +- Need to announce things that change -Presenting Accessibly & Video Accessibility --- +[//]: # TODO expand this slide deck? IT's short and could cover more. Also discuss how this should impact the report + # Why isn't the World Already Accessible? Designing for accessibility is hard @@ -50,16 +57,6 @@ Programmers also of course very important These days, a lot of it is created by end users --- -# Organizational Issues - -[Discussion of Denae Ford Paper & post on Ed?] - -<!-- --- --> -<!-- # How might Designers address Accessibility --> - -<!-- <iframe src="https://embed.polleverywhere.com/free_text_polls/sL5v5Ufo0sHFBmmC15MPV?controls=none&short_poll=true" width="800px" height="600px"></iframe> --> - --- # Who Creates Accessibility? @@ -94,6 +91,7 @@ Designs have a big role in what is accessible These days, a lot of it is created by end users --- +[//]: # TODO fill in # What do Programmers already know about access? [Accessibility in Software Practice](https://dl.acm.org/doi/pdf/10.1145/3503508) @@ -101,6 +99,15 @@ These days, a lot of it is created by end users ??? Summarize this more... +--- +[//]: # TODO fill in +# Organizational Issues + +<!-- --- --> +<!-- # How might Designers address Accessibility --> + +<!-- <iframe src="https://embed.polleverywhere.com/free_text_polls/sL5v5Ufo0sHFBmmC15MPV?controls=none&short_poll=true" width="800px" height="600px"></iframe> --> + --- # Who Creates Accessibility? @@ -116,13 +123,17 @@ Programmers also of course very important --- [//]: # (Outline Slide) -# Building for Accessibility: Key Considerations +# Learning Goals for Today + +Who Is Responsible for Accessibility? + +**How Screen Readers Work** -- **Underlying Technology** -- Going deeper into ALT text +Building for Accessibility - Structure impacts navigation order - Need to announce things that change + --- # (On-desktop) screen reader interaction Three core interaction patterns: @@ -218,9 +229,9 @@ Speak(fa:fa-volume-up Deleted Text ):::bluelarge </div> --- -# API specific issues +# API specific issues Impact Access -We won't cover this in depth, but you'll always want to understand your accessibility API in depth to make an app accessible +You always must to understand your accessibility API in depth to make an app accessible For example, when [Ross et al, 2017](https://dl.acm.org/doi/10.1145/3132525.3132547) studied 1000s of android apps, some common errors came up which aren't in guidelines because they are either tool specific or straight up UX errors: @@ -232,191 +243,17 @@ For example, when [Ross et al, 2017](https://dl.acm.org/doi/10.1145/3132525.3132 --- [//]: # (Outline Slide) -# Building for Accessibility: Key Considerations - -- Underlying Technology -- Going deeper into ALT text -- Structure impacts navigation order -- Need to announce things that change - - ---- -# Image Description: GUIs - -.left-column40[ - - -] - -.right-column60[ -[Investigating Visual Semantic Understanding of Blind and Low-Vision Technology Users](https://dl.acm.org/doi/abs/10.1145/3411764.3445040) - -- Visual attributes that convey aesthetics and usability of user interfaces. -- Desktop and smartphone screen readers provide control type and other semantic information excluding any visual semantics. -- Smartphones allow for some degree of spatial exploration. - -] - ---- -# Study - -How do BLV technology users understand and access visual semantics? - - - -??? -Interviews; -Screen reader tasks; -Reconstruction - ---- -# Results - -.left-column50[ -.quote[ -The way I think about this is on the top is my email, to the right is my phone number. Below that [is] essentially a 2 by 2 kind of thing, which has my social profile. -] -] - -.right-column50[ -Participants were aware of the overall structure of *phone apps* - -- They developed this understanding using screen readers -- Associated size and location and function -- Layouts were understood in terms of absolute, relative, and corner positions - -] - ---- -# Describe the leftmost GUI? ([Ed](https://edstem.org/us/courses/31170/discussion/2394641)) - - - ---- -# Describe the leftmost GUI? ([Ed](https://edstem.org/us/courses/31170/discussion/2394641)) - -.left-column[ - -] -.right-column[ -This is very hard to describe without knowing what is accessible; and whether the user is more interested in content or layout. -- App has two tabs at top center: Delivery and Pickup. -- Below is a seach bar with address and time menu -- Below that is an advertisement for The Burger Joint (25% of screen) with a details button -- Next is a scrolling set of tabs for Pickup; Grocery; Prescription; Top Sites; the rest is not visible off screen -- The bottom 30% of the screen shows the title Hidden Gems (Up and coming spots you'd like) with a list of restaurants. Each row in the list shows an image, restaurant name, rating, and more. The list requires 2D scrolling to see everything. The top two are visible: Tsuki Ramen and Chocolate Co. -] - ---- -# Describing GUIs is rarely necessary - -GUI description best supported dynamically through exploration. Critical needs for this -- Accessibility information available for interface -- Touch screen phone interaction techniques - -Don't describe GUIs, explore them. - ---- -.left-column40[ - -] - -.right-column60[ -## Developer Responsibility -Expose GUI structure - -Provide good ALT text -- What is a good name for the "Like" Button? - -- Enable the user to understand the name of the control they have navigated to, what type of control it is, what value it has, what state it has. -] - ---- -.left-column40[ - -] - -.right-column60[ -## Proper ALT text - -Screen reader will read out name, role, and state. Don't repeat these. - -Good alt text: Name ("Like") - -API knows: Role ("Button") - -API knows: State ("Not selected") -] - - ---- -.left-column40[ - -] - -.right-column60[ -## Exception: You UARs -My alt text for the like button (assuming it's the subject of my UAR, slide or etc) - -A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like) -] - ---- -# Diagrams and Visualizations (1 of 2) -.left-column40[ - - -] - -.right-column60[ -Benefit similar capabilities - -Will hear much more about visualizations in a few weeks - -When direct exploration isn't possible, consider descriptions that are *language based* -] ---- -# Diagrams and Visualizations (2 of 2) -.left-column40[ -<tt> -stateDiagram-v2 <BR> - [*] --> Still<BR> - Still --> [*]<BR> - Still --> Moving<BR> - Moving --> Still<BR> - Moving --> Crash<BR> - Crash --> [*]<BR> -</tt> -] - -.right-column60[ -Benefit similar capabilities - -Will hear much more about visualizations in a few weeks - -When direct exploration isn't possible, consider descriptions that are *language based* -] - ---- -# Math standard for accessibility is MathML - -Math has a hierarchy just like other systems (i.e. fractions, parantheses) - -Can support with MathML +# Learning Goals for Today -Can generate MathML using pandoc; MS Word; etc +Who Is Responsible for Accessibility? -Capturing an image of an equation and describing it much worse for screen reader users +How Screen Readers Work ---- -[//]: # (Outline Slide) -# Building for Accessibility: Key Considerations - -- Underlying Technology -- Going deeper into ALT text +Building for Accessibility - **Structure impacts navigation order** - Need to announce things that change + --- # Key Navigation Concept @@ -523,10 +360,13 @@ Tables are not ideal, but *best* when headers are labeled. Again, check the API --- [//]: # (Outline Slide) -# Building for Accessibility: Key Considerations +# Learning Goals for Today + +Who Is Responsible for Accessibility? -- Underlying Technology -- Going deeper into ALT text +How Screen Readers Work + +Building for Accessibility - Structure impacts navigation order - **Need to announce things that change** @@ -591,45 +431,14 @@ IF you take one thing away from this whole discussion, it should be: --- [//]: # (Outline Slide) -# Learning Goals for Today - -Building for Accessibility - -**Video Accessibility** - ---- -# Making Video/Animation/Audio Accessible - -Relevant for slides; web; anywhere - -Understandable live & recorded video for people who are not able to hear audio - -Understandable live & recorded video for people who are not able to see the screen - -Other factors such as avoiding seizures & so on - ---- -# Captioning Videos - -Auto captioning getting better, but still makes many errors -- Does not easily support multilingual settings -- Errors for people with accents -- Errors for proper nouns and names - -Best practice is manual captioning and/or ASL live, or pre-recorded - -Easy to apply and then correct auto captioning with existing tools (e.g. YouTube has an interface) -- You will be expected to do this if you use video in any homeworks - - ---- -# Audio Describing Videos +# Learning Goals for Today -May requiring pausing video, but skillful description usually possible without that +Who Is Responsible for Accessibility? -More commonly available today than ever +How Screen Readers Work -Let's try it: Form groups and open [YouDescribe](https://youdescribe.org/); -([post a link to your video on Ed](https://edstem.org/us/courses/31170/discussion/2350670)) +Building for Accessibility +- Structure impacts navigation order +- Need to announce things that change diff --git a/slides/comparing-approaches.html b/slides/comparing-approaches.html new file mode 100644 index 0000000000000000000000000000000000000000..a91558cc3be09d60ff48dc078af81027129a0ebd --- /dev/null +++ b/slides/comparing-approaches.html @@ -0,0 +1,390 @@ +--- +layout: presentation +title: FOOBAR --Week N-- +description: Accessibility +class: middle, center, inverse +--- +background-image: url(img/people.png) + +.left-column50[ +# Welcome to the Future of Access Technologies + +Week N, FOOBAR + +{{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) +# Learning Goals for today + +- What are trade offs between assessment techniques +- Example of a carefully designed empirical study + +--- +# Many Possible Techniques for Assessment + +Learning design guidelines (baseline for any other technique) + +Automated Assessment + +Simulation/Using accessibility Tools + +User Studies (focus of next week) + +--- +# Which one Should You Use? + +What technique will find the most user accessibility problems? + +What technique will find the most guideline violations? + +What techniques could someone without accessibility training successfully use? + +How do you trade off cost & value? + +How do you get a system to the point where user testing is worth doing? + +--- +# Study to answer these questions + +[Is your web page accessible? A comparative study...](https://dl.acm.org/doi/10.1145/1054972.1054979) + +Gather baseline problem data on 4 sites +- Usability study + +Test same sites with other techniques +- Expert review with guidelines +- Screen reader +- Automated tool +- Remote + +Compare problems found to baseline study + +--- +# Baseline Study +5 blind JAWS users +- 2 to 6+ years of experience +- Used web for e-mail, shopping, information, and news + +4 tasks (each on a different site) +- Range of difficulty +- Representative activities: bus trip planner; find names on a page; register for a class; grocery item search + +--- +# Think Aloud Protocol + +Focused analysis on *accessibility* problems (not *usability* or *technology* problems) +- [+] “Pop up. Had to ask for sighted help to continue†+- [+] “Date entered in incorrect format†+- [-] “Their slogan is annoying†+- [-] “Forgot JAWS command for forms mode†+Ranked problems by severity, found 3-10 per site + +Grouped like problems (e.g. all encounters with the pop-up window) + +??? +AT the time, WCAG 1; Meeting WCAG priority 1 guidelines did not address all severe problems + +--- +# Results -- Grocery + +.left-column50[ + +] + +.right-column50[ + +] +--- +# Results -- Grocery + +.left-column50[ +Special, accessible website + +Easiest site + +7 accessibility problems + +- Redundant text + +- Problems with forms +… +] + +.right-column50[ + +] +--- +# Results -- Find Names + +.left-column50[ +2 simple HTML pages + +3 accessibility problems +- Front page: Use of headers confusing +- Front page lacked clear description of contents/purpose +- Name page: too many links +] + +.right-column50[ + +] + +--- +# Results -- Bus + +.left-column50[ +Most difficult site + +10 accessibility problems +- Lack of ALT text +- Bad form labeling +- Non-descriptive link names +- Lack of directions/ description of purpose +] + +.right-column50[ + +] + +--- +# Results -- Bus + +.left-column50[ + +1 page + +9 accessibility problems +- Required field marked only with “bold†text +- No directions about syntax requirements +- Fields not well labeled +… +] + +.right-column50[ + +] + +--- +# Comparative Study + +Piloted techniques to be compared + +Gathered data on success of each technique for same tasks as baseline + +Analyzed results + +--- +# Comparative Study + +Four conditions +- Expert Review (web experts) +- Screen Reader (web experts w/ screen reader) +- Automated (Bobby) +- Remote (expert, remote blind users) + +Four tasks/sites (same as baseline) +- 18 current web developers (2-8 yrs exp) +- Never developed an accessible website +- Three had taken a class that covered some issues +- 9 remote, experienced JAWS users + +--- +# Web Developers + +All web developers introduced to WCAG Priority 1 guidelines (best available at the time) + +8 web developers given a Screen Reader tutorial & practice time (~15mins) + +Instructed to only review task pages + +Think aloud method + +--- +# Remote, BLV users + +Given parallel instructions + +Asked to email problems back to us + +--- +# Analysis + +Coded problems: WCAG & Empirical (baseline) + +Hypothesis 1: No technique will be more effective than any other, where effectiveness is a combination of: +- Thoroughness (portion of actual problems) +- Validity (false positives) + +Hypothesis 2: The types of accessibility problems found by each technique will be the same + +- Categories of problems found by each technique + +--- +# General Results + +1-2 hours to complete + +No correlation between developer severity and WCAG priority or empirical severity + +5 of 9 remote participants failed to complete 1 of the 4 tasks + +--- +# H1: Methods Don't Differ +.left-column50[ +- Screen reader and Expert Review found more problems +] +.right-column50[ + +] +??? + +Note small differences between individual developers in finding problems + +Difference between remote and screen reader group is significant + +--- +# H1: Methods Don't Differ +.left-column50[ +- Screen reader and Expert Review found more problems +- Screen reader and Expert Review most valid +] +.right-column50[ + +] +??? + +Note small differences between individual developers in finding problems + +Difference between remote and screen reader group is significant + +--- +# H2: Techniques find Different Problems + +.left-column60[ + +WCAG 1 + +| | G1 | G2 | G3 | G4 | G5 | G9 | G10 | G12 | G13 | G14 | +|:--------------|:---|:---|:---|:---|:---|:---|:----|:----|:----|:----| +| Expert Review | Y | Y | Y | | | Y | Y | Y | Y | | +| Screen Reader | Y | Y | Y | Y | | Y | Y | Y | Y | Y | +| Remote | Y | Y | | | Y | Y | Y | Y | Y | Y | +| Automated | Y | Y | | | Y | | | | Y | | + +] + +.right-column40[ +- G1,2: AV alternatives & not just color +- G3,4: Good markup and clear language +- G5: Tables +- G9,10: Device independence & interim solutions for things like JavaScript +- G12,13: Context & Navigation +- G14; clear and simple text +] + +--- +# H2: Techniques find Different Problems + +.left-column60[ + +Empirical + +| | E1 | E2 | E3 | E4 | E5 | E6 | E7 | E8 | E9 | +|:--------------|:---|:---|:---|:---|:---|:---|:---|:---|:---| +| Expert Review | Y | Y | Y | Y | | Y | Y | Y | Y | +| Screen Reader | Y | | Y | Y | Y | Y | Y | Y | Y | +| Remote | Y | | Y | Y | | Y | Y | | Y | +| Automated | Y | | | | | | | | | + +] +.right-column40[ +- E1: No alt text +- E2: Poor defaults +- E3: Poor formatting +- E4: Too much data +- E6: No directions +- E7: Visual pairing +- E8: Poor names +- E9: Popups +] + +--- +# Aside: WCAG has come a long way + +Many (perhaps all) of these are part of guidelines now + +- E1: Should have no alt text +- E2: Poor defaults +- E3: Poor formatting +- E4: Too much data +- E6: No directions +- E7: Visual pairing +- E8: Poor names +- E9: Popups + +--- +# H2: Techniques find Different Types of Problems + +- High variance among individual reviewers +- Screen reader novices did best at both major types of problems + + + +??? +Explain chart +also tracks heuristic eval literature: Five Evaluators find ~50% of Problems +Individuals don't do well, but they *differ* from each other + +--- +# Discussion + +Hyp 1: Screen reader most consistently effective + +Hyp 2: All but automated comparable + +- Screen missed only tables (w3); poor defaults (empirical) + +Really need multiple evaluators + +Remote technique needs improvement, could fare better + +Accessibility experience would probably change results + +--- +# Discussion + +Asymptotic testing needed +- Can’t be sure we found all empirical problems + +Falsification testing needed +- Are problems not in empirical data set really false positives? + +More consistent problem reporting & comparison beneficial + +Limitations +- Web only +- Design of remote test limited result quality +- Very old study + +--- +# Small Group Discussion + +Find the students who assessed the same website as you. + +Talk about the UARs you generated. Did you find different problems +from other students? Why do you think you did, or did not, find different problems? + +Post your discussion notes to the Ed Thread for your website. diff --git a/slides/img/physical/breadboard.png b/slides/img/physical/breadboard.png new file mode 100644 index 0000000000000000000000000000000000000000..448ea4c1d9a68cc17dcaafb545c509772dae71b4 Binary files /dev/null and b/slides/img/physical/breadboard.png differ diff --git a/slides/img/physical/breadboard2.pdf b/slides/img/physical/breadboard2.pdf new file mode 100644 index 0000000000000000000000000000000000000000..d1a6d04f7966e05c9f489b9ea1def65cd5267e2d Binary files /dev/null and b/slides/img/physical/breadboard2.pdf differ diff --git a/slides/img/physical/breadboard3.pdf b/slides/img/physical/breadboard3.pdf new file mode 100644 index 0000000000000000000000000000000000000000..a389f77ef98befdd85ebf8f02e025cb08c294ce6 Binary files /dev/null and b/slides/img/physical/breadboard3.pdf differ diff --git a/slides/img/physical/breadboard4.pdf b/slides/img/physical/breadboard4.pdf new file mode 100644 index 0000000000000000000000000000000000000000..15dbdbf7df0c71b7741b1cf1a5a2d4b83647a55d Binary files /dev/null and b/slides/img/physical/breadboard4.pdf differ diff --git a/slides/img/physical/breadboard5.pdf b/slides/img/physical/breadboard5.pdf new file mode 100644 index 0000000000000000000000000000000000000000..d74c95e5db05e3dbfaa450a44d8c0838427eac07 Binary files /dev/null and b/slides/img/physical/breadboard5.pdf differ diff --git a/slides/img/physical/breadboard6.pdf b/slides/img/physical/breadboard6.pdf new file mode 100644 index 0000000000000000000000000000000000000000..62bf67e1dde1922ce01d685084d48b00bfeaa8df Binary files /dev/null and b/slides/img/physical/breadboard6.pdf differ diff --git a/slides/img/physical/breadboard7.pdf b/slides/img/physical/breadboard7.pdf new file mode 100644 index 0000000000000000000000000000000000000000..d70280372942f28276d9c1a6258868ca71dae84c Binary files /dev/null and b/slides/img/physical/breadboard7.pdf differ diff --git a/slides/img/physical/breadboard8.pdf b/slides/img/physical/breadboard8.pdf new file mode 100644 index 0000000000000000000000000000000000000000..cece14a22417967084787ac481f0a10b3736070f Binary files /dev/null and b/slides/img/physical/breadboard8.pdf differ diff --git a/slides/img/physical/breadboard9.pdf b/slides/img/physical/breadboard9.pdf new file mode 100644 index 0000000000000000000000000000000000000000..c4212c3c310716f6865242b6df0aa009714a907b Binary files /dev/null and b/slides/img/physical/breadboard9.pdf differ diff --git a/slides/img/physical/kit-contents.jpg b/slides/img/physical/kit-contents.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1e82293b5281914202b3468682d8f6f990f3f6e0 Binary files /dev/null and b/slides/img/physical/kit-contents.jpg differ diff --git a/slides/img/physical/resistor.pdf b/slides/img/physical/resistor.pdf new file mode 100644 index 0000000000000000000000000000000000000000..114d1e101578320ec9087c4a06bffff068e57ca2 Binary files /dev/null and b/slides/img/physical/resistor.pdf differ diff --git a/slides/img/sustainability/accessmap.png b/slides/img/sustainability/accessmap.png new file mode 100644 index 0000000000000000000000000000000000000000..8d4f6a4fc15fb16498324a27fe026c28ea8b06d5 Binary files /dev/null and b/slides/img/sustainability/accessmap.png differ diff --git a/slides/img/sustainability/algorithm-healthcare.png b/slides/img/sustainability/algorithm-healthcare.png new file mode 100644 index 0000000000000000000000000000000000000000..deb793b16986caef3e2446c1cc3b68738640521a Binary files /dev/null and b/slides/img/sustainability/algorithm-healthcare.png differ diff --git a/slides/img/sustainability/compas.png b/slides/img/sustainability/compas.png new file mode 100644 index 0000000000000000000000000000000000000000..bf44e9caa530562f1430921b220c9144fcbf9dab Binary files /dev/null and b/slides/img/sustainability/compas.png differ diff --git a/slides/img/sustainability/disability-protest.jpg b/slides/img/sustainability/disability-protest.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b2118dd06bc2dbdcf9030c71cfda47902109d1ea Binary files /dev/null and b/slides/img/sustainability/disability-protest.jpg differ diff --git a/slides/img/sustainability/edigs1.png b/slides/img/sustainability/edigs1.png new file mode 100644 index 0000000000000000000000000000000000000000..f646e64a474efc8feaad6b8b4e392e591448d7d3 Binary files /dev/null and b/slides/img/sustainability/edigs1.png differ diff --git a/slides/img/sustainability/edigs2.png b/slides/img/sustainability/edigs2.png new file mode 100644 index 0000000000000000000000000000000000000000..b3a612e8134009d8c0db281fe0815f2ee32c2943 Binary files /dev/null and b/slides/img/sustainability/edigs2.png differ diff --git a/slides/img/sustainability/edigs3.png b/slides/img/sustainability/edigs3.png new file mode 100644 index 0000000000000000000000000000000000000000..a2f600b42bd1cbdc8dee92fd52541b1ec3ca6ce3 Binary files /dev/null and b/slides/img/sustainability/edigs3.png differ diff --git a/slides/img/sustainability/sidewalk.png b/slides/img/sustainability/sidewalk.png new file mode 100644 index 0000000000000000000000000000000000000000..3d310ad83f3dce1ed9e4ebdce75fe0729907b519 Binary files /dev/null and b/slides/img/sustainability/sidewalk.png differ diff --git a/slides/img/sustainability/teen-disability.png b/slides/img/sustainability/teen-disability.png new file mode 100644 index 0000000000000000000000000000000000000000..84205ad526238a65920cae150ce197b2d382a10f Binary files /dev/null and b/slides/img/sustainability/teen-disability.png differ diff --git a/slides/img/sustainability/ubigreen.png b/slides/img/sustainability/ubigreen.png new file mode 100644 index 0000000000000000000000000000000000000000..697ea97f554c39f0227641b2381208553f3ed4ff Binary files /dev/null and b/slides/img/sustainability/ubigreen.png differ diff --git a/slides/img/sustainability/ubigreen2.png b/slides/img/sustainability/ubigreen2.png new file mode 100644 index 0000000000000000000000000000000000000000..ee2dd4bea859a6c3afcabeb74c3d9ab3ad718d61 Binary files /dev/null and b/slides/img/sustainability/ubigreen2.png differ diff --git a/slides/img/sustainability/values.png b/slides/img/sustainability/values.png new file mode 100644 index 0000000000000000000000000000000000000000..23a72cd023bb5cde44d512ecfa0b96343d27abe2 Binary files /dev/null and b/slides/img/sustainability/values.png differ diff --git a/slides/img/sustainability/wordcloud-after.png b/slides/img/sustainability/wordcloud-after.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b8791b51c1976f144f86d6cbda5ca5a2e64ee4 Binary files /dev/null and b/slides/img/sustainability/wordcloud-after.png differ diff --git a/slides/img/sustainability/wordcloud-before.png b/slides/img/sustainability/wordcloud-before.png new file mode 100644 index 0000000000000000000000000000000000000000..703f52f7f4152df777b9fcc0198c3b461e8456f6 Binary files /dev/null and b/slides/img/sustainability/wordcloud-before.png differ diff --git a/slides/physical-computing.html b/slides/physical-computing.html new file mode 100644 index 0000000000000000000000000000000000000000..e34064523c9eec5ad50f7f44a2f43e4bad19fdd4 --- /dev/null +++ b/slides/physical-computing.html @@ -0,0 +1,338 @@ +--- +layout: presentation +title: FOOBAR --Week N-- +description: Accessibility +class: middle, center, inverse +--- +background-image: url(img/people.png) + +.left-column50[ +# Welcome to the Future of Access Technologies + +Week N, FOOBAR + +{{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) +# Learning Goals for today + + +--- +# Phone as embedded computer +.right-column60[ + +Tactile map for the blind + + + +] + +.left-column40[ +Phone as embedded computer +- Better solution because reprinting a map is faster than making a whole new portable map for each region +- Similar to new interaction techniques, uses conductive plastic +] + +--- +# Adding in physical computing +.right-column60[ + + +C. Lee, [Intellisplash](https://www.christopherslee.org/home/cadiot#h.pstiqwwsc6zp) water purity tester + + + +] +.left-column40[ +Combination of microcontroller, 3d printing, and phone + +Uses WiFi, Bluetooth and other communication protocols + +] +--- +# Other Sensing Adaptations +.right-column60[ + + +] +.left-column40[ +[Biotoxicity +sensing](https://www.sciencedirect.com/science/article/pii/S0925400515305992) + +Dark box + +Phone case + +Many similar options -- e.g. [Ph +Meter](https://ieeexplore.ieee.org/abstract/document/6916991); +[Sensing sweat +make-up](https://pubs.rsc.org/en/content/articlehtml/2014/an/c4an01612b); +[Nanosensing by +Nasa](https://www.nasa.gov/centers/ames/news/features/2009/cell_phone_sensors.html) +[more examples](https://www.sciencedirect.com/science/article/pii/S0167779914000572) +] + +??? + By clicking the “start†button (b) the application runs and several + tabs can be selected (c). The “Procedure†box (d) provide to the + user the instructions to perform the assay, then the Begin button + allow to proceed to the “Checklist†box (e) where preset timers + guide the user through the correct incubation times before BL image + acquisition. The instructions can be also eluded by selecting “Test + sample†in the home page, which jumps the user directly to the + checklist. At the end of the countdown the smartphone camera is + activated and the user can simply touch the “Acquire†button to + capture the BL image of both the test and control wells. (f) The + acquired images are rapidly analyzed on the smartphone and the + sample toxicity result is displayed as “Cell viability†value and a + warning message (Safe, Harmful, Highly toxic). BL image and results + can be also saved for downstream application (i.e. sending results + to a central laboratory). + +--- +# Printing to enhance a mobile phone + +.right-column60[ +![:youtube Printed objects whose use can be sensed, W1V2AgDbgTQ] +] +.left-column40[ +Printed Analytics: Sensing prosthetic device use +- Uses backscatter technology +- Works in range of a modified wireless router +] + +--- +# Summary + +What does physical computing offer us? + +.left-column-half[ +New ways to interact +- capacitive sensing facilitate by conductive plastic/thread +- microphone + machine learning + +New ways to sense information +- fluid properties +- audio +- backscatter +] +.right-column-half[ +New ways to combine devices (e.g. through bluetooth sensing of physical hardware) + +Benefits: +- modify a device beyond what the manufacturer expected +- rapid prototyping of novel solutions +] + + +--- +# In-class build exercise… + + +We will make something blink!! + +--- +# Preparation + +Distribute Arduinos and parts… + +If you haven’t downloaded and installed the Arduino IDE, drivers (for Macs only), do that now while we are getting parts distributed. See the AdaFruit website BlueFruit page +If you are on a mac, you will additionally need to install the USB to UART bridge drivers provided by Silabs +By Wednesday you will also need the Bluefruit LE Connect app, and here is the AdaFruit website describing how to install that + +Your circuitry kits are from amazon: https://smile.amazon.com/gp/product/B01EROKLBC + +--- +# Solderless Breadboard + +.left-column[ + + +] +.right-column[ +Allows you to quickly make electrical connections by pressing wires into holes +] +--- +# Solderless Breadboard + +.left-column[ + + +] +.right-column[ +Allows you to quickly make electrical connections by pressing wires into holes + +Central rows of holes are connected like this +``` +A1 is connected to +B1, C1, D1, and E1 +F1 is connected to +G1, H1, I1 and J1 +Etc. for rows 2…63 +``` +] + +--- +# Solderless Breadboard + +.left-column[ + + +] +.right-column[ +Allows you to quickly make electrical connections by pressing wires into holes + +Side columns (‘bus’) (typically for power) are connected like this + +] + +--- +# Step 1: Connect Power Bus Sides + +.left-column[ + + +] +.right-column[ +Connect Red to Red and Blue to Blue at the bottom (using red & black wires from kit) + +Double check that it’s Red to Red and Blue to Blue (!) +] + +--- +# Step 2: Arduino into breadboard + +.left-column[ + + +] +.right-column[ +Arduino is about in the center of the breadboard (just to the left) at low numbered end, with USB connecter towards the outside (top) + +Check: You should see “a b†and “j†at the top and pins in rows 1…16 +] + +--- +# Test + +Plug the USB cable between computer and Arduino + +Should see a bright blue or green (power) LED + on constantly, indicating we are powered +and red LED should flash once per second +a “blink†test program already loaded (will be replaced) + +Side note: Computer should recognize device +May need to install drivers if you haven’t already (Macs). Not necessary today. + +--- +# Step 2: Power from Arduino + +.left-column[ + + +] +.right-column[ +For this project, USB is powering Arduino, Arduino is powering the rest of the circuit + +Connect Arduino GND pin +] +--- +# Step 3a: Power from Arduino + +.left-column[ + + +] +.right-column[ +For this project, USB is powering Arduino, Arduino is powering the rest of the circuit + +Connect Arduino GND pin + +Can do this from a4 because breadboard ground pin is plugged into row 4 +] + +--- +# Step 3b: Power from Arduino + +.left-column[ + + +] +.right-column[ +Now connect Arduino 3V to power using a red wire (A2 to power bus) + +At this point, power and ground are connected in both buses. All further wiring will take place in the f-j columns if not specified. +] + +--- +# Note + + +This part of the wiring will be used for the rest of your projects in this class, so leave it in place after you are done with this build + +--- +# What is in your [Kit?](https://www.amazon.com/SunFounder-Electronics-breadboard-Resistor-Raspberry/dp/B07QT78FXF/ref=sr_1_9) + + + +TODO: finalize kit. Considering [seeed](https://www.seeedstudio.com/Seeed-XIAO-BLE-nRF52840-p-5201.html?gclid=CjwKCAjw8-OhBhB5EiwADyoY1a8K4v1cJxiLIgz-Sbs9VeUn85knaTEDPpocYsO-Xt7SOcKo51SkbBoC-I4QAvD_BwE) and which board? [nano 33ble](https://www.amazon.com/Arduino-Nano-33-BLE/dp/B07WV59YTZ?source=ps-sl-shoppingads-lpcontext&ref_=fplfs&psc=1&smid=AA57DDZKZUZDL) or [nano 33 iot](https://www.amazon.com/Arduino-Nano-33-IoT/dp/B07VW9TSKD?source=ps-sl-shoppingads-lpcontext&ref_=fplfs&psc=1&smid=AA57DDZKZUZDL) + +--- + +--- +# Step 4: Current Limiting Resistors + +.left-column[ + + +] +.right-column[ +Find 2 220Ω resistors + + + +Unplug Arduino while wiring! +Connect resistors +J9-J19 +H24 to ground + +[Wikipedia article on color codes](https://en.wikipedia.org/wiki/Electronic_color_code) +] + +--- + +TODO finish this deck from [here](https://drive.google.com/drive/folders/1NA1ajSwodJy6g9jDeMe1QLLflgE9_dnl) + + + + + + + + + + + + diff --git a/slides/presenting-accessibly.html b/slides/presenting-accessibly.html index e90ba1b3d19440a8047a0839b34d571cdf7ff523..3803c1958d8c090d4a49924cb715cbc9a8fb3300 100644 --- a/slides/presenting-accessibly.html +++ b/slides/presenting-accessibly.html @@ -36,40 +36,141 @@ class: # Presenting Accessibly - First, make your slides accessible -- Also share them at least 24 hrs ahead of the presentation (required to pass this competency) +- Also share them at least 24 hrs ahead of the presentation (required to pass this competency, built into the assignment this week) + --- -# Slideshow Rules of Thumb (1 of 6) +# 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> -.left-column50[ - Image descriptions - Use headers & styles - Color contrast - San serif fonts -- Simplify language -] + - This is a san serif font + - .times[This is a serif font] --- -.right-column50[ -- Unique slide titles - - makes navigation easier - - put (x of y) in the title if repeating -] +San serif is considered easier on the eyes for screen presentations --- -# Slideshow Rules of Thumb (2 of 6) +# Slideshow Basics (5/9) -.left-column50[ - Image descriptions - Use headers & styles - Color contrast - San serif fonts -- Simplify language -] - -.right-column50[ -- Unique slide titles -- Avoid clutter -] +- Simplify language + - Simplify your slide + - Embellish when you speak + - Avoid clutter --- # What is clutter? @@ -85,94 +186,63 @@ So please, don’t do this to your audience members. Be a responsible presenter. --- -# Slideshow Rules of Thumb (3 of 6) +# Slideshow Basics (6/9) -.left-column50[ - Image descriptions -- Use headers & styles +- Use structure - Color contrast - San serif fonts -- Simplify language -] - -.right-column50[ -- Unique slide titles -- Avoid clutter +- Simplify language - Don't use color to convey meaning -] --- -# Slideshow Rules of Thumb (4 of 6) +# Slideshow Basics (7/9) -.left-column50[ - Image descriptions -- Use headers & styles +- Use structure - Color contrast - San serif fonts -- Simplify language -] - -.right-column50[ -- Unique slide titles -- Avoid clutter +- Simplify language - Don't use color to convey meaning -- 9/10, you don’t need sound effects - -] +- 9/10, you don’t need sound effects or visual effects --- -# Slideshow Rules of Thumb (5 of 6) +# Slideshow Basics (8/9) -.left-column50[ - Image descriptions -- Use headers & styles +- Use structure - Color contrast - San serif fonts -- Simplify language -] - -.right-column50[ -- Unique slide titles -- Avoid clutter +- Simplify language - Don't use color to convey meaning -- 9/10, you don’t need sound effects -- You rarely ever NEED that movement-based slide transition -] +- 9/10, you don’t need sound effects or visual effects +- Make sure videos are accessible + - Videos should be captioned --- -# Slideshow Rules of Thumb (6 of 6) +# Slideshow Basics (9/9) -.left-column50[ - Image descriptions -- Use headers & styles +- Use structure - Color contrast - San serif fonts -- Simplify language -] - -.right-column50[ -- Unique slide titles -- Avoid clutter +- Simplify language - Don't use color to convey meaning -- 9/10, you don’t need sound effects -- You rarely ever NEED that movement-based slide transition -- Check slide order (like DOM order) -] - ---- -# If you have a video in your slides -- Make sure it is captioned -- Make sure it has audio descriptions if non-verbal content is important +- 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 -- Leave space for captions +- Non-verbal content should be described (in the video, or by you) --- -# How much to describe images +# When presenting + +How much to describe images Can a blind person follow your presentation and get the same informaiton as a sighted person? diff --git a/slides/sustainability.html b/slides/sustainability.html new file mode 100644 index 0000000000000000000000000000000000000000..ee6d8fb4a5bf915c523ee6915d4890654dedeb8c --- /dev/null +++ b/slides/sustainability.html @@ -0,0 +1,412 @@ +--- +layout: presentation +title: Sustainability & Disaster Response --Week 9-- +description: A discussion of accessibility concerns in sustainability and disaster response +class: middle, center, inverse +--- +background-image: url(img/people.png) + +.left-column50[ +# Welcome to the Future of Access Technologies + +Week 9, Sustainability & Disaster Response + +{{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) +# Learning Goals for today + +--- +.left-column[ +## Disability + +and climate change +] + +.right-column[ + +] + +--- + +Quote from “Disability, Climate Change, and Environmental Violence: The Politics of Invisibility and the Horizon of Hope†by Julia Watts Belser (Disability Studies Quarterly) + +.quote[Disability politics offer a vital resource for grappling with climate change… + +[they reveal] the political stakes of diagnosis—the way power contours how, when, and to what ends we recognize human and ecological impairment.] + + +--- +# A disability-informed technology agenda for addressing the climate crisis (1/10) + +- Government Services & Civic Engagement + +Essential to changing how we address climate change, +and implementation of the same + +--- +# A disability-informed technology agenda for addressing the climate crisis (2/10) + +- Government Services & Civic Engagement + - Process Accessibility + - Resource distribution + - Accessibility of voting + +--- +# Example: Disaster Response Planning + +- Decisions about who is included (e.g. disaster response plans) are often ableist -- actively de-prioritizing disabled lives + - E.g. during COVID; Hurricane Katrina +- Emergency broadcasts often inaccessible (e.g. no captions; inaccessible data visualizations; no ASL interpretation; inaccessible websites) +- Disabled people are often institutionalized (e.g. prison; hospital; “nursing homesâ€) and many institutions are deprioritized +- Shelters may refuse people with disabilities + +--- +# Example: Conservation + +Conservation often asks people to change behavior to reduce environmental impact + +Yet such changes often fail to account for accessibility concerns (e.g. straws; inhalers) What priorities do these campaigns reflect? + +--- + +# Governmentality, Ableism & Racism (1/2) + +.left-column50[ + + +] + + +--- + +# Governmentality, Ableism & Racism (2/2) + +.left-column50[ + + +] +.right-column50[ +The government is often a site for algorithmic decision making; surveillance; etc + +This differentially impacts people of color, low-income people and people with disabilities +] + +--- +# A disability-informed technology agenda for addressing the climate crisis (3/10) + +- Government Services & Civic Engagement + - Accessibility must be considered in the government response to climate change. Accessibility can impact safety, civic engagement, access to services, and who is included in the democratic process + - Top down decisions that don’t include people multiple viewpoints can be problematic +- Give choice/agency to people many backgrounds +- Give responsibility for support to governmental context + +--- +# A disability-informed technology agenda for addressing the climate crisis (4/10) + +- Government Services & Civic Engagement +- Education + - Source of future leaders and decision makers + - Source of future innovators + - Strongly associated with things that can help to mitigate climate change, such as empowered family planning for women + - Also generally not designed to include people with disabilities + +--- +# A disability-informed technology agenda for addressing the climate crisis (5/10) + +- Government Services & Civic Engagement +- Education + - STEM is particularly exclusive and a top interest for disabled people + - Tools & software rarely accessible + - Accessible teaching also helpful to non-english speakers; undiagnosed; etc. + - Lots of improvement possible -- disabled students felt MUCH more supported during COVID [TACCESS 2022] + +--- +# A disability-informed technology agenda for addressing the climate crisis (6/10) + +- Government Services & Civic Engagement +- Education +- Information economy + - Information is power + - Often critical in the fight to address environmental damage, climate change, etc + - Can help to support activist movements + - Can change the balance of power + +--- +# A disability-informed technology agenda for addressing the climate crisis (7/10) + +- Government Services & Civic Engagement +- Education +- Information economy + - Example: Rentals and housing efficiency + +--- +# Research Questions + +Study 1: How does energy consumption in low-income areas differ or compare to those in “green†or typical households? + +-- +Study 2: What are the causes of conflict between landlords and tenants? What are the solutions? + +-- +Study 3: How can energy feedback help to mediate this [CSCW 2014] + +-- +Study 4: How does this differ in other contexts (India) [CHI 2013] + +--- +# Overall conclusions + +- Money, power imbalances, and lack of information all contribute to and impact how energy is used. +- Individual action is limited in impact, particularly when renting. +- Information can help activate communities to work together to fight policies that hurt them +- Biggest opportunity for change is prior to lease signing + +--- +# Rentals and Temporary Housing + +More likely to include people with disabilities and health concerns + +More likely to include lower income households + +More likely to include people of color and immigrants/refugees + +Spend greater percentages of income on energy + +--- +<iframe src="https://embed.polleverywhere.com/free_text_polls/6BulXYeFmPsbUKKaVsFzf?controls=none&short_poll=true" width="800px" height="600px"></iframe> + +--- +# What did we find in our studies? + +.left-column50[ +## Before Renting + + +] + +-- +.right-column50[ +## After Renting + + +] + +--- +# Edigs: Estimating Utilities From RECS + +.column[ + +] + +.column[ + +] + +.column[ + +] +.corner-ribbon.tr[COMPASS 2018] + +--- +# Existing Home Feedback Technology + +Not really targeted at renters (30% in US; 1-5 year turnover) + +Paucity of information about factors prospective tenants care about +- Actual cost +- Sunlight & noise +- Housing quality + +--- +# Other data could address intersectional issues + +Housing choices linked to health outcomes & disability (lead, asthma, mold, air quality, etc.) + +Landlord citations -- is a landlord trustworthy + +Sunlight [crowdsourced comparable estimates] -- impacts health & energy use + +Noise -- impacts health/disability & comfort + +--- +# A disability-informed technology agenda for addressing the climate crisis (8/10) + +- Government Services & Civic Engagement +- Education +- Information economy + - Example: Rentals and housing efficiency + - Example: Transportation and public spaces + + +--- +# ubi .green[green] (1/3) + +.left-column[ + + + +] + +.right-column[ +Investigating a Mobile Tool for Tracking and Supporting Green Transportation Habits[Froehlich et al, CHI 2009] + +] + +--- +# ubi .green[green] (2/3) + +.left-column[ + + +] +.right-column[ +Two formative studies + +In-situ deployment +] + +--- +# ubi .green[green] (3/3) + + + +--- +# Real-time Recommendations + +- post-study survey, “what could help you take more green trips†+ - Reliable transportation (76.8%) + - Financial incentives (71.4%) + - Knowledge about alternatives (56%) +- future designs could suggest alternative forms of transit based on trip history +- recommendations could also come in form of neighborhood: + - “42% of the people who live in your neighborhood and work in Capitol Hill take the bus.†+ +--- +# Potential for behavior change + +.quote[The motivation for me is moer of the tracking and kind of seeing how I am doing and just the reminder factor of it (Participant 11)] + +.quote[It really encourages you to analyze your own performance (Participant 8)] + +.quote[I feel I already travel in a relatively eco-friendly way and the study did not change that (Participant 15)] + +--- +# But is this approach inclusive? + +Sidewalks, public transit, and businesses can be inaccessible to those with disabilities + +.left-column30[ + + + + + +] + +.right-column70[ + +.font-mediumsmall[[Project Sidewalk](http://projectsidewalk.org) combines remote crowdsourcing + machine learning to map and assess accessibility features of sidewalks] + +.font-mediumsmall[[AccessMap](http://accessmap.io) provides a personalized and interactive view of a city's accessibility, including road grade, sidewalk locations, and curb ramps] +] + +--- +# Urban Accessibility and Mobility + +Sidewalks, public transit, and businesses can be inaccessible to those with disabilities. Three-fold aim [All work by Froehlich & Caspi]: +1. Develop scalable techniques to map and assess every sidewalk, transit stop, and business in the world +3. Create new digital tools that provide personalized routing, government accountability, and support new urban analytics. +3. Examine geo-spatial patterns of and influences on urban accessibility, barriers and facilitators of accessible infrastructure, and socio-cultural contexts of urban access across the globe. + +--- +# Third Spaces also not accessible + + + +.corner-ribbon.tr[COMPASS 2021] + +--- +# A disability-informed technology agenda for addressing the climate crisis (9/10) + +- Government Services & Civic Engagement +- Education +- Information economy +- Innovation + - Innovation is part of how we address the climate crisis + - Accessibility has driven innovation over the years + - Who innovates matters and impactswhat is made (back to education…) + +--- +# Case study: Medical Making + +- Conflict between Community and Clinical Values in the U.S. + - Have seen in multiple case studies + - Wish to help where you can, right away vs “do no harm†+ - Emphasis on doing what you can vs longitudinal support/whole case management + - Deeply rooted differences + - One team member was threatened with COVID-infected artifacts when asking about safety +- Complete rift in one COVID site of study between medical making and community making + +.corner-ribbon.tr[Savage, TACCESS 22] + +--- +# Study Population: + +Makers; recipients; clinicians in seven countries + +- United States (E-Nable; and two private companies) +- Mexico (E-Nable with and without government) +- India (E-Nable) +- Chile (E-Nable) +- Costa Rica (E-Nable) +- Brazil (E-Nable with government) +- France (E-Nable + +--- +# Key differences between U.S. and other countries +- Multi-stakeholder collaborations (innovators and clinicians) + - Formal collaborations with documented guidelines + - Express support for follow up + - Often include funding +- Community engagement + - Families/community working and learning together +- Follow up included in process +- Legal context more forgiving? +--- +# A disability-informed technology agenda for addressing the climate crisis (10/10) + +- Government Services & Civic Engagement +- Education +- Information economy +- Innovation + + + + + + + + + + + + + + + + + diff --git a/slides/testing.html b/slides/testing.html new file mode 100644 index 0000000000000000000000000000000000000000..d0bc58a14673e75a04d7979953de7be5bb90e3ef --- /dev/null +++ b/slides/testing.html @@ -0,0 +1,230 @@ +--- +layout: presentation +title: Testing for Accessibility --Week 3-- +description: Accessibility +class: middle, center, inverse +--- +background-image: url(img/people.png) + +.left-column50[ +# Week 3: Testing for Accessibility + +{{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) +# Learning Goals for Today + +- **Get comfortable using existing freely available accessibility technology to manually support assessment** +- How do we use automated tools? + +--- +# Example Disabilities To Consider + +.left-column50[ +Web browsing involves +- Color +- Text of different shapes and sizes +- Content (images, words, sounds, animat.) +- Typing (e.g. input to forms) +- Mousing (e.g. clicking on links for navigation) +- Comprehension (e.g. reading level) +] +.right-column50[ +Therefore… +- Visual impairments +- Difficulty understanding content +- Difficulty hearing +- Difficulty manipulating mouse our keyboard + +all affect accessibility + +] + +--- +# What is the goal? +End users interact with the *same* website or app as anyone else + +End users may use browser features or a specialist accessibility tool to customize their experience + +**This is Key** Website or app designer provides the right structure and information to support this + +--- +background-image: url(img/assessment/gmail.png) + +<audio controls="controls"><source src="img/assessment/gmail-normal.wav" type="audio/x-wav" /></audio> + +??? +But, lets back up a little to see why the web can be difficult for blind people to use. + +To interact with their computers, blind people use software programs called screen readers. Here’s a screen reader reading the GMail inbox. + +--- +background-image: url(img/assessment/gmail-blackedout.png) + + +??? +Although it may have felt longer, that was only 20 seconds. + +In 20 seconds, most of us would have found the message we wanted, and many of us not only would have found that message, but also read it and, possibly replied + +At this point, a blind user new to this site still has no idea that an inbox even exists. + +--- +# But it gets much better +Accessibly design pages, combined with user expertise, work very well + + + +--- +# But it gets much better +Accessibly design pages, combined with user expertise, work very well + + + +--- +# But it gets much better +Accessibly design pages, combined with user expertise, work very well + + + +--- +# But it gets much better +Accessibly design pages, combined with user expertise, work very well + + + +--- +# But it gets much better +Accessibly design pages, combined with user expertise, work very well + + + + +--- +# Most Websites and Apps not Accessible + +- Over 60% of Android apps missing at least one label on a clickable element (out of 5721 apps tested) ([Ross et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3348797)) +- Over 80% of fortune 500 websites not accessible ([Loiacono et al, 2009](https://dl.acm.org/doi/pdf/10.1145/1562164.1562197)) +- University websites are also partly to mostly inaccessible ([Campoverde-Molina et al, 2021](https://link.springer.com/content/pdf/10.1007/s10209-021-00825-z.pdf)) +- Less than 1% of Twitter images had ALT text in 2019 ([Gleason et al, 2019](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605)) + +More study is needed, but overall, progress here is slow. Perhaps this is not surprising since only about 50% of universities in the US teach accessibility at all ([Shinohara et al, 2018](https://dl.acm.org/doi/pdf/10.1145/3159450.3159484)). + +--- +# Best Practices for Testing Accessibility? + +.left-column50[ +Automated Tools +- [Review of many options](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386) +- Web: WebAIM's [WAVE](https://wave.webaim.org/); +- Browser Extensions ([Comparison Article](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386)): [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US); [Axe](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US); [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/); [Siteimprove](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/related); & other browser extensions + - Phone apps: [Google Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en&ref_topic=6376582) and [iOS.](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) +] +.right-column50[ +Design Guidelines (i.e. know them and apply them heuristically) + +Simulation (Try it yourself using accessibility technologies or simulators such as [aDesigner](https://www.eclipse.org/actf/downloads/tools/aDesigner/)) + +User Testing +] + +--- +# Simulation + +In this assignment we will use off-the-shelf, freely available accessibility technology for simulation +- Screen Readers +- Switch Control +- Magnification +- Anything else you want to try + + +--- +# Screen Readers: Typical Bugs + +.left-column40[ + +] + +.right-column60[ +<BR> +![:youtube Banking failure, b-R5r_aKmKo] +] + +??? +- Reads the words on the screen +- Keystroke to move to next area +- Screen reader users, turn this on on your phone + +--- +# Introduction to Screen Readers + +![:youtube Screen Reader Demo, dEbl5jvLKGQ] + +??? +Demo also shows an example of a screen reader finding a problem such as lack of alt text or a badly labeled table + +--- +# Switch Control + +![:youtube Explanation of how to set up switch control, GQKEE9nI1lk] + +??? +- Switch users, turn this on, on your phone + +--- +# Simulation Warning + +.left-column[ +Simulation tends to cause people to underestimate what is possible +] + +.right-column[ +![:youtube One thumb to rule them all: video of gaming with switch control,2BhHwk9qSvI] +] + +??? +Remind them about drone video + +Don't fall into the trap of assuming that your ineptitude is the standard disability experience] +--- + +# Magnification + +![:youtube How to magnify your phone's screen, yHqJOSZN1zA] + +??? +- Magnification users, turn this on, on your phone + +--- +# Break up into groups + +Decide who will +- use a screen reader +- use switch control +- use magnification + +Open your phone's web browser and load [seattleschools.org](https://www.seattleschools.org/) + +--- +# In your groups + +Visit [Seattle Public Schools](https://www.seattleschools.org/) + +The task you are evaluating is whether a disabled family can "Report a Concern" about how accessible the website is + +What are some problems you found? Try to separate out what is difficult for you as a beginner from what is a flaw in the website itself. + +[Share your findings](TBD)