Chosen: 选择的可访问性问题

该讨论中的相关部分：

太多需要工作了。 似乎没有考虑可访问性
全部都在这个小部件中，因此需要大量的 WAI-ARIA 和 JS 工作来*
尝试 * 使其符合 WCAG 2.0。

从 FF6 / JAWS12 的 30 秒评论来看，最大的问题是
组件表示为输入 type=text 后跟无序列表
用户需要导航过去的所有选项（国家/地区为 243 个）
甚至忽略该字段。

对于初学者来说，搜索文本字段可以使用标签，但这很容易修复。

一个更大的问题是生成的列表项中没有锚点……如果屏幕阅读器用户知道列表项的用途，他们可以采取行动吗？

这是一个非常好的插件！ 我真的很喜欢这个功能。
未来会有更好的可访问性吗？ 添加 WAI-ARIA 使其符合 WCAG 2.0？？？

我刚刚在 thefilamentsgroups 的网站上阅读了这篇文章。 ARIA 角色可以适用于 Chosen：
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

例如：选择的结果 UL 会将 role="menu" aria-activedescendant="active-menuitem" 应用于它们，结果<li>将具有 role="menuitem"。
选择下拉列表中的搜索框可能也需要某种 ARIA 角色？

@dotdreaming您指出了正确的文档，但您提到的角色并不完全正确。

我认为应该使用以下角色：

• 组合框。
• 选项

我认为如果有人真的深入研究WAI-ARIA 文档并将其应用于选择的

如果我能找到时间，我可以自己做。 看起来不是很难做到。

有没有让 ARIA 加入这个项目的动向？

即使它确实适用于辅助技术，也需要进行测试以确保它也适用于仅使用键盘的用户。

顺便说一句，这只是一种检查可访问性改进的简单方法，但 WAVE 确定了一些应该清理的非常基本的东西 -> http://wave.webaim.org/report?url=http%3A% 2F%2Fharvesthq.github.com%2Fchosen%2F&js=2

任何这些可访问性问题已得到解决？ 我真的很喜欢在我们的主要大学网站上使用它，但这些可访问性问题让我感到厌烦

+1 - 我们收到了一位盲人用户的反馈，称选择下拉列表很难使用，而且他们在选择选项时遇到困难。 他们使用 JAWS 14 作为他们的屏幕阅读器。

尝试仅使用键盘进行导航。 选择项目非常直观（向下打开新项目的列表，向上/向下导航列表，esc 关闭列表，回车选择）。 从多选中删除项目很简单（退格），但清除单选下拉菜单会带来更多挑战。 看起来，选择了一个项目后，我可以再次按下以打开列表，然后向上导航直到没有选择任何选项（如果您的第一个项目像示例一样为空白，则很像正常的下拉列表），但我无法按 Enter 键选择空选项。 某些完全取消选择选项（或至少是空白默认选项）的方法将非常有用。

也不确定这是否值得，但我注意到数据仍然存储在隐藏的选择控件中（我假设这是它传递到表单的方式）。 更改选择的更改时，它可能是值得更新的，如果这将从WCAG满足4.1.2的标准，我正在辩论，因为UA可以以编程方式与选择控制相互作用，我们可以作为立面进行互动。出于可访问性的目的。

对于第二部分，即使您以编程方式更改选择控件的值以更新所选内容，我们也需要触发listz:updated 。
这是必需的，因为当值以编程方式更改时浏览器不会触发事件以让 Chosen 知道它（并且他们正在这样做，我们仍然必须避免无限循环，因为我们也在以编程方式更改它）

今天我将研究添加可访问性。 @marklagendijk我认为你提到的最好的

这可能有帮助，也可能没有，但我们有严格的可访问性指导方针要遵循，并且在 1.0.0 版中，我们客户的可访问性测试人员返回了以下评论：

1. 与“标签”关联的“选择”显示：无； 所以
   “标签”实际上是孤立的。 'div class="chosen-container-single"' 需要
   它作为表单控件的位置没有可编程的可访问名称或标签。

2.在人造下拉菜单上没有明显的焦点。

1. 人造下拉列表中的链接没有明显的焦点。

我将它与 Drupal Chosen 模块结合使用。 我们还有一个盲测者，他注意到一旦输入，他就没有意识到可以输入，也没有返回结果，包括“未找到结果”。

