Workshop: Accessibility in HTML and CSS

In this workshop, you will make a short interactive web page, and then you will do accessibility testing on someone else’s web page.

Part 1: Make a webpage (required for homework)

1. Create a GitHub repository with the link in Moodle.

   Optional: Connect GitHub and VS Code if you can

   You can connect GitHub and VS Code by “cloning” the repository to your computer.

   “Clone a repository locally,” Visual Studio Code, last modified 29 Oct 2024.

   Matt McElreath, “How to clone a GitHub repository with VS Code,” YouTube, 2m 18s, 29 May 2022.

2. Please create a short webpage that shows a photo, asks the user a question about the photo, and lets the user give a response through form elements.

   Make the webpage as accessible as you can.

3. In addition to being accessible, the webpage must meet these requirements:

   • Includes a picture. Please choose a free-to-use photo from Unsplash or a similar site.

   • Does not have a white background. This is just so that you have to think a bit about color contrasts (tip: try the contrast finder) rather than just leaving it black text on a white background.

   • Use at least one element for user input like input, textarea, or select.

   • Use at least one button element.

4. When you are done with the webpage, please share the GitHub repository with one of your fellow students (hopefully someone who was not sitting next to you in the workshop), and then invite them to review the pull request called “Feedback”.

   Steps

   Managing teams and people with access to your repository

   Requesting a pull request review

Part 2: Test someone else’s webpage (required for homework)

1. Please do at least two types of testing on the webpage that you have been invited to review.

   Types of accessibility testing

   Automated accessibility testing

   Manual accessibility testing

   Assistive Technology testing

2. Write the results of your tests as comments on the pull request on GitHub. With each accessibility violation, be sure to give enough info that the webpage author can understand how you discovered the error and reproduce it for themselves.

   Steps

   Reviewing proposed changes in a pull request

Part 3: Create an accessible color scheme (optional)

Taking inspiration from the colors in your photograph, develop the color scheme you used in your webpage further into a system of complementary colors that can be used together for text, backgrounds, and accents in the webpage.

Use at least four colors (can include shades of white, grey, or black). Define which color pairs can be used together as foreground and background, while still meeting a contrast ratio of 4.5. Define what each color should typically be used for and not be used for (text, icons, borders, page backgrounds, button backgrounds/fills, etc.).