VueUse 中文网

主题

useLiveAnnouncer ​

类别
导出大小

向屏幕阅读器用户传达消息的便捷方式（ARIA 实时区域）。

🌐 Accessible way to announce messages to screen reader users (ARIA live regions).

示例 ​

源代码在线运行

Click the buttons below to trigger screen reader announcements.

Note: You need a screen reader active to hear the announcements.

用法 ​

🌐 Usage

ts
import { 
useLiveAnnouncer
 } from '@vueuse/core'

const { 
announce
, 
polite
, 
assertive
 } = 
useLiveAnnouncer
()


announce
('This is a polite announcement')

polite
('This is also a polite announcement')

assertive
('Important message!')

消息会一直保留在实时区域，直到被下一条公告替换。传入一个 timeout（以毫秒为单位）可以在延迟后自动清除它：

🌐 The message stays in the live region until it is replaced by the next announcement. Pass a timeout (in milliseconds) to automatically clear it after a delay:

ts
// clears the message after 3000ms
announce('Saved successfully', 'polite', 3000)
polite('Saved successfully', 3000)
assertive('Network error', 3000)
js
'use strict'
// clears the message after 3000ms
announce('Saved successfully', 'polite', 3000)
polite('Saved successfully', 3000)
assertive('Network error', 3000)

无障碍 ​

🌐 Accessibility

播报员使用以下 ARIA 属性：

🌐 The announcer uses the following ARIA attributes:

  • 礼貌：role="status"、aria-live="polite"、aria-atomic="true"
  • 自信：role="alert"，aria-live="assertive"，aria-atomic="true"

这些能确保在不同的屏幕阅读器上都有良好的支持。

🌐 These ensure robust support across different screen readers.

选项 ​

🌐 Options

idPrefix ​

  • 类型：string
  • 默认: 'vueuse-live-announcer'

播报器元素 ID 的前缀。生成的元素将有 ID ${idPrefix}-container、${idPrefix}-polite 和 ${idPrefix}-assertive。

🌐 Prefix for the id of the announcer elements. The generated elements will have IDs ${idPrefix}-container, ${idPrefix}-polite, and ${idPrefix}-assertive.

window ​

  • 类型：Window
  • 默认: defaultWindow

将创建播报元素的窗口对象。

🌐 The window object where the announcer elements will be created.