Merge branch 'jen-wk6' into 'UACCESS-23fa'

Assignment and more

See merge request !59

assignments/index.md

@@ -46,26 +46,26 @@ averaged over all the times that you are assessed.
 |--------------------------------------------------------|---------------------------------------------------------|
 | Disability Justice                                     | HW2, Final Project                                      |
 | Finding First Person Accounts of Disability Technology | HW1, Final Project                                      |
-| Familiarity with a Range of Accessibility technologies | HW1, HW5 (by choice)                                   |
+| Familiarity with a Range of Accessibility technologies | HW1, HW6, Final Project (by choice)                                  |
 | Presenting Accessibly                                  | HW1, Final Project                                      |
 
 ## Accessibility Compliance
 
 | Competency                                            | Assessed in Which Assignment?                           |
 |-------------------------------------------------------|---------------------------------------------------------|
-| Accessibility Problem Fixes                           | HW4, Final Project (by choice)                         |
-| Accessibility Technology Based Accessibility Checking | HW3, Final Project (required)                          |
-| Automated Accessibility Checking                      | HW3, Final Project (by choice)                         |
-| Correct use of Web/App Accessibility Rules            | HW4, Final Project (by choice)                         |
+| Accessibility Problem Fixes                           | HW4, HW6, Final Project (by choice)                         |
+| Accessibility Technology Based Accessibility Checking | HW3, HW6, Final Project (required)                          |
+| Automated Accessibility Checking                      | HW3, HW6 (by choice), Final Project (by choice)                         |
+| Correct use of Web/App Accessibility Rules            | HW4, HW6, Final Project (by choice)                         |
 
 ## Accessible Media
 
 | Competency                      | Assessed in Which Assignment?   |
 |---------------------------------|---------------------------------|
 | Accessible Presentation Creation | HW1, Final Project              |
-| Image Description               | HW1, HW3, Hw5, Final Project  |
-| Accessible Website/App Creation | HW6, Final Project (required)  |
-| Plain Language Writing                                | HW2, HW5 (by choice), Any Reading response (by choice) |
+| Image Description               | HW1, HW3, Hw5, HW6, Final Project  |
+| Plain Language Writing          | HW2, Any Reading response (by choice) |
+| Accessible Document Creation | HW4, HW6, Final Project              |
 
 
 

assignments/project-proposals.md