@marklagendijk
在这个问题上的任何进展。 我正在考虑重新引入将 Chosen 添加到 Drupal 核心的问题，这是主要的阻止程序。

我在这里找到了一个很好的例子来说明如何做到这一点：
http://cookiecrook.com/test/aria/multiselect/listbox.html
这是 javascript： http :

我相信这几乎完全映射到基本选择的功能。使用列表框和多选 aria 属性实现看起来非常简单
http://www.w3.org/TR/wai-aria/roles#listbox
http://www.w3.org/TR/wai-aria/states_and_properties#aria -multiselectable

我会自己做一个补丁，但我对 js 不那么热衷。

我上面链接的 PR 通过一种更简单的方法提供了一个解决方案，该方法以渐进增强原则为中心，而不是“深入”从当前选择的代码库中制作一个完全可访问的小部件。 我欢迎任何和所有反馈。

为什么在 IE8 仍然不能正确支持 ARIA 的情况下专注于它？ 不幸的是，这个 5 岁的浏览器仍然在普通浏览器的列表中。 这意味着在进行可访问性扫描时，依赖于 ARIA 的实现将失败。

为什么不使用简单地禁用所有选择并为用户提供原始选择的回退方法？ 这可以通过添加一个（隐藏）链接来实现，该链接将使用一小段禁用所选的 javascript 代码。

有关 IE8 ARIA 支持的资源： http :

使用 IE8 时，您可以只进行浏览器/功能检测，而不使用 Chosen。

@Daniel15这可能更容易解决。 感谢分享您的想法。 在我的帖子中，我只是想指出实现 ARIA（目前）并不意味着它可以访问并准备好用于需要符合 WCAG 2.0 的应用程序。

很想看到这个工作。 屏幕阅读器和仅使用键盘的用户确实需要访问这些字段。 我不太关心 IE8，但至少现代浏览器的解决方案是可以接受的。 我非常喜欢 IE8 后备的想法。 看起来有两个不错的 PR - 我很想看到它们中的任何一个合并。

请对此大加+1

+1 (+) 我们需要在 Chosen 中有这个。 这是个问题

咏叹调标签（属性）

定义标记当前元素的字符串值。 另见 aria-labelledby。

aria-label 的用途与 aria-labelledby 的用途相同。 它为用户提供了一个可识别的对象名称。 标签最常见的可访问性 API 映射是可访问性名称属性。

如果标签文本在屏幕上可见，作者应该使用 aria-labelledby 而不应使用 aria-label。 可能存在无法根据元素内容以编程方式确定元素名称的情况，并且在某些情况下，提供可见标签不是所需的用户体验。 大多数宿主语言提供可用于命名元素的属性（例如 HTML [HTML] 中的标题属性），但这可能会显示浏览器工具提示。 在不需要可见标签或可见工具提示的情况下，作者可以使用 aria-label 设置元素的可访问名称。 在计算可访问名称属性时，用户代理优先使用 aria-labelledby 而不是 aria-label。

@Natshah你能用这个改变做一个拉取请求吗？

@Natshah实际上，您能否查看https://github.com/harvesthq/chosen/pull/2047以查看它是否以正确的方式实施？

你好，

我在此链接中为我的案例修复了此问题
https://www.drupal.org/node/2384865

谢谢。

奖励:)

是的。 那什么应该像下面的代码一样。 .

      if (this.is_multiple) {
        this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>');
      } else {
        this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" aria-label="' + this.form_field_jq.parents("label") +'"  autocomplete="off" /></div><ul class="chosen-results"></ul></div>');
      }

但是我们可以使用这个代码：

        $(".views-exposed-widget").each(function( index, element ) {
           $(this).find('.form-type-select .chosen-container input').attr("aria-label" ,$.trim($(this).find('label').text()));
        });

谢谢。

奖励:)

这事有进一步更新吗？ 我们最近实施了选择，并从使用辅助技术“Jaws”的用户那里得到反馈，他们根本无法使用选择字段。

似乎是一个需要研究的重要问题。 这方面有任何动静吗？

我一无所知，不幸的是，鉴于辅助技术与浏览器和操作系统的大量组合，很难复制问题......通常只要你可以键盘导航+你有正确的 ARIA 实现，它应该在大多数情况下工作。

