通过ARIA标签提升无障碍

用ARIA标签提升无障碍

有时,您网站上的元素可能缺少默认的可访问名称,或者其名称无法准确描述其内容。

aria-label 属性在这些情况下非常有用。它允许你为元素提供一个简洁的标签,从而提升可访问性。当元素缺少可见文本,或可见文本无法充分传达其目的或含义时,这一点尤其有用。

例如,按钮的可访问名称通常是其标签内的文本,图像的名称是其 alt 文本,表单输入的名称则是与其关联的标签文本。然而,当这些内容不足或缺失时,你可以使用 aria-label 属性来提供一个清晰且具有描述性的标签。

一个深色背景的设计工具界面,中心显示一个选中的标志,标注为“Logo”。右侧面板包含不透明度、可见性、填充、溢出、圆角和旋转等样式设置。在“可访问性”部分,“Aria Label”被设置为“Framer Logo”

示例

考虑一个带有社交媒体分享图标的按钮。如果没有可见标签,屏幕阅读器用户可能无法理解该按钮的功能。通过使用 aria-label,你可以明确地定义其用途:

通过结合使用 aria-label 等工具及其他可访问性策略,你可以显著提升网站的包容性和易用性,确保所有用户(包括残障人士)都能获得更好的体验。

Create a free website with Framer, the website builder loved by startups, designers and agencies.