ARIA Attributes — Advanced Accessibility

同学们，现在我们来讲一下在Lightning Web Components里怎么用ARIA属性来让我们的组件对屏幕阅读器更友好。 ARIA其实就是给辅助技术提供更丰富的语义，让那些需要屏幕阅读器的用户能更好地理解页面上的东西。比如，一个切换按钮，你按一下开，再按一下关，aria-pressed这个属性就能告诉屏幕阅读器，当前这个按钮是按下的状态，还是没按下的状态。 那在我们的LWC组件里，这种ARIA属性是怎么流转的呢？通常的模式是这样的：父组件的模板会在自定义元素上直接设置ARIA属性，比如写aria-pressed="true"。然后，在子组件内部模板里，我们用驼峰命名的getter和setter来接收这个属性，就像ariaPressed，它代表的就是那个aria-pressed的HTML属性。然后在子组件的JavaScript里，我们把这个属性用@api暴露出去，这样父组件就能传递值进来了。 这里有个命名规则很重要，大家记住：在HTML模板和标签上，我们写的是短横线命名，也就是kebab-case，像aria-pressed、aria-labelledby这样。但一到了JavaScript代码里，我们就要换成驼峰命名，camelCase，比如ariaPressed，ariaLabelledby。这是LWC框架自动帮我们做的转换，保持一致就不会出错。 另外还要注意一点，模板里的id属性，LWC编译的时候会自动给它加上一些随机后缀，保证在整个页面运行时id是全局唯一的。所以，你千万别在CSS或者JavaScript里直接用id选择器去拿那个元素，因为编译后的id可能已经变了，你的选择器会失效。想要定位元素，最好用class类名，或者用data-*这种自定义属性。 最后，如果你想通过ARIA属性去关联同一个组件的不同元素，比如用aria-labelledby指向另一个标签的id，那你要确保这两个元素都在同一个shadow root下，也就是都在同一个组件的内部模板里，或者是light DOM里。这样ARIA关联才能正常工作。 好了，ARIA这部分就讲这么多，大家理解了吗？我们继续下一个。