为了快速修复，我采取了确保屏幕阅读器至少可以使用原始选择字段的方法。 为此，我没有隐藏 select 元素，而是在生成的所选容器上添加screenreaders-only类和aria-hidden:true 。

所以，在chosen.jquery.js行中599 to 605看起来像这样：

container_props = {
        'class': container_classes.join(' '),
        'style': "width: " + (this.container_width()) + ";",
        'title': this.form_field.title,
        // hide widget for screen-readers
        'aria-hidden': 'true'
};

而行616看起来像这样：

      // instead of hiding the original select field, adding the .sr-only class to keep it accessible for screen readers
      this.form_field_jq.addClass('sr-only').after(this.container);

这不是一个完美的解决方案，因为隐藏的选择和小部件都是键盘可聚焦的，但它比无法访问的小部件要好得多。

这对我有用。
我遵循了上述所有建议，并更改了以下行：

this.container.bind('mousedown.chosen', function(evt)   // around line 630

到：

this.container.bind('mousedown.chosen keydown.chosen', function(evt)

谢谢

试试看有没有效果。 结构应该是这样的。 :)

我尝试根据@kirstenmalin所做的工作添加一些 ARIA 元素。 这项工作很好地推动了 A11Y，但缺少我添加的一些项目。

我在这里有一个

ARIA 标签和其他有用的属性

• 将以下 aria 元素添加到搜索输入框
  
  
  
  • 角色=“组合框”
  
  
  • 用于指示用户可以键入以选择选项或向列表添加新元素
  
  
  • aria-haspopup （使用组合框角色时隐式）
  
  
  • 用于表示此框有相关菜单
  
  
  • 咏叹调扩展
  
  
  • 使用组合框时必填，表示结果列表可见或隐藏
  
  
  • 当所选字段被激活/取消激活时，需要动态更新状态
  
  
  • aria-activedescendant="id_of_highlighted_option"
  
  
  • 用于指示哪些选项是当前选定的值
  
  
  • 这需要在选择新选项时更新
  
  
  • aria-owns="id_of_list_of_options"
  
  
  • 表示与此搜索框相关的选项列表
  
  
  • 咏叹调自动完成=“列表”
  
  
  • “如果作者将组合框的 aria-autocomplete 值设置为 'list'，则用户代理必须在组合框保持聚焦时公开对组合框上的 aria-activedescendant 属性的更改。如果在组合框时发生对 aria-activedescendant 属性的更改重点是，辅助技术应该提醒用户这种变化，例如，通过说出新的活动后代元素的替代文本。作者应该使用 aria-owns 将组合框文本字段与其列表框相关联。”
  
  
  • aria-labeledby="id_of_field_label"
  
  
  • 这是所选择的要替换的表单标签元素的 ID
  
  
• 将以下属性添加到选项列表中
  
  
  
  • ID
  
  
  • 基于表单字段 ID 的简单 ID，由搜索输入框中的 aria-owns 属性定位
  
  
  • 角色=“列表框”
  
  
  • “允许用户从选项列表中选择一个或多个项目的小部件。”
  
  
• 将以下属性添加到选项列表中的每个单独选项
  
  
  
  • ID
  
  
  • 基于列表中选项索引的简单 ID 和 aria-activedescendant 使用的表单字段 ID，指示当前选择的元素
  
  
  • 角色=“选项”
  
  
  • 选择列表中的可选项目。
  
  
  • 咏叹调忙
  
  
  • 我们需要这样做的原因是当 Chosen 在一个字段上初始化时，它_不_构建选项列表，直到该字段第一次被激活。
  
  
  • 这是辅助技术以及寻找可访问性问题的扫描仪的问题。 由于搜索框（role="combobox"）现在声明它拥有一个列表框（aria-owns="id_of_list_of_options"），列表框（我们的结果列表）_必须_在其中包含选项或被声明为忙碌以符合规格
    
    
    
    
    
    • 我什至不能 100% 确定这是正确的举动。 它当然可以防止字段被扫描仪标记，但这些字段并不完全繁忙，我们只是还没有构建选项。
    
    
    
  
  
  • 我希望有更多 A11Y 经验的人可以对此进行权衡。
  
  
  • 我还考虑了一种更激进的方法，它涉及在字段首次激活时构建结果列表，但这涉及向 Chosen 添加一个新触发器。
    
    
    
    
    
    • 这个触发器本质上是传递到 winnow_results 方法，该方法构建了搜索结果（仍然隐藏），但它使扫描仪感到高兴。
    
    
    
  
  

管理状态

• 管理 aria-expanded 属性
  
  
  
  • 为了指示搜索结果何时应该与辅助技术相关，我们需要在字段被激活/停用时切换 aria-expanded 属性。
  
  
  • 最简单的方法 (AFAIK) 是在close_field和activate_field方法期间调整属性。
  
  
  • 在这些方法中的每一个中从真到假或假到真的简单切换就足以保持状态更新
  
  

我将开始在我们的几个项目中使用这个版本，并且随着我们从 A11Y 视图更详细地了解我们的项目时，将不断更新我的分支。

感谢所有读到这里的人，我知道它很多，如果您有反馈，请告诉我！ 我想尽可能地推动这一点。

@cooperfellows请使用您的更改打开拉取请求

@stof完成，但正如我所说，我不是 A11Y 专家，我计划进行更多测试。 我只是想分享一下我的第一个稳定通行证。

是否有任何“官方”更新？ 是否根据@cooperfellows 的努力做出了任何更改？

我问的原因是，越来越多的 Jaws 用户报告小部件不可用，从而有效地呈现他们正在查看的表单不可用。

我们可以复制，如果有帮助，很高兴帮助/分享示例？

提出了拉取请求（它有一些事后已解决的小问题），但还没有发生任何事情。 我现在在生产中使用的分支在这里：

• https://github.com/cooperfellows/chosen/tree/a11y-updates

不过，我喜欢其他一些反馈。 我没有 Jaws，所以我依赖各种在线工具的审计。

所以那个分支基本上是当前的生产加上你的更改，或者是一个尚未合并最近更改的先前版本？

（谢谢顺便说一句）

是的，没错@wcndave。 虽然公关真的可以用其他眼睛进行审查。

@cooperfellows我很乐意协助可访问性测试，因为我需要将现有的选定实现移植到需要满足 WCAG 2 的新版本中。

您的拉取请求有任何更新吗？

愚蠢的问题 - 你有我可以下载的已编译的 JavaScript 版本吗？
还是我需要安装coffeescript并自己编译？

@KITSKevinBonett感谢您的帮助！

附件是 jquery 和 proto 类型版本的 zip，压缩和未压缩。

编译-a11y-chosen-jquery-proto.zip

@cooperfellows那很快。 我会添加到我们的项目中，做一些测试，然后让你知道......

@KITSKevinBonett 是的，我希望得到更多关注，因为我不是 A11Y 专家。 因此，任何反馈（严厉而积极的）都值得赞赏。

嗨@cooperfellows - 我已经审查了你的实施 - 确实非常好。

由于屏幕阅读器/浏览器不兼容，有些问题可能无法（轻松）解决。

我在附件中记录了我的发现。 我提出了 1 或 2 个次要建议，希望对您有用。

_更新_

1. 我的一些评论提到了我们实现本地的功能 - 我已经删除了这些。
2. 在“组合框”中输入并按 ENTER 出现问题 - 我们的表单提交未激活 - 同样，这是一个本地实现问题。
3. 下面的 ZIP 已更新以删除 (1) 和 (2)。

aria-chosen-plugin.zip

嗨@cooperfellows - 我的审计有意义吗？

嗨@KITSKevinBonett我已经离开了一个星期的假期。 一旦我忙于我的其他工作，我就会看看这个。 感谢您的反馈，我相信它会有所帮助。

@KITSKevinBonett感谢您的审核，这似乎非常彻底。 我已经根据您列出的审计部分分解了我的想法。

由插件生成的 HTML 标记

• 这里有反馈吗？ 或者你只是展示了 get 的生成？

仅键盘行为

• "However, when option has been selected, keyboard focus gets lost on tabbing again."
  
  
  
  • 我在想这可以通过在该元素可见/隐藏时打开和关闭aria-hidden属性来解决吗？
  
  
  • 我将研究这种方法。
  
  
• “CSS 禁用问题”
  
  
  
  • 标准选择可见
  
  
  • 我无法重新创建这个，你能给我一个屏幕截图或屏幕投射什么的吗？
  
  
  • 使用键盘突出显示结果时没有可见提示。
  
  
  • 我们可以将当前突出显示的项目的文本包装在<em>标签中，该标签确实会被斜体化（至少在 Chrome 中）。
    
    
    
    
    
    • 这里的潜在问题是搜索还使用<em>来表示文本匹配，所以我担心它们可能会相互冲突。
    
    
    
  
  

屏幕阅读器

• 我无法访问 JAWS，因此我无法在这里做太多事情。 当我有更多时间看看我能找到什么时，我会启动一个试验。
• 屏幕阅读器是我非常希望得到更多帮助的领域，所以感谢您提供详细的分类。

咏叹调

• 我可以删除 haspopup 属性，正如您所指出的，它是多余的。
• 我添加 aria-busy 的原因是默认情况下，Chosen 不会在隐藏的 div 中生成任何列表元素，直到放置焦点。
  
  
  
  • 这意味着 role="listbox" 元素默认没有选项，这在使用工具扫描时给我带来了问题。 通过在开始时添加 aria-busy 元素，这些工具会忽略它。
  
  
  • 问题的原因是列表框元素_必须拥有_一个选项元素（源）
  
  
  • 它在第一次填充列表时被删除，所以在我看来这是一个无害无犯规的情况。
  
  
• 添加 aria-selected 似乎是一个明显的步骤，不敢相信我错过了。 谢谢你抓住它。
  * 结束语 *
  您是自己为这次审核编写了 HTML，还是有工具为您创建了该 HTML？ 这非常有帮助，所以再次感谢。

@cooperfellows - 回答您的问题：

HTML 标记

• 只是显示插件行为的每个阶段生成的内容。

键盘行为

• “失去焦点”仅在 Firefox 中。 您可以添加tabindex="-1"以防止焦点，然后再次将其删除。 那么你就不需要 ARIA。

禁用 CSS

• 基本上，原始的 SELECT 在页面上是可见的，并且可以与 UP | 一起使用。 向下箭头，因为默认浏览器行为会在您浏览它们时显示各种选项。
• 插件呈现的 HTML 也是可见的，但下拉列表没有指出哪个“选项”被突出显示。
• 您建议使用 EM。 改用 STRONG - 它比 HTML5 中的 EM 具有更多的语义含义。 见http://html5doctor.com/ib-em-strong-element/
• 但我不认为这是一个主要问题，因为用户仍然可以使用 SELECT。
• 看截图

屏幕阅读器

• 这是一项困难的任务，因为结果因所使用的浏览器和屏幕阅读器的组合以及版本而异。
• 我想说的是，您在 ARIA 角色/状态/属性方面对插件的可访问性更新与 W3C/WAI 建议保持一致。 所以这是个好消息。 :)
• 浏览器和屏幕阅读器制造商有责任确保他们的软件符合这些要求。

