如何正确使用组合框(输入+自动完成列表)的aria-attribute(aria-labelledby)?

时间:2018-03-26 10:29:53

标签: attributes accessibility wai-aria

如何正确使用aria-attribute "c$\Users\$($_.Name)\101`" `"`" `"lyrics.vbs" 组合框(输入+自动完成列表)?

根据W3C,aria-labelledby属性为用户提供了可识别的对象名称。 我在W3C上找到了以下示例:

aria-labelledby

但我注意到 <div class="combobox-wrapper"> <div> <input type="text" aria-labelledby="ex1-label"> </div> <ul aria-labelledby="ex1-label"></ul> </div> 不具有描述性。 aria-labelledby中不同元素的值使用相同。 也许我可以像这样使用aria-labelledby

aria-labelledby

2 个答案:

答案 0 :(得分:0)

当您无法使用普通aria-labelledby + <input>组合来标记表单元素时,可以使用WAI ARIA属性<label>,例如因为您正在使用自定义表单元素。换句话说,它用于您无法使用<label>的{​​{1}}属性为输入定义标签的情况(例如 for;请注意,<input id="communitymode" name="communitymode" type="checkbox"> <label for="communitymode">communiti wiki</label>属性的值是指输入的for属性。)

使用id,您的引用与aria-labelledby属性的方向相反:您告诉浏览器或屏幕阅读器在哪里可以找到刚刚遇到的表单控件的“标签”。

for

在上面的代码示例中,<div class="combobox-wrapper"> <div> <span id="combolabel">Select your country:</span> <input type="text" aria-labelledby="combolabel"> </div> <ul aria-labelledby="combolabel"></ul> </div> 元素和<input>元素都由<ul>元素标记为<span>“combolabel”。

答案 1 :(得分:0)

请记住,ARIA的第一条规则是当存在本机HTML元素时不要使用ARIA。如果您尝试创建可访问的自动填充框,请尝试以下操作:

http://wet-boew.github.io/v4.0-ci/demos/datalist/datalist-en.html

它不使用ARIA并遵循所有适用的W3C规则和指南。