WAI-ARIA States and Properties (1)

好了，今天我们来聊聊 Lightning Web Components 里一个非常贴心的设计，就是它对无障碍访问的支持，也就是 WAI-ARIA。 简单说，ARIA 是给 HTML 加上一些额外的属性，帮助屏幕阅读器这些辅助技术更好地理解页面上那些动态交互的内容。在 LWC 里，你可以直接在组件上使用这些 ARIA 属性，而且写法上特别自然——它们会自动映射成 JavaScript 里那种驼峰命名的属性。 举个例子，原生 HTML 里你写成 aria-label，在 LWC 模板里也这么写，但到了 JavaScript 端访问组件实例时，它自动变成了 ariaLabel。同样，aria-expanded 就变成 ariaExpanded。这样你在写逻辑的时候，直接用熟悉的驼峰变量就能读取或设置这些状态，不用来回转换。 接下来，我们先快速看一下最常用的第一组 ARIA 属性，从 A 到 G 开头这一批。 首先是 `ariaActiveDescendant`，这个在复合组件里特别有用，比如一个下拉列表或者一个网格，当前焦点在哪个子项上，就用它来标记，让辅助技术知道现在谁是被激活的后代元素。 `ariaAtomic` 是控制实时区域更新行为的。当你一个区域的内容会动态变化，如果希望屏幕阅读器把整个区域的文字都重新读出来，就把它设为 true；要是只想读变化的那部分，就是 false。 `ariaAutoComplete` 管的是输入建议，像搜索框自动补全的场景，用它告诉辅助技术这个输入框是不是有自动完成功能，值是 inline、list 还是 both 或者 none。 `ariaBusy` 就很简单了，表示一个元素正在加载或更新中，这时候辅助技术可以等一等，避免读到不完整的内容。 然后是表格列相关的属性，`ariaCol` 系列，比如 `ariaCol` 本身用来标记一个单元格属于表格的第几列，很适合复选框和单选按钮那种控件。还有扩展出的 `ariaColCount`、`ariaColIndex`、`ariaColSpan` 这些，用来描述表格列的元数据，告诉辅助技术整个表有几列，当前元素跨越几列。 再来看导航相关的，`ariaControls` 标识的是当前元素控制着哪个区域，比如一个标签页按钮控制着对应的面板；`ariaCurrent` 则是在导航里标记当前处于活动状态的项，值可以是 page、step、location、date 或 time。 `ariaDescribedBy` 是用来关联描述文本的。例如输入框下面的提示文字，通过这个属性把输入框和提示的 id 绑定起来，屏幕阅读器就能一起读出来。 状态指示方面，`ariaDisabled` 表示一个控件当前是否禁用，`ariaExpanded` 则表示一个可展开折叠的控件，现在是展开还是收起的状态。 这些 cammelCase 属性在 LWC 组件里都可以直接赋值或者读取，让你的组件既能提供丰富的交互，又能对所有人都友好易用。记住，在模板里还是大写字母连字符的写法，比如 aria-expanded，但在 JS 里处理就是 ariaExpanded。 好了，今天这部分就到这里，下一节我们接着看后面的属性。