“aria-labelledby”和“aria-hidden”这些属性是什么？

具有 aria-labelledby和aria-hidden等属性的术语ARIA代表可访问的富互联网应用程序。这些是使残障人士更容易访问 Web 应用程序的标准和指南集。这用于 HTML 文档中的交互式内容，例如错误消息、进度条、渐进式提示等。

有多个 ARIA 属性如下

• 咏叹调自动完成
• 咏叹调检查
• 咏叹调禁用
• 咏叹调扩展
• 咏叹调隐藏
• 咏叹调无效

aria-hidden： ARIA 属性aria-hidden用于指示辅助技术，如屏幕阅读器，它向残疾人指示文档上的内容，实际上可以跳过具有此属性的内容。屏幕阅读器将跳过元素内容而不指示它们。

什么类型的内容应该具有aria-hidden属性？
可以跳过没有重要意义的内容。此类内容的示例包括以下内容。

• 纯粹展示内容
• 占位符内容
• 特定于基于浏览器的用户环境的内容

aria-hidden和 HTML 的原生隐藏属性的区别：

• HTML隐藏属性：用于指示内容不应由 Web 浏览器呈现。
• aria-hidden属性：用于指示屏幕阅读器等辅助技术可以跳过具有此属性的内容。

例子：

HTML

 

    
Welcome To GFG
     
    

        This content will be
        skipped by Screen-Readers
    
 

 

输出：

“p”元素内容是非交互式内容，因此它们对屏幕阅读器隐藏。

关于 aria-hidden需要了解的关键事项如下。

• aria-hidden不能被可聚焦元素使用。
• aria-hidden会将其所有子元素标记为隐藏。无法设置子元素
  aria-hidden=”false”并使其可见。

aria-labelledby： aria-labelledby属性用于关联标签和包含标签文本的元素。 aria-labelledby 的值通常是包含标签文本的元素的 ID。它的值部分可以有多个元素 id。
这与包含用于链接标签的 for 属性的输入元素非常相似。

例子：

HTML

 

    
Welcome To GFG
    
Billing
 
    

        
First Name
        
    
 
    

        

            Contact Number
        
         
        
    

 

何时使用 HTML 规范属性和 ARIA 属性？

ARIA 规范也适用于供残疾人士使用的内容。在某些情况下使用 HTML 规范属性和在某些情况下使用 ARIA 规范可能是有意义的，这必须针对目标受众进行处理。