UD5工具箱
以下术语与本工具生成的无障碍多选下拉框组件密切相关。理解这些术语有助于你更好地使用工具并进行二次开发。
WCAG（Web Content Accessibility Guidelines）
Web内容无障碍指南，是由W3C的WAI（Web Accessibility Initiative）制定的国际标准。WCAG定义了使Web内容对残障人士可访问的一系列准则，分为A、AA、AAA三个合规级别。本工具生成的组件设计目标是满足WCAG 2.1 AA级别的要求，包括足够的颜色对比度、键盘可操作性、屏幕阅读器兼容性等。
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）
WAI-ARIA是W3C制定的一套规范，用于增强Web页面的无障碍性，特别是对于复杂的交互组件。它定义了一系列HTML属性（如aria-expanded、aria-selected、role等），用于向辅助技术（如屏幕阅读器）描述组件的状态、角色和属性。本工具大量使用WAI-ARIA属性来标注多选下拉框的各个交互元素。
ARIA属性
ARIA属性是HTML元素上的特殊属性，用于向辅助技术提供关于元素角色和状态的额外信息。本工具涉及的关键ARIA属性包括：aria-expanded（指示下拉面板是否展开）、aria-controls（关联触发按钮和被控制的面板）、aria-haspopup（指示元素会弹出菜单）、aria-multiselectable（指示列表框支持多选）、aria-selected（指示选项是否被选中）。这些属性协同工作，确保屏幕阅读器用户能够完整感知组件的状态和可用操作。
屏幕阅读器（Screen Reader）
屏幕阅读器是一种辅助技术软件，它将屏幕上的视觉内容转换为语音输出或盲文显示，供视障用户使用。常见的屏幕阅读器包括Windows上的NVDA和JAWS、macOS/iOS上的VoiceOver、Android上的TalkBack等。本工具生成的代码经过精心设计，确保在这些主流屏幕阅读器上都能正确读取组件的结构、状态和操作提示。
键盘导航（Keyboard Navigation）
键盘导航是指用户仅通过键盘按键就能完成所有交互操作的能力。对于无法使用鼠标的用户（如运动障碍患者、视力受损用户），键盘导航是他们访问Web内容的主要方式。本工具生成的多选下拉框支持完整的键盘操作：Tab键聚焦和离开组件、Enter或Space键打开下拉面板和切换选项状态、Arrow Down/Up键在选项间移动焦点、Escape键关闭面板。
Focus Management（焦点管理）
焦点管理是指在交互过程中控制键盘焦点（即当前接收键盘输入的元素）的位置和移动逻辑。良好的焦点管理是无障碍组件的核心要素之一。在多选下拉框中，焦点管理体现在：打开面板时焦点是否自动移到第一个选项、选项间移动时焦点是否正确跟随、关闭面板时焦点是否返回触发按钮。本工具生成的代码实现了完善的焦点管理策略。
Listbox（列表框）
Listbox是WAI-ARIA定义的一种交互模式，表示一个可供用户选择一个或多个选项的列表。在本工具中，多选下拉框的下拉面板即扮演Listbox的角色。它使用role="listbox"标记，内部的每个选项使用role="option"标记。当选项被选中时，对应的option元素会设置aria-selected="true"属性。这种语义化的标注方式使得辅助技术能够准确理解列表的结构和每个选项的状态。
触控目标尺寸（Touch Target Size）
触控目标尺寸是指界面上可点击/可触控元素的最小可视面积。WCAG 2.1的成功标准2.5.5（AAA级别）建议触控目标至少为44x44 CSS像素，而WCAG 2.2的成功标准2.5.8（AA级别）要求至少为24x24 CSS像素。本工具生成的复选框和选项行都确保了足够的触控目标面积，方便移动端用户操作，减少误触的可能性。
IIFE（Immediately Invoked Function Expression）
立即调用函数表达式，是一种JavaScript设计模式，用于创建独立的作用域，避免变量和函数污染全局命名空间。本工具生成的JavaScript代码采用IIFE或模块化封装，将所有组件逻辑封装在独立的作用域中。这意味着即使页面中存在多个多选下拉框实例，或者与其他JavaScript库共存，也不会产生命名冲突。
CSS BEM命名规范
BEM（Block Element Modifier）是一种CSS类名命名方法论，通过Block、Element和Modifier三个层级来组织类名，提高样式的可读性和可维护性。本工具生成的CSS采用ams-前缀加BEM风格的命名方式（如.ams-multiselect、.ams-multiselect__trigger、.ams-multiselect__option--selected等），既避免了全局命名空间污染，又保持了代码结构的清晰性和可维护性。