当前位置： 文江博客 话题详情

可以使用什么Aria-Label？

发布于 2025-02-06 03:54:11 字数 411 浏览 2 评论 0 原文

ARIA-LABEL 到底可以使用什么？

我发现文档显示可以在交互式项目上使用（例如＆lt; button＆gt; ），但是可以在以下任何一个上使用： ＆lt; p＆gt; ，＆lt; span＆gt; ，＆lt; li＆gt; 或＆lt; abbr＆lt; abbr＆gt; ？

我试图在段落中具有特定的单词和缩写，读出是特定的（例如：澳大利亚人读为“ ozzies”，而不是“ ossies”或“ ossies”或“ nsw”，读出Microsofoft

Edge的测试 ） ，Google Chrome，Mozilla Firefox（所有Windows 10）和iPhone Safari（ios）

原文

What exactly can aria-label be used on?

I have found documentation that shows it can be used on interactive items (such as <button> for example), but can it be used on any of the following:
<p>, <span>, <li> or <abbr>?

I am trying to have particular words and abbreviations within a paragraph, read out as something specific (eg: Aussies read out as "Ozzies" instead of "Ossies" or "NSW" read out as "New South Wales")

Testing in Microsoft Edge, Google Chrome, Mozilla Firefox (all Windows 10) and iPhone Safari (iOS)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

放我走吧 2025-02-13 03:54:11

通常，您不应在静态内容上使用 aria-label 。它仅用于交互式元素和一些分段元素。

  • aria-labelledby 和 aria-descred 在交互式内容元素（例如链接和表单控件）中得到了强有力的支持
    许多输入类型。

  • 对于大多数辅助技术，可以使用 aria-label 或 ＆lt; nav＆gt; 上的Aria-labelled ，并且＆lt; main＆gt; 元素，但不在
    ＆lt; footer＆gt; ，＆lt; e节，＆lt; actits＆gt; ，或＆lt; header＆gt; 。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  • aria-label 或 aria-labelledby on ＆lt; faned＆gt; 。。

  • Android上的对话覆盖了所有地标的内容 aria-label 或 aria-labelled 。

  • 使用 aria-label 或 aria-labelledby on div> div 带有 prole = remoe = navaigation elements 代码>，角色= search ，角色= main ，下巴没有
    在角色= banner ，角色=互补，
    榜单= ContentInfo 。 NVDA，配音和对讲还可以

  • aria-label ， aria-labelledby 和 aria-descred 在 table> Table 上正常工作 TH 和 TD 元素，其中一些NVDA例外，
    iOS上的画外音，并在下一节中讨论对话。

  • 不要使用 aria-label 或 aria-labelledby 在任何标题元素上，因为它会在NVDA，VoiceOver和Talkback上覆盖它们。下巴
    忽略它们。

  • 不要使用 aria-label 或 aria-labelledby 上的任何其他非相互作用内容，例如 p ，<代码>传奇， li 或 ul ，因为
    它被忽略。

  • 不要使用 aria-label 或 span 或 div aria-labelled 除非它给定的角色。当 aria-label 或 aria-labelled 是
    关于互动角色（例如链接或按钮）或IMG角色，他们
    覆盖 div 或 span 的内容。其他角色
    地标（上面讨论）被忽略。

请记住，上述指南是在2018年撰写的，一些浏览器的支持可能有所改善，但是上面的建议仍然很安全，我建议主要遵循它。

感谢Brennanyoung在史蒂夫·福克纳（Steve Faulkner）的这篇文章中传递了这篇文章：
https://html5accessibility.com/stuff/2020/11/07/not-so-so-short-note-note-on-aria-rabel-usage-usage-big-table-edition/

值得一提的是，上述测试结果是比W3C在我的帖子开头给出的建议更新，它确实与某些地方的W3C建议相矛盾。

附加资源：

You should generally not use aria-label on static content. It's only intended to be used on interactive elements and some sectioning elements.

