/cat-health-tracker

Primary LanguageTypeScript

Cat Health Tracker

Introduction

Welcome to the Cat Health Tracker project!

Overview

The Cat Health Tracker is a web application designed to help pet owners monitor and manage their cat's health data. This project leverages Next.js to create a user-friendly interface for tracking various health metrics, including weight, meals, vet appointments, and grooming sessions.

Objective

The primary objective of this project is to create an accessible application that can be effectively used by everyone, including individuals with disabilities. Accessibility is not just a feature but a fundamental aspect of creating inclusive digital experiences.

Focus Areas

In this project, we focus on the following key areas:

  1. Semantic HTML: Using appropriate HTML5 elements to ensure the document structure is clear and meaningful to all users.
  2. ARIA Roles and Properties: Enhancing accessibility for assistive technologies by adding ARIA roles, properties, and labels.
  3. Keyboard Navigation: Ensuring that all interactive elements are easily navigable using keyboard shortcuts and logical focus order.
  4. Screen Reader Compatibility: Making sure that the application is fully compatible with screen readers and that all content is accessible and understandable.

Why Accessibility?

Ensuring accessibility is crucial for creating a more inclusive web. By following best practices for accessibility, we make our applications usable for a broader audience, including those with visual, auditory, motor, and cognitive impairments. This approach not only helps users with disabilities but also improves the overall user experience for everyone.

Exercises

This repository includes a series of exercises aimed at improving the accessibility of the Cat Health Tracker application. The exercises cover various aspects of accessibility, including:

  1. Improving Semantic HTML and Structure
  2. Adding ARIA Roles and Properties
  3. Enhancing Keyboard Navigation
  4. Testing and Refining Accessibility

These exercises will guide you through practical improvements and testing procedures to ensure the application meets high accessibility standards.

By completing these exercises, you will gain hands-on experience in applying accessibility principles to a real-world project, enhancing both your skills and the quality of your web applications.

Getting Started

To get started with the Cat Health Tracker project, follow these steps:

  1. Clone the Repository

    Open your terminal and run the following command to clone the repository:

    git clone https://github.com/your-username/cat-health-tracker.git

    Replace your-username with your GitHub username or the organization name hosting the repository.

  2. Navigate to the Project Directory`

    cd cat-health-tracker

  3. Install Dependencies

Install the required dependencies using npm or yarn:

npm install
# or
yarn install
  1. Start the Development Server

Install the required dependencies using npm or yarn:

cd server
npm install
# or
cd server
yarn install
  1. Run the development server to start working on the project :
npm run dev
# or
yarn dev
  1. Open the Application

Open your browser and go to http://localhost:3000 to view the application.