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.
To get started with the exercises, follow these steps:
- Clone this repository:
git clone https://github.com/dequelabs/ILT-a11y-exercises.git
- Navigate to the project directory:
cd ILT-a11y-exercises
- Open your project in Visual Studio Code.
- Install the Live Server recommended extension from Visual Studio Code marketplace.
- Right-click on the
index.html
file and select "Open with Live Server". This will start a local web server and open theindex.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.
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.
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.
In this exercise, you will learn about the importance of responsive design and providing descriptive alt text for images to support screen readers.
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.
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.