ctobiasz / Alty

ALTY - Alt Text Generation Tool

ALTY is a web-based application that allows content writers/developers to add specific alt text for images. It provides a user-friendly interface for managing alt text and generating updated HTML code. To use ALTY, simply visit the website at https://alty.netlify.app/

Features

• Drag and drop images: Simply drag and drop images onto the ALTY web interface to start adding alt-text.
• Image preview: The dropped images are displayed along with their respective filenames. Clicking on the image, opens the image in a new tab at the natural image size. Clicking on the filename copies the image path for easy reference.
• Alt-text input: Each image is accompanied by an input box where you can enter the alt-text description.
• Download Alt Text: After the content writer/developer has provided alt-text for all the desired images, they can click the "Download Alt Text" button to generate a CSV file containing the image names and corresponding alt-text values.
• Alt-omatic for developers: Developers can utilize the Alt-omatic feature by pasting their HTML code and uploading the CSV file generated by the content writers. Upon clicking the "Generate" button, the app populates the HTML code with the corresponding alt-text values from the CSV. The updated HTML code can be copied and used with the integrated alt-text.
• Reset functionality: The app provides a reset button to clear all images and alt-text, allowing for a seamless restart.

How to Use

1. Access the ALTY web application.
2. Drag and drop the images into the designated area.
3. Enter the alt-text for each desired image using the input boxes.
4. Click the "Download Alt Text" button to generate a CSV file containing the image names and alt-text.
5. If you are a developer, navigate to the Alt-omatic section.
6. Paste your HTML code that contains the images requiring alt text into the designated area.
7. Upload the CSV file containing the alt-text values.
8. Click the "Generate" button to populate the HTML code with alt-text.
9. Copy the updated HTML code for use in your projects.

Technologies Used

• HTML5: Provides the structure and elements of the web application.
• CSS3: Styles the app for an appealing user interface.
• JavaScript: Implements interactivity and functionality.
• FileReader API: Enables reading CSV files for alt-text generation.
• LocalStorage API: Persists the state of the modal for developers.
• Netlify: Hosts the ALTY web application.

Installation

Please note that ALTY is a web-based application, and there is no need to clone or download any repository. Simply access it through the website: https://alty.netlify.app/