Rich text editor

[shanthambi]

I'm building a rich text editor and want to ensure it's accessible. Could someone please clarify the exact accessibility guidelines I should follow?

Specifically, I’d like to know:

Which HTML elements to use (e.g., for headings, lists, formatting, etc.)

What ARIA roles and attributes are required or recommended

How to implement accessible toolbars and formatting buttons

Any considerations for supporting features like font family selection and bullet points

The editor uses contenteditable, and users can format text using headings, bold/italic styles, font families, and bullet/numbered lists.

Are there any official or recommended guidelines (e.g., from W3C or ARIA APG) for building a fully accessible rich text editor that supports these features?

Any help or references would be greatly appreciated!

[a11yHolli]

I appreciate the effort to make your rich text editor accessible; however, creating an accessible text editor is a huge undertaking. It sounds like you are most concerned with the content generated by the text editor being accessible, but you also need to consider the accessibility of the editing capabilities, which is extremely challenging given the number of assistive technologies and browsers you would need to support, coupled with the lack of standards for text editors. I would suggest looking at some existing open-source text editors that are already available to see if you can use them to create whatever you are trying to achieve. For example, lexical.dev is an open-source React text editor that is accessible and has the added benefit of being very small and fast.

[shanthambi]

@a11yHolli Thank you for your response. For now, I’ll use semantic buttons and radio inputs in the rich text editor without aria. I might consider switching if an official approach becomes available and thanks for the example at least i can understand.