-
-
Notifications
You must be signed in to change notification settings - Fork 621
Open
Labels
enhancementNew feature or requestNew feature or request
Description
Is your feature request related to a problem? Please describe.
When adding a caption to an image in BlockNote, the caption currently fails to meet WCAG criterion
The issue is that the caption is not semantically associated with its image.
Expected behavior
The <figure>
element should wrap both the <img>
and its caption (<figcaption>
), ensuring a proper semantic relationship.
Describe the solution you'd like
- Use
<figure>
and<figcaption>
for images with captions. - If a caption is present:
- Apply the caption as the
alt
text for the image. - Keep the
<figcaption>
as visible content.
- Apply the caption as the
- If no caption is present:
- Use an empty
alt=""
. - Mark the image as decorative with
role="presentation"
andaria-hidden="true"
.
- Use an empty
Describe alternatives you've considered
- Keeping the
<p>
caption: rejected, as it does not satisfy WCAG requirements. - Using
aria-describedby
: possible fallback, but less semantic than the<figure>/<figcaption>
solution.
Additional context
Actual structure :

Example of expected structure:
<figure class="bn-file-block-content-wrapper" role="img" aria-label="Image: Example caption">
<img src="..." alt="Example caption" />
<figcaption class="bn-file-caption">Example caption</figcaption>
</figure>
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or request