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:
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.
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.
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:
Radio Button 1: Set an Alternative Text
Radio Button 2: Mark as Decorative
isDecorative
to true or setsrole="presentation"
next toalt=""
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.