Show decorative bookmarklet

Article: ALT LEFT

Show Decorative

Paul J memorial ARIA meme

Before running the bookmarklet the image is not identified by JAWS and Picture Smart is not able to provide a description, after running the bookmarklet it is. JAWS Picture Smart is able to provide a description.

Bookmarklet Documentation

Overview

This bookmarklet modifies the attributes of <img> elements and elements with role="img" on a webpage to ensure they are accessible and labeled as decorative images. It performs the following actions:

1. Removes alt, aria-hidden, and role="presentation" attributes if present.
2. Adds or updates the aria-label attribute to include an incremental value followed by "decorative".
3. Ensures that elements without alt, aria-hidden, or role attributes are given role="img" and an aria-label.

Actions Performed

1. Skip Images with Non-empty alt Attribute:

   • If an <img> element has a non-empty alt attribute, it is skipped and not treated as decorative.

2. Remove Attributes:

   • If an <img> element or an element with role="img" has the alt or aria-hidden attributes (with empty alt), they are removed.
   • If an <img> element or an element with role="img" has role="presentation", it is changed to role="img".

3. Update aria-label:

   • If an element has an aria-label, it is updated to include an incremental value, the image size description ("very small", "small", "medium", "large"), followed by "decorative".
   • If the element has no aria-label, it is set with an incremental value, the image size description, followed by "decorative".

4. Add role="img" and aria-label:

   • If an <img> or <svg> element has no alt, aria-hidden, or role attributes, role="img" and an aria-label with an incremental value, the image size description, followed by "decorative" are added.

5. Alert User:

   • After processing all relevant elements, the bookmarklet displays an alert showing the number of decorative images found and updated.