Html Aria Usage

by black strings

HTML

<button id="btn1" class="btn" aria-pressed="false" onclick="toggleActive(this)">Button 1</button>
<button id="btn2" class="btn" aria-pressed="false" onclick="toggleActive(this)">Button 2</button>
<button id="btn3" class="btn" aria-pressed="false" onclick="toggleActive(this)">Button 3</button>

CSS

.btn {
    padding: 10px 20px;
    margin: 5px;
    border: 1px solid gray;
    background-color: white;
    cursor: pointer;
  }

  .btn[aria-ondown="true"] {
    background-color: blue;
    color: white;
    border-color: blue;
  }

JavaScript

/**
ARIA attributes (like aria-pressed, aria-label, etc.) can only store string values. 
They are meant to improve accessibility by providing additional context to
assistive technologies (e.g., screen readers).
You cannot store complex objects (like JSON or arrays) directly in an aria-* attribute.
Use data-* instead for complex objects

ARIA Attribute 	| Allowed Values 								|	Example
aria-pressed  	| "true", "false", "mixed"			| <button aria-pressed="true">
aria-hidden	  	| "true", "false"								| <div aria-hidden="true">
aria-label	  	| Any descriptive string				| <button aria-label="Submit Form">
aria-live	    	| "off", "polite", "assertive"	|	<div aria-live="polite">
aria-disabled 	| "true", "false" 							|	<button aria-disabled="true">
*/
function toggleActive(clickedBtn) {
    // Select all buttons
    const btns = document.querySelectorAll(".btn");

    // Reset all buttons to aria-pressed="false"
    btns.forEach(btn => btn.setAttribute("aria-ondown", "false"));

    // Set clicked button as active
    clickedBtn.setAttribute("aria-ondown", "true");
  }