npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cli-a11y-ai

v1.4.0

Published

A CLI tool to enhance web accessibility by auto-generating descriptive alt text img tags in HTML, TSX, JSX, JS, TS, MD, and MDX files using AI technology.

Downloads

10

Readme

Table of Contents

Introduction

cli-a11y-ai is a command-line tool designed to automatically add alternative text (alt text) to image tags in files. It scans HTML, TSX, JSX, JS, TS, MD, and MDX files, identifying images without alt attributes and uses the BLIP (Bootstrapping Language-Image Pre-training) AI model to generate relevant descriptions, enhancing both accessibility and SEO.

Features

  • Accessibility Improvement: Adds alt text to images, making web content more accessible to users with visual impairments.
  • SEO Enhancement: Helps in better indexing of images by search engines.
  • Developer Productivity: Automates the repetitive task of writing alt text, saving time for developers.

Installation

You can install cli-a11y-ai globally using npm:

npm install -g cli-a11y-ai

Or with Yarn:

yarn global add cli-a11y-ai

API Key Requirement

cli-a11y-ai requires an API key from Replicate to function. You can obtain an API key by signing up on the website.

Usage

To use the tool in your project, navigate to your project directory and run:

cli-a11y-ai

With an API Key

If you have a Replicate API key, you can pass it as a command-line argument:

cli-a11y-ai -k YOUR_API_KEY

Command Options

  • -k, --api-key <key>: Specifies the API key for the Replicate service.

Model Accuracy and Limitations

The accuracy of alt text generation depends on the AI model provided by Replicate. While the model strives for accuracy, it's important to review the generated alt texts as they may not always perfectly describe the image content.

Future Scope

Future versions plan to extend functionality to support different types of image tags (e.g., <image>, <Image>) and integrate more sophisticated AI models for alt text generation. It can also be extended to provide text suggestions for other accessibility attributes such as aria-label and aria-labelledby.

Contributing

Your contributions are welcome! Please read our Contributing Guidelines for more information on how to get involved.

License

cli-a11y-ai is MIT licensed. See the LICENSE file for details.