jjzjj

html - ARIA 组合框的 IE 兼容标记

coder 2023-08-04 原文

我正在努力寻找一种使 Ext JS Combobox 组件与 IE/JAWS 兼容的方法。目前我们正在使用以下标记:

<div role="presentation" id="combobox-1011">
    <label id="combobox-1011-labelEl" for="combobox-1011-inputEl">
        <span>Choose:</span>
    </label>
    <div id="combobox-1011-bodyEl" role="presentation">
        <!-- This wraps both input and triggers -->
        <div id="combobox-1011-triggerWrap" role="presentation">
            <div id="combobox-1011-inputWrap" role="presentation">
                <input id="combobox-1011-inputEl" type="text" name="choose"
                    role="combobox" aria-readonly="false"
                    aria-haspopup="true" aria-expanded="true"
                    aria-autocomplete="none" aria-owns="boundlist-1014-listEl"/>
            </div>
            <!-- Trigger element styled to look like a button -->
            <div id="combobox-1011-trigger-picker"></div>
        </div>
        <!-- This is used to announce input validation errors -->
        <div id="combobox-1011-ariaErrorEl" role="alert" aria-live="polite"></div>
    </div>
</div>
<div id="boundlist-1014">
    <div id="boundlist-1014-listWrap">
        <ul id="boundlist-1014-listEl" role="listbox" aria-hidden="false">
            <li role="option" tabindex="-1" aria-selected="true" id="ext-element-7">Option 1</li>
            <li role="option" tabindex="-1">Option 2</li>
        </ul>
    </div>
</div>

这在带有 JAWS 和 NVDA 的 Firefox 中运行得相当好;但是,IE 中的 JAWS 会在聚焦时将输入字段宣布为“编辑”。

阅读后WAI-ARIA Combobox pattern直到斗鸡眼并尝试了几天,我准备承认 IE 的问题太多,无法使组合可靠地工作。或者它可能不是 IE 本身,而是 this comment 中建议的 MSAA/UIA 桥接器.这也可能是真的,因为我发现至少一种 ARIA 属性组合在带有 JAWS(使用 MSAA)的 IE8/XP 中运行良好,但在带有 JAWS(MSAA/UIA)的 IE11/Win7 中不起作用。

标记可以在一定程度上改变;我无法改变的是像 bodyEl 这样的包装元素的存在。 , triggerWrap , 和 inputWrap .这些元素对于应用相关的 CSS 类、在输入验证失败时呈现错误指示器元素等是必需的。

另一个限制是 listbox元素呈现在组件元素之外。这可以改变,但不容易;也将它呈现在输入附近似乎根本没有帮助。值得一提的是,列表本身在第一次展开时动态呈现,aria-owns事后添加的属性。

到目前为止我尝试过的:
  • 放置role="combobox"在外部元素上。没有做任何有用的事情,组合不被认可。
  • 放置role="combobox"和相关属性在 inputWrap .这样,当输入直接聚焦时,IE 将宣布“选择编辑组合”;当从另一个元素切换时,它将改为宣布该元素的角色以及组合标签。很有趣,但不是很有帮助。
  • 放置role="combobox"triggerWrap并分配 role="button"到触发伪按钮。从理论上讲,这应该接近第一个设计模式,但组合不被认可。
  • 许多其他临时组合,其中大部分我已经不记得了。

  • 唯一的准工作方式是在 inputWrap 上放置组合框角色。和制作 inputWrap tabbable 而不是实际的输入。这对应于 this example 中的标记似乎或多或少地与 IE/JAWS 一起工作;然而,这个解决方案是非常不受欢迎的,因为它打开了潘多拉的盒子,里面充满了非常毛茸茸的焦点管理错误。

    不幸的是,在这种情况下,辅助功能检查工具并不完全有用,因为我需要的是针对现有实现中的错误的解决方法,而不是更严格的标准合规性。

    更好理解的另一个障碍是 WAI-ARIA 规范中的歧义。例如,对于第一个模式,要求“组合框中的第一个元素是输入文本字段”。这是否意味着第一个结构元素(即非表现性)或绝对第一个子元素?以任何一种方式修改标记似乎对 IE 都没有任何影响,除非包装器 <div role="combobox">是可制表的。

    对不起,如果这篇文章看起来更像是咆哮;) 但它实际上是一个问题:有没有办法通过将 ARIA 属性应用于我们现有的标记元素来解决 IE 的缺陷?如果没有,可以更改什么使其工作(禁止 tabbable 包装器)?以及深入了解为什么这不按预期工作的最终奖励积分。

    我将不胜感激任何提示和建议。我非常担心我们的组合不能在 IE 中完全访问,如果可能的话,我想解决这个问题。我仍然有一个微弱的希望,有人可能拥有一个 secret 成分配方,让 IE 和 JAWS 彼此满意。 ;)

    更新 : 这是一个 example fiddle .请注意如何在 Firefox 中正确宣布组合,但它只是在 IE11 中“编辑”(使用 JAWS 16 测试)。为了使用屏幕阅读器获得更好的结果,我建议使用 Open outside of Fiddle共享菜单中可用的选项。

    最佳答案

    对于我们的自定义组合框小部件,我也遇到了同样的问题。我发现如果您将输入字段标记为只读并在输入字段上使用 role="combobox"那么 IE 上的 JAWS 会将其读取为组合框。此解决方案存在一些问题,例如普通用户无法键入文本来过滤组合框。

    关于html - ARIA 组合框的 IE 兼容标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32365206/

    有关html - ARIA 组合框的 IE 兼容标记的更多相关文章

    1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

    3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

      所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

    4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

      我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

    6. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

      在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

    7. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

      我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

    8. ruby - 如何使用 Nokogiri 解析纯 HTML 表格? - 2

      我想用Nokogiri解析HTML页面。页面的一部分有一个表,它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

    9. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe? - 2

      考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证&符号不会被转义?由于我无法控制的原因,我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清,我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

    10. ruby - 最多 n 的组合 - 2

      给定一个数组a,什么是实现其组合直到第n的最佳方法?例如:a=%i[abc]n=2#Expected=>[[],[:a],[:b],[:c],[:a,b],[:b,:c],[:c,:a]] 最佳答案 做如下:a=%w[abc]n=30.upto(n).flat_map{|i|a.combination(i).to_a}#=>[[],["a"],["b"],["c"],["a","b"],#["a","c"],["b","c"],["a","b","c"]] 关于ruby-最多n的组合,我

    随机推荐