Define the purpose, name, role, and value of UI components in markup

Example of good semantic markup of an accordion
Image description: A code editor displaying good semantic markup of an accordion. The code in the editor is displayed below.

<button aria-expanded="false" class="Accordion-trigger" aria-controls="sect2" id="accordion2id"> <span class="Accordion-title"> Inclusive Design <span class="Accordion-icon"></span> </span> </button>

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

Coming soon

Coming soon

How to Implement This

Coming soon

How to Test This

Coming soon


No credits yet. But this could be you!

Code snippets written by Michellanne Li.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)