我正在使用遵循以下语法的脚本在我的页面中设置一个选项卡式内容部分:Tab1Tab2Tab3__CONTENT____CONTENT____CONTENT__我将通过javascript在这个结构标记上设置各种ARIA角色(role="tablist"、role="tab"、role="tabpanel"等)(因为如果没有脚本就没有标签)但我不确定在哪里放置我的“aria-controls”属性。他们应该继续吗?元素或其上的子元素?还是无所谓?事实上,关于role="tab"可以问同样的问题。和tabindex="0"--这些东西应该放在列表项还是anchor上?
在我的网页中,我需要创建一个表,该表的标题行根据某些用户配置可见或隐藏。此表还需要完全可访问(具体而言,由于表可能很长,我希望读取行/列标题的快捷方式可以工作)。我只有ChromeVox可以测试(我将详细介绍我发现的博客文章中其他读者的行为)。我当前的布局与此类似:CSS:.table-header-show{}.table-header-hide{display:none;}HTML:NameValue1Value2JohnDoeValue1aValue2aheader可见时,完全没有问题。标题隐藏时,是否读出这些标签取决于屏幕阅读器:我希望在使用屏幕阅读器进行常规导航时跳过标题行*
什么WAI-ARIAroles应该用于轮播,如下图所示?注意事项:我熟悉sliderAngular色,但这是指不同类型的小部件。例子来自USA.gov我在使用中看到的唯一与轮播相关的ariaAngular色是单个幻灯片上的aria-live。 最佳答案 如您所说,role=slider不适合轮播。您应该使用的是role=listbox引用自MDN(见下面的链接):Thelistboxroleisusedtoidentifyanelementthatcreatesalistfromwhichausermayselectoneormor
可以做些什么来提高面包屑菜单的可访问性,类似于:HomeNews@Model.Title在此示例中,Home是站点根目录,News是第一个子项,不可用类是/news/article项的当前项。是否可以通过使用rel属性或aria-level属性来改善这一点? 最佳答案 我会避免使用aria-level并使用元素代替。最好避免在存在native替代项的情况下使用aria属性。使用aria增加了一层额外的复杂性。简单的HTML要好得多,并且已经具有呈现给AT的语义。这是firstruleofARIA.借自WAI-ARIA-Practic
当滚动条拇指一直指向箭头时,普通的chrome滚动条箭头按钮具有类似禁用的状态。::-webkit-scrollbar*选择器用于样式化滚动条。我可以使用什么选择器来为按钮的特定状态设置样式?::webkit-scrollbar-button:disabled不适用于此状态。代码笔:https://codepen.io/mattyork/pen/oGWOZY?editors=1100 最佳答案 如果没有可滚动的内容,我会完全隐藏滚动条。body{overflow:hidden;height:100vh;}
我没有找到从DOM获取aria-expanded值的方法。test我想测试它是不是true然后我可以改变类别为fa-search-minus.我试过了,但我总是得到一个未定义的值:console.log($(this).find('a.aria-expanded').val()); 最佳答案 aria-expanded是元素的属性,不是类,所以选择器不正确。其次,您应该使用attr()函数来获取该属性的值。val()旨在从表单相关元素(例如input和textarea)中检索value属性。试试这个:console.log($(th
我有动态文本绑定(bind)到HTML页面上的aria-label。这是一个Angular2应用程序。我正在使用这样的东西:aria-label="Productdetailsfor{{productDetails?.ProductName}}"但是我得到一个错误:Can'tbindto'aria-label'sinceitisn'taknownpropertyof'div'.有解决办法吗? 最佳答案 只需在aria-label之前使用attr.:attr.aria-label="{{productDetails?.ProductN
我在页面加载时禁用输入后重新启用输入时遇到问题。我正在使用两个输入来接受两个日期,但我希望在第一个输入有值之前不启用第二个输入。StartDateEndDate第二个输入在页面加载时成功禁用。$("#date1-end").prop("disabled",true);第一个日期有一个调用以下函数的onchange事件functionshowdate(){if($("#date1-start").val()!=null){if($("#date1-end").val()!=""){datechart();}else{$("#date1-end").prop("disabled",fals
如何使用WAI-ARIA通知屏幕阅读器div现在可见?如果我们得到htmlPresentmaincontentHiddencontent然后我们$('#foo').hide();$('#bar').show();我们如何通知屏幕阅读器他们应该通知用户现在可见的div(或者可能自动聚焦到现在可见的div)? 最佳答案 您通常不需要告诉屏幕阅读器内容现在可见。使用aria-hidden在实践中没有任何区别,所以我建议不要使用它。如果您希望屏幕阅读器读出隐藏的div的文本内容,您可以使用role=alert或aria-live=polit
我有一个使用Bootstrap的RoR应用程序。我正在尝试将fontawesomehtml图标标签应用于submit_tag助手,但它似乎不受支持。当我单击提交时,禁用内容仅显示为字符串而不是被解释为html,尽管它对link_to帮助程序有效。这是erb:"form-control","data-html"=>true,:value=>@term})%>"Searching...".html_safe%>这是我点击提交后的结果:它适用于link_to,但我无法将值从text_field_tag传递到link_to,否则,我会对这个解决方案感到满意。我真的宁愿避免自己编写.ajax方法