ARIA Attributes in JavaScript

同学们，咱们今天聊一个特别重要的话题——在Lightning Web Components里怎么让我们的组件对所有用户都友好，特别是那些依赖屏幕阅读器的用户。这就要用到ARIA属性，也就是“可访问的富互联网应用程序”属性。 在LWC的模板里，写起来很简单，你直接用标准的HTML ARIA属性就行，比如`aria-checked`表示复选框是否选中，`aria-label`给元素加个标签。这些属性写在HTML里，跟在普通网页里一模一样。 但是，当你在JavaScript里通过组件实例去访问这些属性时，规则就变了。你不能直接用连字符的形式了。得记住一个转换模式：把开头的“aria-”去掉，然后把剩下的部分里，所有的连字符都去掉，改成驼峰式命名（camelCase）。连字符后面的字母要变成大写。 举个例子： - 模板里的`aria-checked`，到JavaScript里就变成`ariaChecked`。 - `aria-label`变成`ariaLabel`。 - 如果有个复杂的比如`aria-describedby`，那就变成`ariaDescribedby`，注意“by”的首字母没有大写，因为原来连字符后面是“d”，所以`described`的d大写，`by`没有前面的连字符，所以小写。但更常见的如`aria-errormessage`，就变成`ariaErrormessage`？其实我们只要遵循：去掉“aria-”，然后把每一个连字符后的字母大写。所以`aria-errormessage`，去掉“aria-”得到`errormessage`，这没有连字符了，所以就是`ariaErrormessage`？不对，我们先理解成：原始字符串是`aria-errormessage`，去掉“aria-”后剩下`errormessage`，因为已经没有连字符了，所以直接首字母大写？实际上camelCase的规则是除了第一个单词首字母小写外，后续每个单词首字母大写。但这里`errormessage`本身是一个单词还是两个？按照ARIA属性，`aria-errormessage`是一个整体。实际转换是：`aria-errormessage`去掉`aria-`得到`errormessage`，然后转camelCase，因为只有一个词，所以就是`ariaErrormessage`。但文档例子是`ariaWRMessage`？原Slide里提到：ariaSYS, ariaLabel, ariaWRMessage。可能是个别例子。实际规则就是去掉“aria-”并将剩下的部分转成camelCase。比如`aria-labelledby` -> `ariaLabelledby`。总之，记住：去掉“aria-”，剩下的部分中，每个连字符后的字母变成大写，并去掉连字符。 其实这个映射规则和HTML属性到JavaScript的转换是一样的。比如HTML里的`tabindex`，在JavaScript里是`tabIndex`；`readonly`是`readOnly`。所以ARIA属性也是一样的道理。 LWC全面支持了WAI-ARIA的状态和属性，也就是说，所有ARIA相关的东西，你都可以在组件实例上用这些camelCase属性去访问和设置。这非常重要，因为只有正确使用ARIA，我们构建的应用才是包容的，让所有人都能有效交互。 简单总结一下：模板里用带连字符的标准ARIA属性，JS里用驼峰式，去掉“aria-”前缀，然后转驼峰。记住这个模式，你就能游刃有余地在LWC里做好无障碍开发了。 好了，这一小节课就到这里，大家有任何问题随时提问。