Enhanced Alt Text Management for Improved Accessibility

[huubl]

What problem does this address?

The current implementation of the Gutenberg editor allows users to add images without requiring alt text, leading to potential accessibility issues. Leaving the alt text field blank for images that should have descriptions can result in a poor experience for users relying on screen readers.

What is your proposed solution?

Enhance the Alt Text in the block settings sidebar to be similar to Mozilla's approach (as shown in the image below) by incorporating the following features:

1. Radio Button 1: Set an Alternative Text

   • Text Field: A text field for entering custom alt text. If this field is left blank, a warning message should appear beneath the field, indicating that alt text is required for accessibility.
   • Visual Indicator: Include a red asterisk (*) next to the label "Set an Alternative Text" to denote that this field is mandatory.

2. Radio Button 2: Mark as Decorative

   • Allows users to designate the image as decorative, which either sets a block attribute isDecorative to true or sets role="presentation" next to alt="" to mark the image as decorative.

By implementing a warning for blank alt text, this solution ensures that users are reminded to provide appropriate descriptions, thereby improving accessibility and compliance with best practices.

[Mamaduka]

Warnings for empty alt text was proposed in #16909.