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

所以我正在创建一个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>

${this.listData.map（（项，索引）=>{
return item.link？html`
${index==0？html`
''：''

抱歉，如果有点混乱，我使用的是lit元素。 问题是，当我用屏幕阅读器测试它时，它只会读取其中的元素/文本，但屏幕阅读器在读取列表时的主要行为类似于“包含4项的列表”，当你离开列表时，它会说“离开列表”。 但是，由于我在其中使用了一些其他内容，而不仅仅是纯文本，SR将只读取其中的文本，当我单击其他任何位置时，它也不会说“离开列表”。

---

有人知道如何制作一个包含这种绑定内容的可访问列表吗？

您的HTML是无效的，在

中唯一可以包含的内容是作为直接后代的

同样，如果您更改第一个项目，它将返回一个
，这将解决大多数问题。请确保
项目.link
也是一个包含内容的

但是我注意到，在主体HTML中还有第二个
（
）

这也是无效的，因为
必须有一个
或
作为父级。我会将其替换为
（或者更好，因为它似乎只包含标题级别4或5，如果不需要
数据索引，请移除外部容器并使用CSS定位它）

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





[……其他项目]


我还对SVG做了一些说明，说明了如何根据屏幕阅读器是否包含有用的信息来处理它。
你说得对！当我将div放在li中时，SR会正常读取它！非常感谢！没问题，很高兴它有帮助！我相信
可聚焦
不是一个已知的属性，我找不到任何东西关于它。你是说
tabindex=“-1”
？它是一个仅限于IE的属性，我刚才也很难找到任何关于它的真正文档。但是如果你在IE中尝试，你会发现你可以在没有该属性的情况下用tab键连接到内联SVG，这就是它所阻止的。你可以使用
tabindex=“-1”
看看这在IE中是否管用——我偷偷怀疑它不管用。