AUIG: Accessible User Interface Guidelines

Visit the Website

---

Table of Contents

• Overview
• Features
• Tech Stack
• Installation
• Usage
• Contributing
• License
• Contact

---

Overview

AUIG provides comprehensive guidelines for designing accessible and inclusive user interfaces. It empowers designers and developers to create interfaces that cater to all users, ensuring usability and compliance with accessibility standards.

Key Components

• Design Principles: Foundational guidelines for accessible UI design.
• Component Guidelines: Best practices for accessible UI elements.
• Responsive Design: Ensures usability across devices.
• Interactive Features: Enhancements like theme toggles and font adjustments.
• Resources: Additional tools and references.

---

Features

• WCAG 2.1 AA Compliance: Adheres to recognized accessibility standards.
• Responsive Layout: Optimized for desktops, tablets, and mobiles.
• Customizable Preferences: Theme and font controls for enhanced user experience.
• Static Content Generation: Efficient and SEO-friendly builds.

---

Tech Stack

• HTML5 & CSS3: Semantic structure and styling.
• JavaScript: Interactive functionalities.
• Node.js: Local server and build automation.
• PrismJS: Syntax highlighting.
• Web Standards: Compliance with accessibility guidelines.

---

Installation

1. Clone the Repository
   Clone the repository to your local machine:

   git clone https://github.com/garethslinn/auig.git
   cd auig

2. Install Dependencies
   Install all required dependencies:

   npm install

   NOTE: in both root and prerender folder

---

Usage

Start the Development Server

Run the following command (in the root) to start the server and watch for changes:

npm start

The project will be available at http://localhost:3000.

Workflow

• Important: If you want to change the content of the pages, make updates in the components templates only. The ./pages, ./articles and root HTML files are automatically generated each time the component files are changed.
• The project automatically rebuilds when changes are detected in the components, scripts, images, or styles directories.
• Static files are served from the ./pages and ./articles directory.

---

Contributing

Contributions are welcome! Here’s how you can help:

1. Fork the Repository

2. Create a New Branch
   Create a branch for your feature or bug fix:

   git checkout -b feature/YourFeature

3. Make Changes and Commit
   Commit your changes with a descriptive message:

   git commit -m "Add feature"

4. Push and Submit a Pull Request
   Push your branch and submit a pull request:

   git push origin feature/YourFeature

Ensure your contributions align with project standards and enhance accessibility.

---

License

This project is licensed under the License.

---

Contact

• Lead Developer: Gareth Slinn
• Email: [email protected]
• Website: www.auig.org

---

Quick Start

1. Clone the repo.
2. Run npm install in both root and prerender folder.
3. Start the project with npm start.