Unfortunately, there is not a single and simple answer that works for all components. Let’s dig a little deeper into this topic. We now assume there is a layout designed for the component and that layout is accessible. We only focus on the development work.
Development work should start with an important step - technical design. To me, this step is the most important. It can help save time and effort and make it much easier to create reusable components.
Technical design means breaking the components down. When you understand the component in question and what it is supposed to do, it’s much easier to start planning for accessibility.
There are many ways to do this. One way is to stop and ask various questions about the component.
Is it a functional component? If not, you don’t need ARIA at all.
Is there more than one function in this component? If yes, break the component down so you can work with one feature at a time.
Once we are thinking about a single function in a component, then we can start to consider what type of functionality does that component have.
Is it a link? If yes, you don’t need ARIA if you just show all visible content for everyone.
Is it a button? If it is, is it a toggle button that toggles another element? If yes, use aria-extended on the button and aria-controls to define what element is being controlled. If it isn’t a toggle button, you don’t need ARIA.
Is it an accordion? You should use aria-extended on the button that toggles the content. You should also use aria-controls on the button to define the element that is being toggled. Use a heading inside the button because usually, the button is also a heading for the page. And ensure to pay attention to the correct heading level!
If the component is more complex than these, I recommend you define the type of component you are using and then head to the ARIA Authoring Practices Guide to ensure you are using the correct ARIA for your component. If you’d like to see examples of specific components on this site, you can send feedback anonymously to send me your requests.