文字是否应该集中在可访问性上?我特别在考虑键值对 [英] Should text ever be focusable for accessibility? I'm specifically thinking about key-value pairs

问题描述

使以下内容可访问的最佳实践是什么?目前，我有以下内容:

What is the best practice for making something like the following accessible? Currently I have the following:

<div tabindex="0" aria-labelledby="key1" aria-describedby="value1">
    <label id="key1">Current User:</label>
    <span id="value1">BBRENNAN</span>
</div>

此块是否必须使用 tabindex ="0" 可聚焦?还是屏幕阅读器可以更自然地推断出这种关系?我了解屏幕阅读器通常可以查找和阅读文本，但是我不清楚如何确保传达当前用户和 BBRENNAN 之间的关系.

Is it necessary for this block to be focusable with tabindex="0"? Or can screen readers infer this relationship more naturally? I understand screen readers can usually find and read text, but it's not clear to me how to ensure that I convey the relationship between Current User and BBRENNAN.

我只是在查看定义列表，这些列表似乎更接近我的需求.您也可能会争辩说这是表格数据，应该使用表格.如果这些解决方案确实是最佳实践，那完全可以，但是我喜欢 aria-labelledby 和 aria- describeby 的一件事是，专注于外部div可以很好地读取整个内容NVDA.因此上面的内容应为当前用户，BBRENNAN".

I was just looking into definition lists, which seem closer to what I need. You could also perhaps argue that this is tabular data, and should use a table. Totally fine if these solutions are indeed the best practices, but one thing I like about aria-labelledby and aria-describedby is that focusing the outer div reads the whole thing nicely in NVDA. So the above would read as "Current User, BBRENNAN."

由于某种原因，定义列表被读为当前用户有2个项目的列表".表格只是让我使用箭头键在单元格之间移动阅读器，这也达不到我上面所描述的.链接此主题的5年主题: https://webaim.org/discussion/mail_thread?thread = 7089

Definition lists for some reason read as "List with 2 items, current user." Tables just let me use arrow keys to move the reader between cells, which also doesn't achieve what I describe above. Link for a 5 year old thread on this very topic: https://webaim.org/discussion/mail_thread?thread=7089

推荐答案

一般规则是，只有交互式元素才应该是可Tabable的.因此，除非您的用户列表项是可单击的，否则您应该删除tabindex.可选项太多会导致不必要地导航您的站点.以下指南为键盘导航提供了一些不错的建议:

The general rule is only interactive elements should be tabbable. So unless your user list item is clickable, then you should remove the tabindex. Having too many things tabbable can make navigating your site unnecessarily difficult. Here's a guide that has some good recommendations for keyboard navigation:

https://webaim.org/techniques/keyboard/

有眼力的鼠标用户能够直观地浏览网页并直接单击任何项​​目.键盘用户必须按Tab键或其他导航键才能浏览用户要激活的项目之前的交互式元素.冗长的导航标签可能对行动不便的用户特别有要求.

Sighted mouse users are able to visually scan a web page and directly click on any item. Keyboard users must press the Tab key or other navigation keys to navigate through the interactive elements that precede the item the user wants to activate. Tabbing through lengthy navigation may be particularly demanding for users with motor disabilities.

这篇关于文字是否应该集中在可访问性上?我特别在考虑键值对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！