Dog Catalog Accessibility Exercise

Project Overview

This project is a front-end-only React application where you can manage a catalog of dogs. The application includes the following pages:

1. Catalog Page: Displays cards with dogs. Each card contains the dog’s name and picture.
2. Manage Page: Allows you to add new dogs to the catalog.
3. About Page: Contains useful links for this exercise.

Live Demo

You can access the live version of the app using the link below:

• Netlify Deployment: Dog Catalog on Netlify

Development Environment

This application was developed and tested on a MacBook. It was also tested using both the Lighthouse Chrome extension and Axe DevTools to ensure it complies with WCAG 2.2 accessibility standards.

If you encounter any platform-specific issues, please consider checking compatibility on your system. Feel free to open an issue in the repository for further assistance.

Instructions for Building and Running the Application`

1. Install dependencies:

   npm install

2. Run the application:

   npm start

3. The app should now be running on http://localhost:3000.

Accessibility Guidelines

The primary goal of this exercise is to ensure that the application complies with WCAG 2.2 standards. Each page has been reviewed for accessibility issues, and the following improvements have been implemented:

• Semantic HTML: Used appropriate elements (like <article>, <button>, and <ul>) to enhance the meaning and structure of the content.

• Color Contrast: Adjusted colors to meet minimum contrast ratios.

• Alternative Text: Added meaningful alt attributes to images for better screen reader support.

• Forms: Labeled all form elements appropriately.

• Navigation: Improved navigation with keyboard accessibility and consistent focus indicators.

• Font Size and Responsive Design: Ensured fonts are resizable and mobile-friendly.

For more details on the WCAG guidelines, refer to the following links:

• Links: WCAG 2.2 Links Guideline
• Lists: WCAG 2.2 Lists Guideline
• Headings: WCAG 2.2 Headings Guideline
• ARIA: WCAG 2.2 ARIA Guideline
• Alternative Text: WCAG 2.2 Alternative Text Guideline
• Colors: WCAG 2.2 Color Contrast Guideline
• Forms: WCAG 2.2 Forms Guideline
• Navigation: WCAG 2.2 Navigation Guideline
• Font Size: WCAG 2.2 Font Sizing Guideline