TaggedImage - React Component for Image EXIF Description

The TaggedImage component is a React component that dynamically adds an image's description (if available) from its EXIF metadata as the alt text for the image. In order for an image to have a valid alt tag, it must first be analyzed by AIA HANDICAP AI. If the image lacks EXIF metadata or an image description, it falls back to a default alt text that you can specify. This is especially useful for improving web accessibility by providing meaningful alternative text for images when EXIF data is present.

Table of Contents

• Installation
• Usage
• Props
• How It Works
• Limitations
• License

Installation

To install the TaggedImage component, you can use npm or yarn:

npm install aia-tagging-react

or

yarn add aia-tagging-react

Usage

Here is a simple example of how to use the TaggedImage component in your React project:

import React from 'react';
import TaggedImage from 'aia-tagging-react';

const App = () => {
  return (
    <div>
      <TaggedImage
        src="https://example.com/image.jpg"
        defaultAlt="Default alternative text"
        width={500}
        height={300}
        className="image-class"
      />
    </div>
  );
};

export default App;

Explanation:

• src: The URL of the image. This is the primary property used to load the image.
• defaultAlt: (optional) A fallback alt text if the EXIF description is not available.
• width and height: Define the image size in pixels.
• className: (optional) The CSS class name for the image element.

The component automatically fetches the image, reads its EXIF data, and sets the description from the EXIF metadata as the alt attribute. Note: To receive a valid alt tag, the image must first be processed by the AIA HANDICAP AI. If no description is found or the image hasn't been analyzed, it falls back to the defaultAlt value.

Props

The TaggedImage component accepts the following props:

| Prop | Type | Description | |---------------------|---------------------------------------------------|-----------------------------------------------------------------------------------------------------| | src | string | The image URL to display. This is a required prop. | | defaultAlt | string | Default alt text to use if no EXIF description is found. | | className | string | Optional className for styling the image. | | style | React.CSSProperties | Inline styles for the image element. | | width | number | The width of the image in pixels. | | height | number | The height of the image in pixels. | | alt | string | Custom alt text. If provided, this will override the EXIF description or defaultAlt. | | fill | boolean | Whether to make the image fill the container. Defaults to false. | | sizes | string | Specifies image sizes for responsive images. | | loading | "lazy" - "eager" | Defines the loading strategy for the image (lazy or eager). Default is "lazy". | | onLoad | (event: React.SyntheticEvent<HTMLImageElement, Event>) => void | Callback function when the image has loaded. | | onError | (event: React.SyntheticEvent<HTMLImageElement, Event>) => void | Callback function when there is an error loading the image. | | overrideSrc | string | If provided, this will override the src property with a new URL. | | crossOrigin | "anonymous" - "use-credentials" | Sets the cross-origin setting for the image (useful for CORS handling). | | decoding | "sync" - "async" - "auto" | Decoding strategy for the image. Defaults to "auto". | | fetchPriority | "high" - "low" - "auto" | Set the fetch priority for the image. | | referrerPolicy | "no-referrer" - "no-referrer-when-downgrade" - "origin-when-cross-origin" - "unsafe-url" | Referrer policy for the image request. | | srcSet | string | Defines multiple image sources for responsive images. | | useMap | string | Defines the usemap attribute for the image (for image maps). |

How It Works

1. Fetching the Image: When the TaggedImage component is rendered, it fetches the image using the src URL.
2. Extracting EXIF Data: After the image is fetched, the component reads the EXIF metadata using the exif-parser library. Specifically, it looks for the ImageDescription tag in the EXIF data.
3. Setting the Alt Text: If the EXIF data contains a description, it is used as the alt text for the image. If no description is available, the component defaults to the defaultAlt value (or the alt prop if provided). However, to get a valid description, the image must be analyzed by AIA HANDICAP AI first.
4. Fallback and Error Handling: If there are any issues fetching the image or parsing its EXIF data, the component logs the error and uses the fallback alt text.

Limitations

• EXIF Data Availability: Not all images contain EXIF metadata, and even if they do, the ImageDescription field may be absent. In this case, the component falls back to the provided defaultAlt or alt prop.
• Cross-Origin Restrictions: If the image is hosted on a different domain (cross-origin), make sure that the server supports CORS headers. Otherwise, the image might not load or the EXIF data may not be accessible.
• Large Images: For very large images, loading and parsing EXIF data can take longer, potentially causing delays in rendering the image with the correct alt text.
• AIA HANDICAP: Only images that have been analyzed by AIA HANDICAP AI will have a valid EXIF description. For more information on the service, visit AIA HANDICAP.
• Accuracy: While the AI aims to provide accurate descriptions, there may still be occasional inaccuracies in the alt text. The AI is continuously being improved, and these descriptions will become more accurate over time as the model evolves.

License

This project is licensed under the MIT License - see the LICENSE file for details.