ILT a11y code exercises

Description

A collection of accessibility code exercises. Each exercise focuses on a specific aspect of web accessibility providing 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/dequelabs/ILT-a11y-exercises.git
2. Navigate to the project directory: cd ILT-a11y-exercises
3. Open your project in Visual Studio Code.
4. Install the Live Server recommended extension from Visual Studio Code marketplace.
5. Right-click on the index.html file and select "Open with Live Server". This will start a local web server and open the index.html file in your default browser.

As with all things, there is more than one way to view the index.html file. Clicking on index.html will also open the web page in your default browser. You may also visit: a11y exercises on Github Pages to access the exercises.

Exercises

Keyboard Accessibility

In this exercise, you will explore techniques for making your web pages keyboard accessible, ensuring that users can navigate and interact with your content using only a keyboard. All interactive elements (links, buttons, and articles) are accessible via keyboard navigation with clear focus indicators for all interactive elements to improve usability for keyboard users.

Semantic HTML

In this exercise, you will learn how to use semantic HTML elements to improve the accessibility and structure of your web pages. Proper use of semantic HTML elements like <header>, <nav>, <main>, <section>, <article>, and <footer> to improve accessibility and SEO.

Images & Alt Text

In this exercise, you will learn about the importance of responsive design and providing descriptive alt text for images to support screen readers.

Data Tables

In this exercise, you will practice creating accessible tables, including proper table structure, headers, and captions, to ensure that tabular data is presented in an organized and understandable manner.

Accessible Forms

In this exercise, you will learn how to create accessible forms, including proper labeling, error handling, and focus management, to ensure that all users, including those using assistive technologies, can easily interact with your forms.