屏幕阅读器误读aria-expanded值，按钮属性始终为false的修复求助

核心问题定位 #

你遇到的问题大概率是JS代码错误地选中并修改了h3元素的aria属性，而非目标button元素——事件绑定或属性更新逻辑里，把h3当成了操作对象，导致button的aria-expanded始终没变化，反而h3被加上了正确的属性值。

具体修复步骤 #

1. 修正元素选择器
   给button加一个专属类名（如accordion-trigger），确保JS精准选中触发按钮，避免和h3的选择器混淆：

   // 正确选中所有手风琴触发按钮
   const accordionTriggers = document.querySelectorAll('.accordion-trigger');
   

2. 绑定点击事件到button上
   把点击事件直接绑定在button元素上，不要绑定到父级h3，避免事件冒泡导致的误操作：

   accordionTriggers.forEach(trigger => {
     trigger.addEventListener('click', handleAccordionToggle);
   });
   

3. 正确更新button的aria-expanded属性
   在切换逻辑里，直接操作当前点击的button元素，而非它的父元素h3：

   function handleAccordionToggle(e) {
     const trigger = e.target;
     // 获取当前展开状态
     const isExpanded = trigger.getAttribute('aria-expanded') === 'true';
     // 切换button的aria-expanded值
     trigger.setAttribute('aria-expanded', !isExpanded);
     // 同步切换对应面板的显示状态
     const panelId = trigger.getAttribute('aria-controls');
     const panel = document.getElementById(panelId);
     panel.hidden = isExpanded;
   }
   

4. 规范HTML结构
   确保button是h3的子元素，且aria-controls的值和面板id严格匹配：

   <div class="accordion-item">
     <h3>
       <button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-panel-1">
         手风琴标题1
       </button>
     </h3>
     <div id="accordion-panel-1" class="accordion-panel" hidden>
       手风琴内容1...
     </div>
   </div>
   

额外检查项 #

• 排查是否有其他JS代码意外修改了h3的aria属性，比如监听了h3的点击事件并更新其aria-expanded
• 确保没有使用closest('h3')这类方法错误地获取到父元素，然后对其修改属性
• 测试时用浏览器开发者工具的无障碍标签页，实时查看button元素的aria属性变化

内容的提问来源于stack exchange，提问作者Malvinka