diff --git a/assets/css/my-remark.scss b/assets/css/my-remark.scss
index d6651ffc46f165df8d269a611915bfeccc6f2cc9..c1c87b87ca08fd55a0be5425de19490c73c4c15f 100644
--- a/assets/css/my-remark.scss
+++ b/assets/css/my-remark.scss
@@ -607,6 +607,7 @@ html.remark-container, body.remark-container {
width: 20%;
float: left;
height: 92%;
+ padding-top: .5em;
h2:last-of-type, h3:last-child {
color: $darkest;
font-size: $h2-font;
@@ -617,7 +618,6 @@ html.remark-container, body.remark-container {
.right-column {
width: 75%;
float: left;
- padding-top: 1em;
padding-left: 1em;
font-size: $body-font;
}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 6e3ee47fcb565e39eb77bb0ff66f07044b828876..db55c486301b593afb091c6da5a08c0f0f4fe80e 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -200,6 +200,9 @@ dl dt.prepare {
padding:5px;
}
+h2 {
+ font-size: larger;
+}
h2.holiday {
style:bold;
diff --git a/assignments/index.md b/assignments/index.md
index d5553ed5b95773fa8d139a1a999c70641bcf4e1b..c458b90712c5e8e725015da2564e2d93a6c28d52 100644
--- a/assignments/index.md
+++ b/assignments/index.md
@@ -17,17 +17,17 @@ questions or run into issue, please contact the course staff.
# Assignments
-| Link to Assignment | Turn in Link | Due Date |
-|------------------------------------------------------------------------------|---------------------------------------------------|----------|
-| HW1: [Finding AT around us](finding-accessibility.html) | [Canvas HW1]({{site.canvas}}/assignments/8443510) | 10/3 |
-| HW2: [Disability Justice](disabilityjustice.html) | [Canvas HW2]({{site.canvas}}/assignments/8443521) | 10/9 |
-| HW3: [Web/App Access UARS](website.html) | [Canvas HW3]({{site.canvas}}/assignments/8443528) | 10/16 |
-| HW4: [Web/App Access Report](website-report.html) | [Canvas HW4]({{site.canvas}}/assignments/8712208) | 10/23 |
-| HW5: [Post GUI Accessibility](technology-review.html) | [Canvas HW5]({{site.canvas}}/assignments/8712482) | 10/30 |
-| HW6: [Post GUI Accessibility Implementation](technology-implementation.html) | [Canvas HW6]({{site.canvas}}/assignments/8712492) | 11/6 |
-| HW7: [Final Project Proposal](project-proposals.html) | TBD | TBD |
-| HW8: [Final Project Checkpoint](project-checkpoint.html) | TBD | TBD |
-| HW9: [Final Project Presentation](project-final.html) | TBD | TBD |
+| Link to Assignment | Turn in Link | Due Date |
+|------------------------------------------------------------------------------|-------------------------------------------------------|-----------|
+| HW1: [Finding AT around us](finding-accessibility.html) | [Canvas HW1]({{site.canvas}}/assignments/8443510) | 10/3 |
+| HW2: [Disability Justice](disabilityjustice.html) | [Canvas HW2]({{site.canvas}}/assignments/8443521) | 10/9 |
+| HW3: [Web/App Access UARS](website.html) | [Canvas HW3]({{site.canvas}}/assignments/8443528) | 10/16 |
+| HW4: [Web/App Access Report](website-report.html) | [Canvas HW4]({{site.canvas}}/assignments/8712208) | 10/30 |
+| ~~HW5: [Post GUI Accessibility](technology-review.html)~~ | ~~[Canvas HW5]({{site.canvas}}/assignments/8712482)~~ | ~~10/30~~ |
+| HW6: [Post GUI Accessibility Implementation](technology-implementation.html) | [Canvas HW6]({{site.canvas}}/assignments/8712492) | 11/6 |
+| HW7: [Final Project Proposal](project-proposals.html) | TBD | 11/13 |
+| HW8: [Final Project Checkpoint](project-checkpoint.html) | TBD | 11/20 |
+| HW9: [Final Project Presentation](project-final.html) | TBD | 12/12 |
# Regrades
Regrades are done per competency, not per assignment. All regrade requests must be submitted at least a week ahead of the last class of the quarter. Please check with your TA about what exactly is required for a regrade for any given competency.
diff --git a/assignments/technology-implementation.md b/assignments/technology-implementation.md
index 3bbc0cc6ead1a820e6522d68676174c4f228ca94..e2cac5c5e2a7ce1708e730e94959e6205d197380 100644
--- a/assignments/technology-implementation.md
+++ b/assignments/technology-implementation.md
@@ -2,8 +2,8 @@
layout: assignment
published: draft
-title: Post GUI Implementation
-description: Learn about post-GUI accessibility
+title: Accessibility Implementation
+description: Learn about accessibility implementation
code: hw6
assigned: November 1, 2023
@@ -11,7 +11,7 @@ due:
- November 6, 2023
- Two day grace period, November 8, 2023
-revised: September 28, 2023
+revised: October 17, 2023
---
@@ -19,15 +19,14 @@ revised: September 28, 2023
{: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
+The goal of this homework is to build something that is accessible. 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.
+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 *very* 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
@@ -58,7 +57,6 @@ You should build something that makes use of the technology you studied for your
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
diff --git a/assignments/website-report.md b/assignments/website-report.md
index 462e28c0cd52616d0596ee08da72c38dba8853eb..3837ca6c09ebc57b1d25277501bbd00576323882 100644
--- a/assignments/website-report.md
+++ b/assignments/website-report.md
@@ -55,7 +55,7 @@ Write an executive summary highlighting the biggest (most frequent, severe) prob
You should also fill in the following overview table and put it in this section:
-| WCAG | Severe problems | Moderate problems | Minor problems |
+| WCAG # | # Severe problems | # Moderate problems | Minor problems |
|:-------|:------------------|:--------------------|:---------------|
| ... | ... | ... | ... |
|:-------|:------------------|:--------------------|:---------------|
@@ -64,13 +64,12 @@ You should also fill in the following overview table and put it in this section:
The remainder of your report should provide an overview, and detail, on the problems found, grouped by WCAG #. This is a good section of the report to divide and conquer if working in a group.
-For each WCAG #:
-
- - summarize the issue of concern
- - summarize the UAR(s) found if any
- - give an example of a typical case
- - provide details if there are any special cases
- - list (briefly) all the other places it happens
+For each WCAG #:
+- summarize the issue of concern
+- summarize the UAR(s) found if any
+- give an example of a typical case
+- provide details if there are any special cases
+- list (briefly) all the other places it happens
In addition, for each problem, or set of problems, you should discuss the remedy that is needed to address it. Be as concrete as you are able to be given the information available to you.
diff --git a/schedule.md b/schedule.md
index fde75f56970611fbe38e114cfd647b77495ea6a7..3883ec58fd4abbfa45448981c508c9ec310bee38 100644
--- a/schedule.md
+++ b/schedule.md
@@ -13,15 +13,20 @@ description: Class schedule and links to lectures, readings and assignments
{: .week}
# Week 1 (9/27 - 9/29): Introduction to Disability & Accessibility
-{% details Learning Goals %}
+{% details Learning Goals and Class Plan %}
+## Learning Goals
- What is Disability?
- What is Accessibility?
- What are Accessibility Technologies?
-{% enddetails %}
-{% details Wednesday: Overview of course & Introduction to Disability %}
+## Lecture Plan
+**Wednesday Slides** {% include slide.html title="Introduction to Course" loc="introduction.html" %}
+
+**Thursday Section** Discussion and demos of access technologies
-: **Slides** {% include slide.html title="Introduction to Course" loc="introduction.html" %}
+**Friday Slides** {% include slide.html title="Accessibility" loc="accessibility.html" %}
+
+## Homework
{: .homework} Required Reading and Reflection
:
@@ -31,16 +36,6 @@ description: Class schedule and links to lectures, readings and assignments
- **If you want to dig deeper**
- Defining Article [Disability Dongles](https://blog.castac.org/2022/04/disability-dongle/) by Liz Jackson
-{% enddetails %}
-
-{% details Thursday: Section %}
-Discussion and demos of access technologies
-{% enddetails %}
-
-{% details Friday: Accessibility Technology %}
-
-**Slides** {% include slide.html title="Accessibility" loc="accessibility.html" %}
-
{: .homework} [AT Around Us](assignments/finding-accessibility.html) Assigned: Find Accessibility Technologies
:
@@ -49,7 +44,10 @@ Discussion and demos of access technologies
{: .week}
# Week 2 (10/2 - 10/6): Accessible Documents & Disability Justice
-{% details Learning Goals %}
+{% details Learning Goals and Class Plan %}
+
+## Learning Goals
+
We will start understanding how to make documents accessible
- How to present accessibly
- Get comfortable with basic image description (images, people)
@@ -57,13 +55,22 @@ We will start understanding how to make documents accessible
And study disability justice
- Understand models for disability-centered design
- What is Disability Justice
-{% enddetails %}
+## Lecture Plan
+**Monday Slides** {% include slide.html title="Accessible Presentations and Presenting Accessibly" loc="presenting-accessibly.html" %}
+
+**Monday/Wednesday Slides** {% include slide.html title="Introduction to Disability Justice" loc="disability-justice.html" %}
+
+**Wednesday Slides** {% include slide.html title="Introduction to Plain Language" loc="plain-language.html" %}
-{% details Monday: Accessible Presentations and Plain Language%}
+**Thursday: Section**: Practice with Plain Language
-- **Slides** {% include slide.html title="Accessible Presentations and Presenting Accessibly" loc="presenting-accessibly.html" %}
-- **Slides** {% include slide.html title="Introduction to Disability Justice" loc="disability-justice.html" %}
+**Friday: AT Around Us Presentations**
+ - Zoom only day (rather than having three different physical rooms)
+ - We will break up into three groups, each with a different zoom link so that we can record your presentations
+ - Look for an Ed announcement on this
+
+## Homework
{: .homework} Required Reading and Reflection (for Wednesday)
:
@@ -75,34 +82,18 @@ And study disability justice
- [Design, Disability and Knowing the 'Other'](https://dl.acm.org/doi/fullHtml/10.1145/3290605.3300528#:~:text=WHAT%20IS%20EMPATHY%3F-,The%20Promise%20of%20Empathy%3A%20Design%2C%20Disability,%2C%20and%20Knowing%20the%20'Other'&text=This%20paper%20examines%20the%20promise,order%20to%20inform%20technology%20development.)
- [Plain language](https://pudding.cool/2022/02/plain/)
-{% enddetails %}
-
-{% details Wednesday: Plain Language and Disability Justice %}
-
-- Finish **Slides** {% include slide.html title="Introduction to Disability Justice" loc="disability-justice.html#17" %}
-- **Slides** {% include slide.html title="Introduction to Plain Language" loc="plain-language.html" %}
-
{: .homework} [Disability Justice Homework](assignments/disabilityjustice.html) Assigned: Pick an access topic and analyze it from a disability justice perspective.
:
-{% enddetails %}
-
-{% details Thursday: Section %}
-Practice with Plain Language
-{% enddetails %}
-
-
-{% details Friday: AT Around Us Presentations %}
-- Zoom only day (rather than having three different physical rooms)
-- We will break up into three groups, each with a different zoom link so that we can record your presentations
-- Look for an Ed announcement on this
{% enddetails %}
{: .week}
# Week 3 (10/9-10/13): Guidelines and Assessment
-{% details Learning Goals %}
+{% details Learning Goals and Class Plan%}
+## Learning Goals
+
- What are the current accessibility standards
- How do we use automated tools to assess accessibility
- How can we use accessibility technology to assess accessibility
@@ -111,12 +102,20 @@ Practice with Plain Language
- Differences between Image description, Diagram description and UI description
- Video description & Captioning
- Math, Tables & other elements (including custom interactors)
-{% enddetails %}
-{% details Monday: Accessibility Testing %}
+## Lecture Plan
+**Monday Slides** {% include slide.html title="Accessibility Testing" loc="testing.html" %}
+
+**Wednesday**
+- {: .prepare} Come Prepared
+: Come to class with an image, diagram, or other graphic you want to describe
+- **Slides** {% include slide.html title="Accessibility Standards & Media Accessibility" loc="assessment.html" %}
+
+**Thursday Section**: Practice with Accessibility Assessment
-- **Slides** {% include slide.html title="Accessibility Testing" loc="testing.html" %}
+**Friday Slides** {% include slide.html title="More Accessibility Standards" loc="assessment2.html" %}
+## Homework
{: .homework} Required Reading and Reflection (for Wednesday)
:
@@ -132,47 +131,32 @@ Practice with Plain Language
- Watch: [Rescribe: Authoring and Automatically Editing Audio Descriptions](https://www.youtube.com/watch?v=jmyPmT5T0PY)
- Read about [Making numbers accessible](https://www.tpgi.com/making-numbers-in-web-content-accessible/)n
-{% enddetails %}
-
-{% details Wednesday: Accessibility Standards %}
-
-{: .prepare} Come Prepared
-: Come to class with an image, diagram, or other graphic you want to describe
-
-**Slides** {% include slide.html title="Accessibility Standards & Media Accessibility" loc="assessment.html" %}
{: .homework} [Website Testing Homework](assignments/website.html) Assigned: Assess a website or app and generate UARS for it
:
-{% enddetails %}
-
-{% details Thursday: Section %}
-Practice with Accessibility Assessment
-{% enddetails %}
-
-{% details Friday: More Website Standards %}
-
-**Slides** {% include slide.html title="More Accessibility Standards" loc="assessment2.html" %}
-
{% enddetails %}
{: .week}
# Week 4 (10/16-10/20): Building & Remediating Accessible Interfaces
-{% details Class Learning Goals & Plan %}
+{% details Learning Goals & Plan %}
+## Learning Goals
- How accessibility works under the hood
- More on navigation and its impact
- What are the trade offs between different tools?
+## Lecture Plan
**Monday Slides** {% include slide.html title="How to build for accessibility" loc="best-practices.html" %}
-**Wednesday Slides** {% include slide.html title="Comparing Automated Testing and Manual Testing" loc="comparing-approaches.html" %}
+**Wednesday Slides** {% include slide.html title="Implementing Accessibility" loc="access-trees.html" %}
+Maybe a hands on exercise. Also discuss Aria
**Thursday Section** Group work on Report
-**Friday Slides** {% include slide.html title="What is an Accessibility Tree" loc="tbd.html" %}
-Maybe a hands on exercise. Also discuss Aria
+**Wednesday Slides** {% include slide.html title="Comparing Automated Testing and Manual Testing" loc="comparing-approaches.html" %}
+## Homework
{: .homework} Required Reading and Reflection (for Wednesday)
:
@@ -193,9 +177,10 @@ Maybe a hands on exercise. Also discuss Aria
{% enddetails %}
{: .week}
-# Week 5 (10/23 - 10/27): Accessible Need-finding and Evaluation
+# Week 5 (10/23 - 10/27): Accessible Need-Finding and Evaluation
-{% details Class Learning Goals & Plan %}
+{% details Learning Goals & Plan %}
+## 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
@@ -206,19 +191,20 @@ Maybe a hands on exercise. Also discuss Aria
- Collaboration Versus Paternalism
- Overly narrow views of disability: Multiple disabled people & multiply disabled people
+## Lecture Plan
**Monday Slides** {% include slide.html title="Guest Lecture: Avery Mack: Assessing Accessibility" loc="evaluation.html" %}
-**Wednesday 10/25** Conversation with Jaipreet Virdi %}
+**Wednesday** Conversation with Jaipreet Virdi
- Dr. Jaipreet Virdi will be lecturing on 10/24 at 6:30pm on "The Disabled Gaze: Rethinking the Past, Remaking the Future".
Please contact the instructors if you would like to attend -- we have 25 tickets to give out
- In addition, she will join us in class for a conversation about disability and technology and the disabled gaze. This is a chance for you to bring questions about her and her work.
**Friday Slides** {% include slide.html title="Designing for and with people with disabilities" loc="designing.html" %}
+## Homework
{: .homework} Required Reading and Reflection (for Wednesday)
: - Attend [**Jaipreet Virdi's talk**](https://www.washington.edu/lectures/events/the-disabled-gaze-rethinking-the-past-remaking-the-future/) at 6:30pm on Tuesday if you're able (ask us for tickets) *or* read [Q&A with Jaipret Virdi](https://disabilityvisibilityproject.com/2020/08/10/qa-with-jaipreet-virdi/) by Alice Wong on the [Disability Project website](https://disabilityvisibilityproject.com).
-
{% details Jaipreet Virdi Bio and Talk Abstract%}
Jaipreet Virdi, Associate Professor, Department of History at the University of Delaware, is a scholar activist. Her first book, Hearing Happiness: Deafness Cures in History raises pivotal questions about deafness in American society and the endless quest for a cure. Her writing has appeared in Slate, The Washington Post, The Atlantic, Psyche, The Wellcome Collection, and the New Internationalist. She is on Twitter as @jaivirdi
@@ -238,10 +224,7 @@ The lecture will be accompanied by an ASL interpreter and will include CART capt
- Read [Accessibility came by accident](https://dl.acm.org/doi/pdf/10.1145/3173574.3174033?casa_token=T1I2RwihIjsAAAAA:QEm3SjurdlcW7oX_1LadxaglZ7oneBX-XLIjMCHbof3gu_IFpDW2OO5tqxZfLIps-94Qik9y5wNw8Q)
- 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)
-{: .homework} Homework
-: [Technology Review](assignments/technology-review.html) Assigned: Write a group report about your assessment
-
-{: .homework} **Post-module Reflection:** [Accessibility Basics Reflection](https://forms.gle/Wk8C51m5Sbq8RX7W8)
+{: .homework} **Continued** [Website Report](assignments/website-report.html)
:
{% enddetails %}
@@ -249,14 +232,49 @@ The lecture will be accompanied by an ASL interpreter and will include CART capt
{: .module}
# Module 2: Post GUI Accessibility
-# Everything after here is draft...
+{: .week}
+# Week 6 (10/30 - 11/3): Fabrication
+{% details Learning Goals & Plan %}
+## Learning Goals
+- Work with laser cutting to make accessible technology
+- Learn about fabrication tools and techniques
+
+## Lecture Plan
+**Monday Slides** {% include slide.html title="Introduction to 3D Printing and Physical Computing" loc="3dprinting.html" %}
+
+**Wednesday**: Making a Laser Cut Book Opener
+Work in class on this
+
+**Thursday Section**:
+Finish making laser cuttable designs and print
+
+**Friday** Implementation Office Hours
+Check in to make sure you have a plan and it is do-able
+
+## Homework
+{: .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} **Assigned:** [Technology Review](assignments/technology-review.html)
+:
+{% enddetails %}
+
+
{: .draft}
+# Everything after this is draft
-{% details Draft Part of Schedule %}
+{% details draft content %}
{: .week}
-# Week 6 (10/30 - 11/3): Accessible Visualizations & AR/VR
-{% details Learning Goals %}
+# Week 7 (11/6 - 11/10): Accessible Visualizations & AR/VR
+{% details Learning Goals and Class Plan %}
Bias in Machine Learning
- What is Machine Learning (ML)?
@@ -271,12 +289,9 @@ Accessible Data Visualizations
- What are some of the nuances in making data visualizations accessible?
Learn about how to make AR/VR interfaces and games accessible
-{% enddetails %}
-{% details Monday 10/30: Data Equity %}
-
-**Slides** {% include slide.html title="Data Equity" loc="bias-in-machine-learning.html" %}
+**Monday Slides** {% include slide.html title="Data Equity" loc="bias-in-machine-learning.html" %}
{: .homework} Required Reading and Reflection (for Wednesday)
:
@@ -309,60 +324,20 @@ Learn about how to make AR/VR interfaces and games accessible
Practice with making data accessible
{% enddetails %}
+## Friday 11/10: HOLIDAY
+{: .holiday}
-{% details Friday 11/3: Technology-Implementation Meetings %}
-
-Check in to make sure you have a plan and it is do-able
-{% enddetails %}
{: .week}
# Module 3: Everything Everywhere All at Once
{: .week}
-# Week 7 (11/6 - 11/10): Fabrication
-{% details Learning Goals %}
-- Work with laser cutting to make accessible technology
-- Learn about fabrication tools and techniques
-{% enddetails %}
-
-
-{% details Monday 11/6: What's the best way to Assess a Website?%}
-
-**Slides** {% include slide.html title="Introduction to 3D Printing and Physical Computing" loc="3dprinting.html" %}
-
-{: .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)
-
-{% enddetails %}
-
-{% details Wednesday 11/8: Making a Laser Cut Book Opener %}
-Work in class on this
-
{: .homework} [Final Project Proposal](assignments/project-proposals.html) Assigned: Prepare your final project proposal (individual)
:
-{% enddetails %}
-
-{% details Thursday: Section %}
-Finish making laser cuttable designs and print
-
-{% enddetails %}
-
-## Friday 11/10: HOLIDAY
-{: .holiday}
-
-
-{: .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.
@@ -469,4 +444,5 @@ TBD
+
{% enddetails %}
diff --git a/slides/access-trees.html b/slides/access-trees.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e4270ac6c5d2c165b2f6feff7a276d1ad19aceb
--- /dev/null
+++ b/slides/access-trees.html
@@ -0,0 +1,392 @@
+---
+layout: presentation
+title: Implementing Accessibility
+description: More on how Accessibility is Implemented
+class: middle, center, inverse
+---
+background-image: url(img/people.png)
+
+.left-column50[
+# Welcome to the Future of Access Technologies
+
+Aria & Accessibility Trees: More on how Accessibility is Implemented
+
+{{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
+
+- Description of this week's assignment
+- More on how accessibility is implemented
+
+---
+# First, Introducing your Website Report
+
+We modified the assignment a bit
+- It's now two weeks long
+- It's optionally a group assignment (with others who reviewed the same website)
+
+---
+# Introduction
+- What is the site or app for
+- How did you assess it
+- Overview table
+
+| Task | Type (Web/Mobile/etc) | Testing Method | UARS found | Who Contributed |
+|------|-----------------------|----------------|--------------|-----------------|
+| ... | ... | ... | ... | |
+|------|-----------------------|----------------|--------------|-----------------|
+
+---
+# Executive Summary
+
+Summarize biggest problems (1-2 paragraphs)
+
+| WCAG | Severe problems | Moderate problems | Minor problems |
+|------|-----------------|-------------------|----------------|
+| ... | ... | ... | ... |
+|------|-----------------|-------------------|----------------|
+
+
+---
+# Details
+More detail on what needs to be done sorted by WCAG #
+
+Include both problems and remedies
+
+Easy to split this up among a group
+
+---
+# Make the report accessible
+- Use headers
+- Use proper color contrast
+- Write alt text for photos
+- Use meaningful hyperlinsk
+- Turn in a word or google doc on Canvas
+
+---
+[//]: # (Outline Slide)
+# Learning Goals for today
+
+- Description of this week's assignment
+- More on how accessibility is implemented
+
+---
+# What is a web page really?
+
+| Content | Structure | Style | Behavior |
+| :--: | :--: | :--: | :--: |
+||
+| Words and Images | HTML | CSS | JavaScript |
+
+---
+# What is a web page really?
+
+| Content | Structure | Style | Behavior |
+| :--: | :--: | :--: | :--: |
+|||
+| Words and Images | HTML | CSS | JavaScript |
+
+---
+# What is a web page really?
+
+| Content | Structure | Style | Behavior |
+| :--: | :--: | :--: | :--: |
+||||
+| Words and Images | HTML | CSS | JavaScript |
+
+
+---
+# What is a web page really?
+
+| Content | Structure | Style | Behavior |
+| :--: | :--: | :--: | :--: |
+|||||
+| Words and Images | HTML | CSS | JavaScript |
+
+---
+# Lifecycle of a browser* loading a page
+
+.left-column40[
+1. Fetch the page
+2. Parse the page
+3. Build up an internal representation of the web page
+4. Display the page
+]
+.right-column60[
+
+]
+.footnote[*: As seen by Chrome]
+
+---
+# Parse and Display the Page
+
+.left-column[
+
+
+]
+
+.right-column[
+1. First line: <!DOCTYPE html>
+ - Ok: need to build an internal representation of the page
+2. Line-by-line, go through the HTML
+ - If one of the tags links to a cascading style sheet (CSS) file, load and parse it
+ - If one of the tags links to Javascript (JS) for behavior, load and parse it
+3. FINALLY display the page…
+]
+
+
+---
+# Understanding content
+
+- There are 100s of tags! See [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)!
+- Some simple tags
+ - Title `<title></title>` (which nests inside your `<head></head>`)
+ - Headings `<h1></h1>` .. `<h6></h6>`
+ - Paragraphs `<p>`
+ - Ordered or unordered lists: `<ol></ol>`, `<ul></ul>`, with list elements `<li></li>`
+ - Horizontal rules `<hr />`
+ - Strong `<strong></strong>` which defaults to a bold style and emphasis `<em></em>` which defaults to italicized in most browsers.
+
+---
+# Adding content
+
+- There are 100s of tags! See [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)!
+- Some simple tags
+- Some tags add semantic context
+ - `<header></header>`: The header or banner that displays the title of the page
+ - `<main></main>`: The bulk of the content of the page
+ - `<footer></footer>`: The footer is optional but you can put contact info and copyright date in there.
+
+---
+# Adding content
+
+- There are 100s of tags! See [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)!
+- Some simple tags
+- Some tags add semantic context
+- Some tags need additional information, added to a tag with attributes
+ - Links to other pages `<a href="filename"></a>`
+ - Links to images `<img src="img.jpg" alt="Description!"/>`
+
+---
+# Adding content
+
+- There are 100s of tags! See [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)!
+- Some simple tags
+- Some tags add semantic context
+- Some tags need additional information, added to a tag with attributes
+- Some tags (comments) are important for documentation `<!-- -->`
+
+
+---
+# Cascading Style Sheets (CSS)
+
+- Allows us to change the look and feel of the content on the page
+- Style is separated into a .css file
+ - Makes styling multiple pages easier
+ - Allows changing multiple pages easier
+- Style sheets must be linked to an html page in the <head> for the styles to work
+ `<link href=“style.css†rel=“stylesheet†/>`
+- Great example is [CSS Zen Garden](http://www.csszengarden.com/)
+ - Exercise in [Ed](https://edstem.org/us/courses/38124/lessons/59447/slides/331625)
+
+---
+# CSS
+
+.left-column50[
+- Files consist of one or more rule sets
+- Each rule set has a selector which chooses which HTML elements you want to style
+- Style properties are set with rules which are property/value pairs
+- Syntax is important
+- More on [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
+
+]
+
+.right-column50[
+
+
+From [W3Schools](https://code.makery.ch/library/html-css/part3/)
+]
+
+---
+# Layout in CSS
+
+Layout can be [complicated](https://www.amazon.com/CSS-Awesome-Mug-Programmer-Developer/dp/B06Y13QC8N),
+fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse154/flexboxducky/) or
+[Grid](https://cssgridgarden.com/)!!
+
+
+
+
+
+---
+# Document Object Model (DOM)
+
+.left-column[
+
+
+]
+
+.right-column[
+- This builds a hierarchy of document elements in what we call the **Document Object Model**
+- The structure of this depends on our HTML (or the toolkit that generates your HTML)
+- The structure of this influences layout
+
+]
+
+---
+# Let's compare that to an app
+
+
+**Interface Programmers** combine library elements according to toolkit rules &
+constraints of architecture (common to all UI toolkits).
+
+Example: let's list all the components of this image:
+
+
+
+**Pause and think:**
+- How does the toolkit know where to put the components on the screen?
+- How does the toolkit know how to draw each component?
+
+???
+discuss with your neighbor
+- what to draw; where to draw it
+---
+# How do we make it more interactive?
+
+
+How about we add a button?
+--
+count: false
+
+
+Wait? When you hear the word "button" in the context of a graphical user
+interface (GUI), what do you think of?
+
+--
+count: false
+
+How to tell a button where to place itself on the screen?
+
+---
+# Placment (layout)
+
+What position do we use? What coordinate system do we use?
+
+- An absolute position relative to the whole phone?
+- A position relative to the whole app, but doesn't include the OS features (like status bars)?
+- A position relative to the direct parent of the button, maybe a window *in* the app
+
+--
+Or should we let the toolkit decide what's best?
+
+---
+# Where should it go?
+.left-column50[
+
+Have to set up the layout first so we can see what we've added
+
+This is a "Layout" problem - all UI toolkits have to support layout.
+
+Layout is complicated because we want layout to handle things like resizing or changing from
+portrait to landscape mode well.
+]
+--
+.right-column50[
+Specified using a <br>
+component hierarchy (a tree)
+
+<div class="mermaid">
+graph TD
+W(ConstraintLayout) --> V[Ab TextView--Hello World!]
+ W --> V1[fa:fa-square Button--Next ]
+
+class W darkblue
+class V1,V blue
+</div>
+
+Android's rendering of the same: 
+]
+
+
+---
+# What should it do?
+
+What do we tell the toolkit about the button?
+
+--
+
+We need to know when the user *interacts* with it
+- This is called *Event Handling* Example:
+
+```java
+Button button = (Button) findViewById(R.id.button);
+button.setOnClickListener(new View.OnClickListener() {
+ @Override
+ public void onClick(View view) {
+ // display a pop up with some text
+ Toast.makeText(getApplicationContext(), "Hello!", Toast.LENGTH_LONG).show();
+ }
+});
+```
+
+---
+# Structure of a toolkit
+
+Structure of a Toolkit
+- Library of components
+- Architecture
+
+Note: these definitions have morphed over time, particularly as things have shifted to cross
+platform development.
+[Here's](https://stackoverflow.com/questions/3057526/framework-vs-toolkit-vs-library/19790148#19790148)
+a reasonable set of definitions.
+
+???
+---
+# Some Comparisons
+
+| Android | Web |
+| --- | --- |
+| Java | HTML/CSS/JS |
+| Layouts | CSS Flexbox or Grid |
+| Interactor Hierarchy | Document Object Model (DOM) |
+| Components | DIVS |
+| Paint objects on a canvas | CSS |
+| `onCreate` | `window.addEventListener("load", init);` |
+| `View.OnClickListener#onClick` | `domElement.addEventListener("click", callback);` |
+
+---
+# Which of these Impacts Accessibility?
+
+| Android | Web | Accessibility (eg s) |
+|--------------------------------|---------------------------------------------------|--------------------------------------|
+| Java | HTML/CSS/JS | Does the toolkit support access? |
+| Layouts | CSS Flexbox or Grid | Comprehension/Magnification |
+| Interactor Hierarchy | Document Object Model (DOM) | Navigation |
+| Components | DIVS | Alternative text (toolkit dependent) |
+| Paint objects on a canvas | CSS | Color choices |
+| `onCreate` | `window.addEventListener("load", init);` | Proper Interaction with access API? |
+| `View.OnClickListener#onClick` | `domElement.addEventListener("click", callback);` | See above |
+
+---
+# End of Deck
+
+
diff --git a/slides/evaluation.html b/slides/evaluation.html
index 6a43e6a245bb65431f609ff755db1ab7537ac8dd..8e86e5dfa38d1e9a0e6c3c13d4529e9e1642f403 100644
--- a/slides/evaluation.html
+++ b/slides/evaluation.html
@@ -1,7 +1,7 @@
---
layout: presentation
title: Evaluation --Week 4--
-description: Accessibility Needfinding and Evaluation
+description: Accessibility Need finding and Evaluation
class: middle, center, inverse
---
background-image: url(img/people.png)
@@ -28,7 +28,7 @@ class:
[//]: # (Outline Slide)
# Learning Goals for Today
-- Presenting Acessibly
+- Presenting Accessibly
- How to build inclusive experiment designs
- Running an inclusive summative study
@@ -38,7 +38,7 @@ class:
So you have an app and you think it's accessible. How do you check that?
-.quote[Unlike formative evaluations, whose goals is to inform the design process, summative evaluations involve getting the big picture and assessing the overall experience of a finished product...] - Nielsen Norman Group
+.quote[...getting the big picture and assessing the overall experience of a finished product...] - Nielsen Norman Group
Lots of variables here, but
- typically checks that an app works as expected on standard tasks when used by the target population
@@ -55,7 +55,7 @@ Lots of variables here, but
Of course the entire design process *should not just include majority class people* and much of this presentation applies to formative testing took
-We'll also cover that later today when we talk about designing apps *for* and *with* people with disabilities
+We'll also cover that later this week when we talk about designing apps *for* and *with* people with disabilities
---
@@ -71,9 +71,49 @@ Best guidance: [Nielsen-Norman Group](http://www.nngroup.com/reports/accessibili
---
# Accessible Study Planning Workflow
-
-.red[*needs arrows going back]
+<div class="mermaid">
+%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#4CAF50', 'tertiaryColor': '#009688', 'fontSize': '16px', 'textMargin': '0px', 'text-align': 'left' }}%%
+
+flowchart LR
+
+ A(Identify stakeholders)
+ B(Identify tasks)
+
+ A <--> C
+ B <--> C
+ C <--> D
+ D <--> E
+
+ subgraph Assign tasks
+ C(Access needs
+ Effects of familiarity
+ Personal preferences
+ Institutional constraints)
+ end
+
+ subgraph Plan Accomm.
+ D(Communication
+ Materials
+ Time
+ Space)
+ end
+
+ subgraph Reflect
+ E(Access Synergies
+ Access conflicts
+ Power Dynamics)
+ end
+
+
+classDef default fill:#009688,stroke:#333,stroke-width:2px, color:white;
+classDef reflect fill:#4CAF50,stroke:#333,stroke-width:2px, color:white;
+class A,B,C,D default
+class A,B,C,D,E reflect
+linkStyle default stroke: black,stroke-width:8px
+
+</div>
+
---
@@ -85,52 +125,55 @@ Supposed you are hired to perform usability testing of new food-delivery app wit
# Identify Stakeholders
-Supposed you are hired to perform usability testing of new food-delivery app with people with sensory disabilities.
-- Who are the stakeholders who you need to take into account for this study?
+.left-column[you are hired to perform usability testing of new food-delivery app with people with sensory disabilities.]
+
+.right-column[
+Who are the stakeholders who you need to take into account for this study?
- - Disabled participants
- - Blind people
- - Deaf people
- - Hard-of-hearing people
+ - Disabled participants (BVI, DHH)
- Research team
- Lua -- lead researcher, has dyslexia
- Jay -- project team member, Deaf person who uses sign language.
- El -- project team member, non-disabled
-
+]
---
# Design Study
-Supposed you are hired to perform usability testing of new food-delivery app with people with sensory disabilities.
+.left-column[you are hired to perform usability testing of new food-delivery app with people with sensory disabilities.]
+.right-column[
- Who are the stakeholders who you need to take into account for this study?
- What is the right structure for the study?
-
+]
---
-# Design Study (1 of 4)
+# Design Study (1 of 5)
This is a usability study, so it should include the same tasks as tested for users without disabilities
Metrics should be similar as well -- for example the [System Usability Scale](https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html) might be useful at the end
---
-# Design Study (2 of 4)
+# Design Study (2 of 5)
This is also a study of accessibility, with disabled users. The study design needs to consider
-.left-column50[
+
- Choice of method
- e.g. think aloud may be more difficult for a nonspeaking individual, or someone with fatigue
- Check in on study measures and statistical design. Does user heterogeneity impact this?
<!-- - Study venue (It may be difficult to duplicate participant hardware/software) -->
-]
-.right-column50[
+
+---
+# Design Study (3 of 5)
+
+This is also a study of accessibility, with disabled users. The study design needs to consider
+
- Ensure that participants' hardware/software also addresses study needs (e.g. do participants have a working monitor?)
- Study length (estimate before and after piloting)
- - Study length may increase for some disabled participnats
+ - Study length may increase for some disabled participants
- Study length may negatively impact participants with fatigue-related concerns
-]
---
-# Design Study (3 of 4)
+# Design Study (4 of 5)
Study metrics may also need revision.
.left-column50[
@@ -141,26 +184,25 @@ Consider adding
]
.left-column50[
Consider changing
-- Any metrics that include abelist assumptions
+- Any metrics that include ableist assumptions
- Approach to time based measurements
]
---
-# Design Study (4 of 4)
+# Design Study (5 of 5)
It is also important to consider ethical issues
-.left-column60[
+
- What responsibility do you have to participants in terms of providing skills and help in & out of study?
- What responsibility do you have to give participants a participatory role in design?
- How do you ensure the integrity of your record of their experience?
- Are you compensating them appropriately and addressing costly transportation needs?
-]
-.right-column40[
+
+???
These changes may in turn impact
- Expense
- Scalability
-]
---
@@ -181,10 +223,6 @@ To perform standard usability testing on the app based on disabilities represent
3. Handle recruitment
4. Pilot with people with disabilities
5. Run the Study
- - Prepare study materials (e.g., print out protocols)
- - Hire access support staff
- - Participate in the study
- - Compensate participants
6. Analyze the data
---
@@ -236,11 +274,19 @@ Some things they might discuss include
- When to help and when to end a task if participants have trouble
---
-# 3. Handle Recruitment
-As a person already connected to the disability community, the team determins that Jay will be most likely to be trusted, and to identify opportunities to build trust throughout the recruitment process
+# 3. Handle Recruitment (1/2)
+As a person already connected to the disability community, the team determines that Jay will be most likely to be trusted, and to identify opportunities to build trust throughout the recruitment process.
+Recruitment raises a number of access issues
- Are your recruitment materials accessible
-- How will you find participants?
+- How will you find participants (next slide)
+- How will you compensate participants?
+
+---
+
+# 3. Handle Recruitment (2/2)
+
+Finding participants may require careful work
- How much do you know about the group your are targeting and what to expect from/of them?
- Will they see you as trustworthy?
- Are you giving them enough agency in the study process?
@@ -266,6 +312,7 @@ Prepare:
- Hire interpreters (at least 2 weeks in advance)
- Print out accessible study materials, consent form, etc
- Set up the room
+- Have compensation ready
]
---
@@ -274,7 +321,7 @@ Prepare:
- Lua gets tired from reading overtime
- Jay knows ASL and Deaf norms
- Study length was problematic for one Blind participant who also had a chronic illness
-- Sometimes sightlines made it hard for Jay to see the interpreter
+- Sometimes sight lines made it hard for Jay to see the interpreter
---
@@ -303,7 +350,9 @@ Prepare:
# 5. Run the Study
-At this point the team should be well prepared. However, it is still important to monitor both the team's and the participants' needs and adjust as accessibility concerns arise.
+At this point the team should be well prepared. However, it is still important to monitor both the team's and the participants' needs and adjust as accessibility concerns arise.
+
+Similar to piloting a study
---
@@ -315,7 +364,7 @@ This is another area where access concerns may come up.
- <q>Member Checking</q>
---
-# Try it
+# (If time) Try it
You read about Alexa's use by people with disabilities in class. Form small groups
- Identify potential tasks to test
diff --git a/slides/img/building/android-hierarchy.png b/slides/img/building/android-hierarchy.png
new file mode 100644
index 0000000000000000000000000000000000000000..6163edcef03ae9dead9de001b6f5cf1b5482821b
Binary files /dev/null and b/slides/img/building/android-hierarchy.png differ
diff --git a/slides/img/building/animated-skeleton.gif b/slides/img/building/animated-skeleton.gif
new file mode 100644
index 0000000000000000000000000000000000000000..366149f29f99f2b3e1d4d54e06c924a311541e9d
Binary files /dev/null and b/slides/img/building/animated-skeleton.gif differ
diff --git a/slides/img/building/bones.png b/slides/img/building/bones.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc36a5c3f74cd446cf3d07c1161312142397b96e
Binary files /dev/null and b/slides/img/building/bones.png differ
diff --git a/slides/img/building/chrome-inspector.png b/slides/img/building/chrome-inspector.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a9aba34636e7d5284d4661e78f990174eaf3e26
Binary files /dev/null and b/slides/img/building/chrome-inspector.png differ
diff --git a/slides/img/building/css-rule.png b/slides/img/building/css-rule.png
new file mode 100644
index 0000000000000000000000000000000000000000..720d8a2091f984a747334afe27803ebe1c3c7188
Binary files /dev/null and b/slides/img/building/css-rule.png differ
diff --git a/slides/img/building/dom.png b/slides/img/building/dom.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dacc41a64334e458ac2f0ada02bc389d5a51718
Binary files /dev/null and b/slides/img/building/dom.png differ
diff --git a/slides/img/building/dressed-skeleton.png b/slides/img/building/dressed-skeleton.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b18695ab67f05bf90ea1c599dc776a8f5efd726
Binary files /dev/null and b/slides/img/building/dressed-skeleton.png differ
diff --git a/slides/img/building/flexbox.png b/slides/img/building/flexbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..40282210afae036fca7ee7d1fded5d6110b30650
Binary files /dev/null and b/slides/img/building/flexbox.png differ
diff --git a/slides/img/building/full-skeleton.png b/slides/img/building/full-skeleton.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa79f9691d037b698ac6193350f511b9645b9600
Binary files /dev/null and b/slides/img/building/full-skeleton.png differ
diff --git a/slides/img/building/interface.png b/slides/img/building/interface.png
new file mode 100644
index 0000000000000000000000000000000000000000..efc20af479615d575dd62054d447dabd3ab6f698
Binary files /dev/null and b/slides/img/building/interface.png differ
diff --git a/slides/img/building/spottheheronscreen.png b/slides/img/building/spottheheronscreen.png
new file mode 100644
index 0000000000000000000000000000000000000000..95458745f69650794ec867b65ab98cf1eb0747b9
Binary files /dev/null and b/slides/img/building/spottheheronscreen.png differ
diff --git a/slides/img/building/webpage.png b/slides/img/building/webpage.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c3cd66f681dcb38a40bb7e626c65504fb63db63
Binary files /dev/null and b/slides/img/building/webpage.png differ