@@ -33,8 +33,19 @@ Some examples of what people have done in the past include:
 - Creating [tactile schematics](https://www.hackster.io/monica/creating-tactile-schematics-using-fritzing-5b47f8) for circuits
 - Making [markdown accessible](https://github.com/jaedong98/accessibility4md)
 - Addressing [open issues](https://github.com/odilia-app/odilia/pulls?q=is%3Apr+is%3Aclosed+author%3Asamtay) for a free and open source screen reader, [Odilia](https://github.com/odilia-app/)
+
+Other ideas could be to make something that is useful, or fun, more accessible to people with disabilities. Examples: 
+- A screen-reader accessible COVID visualization
+- A simple educational game that can be used with switch input
+- A CAPTCHA interface that can be used with an on screen keyboard for someone who uses switch input
+- 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
+- An online spaces for kids with disabilities (any age) 
+- 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
 {% enddetails %}
 
+
 In this phase of the final project, you will propose a specific project idea that you come up with.
 
 ## Learning Goals / Competencies

assignments/technology-implementation.md

@@ -19,18 +19,17 @@ revised: October 17, 2023
 {:toc}
 
 # Overview
-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 *very* simple and focus on learning how to build it in an accessible fashion.
+The goal of this homework is to build something that is accessible. Specifically, you should create a *more accessible version* of a user interface you've already made for a class or for fun.
 
 ## Learning Goals / Competencies
 This homework may contribute to your competency grade on 
-- TBD
+- Accessible written document creation
+- Can use an accessibility technology to find web page or app accessibility problems
+- Demonstrate familiarity with a range of accessibility technologies (at least 1)
+- Can articulate (and implement) addressing accessibility problems
+- Your participation grade, as a percentage of:
+ - completeness (are all the required parts present)
+ - consistency: are you applying the skills you've learned so far consistently as relevant
 
 ## 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!
@@ -38,36 +37,46 @@ This is a new assignment, so we are still figuring this out! Please bear with us
 # 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.
+## 1. Select a specific app or website that you will make more accessible
+You should identify a technology you have implemented *for general use* (i.e. not an accessibility technology). Ideally this should be an interactive technology (some kind of user interface, app, etc). If you have no such thing, you can ask us about using a website or other static content that you have generated as an alternative. 
 
 {% 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
+- An educational game for young children 
+- A tools for learning programming 
+- A visualization
+- A password or CAPTCH interface
+- VR/AR: A game or game control interface. 
+- A mobile app (e.g. final project for 340)
+- A web app
+- An interface wrapped around some machine learning program
+- A class assignment that has an interface
 {% enddetails %}
 
-## 2. Select a target audience (which assistive technology) 
+Also be clear about what task you want to accomplish. You should get us to approve both the website and the task (please do this during our discusson on Friday, and post something to the Ed discussion for this assignment to get approval). 
+
+## 2. Select an accessibility technology and test your app with it
+
 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. 
-- Make sure that video is captioned and audio described (see [description key's guide](https://dcmp.org/learn/descriptionkey)
-- Check with us about what to do if these requirements don't quite fit (i.e. for fabrication).
+Test out your app with that accessibility aid and identify any problems with completing that task. Write them up as UARS. 
+
+*Note* If you did not get to use Automated testing, or need to be re-assessed on it, you can *also* generate automated UARs if your have something that works with automated testers. 
+
+## 3. Fix the problem 
+
+Once you have identified problems, it is time to fix them. The expectations here will depend partly on the details of the task you select (which must be instructor approved) but it needs to include at least two different areas of POUR (i.e. address issues with both percievability and operability) or otherwise demonstrate that you have not done something overly simple.
 
-TODO: add accessibility requirements  for the turn in
+Find someone else in the class, and demonstrate for them the original version of the website or app using your selected accessibility technology and task, explaining the problems that you documented in your UARs. Then show them the improved version, again using your selected accessibility technology and task. Have them send an email to us attesting telling us that you showed this to them and describing briefly what you fixed. 
 
-# Turnin
+## 3. Turn in the following information for us-
+- Your classmate's email (they should send it directly to us at: {{site.staff_email}})
+- An accessible 1 page document  stating
+  - What app or website did you pick and what is it's main purpose
+  - What task you picked
+  - What you had to do to make the  app or website more accessible 
+  - What was hardest about this assignment
+  - Your document should be accessible, including using headers for each section, and images to illustrate your text.
+- Your UARs
 
-You will turn your accessible write up and recorded video on Canvas
+Note: **do not submit a PDF**. We expect your submission to be a Word or Google Doc.
 

assignments/website.md

@@ -30,7 +30,6 @@ This homework may contribute to your competency grade on
 - Can use an accessibility technology to find web page or app accessibility problems that are not found with an automated accessibility checker
 - Demonstrate familiarity with a range of accessibility technologies (at least 2)
 - Can articulate paths to addressing accessibility problems
-- Accessible written document creation
 - Image description
 - Your participation grade, as a percentage of:
  - completeness (are all the required parts present)

schedule.md

@@ -242,14 +242,13 @@ The lecture will be accompanied by an ASL interpreter and will include CART capt
 ## 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
+**Wednesday**: {% include slide.html title="Brief Introduction to Laser Cutting" loc="laser-cutting.html" %}
 
 **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
+**Friday** Discussion of implementation assignment (technology selection & task selection) & possible discussion of accessibility implementation in the real world with guests (may also be Monady). 
+- Check in to make sure you have a plan and it is do-able
 
 ## Homework
 {: .homework} Required Reading and Reflection (for Wednesday)

slides/3dprinting.html

@@ -287,6 +287,8 @@ This is a focus of a lot of my group's work
 
 - Reminder: This is fabrication week, please come to class prepared to make things :)
 - This is also the start of "Module 2", post-GUI accessibility.  Please fill out our end-of-module survey to give feedback on module 1 (we will post it on Ed this week) 
+- Was everyone able to find their comments in the gradebook?
+- Office hours at 3:30 on Tuesday; online at 11:30 on Wednesday instead of in person
 
 ---
 # Announcements (2/2)
@@ -594,7 +596,7 @@ class E green
 - I will briefly introduce Laser Cutting with  Tinkercad (I will assume you have done the tutorials!)
 - You will design something
 - You will refine it in lab and we will print it during lab
-- Further iteration possible Friday (TBD based on how things go)
+- Further iteration possible Friday
 
 ---
 # Example: Bagholder

slides/access-trees.html

@@ -55,13 +55,15 @@ We modified the assignment a bit
 ---
 # Introduction
 - What is the site or app for
-- How did you assess it
+- How did you assess it (what accessibility tool did you use)
+- What task did you assess?
 - Overview table
 
-| Task | Type (Web/Mobile/etc) | Testing Method | UARS found | Who Contributed |
-|------|-----------------------|----------------|--------------|-----------------|
-| ...  | ...                   | ...            | ...          |                 |
-|------|-----------------------|----------------|--------------|-----------------|
+| Type (Web/Mobile/etc) | Testing Method | UARS found | Who Contributed |
+|-----------------------|----------------|--------------|-----------------|
+| ...                   | ...            | ...          |                 |
+|-----------------------|----------------|--------------|-----------------|
+
 
 ---
 # Executive Summary

slides/assessment2.html

@@ -64,29 +64,14 @@ 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.
+No other  form of input (besides keyboards) 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 (e.g. 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/SHF2YF26NRUApLALP0WHj?controls=none&short_poll=true" width="800px" height="600px"></iframe> -->
-<!-- ] -->
-
 ---
 # POUR: Operable: Guidelines 2.1-2.5
 

slides/best-practices.html

@@ -121,7 +121,7 @@ Notice details of WCAG guidelines low on this list!
 | Unclear scope & architecture requirements | Engage with relevant end users                       |
 | Difficulty testing                        | Use appropriate testing suites & integration testing |
 | Lack of complete access practices         | Rigorous refactoring                                 |
-| Innapropriate tools                       | Well-designed documentation    & training            |
+| Inappropriate tools                       | Well-designed documentation    & training            |
 | Domain-dependent issues                   | Appropriate end user engagement and testing                                                     |
 
 ---
@@ -178,7 +178,7 @@ Discuss similarities and differences from desktop
 .left-column-half[
 Different types of screen readers.
 - JAWS for Windows
-- NonVisual Desktop Access
+- Nonvisual Desktop Access
 - VoiceOver
 - TalkBack
 - ChromeVox
@@ -234,7 +234,7 @@ Speak(fa:fa-volume-up Button, Bar ):::bluelarge
 graph LR
 SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Invokes object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge
 API -->|Passes along request| ATK[<BR> Toolkit/<BR>Browser]:::bluelarge
-ATK -->|Invokse Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
+ATK -->|Invokes Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge
 App -->|Updates Interface<BR>Announces Changes| ATK
 ATK -->|Passes along information| API
 API -->|Deleted text| SR
@@ -276,7 +276,7 @@ Reaching times
 
 Information you need to collect to assess this:
 - You need to know the linear order of a webpage or app. 
-- You need to know about any hierarchy that is programatically available (e.g. headers)
+- You need to know about any hierarchy that is programmatically available (e.g. headers)
 
 No way to automatically assess this! Hard to assess well without knowing best tricks for navigation that disabled people use. 
 
@@ -332,9 +332,9 @@ No way to automatically assess this! Hard to assess well without knowing best tr
 ---
 # Example: Swipe Order
 .left-column40[
-![:img A picture of facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of facebook controls (icons that look like a gui; a house; a person; a group of people; a bell; and a hamburger menu)  ,80%, width](img/assessment/facebook1.png) 
+![:img A picture of Facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of Facebook controls (icons that look like a GUI; a house; a person; a group of people; a bell; and a hamburger menu)  ,80%, width](img/assessment/facebook1.png) 
 ]
-.righ-column60[
+.right-column60[
 What focus order makes sense for the Facebook newsfeed? 
 
 Does this match the actual focus order?
@@ -346,7 +346,7 @@ When might you need to	*skip* things?
 ## What order do you think will be used (1 of 2)
 
 .left-column40[
-![:img A picture of facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of facebook controls (icons that look like a gui; a house; a person; a group of people; a bell; and a hamburger menu) ,80%, width](img/assessment/facebook1.png) 
+![:img A picture of Facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of Facebook controls (icons that look like a GUI; a house; a person; a group of people; a bell; and a hamburger menu) ,80%, width](img/assessment/facebook1.png) 
 ]
 .right-column60[
 Use chunks to group meaningful info and reduce number of navigation steps. 
@@ -357,10 +357,10 @@ ink over!
 ---
 ## What order do you think will be used (2 of 2)
 .left-column40[
-![:img A picture of facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of facebook controls (icons that look like a gui; a house; a person; a group of people; a bell; and a hamburger menu) ,80%, width](img/assessment/facebook1.png) 
+![:img A picture of Facebook showing (in rows from top to bottom ad left to right): Logo/search and messenger; user image stating /what's on your mind?/; Live/Photo/Checkin text with icons; Scrolling set of live videos; a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; the final set of Facebook controls (icons that look like a GUI; a house; a person; a group of people; a bell; and a hamburger menu) ,80%, width](img/assessment/facebook1.png) 
 ]
 .right-column40[
-![:img The same picture numbered. Numbers do not match reading order as shown in this alt text: (1) Logo/ (2) search and (3) messenger; (5) user image stating (4) /what's on your mind?/; (6) Live/ (7) Photo/ (8) Checkin text with icons; (9) Scrolling set of live videos; (10)  a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; (??) the final set of facebook controls (icons that look like a gui; a house; a person; a group of people; a bell; and a hamburger menu)   ,120%, width](img/assessment/facebook-actual.png) 
+![:img The same picture numbered. Numbers do not match reading order as shown in this alt text: (1) Logo/ (2) search and (3) messenger; (5) user image stating (4) /what's on your mind?/; (6) Live/ (7) Photo/ (8) Check in text with icons; (9) Scrolling set of live videos; (10)  a scrolling list of posts containing:  a post with title and meta data; the post text; number of comments; like and comment buttons; (??) the final set of Facebook controls (icons that look like a GUI; a house; a person; a group of people; a bell; and a hamburger menu)   ,120%, width](img/assessment/facebook-actual.png) 
 ]
 
 

slides/laser-cutting.html

 ---
 layout: presentation
-title: FOOBAR  --Week N--
+title: Laser Cutting   --Week N--
 description: Accessibility
 class: middle, center, inverse
 ---
@@ -9,7 +9,7 @@ background-image: url(img/people.png)
 .left-column50[
 # Welcome to the Future of Access Technologies
 
-Week N, FOOBAR
+Week N, Brief Intro to Laser Cutting
 
 {{site.classnum}}, {{site.quarter}}
 ]
@@ -28,26 +28,51 @@ class:
 ---
 [//]: # (Outline Slide)
 # Learning Goals for today
+- Introducing your next assignment
+- Brief introduction to Laser Cutting 
+- Actually preparing an item to laser cut
 
+---
+# Next Assignment (1/3)
+
+1) Pick something you've implemented
+- Prefarably interactive (some sort of web or app based user interface)
+
+2) Pick a task to complete on it
+
+Need to post *both of these* on Ed by Friday for approval
+- Ideally do this before class
+- We're trying to figure out whether we can spend any class time on this Friday, but don't count on it
+
+---
+# Next Assignment (2/3)
+3) Test it out with your accessibility technology and generate UARS
+
+4) Fix the problem
+
+5) Show it to a classmate
+   - They email us a description of what you showed them and what you fixed at {{site.staff_email}}
+
+.footnote[If do-able and you need to be re-evaluated, you may *additionally* use automated testing and generate more UARs]
+
+---
+# Next Assignment (3/30
+6) Write a 1 page document describing what you did (please see the assignment for details on what is required
+
+7) Make sure it is accessible, and not a PDF, and then submit it
+
+---
+# Announcements
+- so far I have none
 
 ---
 # Some key things to know about Laser Cutting
 
-.left-column50[
 We're using a [Glowforge](https://glowforge.com/). 
 - It takes SVGs as input
 - It can engrave, cut, etc
 - We're providing plywood, 3mm thick [double check with calipers]
-]
-
-.right-column50[
-Software options
-
-- Powerpoint: Can even [merge shapes](https://www.indezine.com/products/powerpoint/learn/shapes/2016/shape-union.html). Probably best for total beginners if you have it.
-- [Adobe Illustrator](https://www.adobe.com/products/illustrator.html). Best for most tasks if you have it
-- [AutoCAD](https://www.autodesk.com/products/autocad/overview?term=1-YEAR&tab=subscription) (free for students). Probably overkill
-- [Inkscape](https://www.autodesk.com/products/autocad/overview?term=1-YEAR&tab=subscription) (free). Best free option
-]
+- We will not engrave during lab, it slows things down too much, but we may cuts
 
 ---
 # What can you do?
@@ -60,13 +85,33 @@ Cutting: Makes a hole.
 - Any line can be cut
 
 Scoring: Doesn't cut all the way through. 
-- Again, any line 
+- Again, any line. Use a different color
 
 Engraving: Burns. Can do greyscale.
-- Expand with fill
 - Images.  Make sure they're not too dark. 
+- Add in a drawing program after Tinkercad
 ]
 
+---
+# How we will create SVGS
+
+First create a design in TinkerCAD (or other CAD software if you know it well)
+- You should group everything together that is touching
+- Place it carefully. The base plane will determine what is part of the final SVG
+- We will not engrave during lab, it slows things down too much, but we may cuts
+- Export it as SVG (demo)
+   - Include mm as units
+- Re-export *with images emedded* if you add them   
+
+---
+# Other software optinos
+
+[Adobe Illustrator](https://www.adobe.com/products/illustrator.html). Best for most tasks if you have it
+
+[AutoCAD](https://www.autodesk.com/products/autocad/overview?term=1-YEAR&tab=subscription) (free for students). Probably overkill
+
+[Inkscape](https://www.autodesk.com/products/autocad/overview?term=1-YEAR&tab=subscription) (free). Best free option
+
 ---
 # Essential Measurements
 
@@ -95,11 +140,6 @@ Cut it out and check your measurements AGAIN
 ]
 .right-column50[
 Decorate
-
-Save to SVG
-- First "expand" (if needed)
-- Include mm as units
-- Include images
 ]