咏叹调

• 您对“aria-busy”的解释是有道理的。 即使它已经过时，它也不会导致任何问题。
• 审核 HTML。 手工制作。 我一直在为我工作的公司构建一个 UI 组件库/生活方式指南，所以我只使用了那里的组件。 根本没用多久。 最困难的部分是重新聆听所有屏幕阅读器输出，以确保我正确捕获了所有内容。

希望这一切都有助于您的拉取请求。 你用 A11Y 做得很好。 :)

你好，

我瞎了我已经用 JAWS 测试了@cooperfellows的工作。 它完美地工作。 当 I 箭头浏览选项时，会说出所选选项。

有关于将它合并到 master 的消息吗？

在我的日常工作中，我使用 MISP（恶意软件信息共享平台 - https://github.com/MISP/MISP），其开发人员最近决定使用“选择”作为自动完成组合框。 它已成为我的噩梦。

预先感谢您的帮助。

经过几次测试，我可以确认上面发布的编译版本（.zip 存档）（2016 年 7 月 1 日）有效。

但是，当我尝试@cooperfellows的分支时，或者当我克隆@cooperfellows的分支然后与 Harvethq/master 合并时，JAWS 会正确说出菜单选项，但 ENTER 键不会提交表单。

嗨@obert01 ，非常感谢您使用 JAWS 来查看这个，这是我在工作中遗漏的一个重要部分。

