javascript - 创建一个可访问的列表，其中每个 li 元素都有一些复杂的内容

Question

所以我正在创建一个 Web 组件，我的代码现在就是这样

        <ul class="list-with-arrow${this.inverse ? '--inverse' : ''}">
        ${this.listData.map((item, index) => {
            return item.link ? html`
                ${index === 0 ? html`<hr class="list-with-arrow__bottom-line${this.inverse ? '--inverse' : ''}" />` : ''}
                <div class="list-with-arrow__container">
                    <a class="list-with-arrow__label-container${this.inverse ? '--inverse' : ''}" href=${item.link} @click=${this.handleItemClick}>  
                        <li data-index="${index}"> 
                            ${item.title ? html`<h5 class="list-with-arrow__title${this.inverse ? '--inverse' : ''}">${item.title}</h5>` : ''}
                            <h4 inverse class="list-with-arrow__label${this.inverse ? '--inverse' : ''}">${item.label}</h4>
                        </li>  
                        <div>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99999 4.93933L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L8.99999 19.0607L7.93933 18L13.9393 12L7.93933 5.99999L8.99999 4.93933Z" fill="black"/>
                            </svg>
                        </div>
                    </a>
                </div>

抱歉，如果有点乱，我正在使用 lit 元素。
问题是，当我使用屏幕阅读器对其进行测试时，它只会读取其中的元素/文本，但屏幕阅读器在阅读列表时的主要行为类似于“包含 4 个元素的列表”，当您离开列表时'会说“离开名单”。
但由于我在其中使用了一些其他内容，而不仅仅是纯文本，SR 将只读取其中的文本，当我点击其他任何地方时，它也不会说“离开列表”。
有谁知道如何制作一个包含这种绑定(bind)内容的可访问列表？

Answer 1

您的 HTML 无效，唯一可以包含在 <ul> 中的内容是 <li>作为直系后代。
因此，如果您更改第一项，它会返回 <li>这将解决大多数问题。确保 item.link也是 <li>里面有内容。
但是我确实注意到您有第二个 <li>在正文 HTML 中。 (<li data-index="${index}">)
这作为 <li> 也是无效的。必须有 <ul>或 <ol>作为 parent 。我会把它换成 <div>取而代之(或者更好，因为它似乎只包含 4 或 5 级标题，如果您不需要 data-index，请移除外部容器并使用 CSS 定位它。)
生成的输出应该是这样的(正如你所说的有点困惑，并且缺少一些信息):

<ul class="list-with-arrow">
    <!-- outputted a list item before any of the other content -->
    <li>
        <hr class="list-with-arrow__bottom-line">
        <div class="list-with-arrow__container">
            <a class="list-with-arrow__label-container href="link"> 
                <!--- swapped the inner list item to a div --> 
                <div data-index="1"> 
                    <h5 class="list-with-arrow__title">Title</h5>
                </div>  
                <div>
                    <!-- notice I added focusable="false" and aria-hidden="true" to the SVG to avoid it being announced as an image without a description. -->
                    <!-- if this does contain useful information you should instead add a `<title>` element that describes the image -->
                    <svg focusable="false" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.99999 4.93933L15.5303 11.4697C15.8232 11.7626 15.8232 12.2374 15.5303 12.5303L8.99999 19.0607L7.93933 18L13.9393 12L7.93933 5.99999L8.99999 4.93933Z" fill="black"/>
                    </svg>
                </div>
            </a>
        </div>
    </li>
[...further items]
</ul>

我还在 SVG 上做了一些注释，说明如何根据屏幕阅读器是否包含有用的信息来处理它。