Set your Publisher ID in src/config/ads.ts to display live ads.
ARIA Essentials: Roles, States & Properties
The First Rule of ARIA and using aria-expanded, aria-hidden & aria-label
WAI-ARIA (Accessible Rich Internet Applications) bridges gaps when native HTML semantics cannot express complex interactive web application behaviors.
The First Rule of ARIA
"If you can use a native HTML element or attribute with the semantics and behavior you require already built in, then do so. Do not use ARIA instead."
ARIA does not change how an element looks or behaves—it only changes how assistive technologies announce it.
aria-label="text": Provides an invisible accessible label for icon buttons.
aria-expanded="true|false": Communicates whether an accordion or dropdown menu is open.
aria-hidden="true": Completely hides decorative elements from screen readers.
<button aria-expanded="false"
aria-controls="section-1"
onclick="toggleAccordion(this)">
What is Codexia Academy?
</button>
<div id="section-1" hidden>
<p>Codexia is an open platform offering 50+ developer tutorial tracks.</p>
</div>
<script>
function toggleAccordion(btn) {
const isExpanded = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", !isExpanded);
document.getElementById("section-1").hidden = isExpanded;
}
</script>Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
What is the universally recognized "First Rule of ARIA"?