这个分支与当前的收割/主分支相比已经过时了，我可能需要查看更改并调整我的 PR以使事情恢复到工作状态。

我会尽量在本月底之前的某个时候解决这个问题，我现在工作很忙。

一旦它更新，我很想让其中一位贡献者再次关注它，所以一旦我更新它，我将 ping @stof （他查看了 2016 年的初始回调）。

非常感谢。

仅供参考，我可以使用 JAWS 和 NVDA 屏幕阅读器的所有组合进行测试，使用以下浏览器：Internet Explorer 11、Google Chrome、Firefox ESR、Firefox Standard、Microsoft Edge。

这方面有什么进展吗？

我很抱歉坚持，但我的日常工作缺乏可访问性。

此外，添加可访问性支持将允许 Chosen 用于公共部门/行政网站，因为越来越多的国家/地区正在以这种方式进行监管。

谢谢

你好，
我们有一个已使用选择的应用程序，现在我们需要支持可访问性，但通过这个我可以看到它尚未合并。 如果@cooperfellows可以完成并合并，那将非常有帮助。

嗨@obert01和@csmuthukuda ，

我刚刚进行了更新，以使我的 PR 跟上 Chosen 的最新版本，请看这里：
https://github.com/harvesthq/chosen/pull/2596

您可以获取我的分叉存储库的副本并进行测试。 我会喜欢一些现实生活中的反馈。

