Consider adding examples/best-practices to create accessible custom elements

[pshihn]

Description

Consider adding examples/patterns/best-practices to create accessible custom elements.
Some points to consider:

• Best practices for setting aria attributes.
• tabIndex for focus
• Delegate focus option when creating shadowDom - this.attachShadow({ mode: 'open', delegatesFocus: true });

I have done this in various components but have not given thought into doing it in a consistent fashion. Would be nice to have some sort of best practices around basic accessibility.

[arthurevans]

I believe this is an important topic, but also potentially a huge one, and largely not specific to LitElement. We'd need to figure out which bits, if any are specific to LitElement, maybe provide some high-level guidance and link out to other discussions?

https://robdodson.me/the-future-of-accessibility-for-custom-elements/
https://medium.freecodecamp.org/styling-accessibility-a-web-components-approach-dc2aa8123eb2
https://developers.google.com/web/fundamentals/web-components/best-practices

[sorvell]

This content would be more appropriate at web.dev. Suggest filing an issue there.

[justinfagnani]

I do think it'd be a service to our users and our users' users to have some entrypoint for accessibility in our docs, even if it's mainly outbound links to non-Lit-specific content on MDN, web.dev, etc.