Forms-and-Widgets

Description

A collection of accessibility code exercises, each focusing on a specific aspect of web accessibility. These exercises provide hands-on opportunities to practice identifying anti-patterns and implementing accessible solutions.

Getting Started

To get started with the exercises, follow these steps:

1. Clone this repository: git clone https://github.com/mdharshbarger/forms-and-widgets.git
2. Navigate to the project directory: cd a11y-exercises
3. Open your project in Visual Studio Code.
4. Install the "Live Server" extension from the Visual Studio Code marketplace.

Exercises

Identify Accessibility Barriers in a Form

Part 1: Fix the Form:

Objective: In this part of the activity, you’ll apply three key accessibility practices to improve the usability of the form for screen reader and keyboard users.

• Adding labels and associating them with inputs
• Grouping related fields
• Creating accessible error messages

Part 2: Fix the Toggle Switch

Objective: You are provided with a visually styled switch that is currently inaccessible. Your task is to make it usable with assistive technologies.

• Add Name, Role, and Value to the switch in the form
• Make it keyboard accessible