草庐IT

html - Font Awesome 中 aria-hidden 的效果

aria-hidden在FontAwesome中有什么作用?有必要用吗?为什么?或者为什么不呢?比如我想知道下面代码中aria-hidden="true"的效果: 最佳答案 简而言之,它使屏幕阅读器看不到图标,以增强可访问性。来自thedocumentation:Ifyou'reusinganicontoaddsomeextradecorationorbranding,itdoesnotneedtobeannouncedtousersastheyarenavigatingyoursiteorappaurally.Additional

html - HTML5 aria-label 属性可以有哪些值?

谁能给我一些例子,说明什么类型的值对aria-label属性有效。 最佳答案 可以是任意字符串,用于命名元素。ARIAspec:aria-label说:Mosthostlanguagesprovideanattributethatcouldbeusedtonametheelement(e.g.thetitleattributeinHTML),yetthismaypresentabrowsertooltip.Inthecaseswhereavisiblelabelorvisibletooltipisundesirable,author

html - 在我的选项卡标记中放置 aria-controls 属性的位置

我正在使用遵循以下语法的脚本在我的页面中设置一个选项卡式内容部分:Tab1Tab2Tab3__CONTENT____CONTENT____CONTENT__我将通过javascript在这个结构标记上设置各种ARIA角色(role="tablist"、role="tab"、role="tabpanel"等)(因为如果没有脚本就没有标签)但我不确定在哪里放置我的“aria-controls”属性。他们应该继续吗?元素或其上的子元素?还是无所谓?事实上,关于role="tab"可以问同样的问题。和tabindex="0"--这些东西应该放在列表项还是anchor上?

html - HTML 表格中隐藏的 aria 标签(用于屏幕阅读器的可访问性)

在我的网页中,我需要创建一个表,该表的标题行根据某些用户配置可见或隐藏。此表还需要完全可访问(具体而言,由于表可能很长,我希望读取行/列标题的快捷方式可以工作)。我只有ChromeVox可以测试(我将详细介绍我发现的博客文章中其他读者的行为)。我当前的布局与此类似:CSS:.table-header-show{}.table-header-hide{display:none;}HTML:NameValue1Value2JohnDoeValue1aValue2aheader可见时,完全没有问题。标题隐藏时,是否读出这些标签取决于屏幕阅读器:我希望在使用屏幕阅读器进行常规导航时跳过标题行*

javascript - 轮播的 WAI-ARIA Angular 色(又名 slider 、幻灯片、画廊)

什么WAI-ARIAroles应该用于轮播,如下图所示?注意事项:我熟悉sliderAngular色,但这是指不同类型的小部件。例子来自USA.gov我在使用中看到的唯一与轮播相关的ariaAngular色是单个幻灯片上的aria-live。 最佳答案 如您所说,role=slider不适合轮播。您应该使用的是role=listbox引用自MDN(见下面的链接):Thelistboxroleisusedtoidentifyanelementthatcreatesalistfromwhichausermayselectoneormor

html - 面包屑导航的正确 ARIA 处理

可以做些什么来提高面包屑菜单的可访问性,类似于:HomeNews@Model.Title在此示例中,Home是站点根目录,News是第一个子项,不可用类是/news/article项的当前项。是否可以通过使用rel属性或aria-level属性来改善这一点? 最佳答案 我会避免使用aria-level并使用元素代替。最好避免在存在native替代项的情况下使用aria属性。使用aria增加了一层额外的复杂性。简单的HTML要好得多,并且已经具有呈现给AT的语义。这是firstruleofARIA.借自WAI-ARIA-Practic

javascript - 获取 aria 扩展值

我没有找到从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

html - 如何将动态数据绑定(bind)到 aria-label?

我有动态文本绑定(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

javascript - 如何使用 WAI-ARIA 通知屏幕阅读器 div 现在可见

如何使用WAI-ARIA通知屏幕阅读器div现在可见?如果我们得到htmlPresentmaincontentHiddencontent然后我们$('#foo').hide();$('#bar').show();我们如何通知屏幕阅读器他们应该通知用户现在可见的div(或者可能自动聚焦到现在可见的div)? 最佳答案 您通常不需要告诉屏幕阅读器内容现在可见。使用aria-hidden在实践中没有任何区别,所以我建议不要使用它。如果您希望屏幕阅读器读出隐藏的div的文本内容,您可以使用role=alert或aria-live=polit

html - 何时对 HTML 元素使用 disabled 属性与 aria-disabled 属性?

我正在尝试使表单易于访问。我应该让我的输入同时具有disabled和aria-disabled属性,还是只有一个?Input还是这样?Input还是这样?Input 最佳答案 我可以举你的例子,把它写成inaCodePen,并在JAWS和NVDA中查看(抱歉,今天没有VoiceOver):Input您会很高兴知道NVDA和JAWS都跳过了该字段(或者如果明确聚焦,则宣布该字段已禁用)。简而言之,您不再需要aria-disabled。只需使用disabled。您可以在SteveFaulkner(ARIA规范的编辑之一)于2015年撰写