Accessibility issue with ordered/unordered lists in Quill v2

[javierscode]

Description

I'm upgrading Quill from v1 to v2 in my React aplication, and I noticed a significant change in how ordered and unordered lists are handled. In Quill v2, lists are always rendered as <ol>, and CSS with data-attributes determines whether they appear as ordered or unordered.

This approach causes accessibility issues in my application, as I need to ensure proper semantic HTML for assistive technologies. Screen readers and other accessibility tools rely on correct HTML structure to interpret content accurately, and forcing <ol> instead of <ul> for unordered lists is problematic.

Accessibility issue

The WCAG 2.2 Criterion 1.3.1 - Technique H48 (W3C documentation) states that lists should be correctly marked up using the appropriate HTML tags (<ol>, <ul>, <dl>) because they are not equivalent.

Even though NVDA does not announce unordered vs. ordered lists differently, and there are no distinct shortcut keys for each type, maintaining proper semantics is still a best practice for accessibility. Additionally, ARIA does not provide a way to distinguish between <ol> and <ul> (they share the same role="list"), which makes correct HTML markup even more crucial.

Questions

1. Is there any built-in way to make Quill render lists with the correct semantic tags (<ul> for unordered lists and <ol> for ordered lists) in the viewer component?
2. I found the getSemanticHTML() method, but it requires an instance of the editor attached to the DOM. Would it be possible to create a Quill instance without attaching it to the DOM and call getSemanticHTML() on every render in a React component? Or would this be an inefficient approach?
3. Are there any recommended workarounds or configuration options to achieve accessibility compliance when displaying Quill-generated content?

Expected behavior

When rendering Quill content in a read-only mode, lists should follow standard semantic HTML:

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

instead of:

<ol>
  <li data-list="bullet">a</li>
  <li data-list="bullet">b</li>
  <li data-list="bullet">c</li>
</ol>

since this breaks accessibility expectations.

Any guidance or suggestions would be highly appreciated! 🚀