westbrook, 10 months ago

@jrjurman This works from the testing side: https://dev.to/westbrook/testing-accessibility-with-shadow-roots-55cm And does through by visiting popular patterns for shipping accessible shadow DOMs, so hopefully it'll help to get you started.

Shadow DOM accessibility is mostly the same as light DOM accessibility, but augmented by ID refs NOT passing through shadow DOM boundaries.

After that, #a11y is a BIG subject. Take your time, ask questions, learn the tools your visitors leverage when interacting with your content and keep building!

jrjurman, 10 months ago

Also, I understand a great way to validate #accessibility is also "just test it!" - but I'm not actually totally familiar with what accessible interactions should look like on the web. What should an element say or not say? Any articles or good starting guides for this would be super appreciated!

#WebDev #a11y

yatil, 10 months ago

@jrjurman Generally shadow DOM is not a problem for accessibility, take a look at the Accessibility Tree and make sure that name, role and state of every element is revealed correctly.

This course can get you started, and then there are the tutorials (which I like to share because I helped with it) that show how to do the best with standard HTML – the same principles apply to custom components.

• https://www.edx.org/course/web-accessibility-introduction
• https://www.w3.org/WAI/tutorials/

yatil, 10 months ago

@jrjurman That said, with more complicated components, you want to get started with verifying your Accessibility Tree in screen readers and other assistive technologies.

aardrian, 10 months ago

@jrjurman If you are talking about screen readers, https://a11ysupport.io/ has robust test that you can dig through.

But for the most part, don’t override pronunciation (https://adrianroselli.com/2023/04/dont-override-screen-reader-pronunciation.html), don’t add instructions for native controls (https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html), don’t trust speech viewers exclusively, (https://adrianroselli.com/2020/08/speech-viewer-logs-of-lies.html), and do work with real users.