Skip to content

README.md

Latest commit

 

History

History
55 lines (37 loc) · 2.23 KB

README.md

File metadata and controls

55 lines (37 loc) · 2.23 KB
Raw

Accessible Forms UI

This project demonstrates an accessible form UI built with HTML and Tailwind CSS. It focuses on implementing best practices for form accessibility, including proper labeling, ARIA attributes, and visual cues.

Overview

This project consists of the following files:

  • index.html: The main HTML file that structures the accessible form UI.
  • src/output.css: The CSS file generated by Tailwind CSS, which styles the form.
  • src/input.css: The source CSS file for Tailwind CSS.
  • package.json and package-lock.json: npm package manifest files that hold metadata of the project.
  • .gitignore: specifies intentionally untracked files that Git should ignore.

Features

  • Semantic HTML: Uses semantic HTML elements for better structure and accessibility.
  • Proper Labeling: Implements clear and descriptive labels for all form fields.
  • ARIA Attributes: Utilizes ARIA attributes to enhance accessibility for screen readers.
  • Tailwind CSS: Leverages Tailwind CSS for styling and responsive design.
  • Password Visibility Toggle: Includes a JavaScript function to toggle password visibility.
  • Visual Feedback: Provides visual feedback for form validation and errors.

Technologies Used

  • HTML5
  • Tailwind CSS
  • JavaScript
  • ARIA Attributes

Usage

  1. Clone the repository:

    git clone [https://github.com/TheRealSaiTama/SimpleHTML/tree/main/AccessibleFormsUI]

  2. Navigate to the AccessibleFormsUI directory:

    cd simpleHTML/AccessibleFormsUI

  3. Open the index.html file in your web browser to view the accessible form UI.

Customization

  • Content: Modify the HTML content within the index.html file to add or edit form fields.
  • Styling: Customize the appearance of the form by modifying the Tailwind CSS classes in the index.html file or by editing the src/input.css and rebuilding using Tailwind CLI.
  • Functionality: Implement JavaScript to handle form validation, submission, and other dynamic behavior.

License

This project is licensed under the [PUBLIC] - see the LICENSE file in the main repository for details.