创建一个可访问的列表，其中每个 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>

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

Answer 1

您的 HTML 无效，<ul> 中唯一可以包含的是 <li> 作为直系后代。

因此，如果您将第一项 returns 更改为 <li>，这将解决大多数问题。确保 item.link 也是一个包含内容的 <li>。

但是我确实注意到您在 body HTML 中还有第二个 <li>。 (<li data-index="${index}">)

这也是无效的，因为 <li> 必须有 <ul> 或 <ol> 作为 parent。我会把它换成 <div>（或者更好，因为它似乎只包含标题级别 4 或 5，如果不需要，请移除外部容器并使用 CSS 定位它data-index.)

生成的输出应该是类似这样的（正如你所说，它有点乱，缺少一些信息）：

<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 上做了一些笔记，说明如何根据屏幕阅读器是否包含有用信息来处理它。

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

Create a accessible list where each li element has some complex content inside

html

javascript

css

accessibility