无障碍访问

Accessibility 模块提供了 WCAG 2.1 AA 合规性功能，在 AdminLTE 加载时会自动初始化。

功能特性

功能	WCAG 标准	描述
跳过链接	2.4.1 绕过区块	添加“跳转到主要内容”和“跳转到导航”链接。
Focus Management	2.4.3 & 2.4.7	Modal focus restoration to the triggering element and Escape handling.
键盘导航	2.1.1 键盘	菜单中的方向键导航，自定义按钮的 Enter/Space 键支持。
减少动画	2.3.3 动画	通过禁用动画来尊重 `prefers-reduced-motion` 偏好设置。
实时通告	4.1.3 状态消息	向屏幕阅读器通告错误和成功消息。
错误识别	3.3.1 和 3.3.2	自动为无标签的输入添加标签，通告表单验证错误。
表格无障碍	1.3.1 信息和关系	自动为表格表头添加 `scope` 属性。

配置

该模块在 adminlte.ts 中初始化，默认启用所有功能：

initAccessibility({
  announcements: true,
  skipLinks: true,
  focusManagement: true,
  keyboardNavigation: true,
  reducedMotion: true
})

将任意选项设为 false 即可禁用该功能。

调用方式

import { initAccessibility } from 'admin-lte'

const a11y = initAccessibility()

// 向屏幕阅读器通告消息
a11y.announce('项目已成功保存', 'polite')
a11y.announce('表单有错误', 'assertive')

// 聚焦特定元素
a11y.focusElement('#my-input')

// 将焦点锁定在容器内（适用于自定义模态框/对话框）
a11y.trapFocus(document.querySelector('.my-dialog'))

// 为页面添加语义化的地标
a11y.addLandmarks()

工具函数

import { accessibilityUtils } from 'admin-lte'

// 检查颜色对比度（WCAG 1.4.3）
const result = accessibilityUtils.checkColorContrast('rgb(0,0,0)', 'rgb(255,255,255)')
// { ratio: 21, passes: true }

// 检查元素是否可聚焦
accessibilityUtils.isFocusable(element)

// 为 ARIA 属性生成唯一 ID
accessibilityUtils.generateId('modal') // "modal-x7k2m9p4q"

CSS 类

类名	描述
`skip-links`	跳过导航链接的容器。
`skip-link`	单个跳过链接，仅在聚焦时可见。
`reduce-motion`	当用户偏好减少动画时，添加到 `<body>` 上。
`sr-only`	仅屏幕阅读器可见的内容（视觉上隐藏）。
`live-region`	用于动态通告的 ARIA 实时区域。

注意事项

该模块与 Bootstrap 的模态框和下拉菜单事件集成，用于焦点管理。
模态框的 Escape 键处理交由 Bootstrap 处理，以尊重 keyboard: false 设置和堆叠模态框。
表单验证通告会自动适用于任何带有 HTML5 验证属性的输入框。