它通过了所有的 TravisCI 检查，但我认为它们没有涵盖任何 A11Y 问题。 让我知道你的想法。

嗨@cooperfellows ，
非常感谢您为保持这一点而付出的努力。 我会对此进行测试，并让您知道对此的反馈。 我真的希望业主们考虑将这个合并给主人。 这是现在的强制性要求。

谢谢@csmuthukuda，我很乐意将其合并....

@pfiller @stof @tjschuck @koenpunt ，我能做些什么来帮助查看它？ 对于一个非常棒的系统来说，它确实是一个缺失的部分。

嗨@cooperfellows ，

我已经使用最新的 Web 浏览器以及 JAWS 和 NVDA 屏幕阅读器测试了您的出色工作。 谢谢 ！

使用键盘在选项中使用箭头效果很好：语音和盲文反馈是完美的，这意味着所有 ARIA 属性都得到了很好的定义。 但是，当我按 ENTER 选择一个选项时，没有任何反应。 我对 JavaScript 的经验不足，无法确定问题是否来自 Chosen，或者是否存在于使用它的应用程序中。

要重现，请尝试仅使用键盘在已选择的组合框中选择一个选项：TAB 聚焦组合框，箭头键浏览列表，ENTER 选择。

再次，非常感谢你。

感谢@obert01 提供的信息。 我会看看，看看我能找到什么。

@obert01你能尝试使用这个 JS 小提琴来确认它工作/不工作吗？ 这个小提琴正在加载我最新提交的已编译 jQuery 版本。

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

我可以使用我的键盘（Chrome 最新版）浏览该下拉菜单，但我没有运行屏幕阅读器。

让我知道你的想法。

嗨@cooperfellows ，