https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby

  • aria-labelledby and aria-describedby are robustly supported for interactive content elements such as links and form controls including
    the many input types.

  • For most assistive technology it's fine to use aria-label or aria-labelledby on the <nav>, and <main> elements but not on
    <footer>, <section>, <article>, or <header> .

  • There is mixed support for aria-label or aria-labelledby on <aside>.

  • Talkback on Android overrides the content of all landmarks with aria-label or aria-labelledby.

  • Its fine to use aria-label or aria-labelledby on div elements with role=navigation, role=search, role=main, JAWS doesn't
    support them on role=banner, role=complementary,
    role=contentinfo. NVDA, VoiceOver, and Talkback are OK

  • aria-label, aria-labelledby and aria-describedby work well on table, th and td elements with a few exceptions for NVDA,
    VoiceOver on iOS, and Talkback discussed in next section.

  • Don't use aria-label or aria-labelledby on any heading elements because it overrides them on NVDA, VoiceOver and Talkback. JAWS
    ignores them.

  • Don't use aria-label or aria-labelledby on any other non-interactive content such as p, legend, li, or ul, because
    it is ignored.

  • Don't use aria-label or aria-labelledby on a span or div unless its given a role. When aria-label or aria-labelledby are
    on interactive roles (such as a link or button) or an img role, they
    override the contents of the div or span. Other roles besides
    Landmarks (discussed above) are ignored.

Keep in mind that the above guidance was written in 2018, and support has likely improved among some browsers, but the advice above is still safe, and I would recommend mostly following it.

Thanks to brennanyoung for passing along this great article from Steve Faulkner:
https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/

It's worth mentioning that the above test results are more recent than the advice given by W3C at the beginning of my post, and it does contradict the W3C advice in some places.

Additional Resources:

回复 原文
街角卖回忆 2025-02-13 03:54:11

属性ARIA-LABEL和ARIA-LABELLED通常仅在交互元素上正确识别并正确识别，例如按钮，表单字段，链接等。
当它们用于非相互作用元素时，例如＆lt; p＆gt;，＆lt; div＆gt;，＆lt; li＆gt; 时，它们通常不起作用，即不读或显示。

您可以在＆lt; p＆gt;，lelt; li＆gt; 上使用aria-label或aria-labelledby，但是只有在互动时才起作用。
交互式的定义非常简单：这意味着您可以与之互动。从技术上讲，这基本上意味着集中。

请注意，在一些浏览器和/或屏幕读取器的情况下，Aria-label上的元素自然要焦点的元素只有在形式模式下导航而不以浏览模式进行导航时才能起作用。
通过自然焦点，我的意思是不需要明确的Tabindex进行互动的要素。

元素＆lt; abbr＆gt; 是一种特殊情况。扩展的含义必须存在于标题属性中，而不是ARIA-LABEL中。

Attributes aria-label and aria-labelledby are typically used and correctly recognized only on interactive elements such a buttons, form fields, links, etc.
They usually don't work, i.e. not read or shown, when they are used on non-interactive elements such as <p>, <div>, <li>.

You can use aria-label or aria-labelledby on a <p>, <li>, but it will work only if it's interactive.
The definition of interactive is quite simple: it means something you can interact with. More technically, it basically means focusable.

Note that with some browsers and/or screen readers, aria-label on elements that aren't naturally focusable may only work when navigating in form mode but not in browse mode.
BY naturally focusable, I mean elements that don't need an explicit tabindex to be interactive.

The element <abbr> is a special case. The expanded meaning must be present in the title attribute and not aria-label.

回复 原文
不美如何 2025-02-13 03:54:11

这很可能是帮助残疾人和老年人的属性。 （例如屏幕读取器）将标签附加到原本匿名的HTML元素上。

通常，搜索输入字段没有视觉标签（感谢设计师）。 ARIA-LABEL可用于将控件标签传达给屏幕读取器用户。

当用户专注于两个按钮（通过按住选项卡）（通过区域标签）（您可以听到专注于第一个X按钮）时，只会告诉您x按钮，但如果使用第二个X按钮。

<button title="Close"> X </button>


<button aria-label="Back to the page" title="Close" > X </button>

我希望它有帮助。

您可以在此处阅读更多信息 https://www.aditus.io/aria/aria/aria-laia-laia-label /

It's most likely an attribute to help people with disabilities and the elderly. (e.g. screen readers) attach a label to an otherwise anonymous HTML element.

Usually search input field does not have visual label (thanks to designers). aria-label can be used to communicate the label of control to screen reader users.

When user focus on both button(by pressing tab) with area label — you can hear focusing on first x button — will tell you only x button but in case of second x button .. you will hear back to the page button only..

<button title="Close"> X </button>


<button aria-label="Back to the page" title="Close" > X </button>

i hope it helps.

you can read further information here https://www.aditus.io/aria/aria-label/

回复 原文
~没有更多了~

关于作者

花桑

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文