Skip to content

Conversation

Ovgodd
Copy link
Contributor

@Ovgodd Ovgodd commented Aug 14, 2025

Title

Add AccessibleImageBlock for decorative images (alt="", role="presentation", aria-hidden, tabindex)

Why
Avoiding screen reader to read alt,
RGAA 1.2 criterion

Description

This PR introduces a reusable opt‑in image block, AccessibleImageBlock, exported from @blocknote/core. It renders images as decorative by default (alt="") and sets role="presentation", aria-hidden="true", and tabindex="-1". The homepage demo is updated to use this block via a schema override.

Details

  • Added AccessibleImageBlock to core:
  • File: packages/core/src/blocks/ImageBlockContent/AccessibleImageBlock.ts
  • Exported via packages/core/src/index.ts
  • Implementation wraps imageBlockConfig with a custom render that:
  • Sets alt="" (decorative image per WCAG 1.1.1)
  • Sets role="presentation" and aria-hidden="true" so assistive tech ignores the image
  • Sets tabindex="-1" so the image isn’t focusable
  • Reuses existing imageParse and imageToExternalHTML

Demo integration:
docs/app/(home)/hero/DemoEditor.tsx overrides the schema to use AccessibleImageBlock for the image block type

Usage :

Override the image block in your schema:

import { BlockNoteSchema, defaultBlockSpecs, AccessibleImageBlock } from '@blocknote/core';

const schema = BlockNoteSchema.create({
  blockSpecs: {
    ...defaultBlockSpecs,
    image: AccessibleImageBlock, // alt="" by default
  },
});

React:

import { useCreateBlockNote } from '@blocknote/react';
const editor = useCreateBlockNote({ schema });

Vanilla:
React:

import { useCreateBlockNote } from '@blocknote/core';
const editor = useCreateBlockNote({ schema });

Copy link

vercel bot commented Aug 14, 2025

@Ovgodd is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

@nperez0111
Copy link
Contributor

@Ovgodd, any reason that we would not just apply this to the image block instead of creating a separate block for this?

I would think that these are pretty sane defaults for an image block, in the future we can add optional props to make these configurable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants