diff --git a/assignments/webegs/example-report.docx b/assignments/webegs/example-report.docx
new file mode 100644
index 0000000000000000000000000000000000000000..717a19daee91d5754ed45737ad131c989ed9059b
Binary files /dev/null and b/assignments/webegs/example-report.docx differ
diff --git a/assignments/webegs/example-report.pdf b/assignments/webegs/example-report.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..bcaad29cb13f41a6bd8bcad4f4d3f034724af368
Binary files /dev/null and b/assignments/webegs/example-report.pdf differ
diff --git a/assignments/website.md b/assignments/website.md
index 9b31818de5d1dd2f1f8228105cfe6a568bcc1b9f..ddbc087eb7dbc9e872a32e1d9b057045d08c51b8 100644
--- a/assignments/website.md
+++ b/assignments/website.md
@@ -20,14 +20,15 @@ The goal of this homework is to learn about basics of website accessibility and
## Competencies
This homework may contribute to your competency grade on
-- Can apply web/app accessibility rules to identify problems, including
- - 1 whether content is perceivable
- - 2 whether content is operable
- - 3 whether content is understandable
- - 4 whether content is robust
+- Can apply web/app accessibility rules to understand and identify, including
+ 1. whether content is perceivable
+ 2. whether content is operable
+ 3. whether content is understandable
+ 4. whether content is robust
<!-- - 5 the meaning of conformance -->
- Can use an accessibility checker to assess whether a web page or app is accessible
- Can use an accessibility technology to find web page or app accessibility problems that are not found with an automated accessibility checker
+- Demonstrates familiarity with a range of accessibility technologies (at least 2)
- Can articulate paths to addressing accessibility problems
- Accessible written document creation
- Image description
@@ -38,6 +39,8 @@ Students in the past have reported that taken together, part 1 and part 2 of thi
- It helps to use the [UAR template](webegs/UAR_Template.doc) when filling out the UARS.
- It was very motivating to do this for a real client
+Here is a [sample set of UARs](webegs/DDUARS.docx) that a prior student who completed this assignment has kindly shared with us for you to look at.
+
# Details
Your goal is to generate a range of UARs documenting accessibility concerns (and perhaps successes) with a website or app. You will use [W3C guidelines](https://www.w3.org/WAI/standards-guidelines/) for the site or app you are assessing.
@@ -62,12 +65,12 @@ You will need to select what aspect of this site to test, you should have at lea
{% details List of Websites %}
-- [DSHS.wa.gov](DSHS.wa.gov) -- Our community uses this site for public health services and disability support information.
+- [DSHS.wa.gov](https://www.dshs.wa.gov/) -- Our community uses this site for public health services and disability support information.
- King County Library Systems
- [KCLS app](https://apps.apple.com/us/app/kcls/id746221889) (requires an iPhone). No specific task was provided, but they said "Assessing this App will benefit patrons with disbility who use this App to access KCLS resource"
- [Libby](https://apps.apple.com/us/app/libby-by-overdrive-labs/id1076402606?utm_campaign=libby&utm_medium=lightning_banner&utm_source=lightning). Again, no task is provided, just that it is "important for accessing library services".
- [HuskyAdapt](https://depts.washington.edu/adaptuw/) -- This is a UW student group. They say "A lot of individuals with disabilities and adults that work with individuals with disabilities access our website."
-- [Mason County Elections](www.masoncountywaelections.gov) -- "It provides information on services available to help people with disabilities vote."
+- [Mason County Elections](https://masoncountywaelections.gov/) -- "It provides information on services available to help people with disabilities vote."
- Thurston County Government
- [Thurston County Auditor's Office](https://www.thurstoncountywa.gov/departments/auditor) -- "The county just relaunched our web content management system. In addition to our other public facing services, we also conduct election in Thurston County. We would like to especially know if our website works for all users prior to the 2024 election cycle." Focus on the Thurston County Auditor's Office section only.
- [Thurston County Board of County Commissioners](https://www.thurstoncountywa.gov/departments/board-county-commissioners) -- "This is where constituents go to get information on the activities/decisions/meetings/etc. of the Board of County Commissioners"
@@ -108,7 +111,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. 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.
+Record each group of similar issues you find using this [Usability Aspect Report Template](webegs/UAR_Template.doc). Here is a [sample set of UARs](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
@@ -122,5 +125,5 @@ Some key things to make note of:
# Turnin
-- Submit your UARS as an attachment to the appropriate [discussion]({{site.discussion}}). Specify the tasks you were testing in your submission.
-- Also write an answer to this question: What are some examples of problems you could only identify with manual testing using an accessibility technoolgy (instead of an automated tester)
+- Submit your UARS as an attachment to the appropriate discussion as specified in Canvas. Specify the tasks you were testing in your submission.
+- Also write an answer to this question: What are some examples of problems you could only identify with manual testing using an accessibility technology (instead of an automated tester)
diff --git a/slides/assessment.html b/slides/assessment.html
index 71fd6b85c79e95d61e47f256df468f895f704ce0..9717f18b75d320fe0ba5fb9a1e9cf65630a47055 100644
--- a/slides/assessment.html
+++ b/slides/assessment.html
@@ -53,11 +53,12 @@ Understandable: Information and the operation of user interface must be understa
Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies
-This is appropriate for *all* disabilities -- don't think access is only an issue for blind and low vision (BLV) people
.footnote[Note: There is a 5th thing, Conformance, which we are not covering today]
???
+This is appropriate for *all* disabilities -- don't think access is only an issue for blind and low vision (BLV) people
+
Obviously there is some overlap between these, and they build on each other
---
@@ -91,6 +92,7 @@ Why non text?
---
# Different Types of Non-Text Content
+Read up on some of these links when you are faced with specific description needs
.left-column50[
- [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605)
- Formatting and text styling
@@ -99,18 +101,20 @@ Why non text?
- [Visualizations](https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9555469)
- [Memes](https://dl.acm.org/doi/10.1145/3308561.3353792)
- [GUIS](https://dl.acm.org/doi/10.1145/3411764.3445040)
+]
+.right-column50[
- Animations/Videos (we'll talk more about this later today)
- AR/VR ([Accessibility, Disabilities, and VR](https://educatorsinvr.com/2019/05/31/accessibility-disabilities-and-virtual-reality-solutions/))
- 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
-]
+
---
# Small Group Activity
@@ -197,17 +201,20 @@ Participants were aware of the overall structure of *phone apps*
---
# 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.
+
+
+---
+# My description of the leftmost GUI
+
- 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
+- Below is a seach bar with address and time menu and 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.
-]
+
+???
+
+This is very hard to describe without knowing what is accessible; and whether the user is more interested in content or layout.
+
---
# Describing GUIs is rarely necessary
@@ -268,6 +275,7 @@ A picture of facebook with a like button visible at bottom left (a thumbs up fol
.left-column[
## Guideline 1.1
+
Text Alternatives: Provide *electronic text* alternatives for any non-text content
]
.right-column[
@@ -308,6 +316,7 @@ Example Best Practices:
.left-column[
## Guideline 1.2
+
Provide perceivable alternatives for time-based media
]
.right-column[
@@ -364,6 +373,7 @@ If you want to know more: [describing educational videos](https://dcmp.org/learn
.left-column[
## Guideline 1.3
+
Adaptable
]
.right-column[
@@ -386,7 +396,9 @@ Structure and information should be able to be programmatically determined by as
# POUR: Perceivable: Guidelines 1.1-1.4
.left-column[
+
## Guideline 1.3
+
Adaptable
]
.right-column[
@@ -426,13 +438,12 @@ Distinguishable
Distinguishable
]
.right-column[
-
- Use of color is not the only way information is conveyed
-- Don't force screen reader users to listen to audio longer than 3s without providing easily found controls; ideally use low or no background audio
-- Support text resizing (& therefore don't use images of text). Ideally (AAA) also support selection of color; justification, spacing, etc
-- Support users who need a 1 column view of content (AAA)
-- If you must have tooltips and popups, make sure they are: dismissable; hoverable; and persistent
-- Make sure you meet contrast expectations (minimum 4.5:1, ideally 7:1) in color (e.g. text and background; diagrams; controls; etc)
+- Audio longer than 3s should provide easily found controls; ideally use low or no background audio
+- Support text resizing (& therefore don't use images of text). (AAA) supports changing color; justification, etc
+- Support a 1 column view of content (AAA)
+- Avoid tooltips and popups; make sure they are: dismissable; hoverable; and persistent
+- Meet contrast expectations (min 4.5:1, ideally 7:1) in color (e.g. text and background; diagrams; controls; etc)
]
---
@@ -489,7 +500,7 @@ Content should be
- **Name** as "Missing Image ALT Text";
- **Evidence** Guideline violated: 1.1 ([Text Alternatives](https://www.w3.org/WAI/WCAG22/Understanding/text-alternatives));
- **Screen Shot** as the image and URL ([lib.washington.edu](https://www.lib.washington.edu/));
-
+
---
# Example from the UW Library
diff --git a/slides/disability-justice.html b/slides/disability-justice.html
index d907606942bfec3cf659d202968c2a55d924fa3f..b70c368df769cda1fafa29cff2a8d27f77c9cde5 100644
--- a/slides/disability-justice.html
+++ b/slides/disability-justice.html
@@ -168,6 +168,19 @@ First Person Perspective [FastCompany Article](https://www.fastcompany.com/90790
Discuss masking from a disability justice perspective and [post on Ed]({{site.discussion}}/3534307)
+---
+# Announcements
+
+Thanks for your feedback on this week's participation survey
+- Outdated links: Please keep posting them in Ed; we also have a TA checking links in slides and on the schedule page; and we're tryin to put assignments for everything on Canvas to help reduce errors
+- Reading question dates: We've added a due date for answering the reading questions starting this week.
+- Anything else unclear, please tell us.
+- I forgot to repeat questions! I will do this in the future (please feel free to remind me!)
+- I've tried to simplify the website navigation
+- Everyone has two late days on EVERY assignment.
+- For Friday, you will be assigned a room to present in and a slide (of yours) to present. Each room will also have a zoom link.
+- Any other questions?
+
---
[//]: # (Outline Slide)
# Learning Goals for today
@@ -176,84 +189,81 @@ Discuss masking from a disability justice perspective and [post on Ed]({{site.di
- **Understand terms about and models for disability-centered design**
---
-# Some terms used in Accessibility
+# Some terms used in Accessibility (1/2)
.left-column50[
Accommodation-- we've already discussed
- Co-producing access for all participants in a space or event
- Legally mandated, but also so much more
-Universal Design (why is this problematic?)
-- One design works for everybody
-- Typical example: curb cuts
]
.right-column50[
Ability-Based Design - Jacob Wobbrock
- Technology that adapts to the abilities of the user in their current context
+
+]
+
+---
+# Some terms used in Accessibility (2/2)
+
+.left-column50[
+Universal Design (why is this problematic?)
+- One design works for everybody
+- Typical example: curb cuts
]
---
.right-column50[
-Disability Justice Based Design
+Disability Justice Informed Design
- Design informed by disability justice
- What we practice in this class
]
---
-# Disability Justice in Design (1 / 4)
+# Disability Justice Informed Design (1 / 6)
The **central philosophy** in this class
-1) Intersectionality: Ensure that the things we build address multiple disabled people, with varied identities, and multiple disabled people
-
---
+1) **Intersectionality**: Ensure that the things we build address multiple disabled people, with varied identities, and multiple disabled people
-2) Leadership of those most impacted: Disability led decisions, not disability dongles
+---
+# Disability Justice Informed Design (2 / 6)
-When we design for people with disabilities,
+2) **Leadership of those most impacted**: Disability led decisions, not disability dongles. When we design for people with disabilities,
- Ideally people with disabilities are part of the design process (or lead it)
- In this class, we emphasize first person accounts to reduce the burden of asking disabled people to teach us while we are still learning
---
-# Disability Justice in Design (2 / 4)
+# Disability Justice Informed Design (3 / 6)
-3) Anti-Capitalist Politics
-
-When we create systems, we make them accessible even though it may cost time and money
+3) **Anti-Capitalist Politics**. When we create systems, we make them accessible even though it may cost time and money
- No segregation, even if it is cheaper to implement
???
Consider things like disclosure and invisibility
---
-4) Cross-Movement Solidarity
-
-Addressing accessibility isn't enough if we aren't inclusive of other identities tools
-
+---
+# Disability Justice Informed Design (4 / 6)
+4) **Cross-Movement Solidarity**. Addressing accessibility isn't enough if we aren't inclusive of other identities tools
---
-# Disability Justice in Design (3 / 4)
-
-5) Recognizing Wholeness
+# Disability Justice Informed Design (5 / 6)
-We should include accessibility in all the spaces that people interact with technology, because people with disabilities exist in all of the spaces -- as authors and consumers; programmers and users; and in every area of life
+5) **Recognizing Wholeness**. We should include accessibility in all the spaces that people interact with technology, because people with disabilities exist in all of the spaces -- as authors and consumers; programmers and users; and in every area of life
--
-6) Sustainability
-
-We should work at a pace that includes everyone in the work, and not value the rush products to market over access
+6) **Sustainability**. We should work at a pace that includes everyone in the work, and not value the rush products to market over access
---
-# Disability Justice in Design (4 / 4)
+# Disability Justice Informed Design (6 / 6)
-7) Cross-disability Solidarity: Again, we should support multiply disabled (and multiple disabled) people...
+7) **Cross-disability Solidarity**: Again, we should support multiply disabled (and multiple disabled) people...
-8) Interdependence: ... and create designs that encourage people (with and without disabilities) to work together to achieve access...
+8) **Interdependence**: ... and create designs that encourage people (with and without disabilities) to work together to achieve access...
-9) Collective access: ... and in the process our designs balance agency and control with interdependence and independence
+9) **Collective access**: ... and in the process our designs balance agency and control with interdependence and independence
-10) Collective liberation: ... and leave no one behind in the process
+10) **Collective liberation**: ... and leave no one behind in the process
---
background-image: url(img/accessibility/old-phones.jpg)
@@ -300,19 +310,19 @@ The first mobile screen reader
.column[
.centerh[
-
+
]
]
.column[
.centerh[
-
+
]
]
.column[
.centerh[
-
+
]
]
@@ -328,12 +338,13 @@ Many pages of accessibility settings
- Speech recognition for controlling device
- Zoom – screen magnifier – 3 finger tap
- Closed captions on videos
-- AssistiveTouch – so don’t need multiple fingers, don’t need to press Home
-button, etc.
-- Switch Control (IOS7 and later):
- - Optional connection to external switch or [head movement with built in camera](https://www.youtube.com/watch?v=RXF2ThtYXzM)
+- AssistiveTouch – fewer fingers needed, etc.
+- Switch Control (IOS7 and later) [head movement with built in camera](https://www.youtube.com/watch?v=RXF2ThtYXzM) or external switch
]
+???
+
+assistive touch also saves you from pressing the home button
---
# Analyzing the iPhone from a Disability Justice perspective
diff --git a/slides/plain-language.html b/slides/plain-language.html
index d426a40efcd61820e3b9ff6d1def301389ba388e..0ed50b340a195197f5a9deddd3c67d2350f85d64 100644
--- a/slides/plain-language.html
+++ b/slides/plain-language.html
@@ -23,6 +23,7 @@ class:
## Make sure zoom is running and recording!!!
## Make sure captioning is turned on
+
---
[//]: # (Outline Slide)
# Learning Goals for today
diff --git a/slides/testing.html b/slides/testing.html
index d0bc58a14673e75a04d7979953de7be5bb90e3ef..66f200f7a7ebc35494376c50d498e101a1048334 100644
--- a/slides/testing.html
+++ b/slides/testing.html
@@ -86,31 +86,31 @@ At this point, a blind user new to this site still has no idea that an inbox eve
# 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
-
+
---
@@ -155,11 +155,10 @@ In this assignment we will use off-the-shelf, freely available accessibility tec
# Screen Readers: Typical Bugs
.left-column40[
-
+
]
.right-column60[
-<BR>
![:youtube Banking failure, b-R5r_aKmKo]
]