Description
This plugin enhances the accessibility of image blocks in the WordPress block editor by converting the wrapping <figure> tags to <div> tags when the image has an empty alt attribute. Additionally, it hides the caption for images with empty alt text on the frontend.
Key features:
– Converts <figure> tags to <div> tags for images with empty alt text
– Hides captions for images with empty alt text on the frontend (output a warning to the editor)
– Works dynamically without modifying stored content
Images that are purely decorative and lack an alt attribute do not contribute directly to the understanding of the content, and therefore, wrapping them in a <figure> element is not appropriate.
By replacing <figure> tags with <div> tags for images missing alt text, this plugin ensures proper HTML semantics. <div> elements are generic containers without implicit meaning, making them suitable for presenting images without associated descriptions.
Installation
There are two ways to install the “Empty Alt Image Container Swap” plugin:
-
Upload and Install Manually
- Download the plugin ZIP file to your computer.
- Log in to your WordPress admin dashboard.
- Navigate to Plugins > Add New > Upload Plugin.
- Click “Choose File” and select the downloaded ZIP file.
- Click “Install Now” to upload and install the plugin.
- Once installed, click “Activate Plugin” to activate it.
-
Install from WordPress.org Directory
- Log in to your WordPress admin dashboard.
- Navigate to Plugins > Add New.
- Search for “Empty Alt Image Container Swap” in the search field.
- Find the plugin in the results and click “Install Now”.
- Once installed, click “Activate Plugin” to activate it.
After activating the plugin through either method, it will automatically convert <figure> tags to <div> tags for image blocks with missing alt text when rendering pages. No further configuration is required.
For best accessibility practices, it’s recommended to provide descriptive alt text for all images. However, if you forget or choose not to add alt text for certain images, this plugin ensures proper markup by using <div> containers instead of <figure>.
FAQ
-
What happens if I deactivate the plugin?
-
When you deactivate the plugin, all image blocks will immediately revert to their original state. The plugin does not make any permanent changes to your content, so you don’t need to update or edit anything after deactivation.
-
Captions are typically used to provide additional context or information about an image. For decorative images (those with empty alt text), captions are usually unnecessary and may even cause confusion, which is why they are hidden.
-
Can I still add captions to images with empty alt text in the editor?
-
Yes, you can still add captions to images with empty alt text in the editor. However, these captions will not be displayed on the frontend while the plugin is active.
-
Does this plugin modify my database or stored content?
-
No, this plugin does not make any changes to your database or stored content. It works dynamically when pages are rendered, which means your original content remains intact.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Empty Alt Image Container Swap” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Empty Alt Image Container Swap” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0
- Added feature to hide captions for images with empty alt text on the frontend
- Improved code for handling empty alt text cases
- Updated plugin to work dynamically without modifying stored content
1.0.4
- Initial release