Skip to content

Conversation

@Ovgodd
Copy link
Collaborator

@Ovgodd Ovgodd commented Dec 17, 2025

Purpose

Ensure that the HTML export is accessible to screen reader users by improving
its semantic structure and navigability.

Proposal

Refactor the HTML export output to follow accessibility best practices:
proper use of landmarks, headings, and roles to provide clear structure and
context for assistive technologies.

  • Improved heading hierarchy in exported HTML
  • Added landmarks and roles for better screen reader support

@Ovgodd Ovgodd requested a review from AntoLC December 17, 2025 12:29
@Ovgodd Ovgodd self-assigned this Dec 17, 2025
@github-actions
Copy link

github-actions bot commented Dec 17, 2025

Size Change: -1 B (0%)

Total Size: 4.15 MB

Filename Size Change
apps/impress/out/_next/static/1d0b0d40/_buildManifest.js 0 B -884 B (removed) 🏆
apps/impress/out/_next/static/064b11ac/_buildManifest.js 885 B +885 B (new file) 🆕

compressed-size-action

adjusted structure and semantics to ensure proper sr interpretation

Signed-off-by: Cyril <c.gromoff@gmail.com>
@Ovgodd Ovgodd marked this pull request as ready for review December 17, 2025 12:46
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add all the utility function about the html feature in a separate file like utils-html.ts ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes of course !

* - We work directly on the parsed Document so modifications are reflected before we zip files.
* - We keep the editor inner structure but upgrade the key block types to native elements.
*/
export const improveHtmlAccessibility = (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should unit test this function, I can see there is some unexpected behavior around the li tag:

Image

Here you can get a pre-made template with lot of blocks: https://www.blocknotejs.org/examples/interoperability/converting-blocks-to-pdf

Comment on lines 360 to 367
const quoteBlocks = Array.from(
body.querySelectorAll<HTMLElement>("[data-content-type='quote']"),
);
quoteBlocks.forEach((block) => {
const quote = parsedDocument.createElement('blockquote');
quote.innerHTML = block.innerHTML;
block.replaceWith(quote);
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a recession on that:
Before:
Image

After:

Image

- 🌐(backend) internationalize demo #1644
- ♿(frontend) improve accessibility:
- ♿️Improve keyboard accessibility for the document tree #1681
- ♿(frontend) make html export accessible to screen reader users #1743
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When rebase, it will have to go under "Unreleased".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants