Aria-label 为下拉列表中的 <option> 标记提供 DAP 违规
Aria-label gives a DAP violation for <option> tag in dropdown
我正在为工作中的 Angular 项目进行辅助功能测试。我们使用 JAWS 屏幕 reader。我们还使用一个插件来识别 UI 中的问题并将其报告为违规行为。我得到一个我无法解决的下拉菜单。是Accessible name does not match or contain the visible label text.
下拉菜单的代码是：
<select *ngIf="!viewMode" formControlName="group" placeholder="select" id="group" data-placement="right">
<option value="" [selected]>Select</option>
<option attr.aria-label="{{group.title}}" *ngFor="let group of records"
[ngValue]="group" data-placement="right" data-toggle="tooltip" title="{{group.title}}">
{{group.title | slice:0:30}}
<span *ngIf="group.title.length > 30">...</span>
</option>
</select>
如果整个标题不适合下拉列表的固定宽度，我们会截断 group.title 的文本并添加省略号 ...。然而，aria-label 始终分配有完整的标题。
例如。如果我们的标题是 Psychology，我们显示的最大字符数是 6。然后下拉列表将显示 Psycho...，但 aria-label 仍然是`Psychology.
我的问题是 whenever the displayed title gets truncated I get a violation as title doesn't match the aria-label。如果我删除 aria-label，屏幕 reader 只会读取显示的内容，因此它最终会将省略号读取为 dot dot dot，这是我们不想要的。我尝试在 option 标签内的 aria-label 上使用隐藏标签，但这没有用。谁能帮我解决问题？？
理想答案
您不必手动截断标签，因为这是一个纯粹的视觉工件来应对不足 space。
CSS 理想情况下应该能够自动为您处理这种情况，这样您就可以只写完整的标签而根本不关心。
CSS 可以做到这一点。 属性 被称为 text-overflow，值为 èllipsis`。
Example here
然而，很多时候，甚至在最近的浏览器中，CSS 对 <option> 的支持都非常有限且不完整。在某些浏览器中，您甚至不允许更改文本颜色。
所以，遗憾的是，应用 text-overflow: ellipsis 肯定行不通。在理想情况下，这将是迄今为止最好的解决方案。
第二个最佳答案
您不必手动截断标签。如果无法在 CSS 中自动为您完成，以防您缺少 space，
下一个最好的办法可能是重新组织您的布局，以确保您有足够的 space 来完整地看到最长的标签。
您的 aria-label 可能与可见文本不同，但通常不推荐使用。取消可访问性检查器的警告以提醒您。
不推荐，因为有几组人可能会遇到困难。
例如，同时依赖可见文本和语音合成的视力不全的人或有阅读障碍的人会阅读缩写词，但会听到完整的文本。可能会很混乱。
第三个回答
如果您确实无法重新安排布局以使所有标签以全文显示，请忽略警告，将全文保留在 aria-label 中，缩短的文本保持当前可见。
好几类人都有问题，好吧，但毕竟不是那么糟糕。如果您决定将 <select< 切换为自定义组件，那么可访问性可能会更糟。
所以我仍然强烈建议您在任何情况下都保持 <select>。盲人和键盘用户会感谢你。
但是，永远记住警告永远不会无缘无故出现。他们会指出您最好解决的潜在问题。
这绝对不是误报！
我正在为工作中的 Angular 项目进行辅助功能测试。我们使用 JAWS 屏幕 reader。我们还使用一个插件来识别 UI 中的问题并将其报告为违规行为。我得到一个我无法解决的下拉菜单。是Accessible name does not match or contain the visible label text.
下拉菜单的代码是：
<select *ngIf="!viewMode" formControlName="group" placeholder="select" id="group" data-placement="right">
<option value="" [selected]>Select</option>
<option attr.aria-label="{{group.title}}" *ngFor="let group of records"
[ngValue]="group" data-placement="right" data-toggle="tooltip" title="{{group.title}}">
{{group.title | slice:0:30}}
<span *ngIf="group.title.length > 30">...</span>
</option>
</select>
如果整个标题不适合下拉列表的固定宽度，我们会截断 group.title 的文本并添加省略号 ...。然而，aria-label 始终分配有完整的标题。
例如。如果我们的标题是 Psychology，我们显示的最大字符数是 6。然后下拉列表将显示 Psycho...，但 aria-label 仍然是`Psychology.
我的问题是 whenever the displayed title gets truncated I get a violation as title doesn't match the aria-label。如果我删除 aria-label，屏幕 reader 只会读取显示的内容，因此它最终会将省略号读取为 dot dot dot，这是我们不想要的。我尝试在 option 标签内的 aria-label 上使用隐藏标签，但这没有用。谁能帮我解决问题？？
理想答案
您不必手动截断标签，因为这是一个纯粹的视觉工件来应对不足 space。
CSS 理想情况下应该能够自动为您处理这种情况，这样您就可以只写完整的标签而根本不关心。
CSS 可以做到这一点。 属性 被称为 text-overflow，值为 èllipsis`。
Example here
然而，很多时候，甚至在最近的浏览器中，CSS 对 <option> 的支持都非常有限且不完整。在某些浏览器中，您甚至不允许更改文本颜色。
所以，遗憾的是，应用 text-overflow: ellipsis 肯定行不通。在理想情况下，这将是迄今为止最好的解决方案。
第二个最佳答案
您不必手动截断标签。如果无法在 CSS 中自动为您完成，以防您缺少 space， 下一个最好的办法可能是重新组织您的布局，以确保您有足够的 space 来完整地看到最长的标签。
您的 aria-label 可能与可见文本不同，但通常不推荐使用。取消可访问性检查器的警告以提醒您。
不推荐，因为有几组人可能会遇到困难。 例如，同时依赖可见文本和语音合成的视力不全的人或有阅读障碍的人会阅读缩写词，但会听到完整的文本。可能会很混乱。
第三个回答
如果您确实无法重新安排布局以使所有标签以全文显示，请忽略警告，将全文保留在 aria-label 中，缩短的文本保持当前可见。
好几类人都有问题，好吧，但毕竟不是那么糟糕。如果您决定将 <select< 切换为自定义组件，那么可访问性可能会更糟。
所以我仍然强烈建议您在任何情况下都保持 <select>。盲人和键盘用户会感谢你。
但是，永远记住警告永远不会无缘无故出现。他们会指出您最好解决的潜在问题。 这绝对不是误报！