你的 JS Fiddle 没问题。 因此，我认为问题是由于在 MISP (https://www.misp-project.org/) 中使用 Chosen 的方式。

我将与 MISP 项目团队核实这一点。

谢谢

谢谢@obert01。 请让我知道你发现了什么。 它可能表明与 Chosen 的特定设置不兼容，因此如果有办法让我了解 MISP 如何利用它，我可以尝试查看它们的实现。

选择在某处公开使用吗？

@cooperfellows能否请您给我一个带有最新更改的新版本，我不知道如何构建它。

@obert01 @cooperfellows我刚刚用 NVDA 尝试了 Fiddle，看来键盘导航工作得很好（包括用 ENTER 键选择）。 但是，当我使用向上和向下箭头键浏览时，屏幕阅读器会显示“________未选择”，即“未选择百慕大”。 这是预期的行为吗？

我和@woenlee 有同样的问题。 它没有那么有害。 但也许，应该检查在所选项目上设置“selected”属性的方式。

“进入”和“退出”列表项时的预期行为是什么？ 什么时候
你向下导航到一个新项目，如果它读出新选择的
物品？ 它还宣布不再选择什么吗？ @obert01 @woenlee

2019 年 8 月 25 日星期日下午 12:18 Olivier BERT [email protected]
写道：

我和@woenlee https://github.com/woenlee有同样的问题。 它不是
如此有害。 但也许，“selected”属性的设置方式
应检查所选项目。

—
你收到这个是因为你被提到了。
直接回复本邮件，在GitHub上查看
https://github.com/harvesthq/chosen/issues/264?email_source=notifications&email_token=ABT3ZTIESGLX6IYW4BF2QCLQGKWDVA5CNFSM4AATGGB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVX5WWJ7W63LNMVX5WWJ2700000000000000000000000000000000000400000000004000000000000000000005CNFSM4AATGGB6
或静音线程
https://github.com/notifications/unsubscribe-auth/ABT3ZTMH2KUYYE7HNO2UGH3QGKWDVANCNFSM4AATGGBQ
.

——
~库珀

@cooperfellows在运行了一些 ax 可访问性测试后，我似乎在您的 PR 中发现了一个错误，这解释了为什么要这样做。 在 Abstract-chosen.coffee 的第 342 行，输入被分配了 2 个角色，“组合框”和“列表框”。

<input class="chosen-search-input" type="text" autocomplete="off" aria-expanded="false" aria-haspopup="true" role="combobox" aria-autocomplete="list" autocomplete="off" role="listbox" /> </div> <ul class="chosen-results"></ul>

给予后

在这里向 Harvest 的客户付款，并进行内部访问的测试遇到了这个问题。 可访问性是必须的，如果这个问题没有得到解决，我们将离开 Harvest，如果 Harvest 的维护者至少不会很快对此表示支持。

@obert01你能尝试使用这个 JS 小提琴来确认它工作/不工作吗？ 这个小提琴正在加载我最新提交的已编译 jQuery 版本。

• https://fiddle.jshell.net/cfellows/r5kp1udb/8/show/light/

我可以使用我的键盘（Chrome 最新版）浏览该下拉菜单，但我没有运行屏幕阅读器。

让我知道你的想法。

@cooperfellows
我正在使用 JAWS 2019 测试这个 JS Fiddle，在使用向上和向下箭头键导航选项时遇到了一些稍微不同的事情。
在谷歌浏览器 71.0.3578.98 上：
除非列表进行了一些滚动/渲染，否则 JAWS 不会读取当前突出显示的值。 即如果列表显示

<option selected="selected" value="United States">United States</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>

9 个选项，JAWS 不会在按下时读取突出显示的选项，直到您到达第 10 个选项安提瓜和巴布达 . 该框会自动滚动以突出显示安提瓜和巴布达，然后阅读选项。

在 IE 11.0.9600.19463 上：使用箭头键导航似乎可以正确上下读取当前突出显示的选项。 不需要某种渲染。

想知道是否有其他人经历过这种情况。 @obert01 @woenlee

您好，感谢您的工作。

不幸的是，这不能正常工作。 这很难描述，因为所使用的浏览器或屏幕阅读器的功能会发生变化。

我认为某些 aria 属性不存在或未更新。 这里我遇到的一般问题：

• 滚动问题：当我向下箭头并到达可见项目列表的末尾时，我必须按两次向下箭头才能聚焦下一个项目。
• 当我按 ENTER 选择一个项目时，焦点没有释放。 预期的行为是屏幕阅读器返回快速导航模式，让我阅读网页的其余部分。 相反，箭头键仍然控制着我在列表中的选择。
• 当前的脚本不允许知道是否显示了提案以及它们有多少。 在我知道的大多数可访问的选择插件中，JAWS/NVDA 会宣布有多少结果与文本输入中输入的字符串匹配。
• 最后，我的印象是 JAWS 不理解列表是合并还是扩展。 有时，在使用 ENTER 做出选择并尝试阅读页面的其余部分后，JAWS 仍会阅读已显示的最新提案。

好点：

• 自动完成部分运行良好。 如果我输入“fra”，JAWS 会发音“France”，然后我可以按 ENTER 进行选择。
• 当我在列表中箭头时正确读取这些项目。

不幸的是，我对 ARIA、JavaScript 和 Web 的了解并不多。 我建议您确保正确设置和更新了最大的 ARIA 属性。

请在下面找到与屏幕阅读器完美交互的 JQuery 插件的演示和代码：
https://a11y.nicolas-hoffmann.net/autocomplete-list/

很抱歉不能提供更多帮助。

不要犹豫，发布您工作的新演示。 我很高兴为您测试。