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.

[himanshupathak95]

I was looking into this issue, and given its significance for a11y, I'm keen to move this forward if there's a consensus on the direction.

From the discussion in #16909, my understanding is that moving the alt text input inline rather than keeping it confined to the sidebar was discussed. The approach proposed here suggests enhancing the Block Settings sidebar to allow input if the image is decorative and needs an alt text.

I’d be willing to pick this one up if this is something we consider improving in the coming releases.

[jhmonroe]

FYI just opened a related issue "Alt Text Metadata is not imported but Description is": #71395