# Lab 6 SRC Activity: Accessibility
### Step 0: Introduction
In this lab, you will explore ways to increase accessibility when designing websites, as well interacting with assistive tools on smartphones. These activities will be completed in pairs (make sure one person has an iPhone), followed by a group discussion.

## Part 1: WAVE (~10 minutes)
WAVE (Web Accessibility Evaluation Tool) is a tool that allows you to detect and analyze accessibility pitfalls on websites.

### Step 1:
Go to [WAVE](https://wave.webaim.org/) and enter a web page address (try entering [this URL](https://www.washington.edu/accesscomputing/AU/before.html) as an example). Click on the “details” tab. Explore the errors detected by WAVE by clicking on the ⓘ next to each error and reading what it means, why it matters, and what to do.

### Step 2:
Now find your own website that has at least two accessibility errors using WAVE. Then share the website you found with your partner.

### Step 3:
Discuss with your partner: Who are these websites inaccessible for? How could a developer make the websites more accessible?

Consider: how will a visually-impaired user interact with this information? Does this site work on all types of interfaces?

If you’re stuck, [here](https://www.w3.org/WAI/tips/designing/) are some guidelines by W3C (the World Wide Web Consortium) on ways to make web user interfaces more accessible

***Once you’re done: move onto Part 2!***

## Part 2: Accessibility on Smartphones (~10 minutes)
You will be assuming the role of a user who is unable to interact with their smartphone via touch due to physical/motor needs. Instead, you will be interacting with ***Voice Control*** (this is different from Siri, as it directly deals with commands/interactions with the current user interface).

### Step 4:
*For iPhone:* go to Settings > Accessibility > Voice Control (under Physical and Motor). Then, Turn on Voice Control. You may need to tap “Set up Voice Control” first.

*For Android:* follow [these instructions](https://support.google.com/accessibility/android/answer/6151854?hl=en).

### Step 5:
While on Voice Control, start playing around with some simple commands. Say these commands out loud (in order!!) and think about the responsiveness:
1. “Tap Vocabulary”
2. “Tap Voice Control
3. “Turn volume up”
4. “Go Home”
5. “Swipe Left”
6. “Show names”
7. “Show numbers”
8. “Tap 1”

[You should end up at whatever app is at the top left of your screen]

### Step 6:
Now choose an action to complete (e.g. view a photo in your album, send a text message, play a youtube video). Complete this task only using VoiceOver. Again, no using touch!

Try doing this based on intuition, but if you are stuck; [here](https://support.apple.com/en-us/HT210417#:~:text=To%20interact%20with%20items%20on,%2C%20say%20%E2%80%9CTap%20Accessibility.%E2%80%9D) is a guide on other capabilities and commands of Voice Control

### Step 7:
Discuss with your partner, and be prepared to share this in group discussion!
* Are the commands intuitive?
* What worked well, what didn’t?
* If you were a UX designer at Apple trying to increase accessibility, what recommendations would you make?
* How will you interact with something more difficult, like selecting aspects on a screen that are spatially organized?
* Are there any missing commands that should be added?

***Once you’re done, wait for your TAs to call you back together for a group discussion!***

## Part 3: Color Contrast Practice (~10 minutes)
### Step 8:
Look at the two designs below. Identify which color combinations seem easier to read for you. Keep that in mind for the next steps.


### Step 9:
*For MacOS:* Use the Digital Color Meter (search your computer’s Applications) to identify the RGB values for the text and background colours of the designs below. Once you open the app, hover your cursor over the colour you would like to identify. Its RGB value—along with a zoomed in image of the pixels around your cursor—will appear in the application window.

*For Windows:* Follow [these instructions](https://learn.microsoft.com/en-us/windows/powertoys/color-picker)

### Step 9:
Go to https://contrast-ratio.org/ and enter the RGB values, in the form “RGB(RED_VALUE, GREEN_VALUE, BLUE_VALUE)”, comparing text and background color to each of the designs.

### Step 10:
With a partner, try to find a website (anywhere online) that uses poor color contrast practices. Discuss how and why this can impact a website’s usability.

# Lab 6: ArrayLists and Loops

In this lab, you will be learning about and working with ArrayLists, an extremely helpful way of storing and manipulating data in Java.

**Goal:** Learn how to create arraylists, populate them and manipulate the objects stored in them.


## Introduction
You’re going to be filling in methods in one class: **`AlienArrayListCreator.java`**. The methods we want you to fill in are marked by TODOs in the stencil code. The other classes and methods are helpers - feel free to look over them but please don’t edit them!

## Getting Started
Click [here](https://classroom.github.com/a/8QrDqQOR) to get the stencil from GitHub - refer to the CS15 GitHub Guide for help with GitHub and GitHub Classroom. Once you have the URL of your personal GitHub repository, open the IntelliJ terminal. Move into the **`src/`** folder, then use the command **`git clone <URL>`**

Once you’ve cloned your personal repository from GitHub, you’ll need to rename the folder from **`lab6-<yourGitHubLogin>`** to just **`lab6`**. You will have issues running your code until you make the change.

## Testing Time!
<span style="font-size: 19px;">Why testing?</span>
Testing is a crucial part of any project because it allows you to check the component parts (individual methods). This makes it much easier to ensure that the methods are working correctly.

#### Setting up JUnit 4 Testing
Before we get started on testing, we need to add some JARs to our IntelliJ in order to get JUnit to work. JARs are essentially collections of compiled code and an example of it is the CS15 Support JAR that you have been using since the start of the semester.
1. Download the JUnit JAR and Hamcrest JAR [zip file](https://drive.google.com/file/d/1Ho7PWikLdzrqLRR8GTvuvE1-v4UlOFU0/view?usp=sharing)
a. When you click the link, the screen will be blank, but a .zip (i.e., compressed) file should be downloaded. Give your browser permission to do so if it asks.
3. Put both of the downloaded JARs in your cs15 folder
4. Open the cs15 folder in IntelliJ
5. Click on File on the top bar, then click on Project Structure
6. Click on the Dependencies tab (blue arrow) and then click on the “+” button (green arrow) and then click on JARs or Directories and the JUnit and Hamcrest JARs that you moved into your cs15 folder in Step 3.
7. Then click Apply and Ok

## Testing TODOs
1. Open **`BasicTest.java`** in your lab6 folder
a. By convention all tests for a specific Class or set of functionality goes into its own **`.java`** file and the format of the name is usually **`<class name>Test.java`**
2. Try running the **`testOnePlusOne`** test by clicking on the green play button to the left of the method
a. Second test should fail and it is your job to fix the test!
3. Write a test of your own that tests the output of 6 divided by 2 and run the test to ensure that it works as expected
4. You can use the green play button next to the line that says **`public class BasicTest`** to run all the tests in the class.

:::success
**CHECKPOINT:** Run all the tests using the green play button near the top of your file and show your TA that all of the tests pass
:::

## Helper Methods in `Alien`
There are a few methods in the **`Alien`** class that you’ll need to call while completing this lab. Read through the class definition and the comments to see what methods there are and how you can use them.

### Alien ArrayLists
We want to use an **`ArrayList`** to keep track of a bunch of aliens, and perform some operations on them.

The first thing you have to do is instantiate your **`ArrayList`**! We’ve declared an instance variable for you, but it’s up to you to instantiate it!

:::info
**TODO:** In the constructor of **`AlienArrayListCreator`**, set that instance variable to a **`new ArrayList<>()`**.
:::

Now we have an empty ArrayList, and we can add to it as we want. We want to populate the ArrayList with 5 aliens at a time in the **`addFiveAliens()`** method. To do this, we’ll need a for-loop. Remember that for loops look something like this

   for (int i=0; i < _____ ; i++){                       
   }

:::info
**TODO:** Follow the TODO instructions to fill in **`addFiveAliens()`**, using the **`add`** method of ArrayLists to add aliens to the list.
:::

Now run the program and click the “Add Five” button. *At this point, ++nothing should show up!++ Why?*

Even though we’ve *logically* created the Aliens, there’s a bug in the **`Alien`** class that makes it so that the Aliens aren’t being *graphically* added to the scene graph.

:::info
**TODO:** In the **`Alien`** constructor, follow the TODO instruction to graphically add the alien.
:::

Now, when you run the program and click “Add Five”, you should see a bunch of aliens appear in random locations!

Next, let’s work on the **`makeAllGreen()`** method. In this method, we want to change the color of all the aliens in the **`ArrayList`** to green.

In this case, we don’t need to use the actual index of the aliens in the loop, so we can use a **for-each** loop! Remember that for-each loops look something like this:

    for (<type> <varName> : <array>) {
    }

If we had an instance variable that is an ArrayList of Dogs called dogs, we could iterate through the ArrayList using a for-each loop like this:

    for (Dog myDog : this.dogs) {
        myDog.bark();
    }

Notice that inside the loop you can reference the variable by the name you specified in the loop (in this case, **`myDog`**).

:::info
**TODO:** Follow the TODO instructions in **`makeAllGreen()`**. Check out the **`Alien`** class for a useful method that can change the alien’s color.
:::

:::info
**TODO:** Run the program and check that the “Make All Green” button works!
:::

Here, we can run our program and see that it’s working. But what if we didn’t have the **`AlienVisualizer`** class, or weren’t creating something with a visual output? This is where testing comes in handy!

Let’s try testing our **`makeAllGreen()`** method. We’ll then be able to make sure that every **`Alien`** is green after we call **`makeAllGreen()`** without ever having to look at any Aliens. Note that we’ll need access to the Aliens we need to check the color of - look in **`AlienArrayListCreator`** for a way to get an ArrayList of Aliens on the screen.

:::info
**TODO:** In **`AlienArrayListCreatorTest`**, follow the TODO instructions to test your **`makeAllGreen()`** method.
:::

Lastly, we want to fill in the **`removeThreeAliens()`** method in **`ArrayListCreator`**. While hard-coding this without a loop would also work, since this is a loops mini-lab, let’s get some extra practice with loops!

In this case we want to remove the **first** three aliens in the list. What would their indices be? 0, 1, and 2! *But*, remember that once you remove an element from a list, the list **automatically** rearranges itself. So in order to remove the first three aliens, we just need to remove the “first” alien (index 0) three times.

:::info
**TODO:** Follow the TODO instructions in **`removeThreeAliens()`**, using the **`remove(int index)`** method of ArrayLists.
:::

:::info
**TODO:** Run the program, spawn a few aliens with the “Add Five” button, then remove them with the “Remove Three” button.
:::

Notice, ++*it doesn’t quite work yet!*++ Why?

When using the ArrayList **`remove`** method, you’re *logically* removing an element from the program, but its *graphical* representation is still there.

Luckily, the **`remove`** method *returns* the instance removed, so you can store it as a variable and use that instance to make sure it’s graphically removed. For example, with my ArrayList of dogs I could write:

Dog myDog = this.dogs.remove(0);
myDog.bark();

:::info
**TODO:** After removing each alien from the list, graphically remove it using the relevant method defined in **`Alien`**.
:::

:::info
**TODO:** Run your program again and you should see that some Aliens disappear each time you click “Remove Three”.
:::

:::info
**TODO:** Keep clicking “Remove Three”, past when there are no more aliens on the pane. Look in the terminal, and you’ll see a bunch of errors that have popped up! Why?
:::

Once the **`ArrayList`** is empty, if you keep calling **`remove`**, it will throw an **`IndexOutOfBoundsException`**! We need to do some error checking to avoid that terminal error.

:::info
**TODO:** Inside the loop, check ***if*** the ArrayList is empty, using the **`isEmpty()`** method of ArrayLists. If it’s not empty, remove an alien! If it is empty, there’s nothing to do.
:::

Now when you run the program and keep trying to remove aliens, there should be no error!

Congrats on finishing the lab!

:::info
**TODO:** Complete the mid-semester survey at the link [here](https://docs.google.com/forms/d/1yVS5OIHGE-ed2P3ZvxWcMWYnFGuUiINpRRAkoeKVvoc/viewform?edit_requested=true "Mid-Semester Survey").
:::

:::success
**TA Checkpoint:** Call a TA over to show them your final program and your completed mid-semester survey in order to get checked off for this lab!
:::