A11y masters....help

I have an accordion element

 <div class="accordion-wrap">
            <button class="accordion-btn row ai-cen jc-sb gap-2" aria-controls="accordion-content-1" aria-expanded="true">
                    <h3>When will my order ship?</h3> 
                    <i class="fa-light fa-xmark"></i>
                </button>
            <div class="accordion-content" id="accordion-content-1">

                <p>Orders typically ship within 1-2 business days. During peak holiday season, please allow up to 3
                    business days for processing and shipping. You will receive an email notification with tracking
                    information once your order has shipped.</p>
            </div>
        </div>

 <div class="accordion-wrap">
            <button class="accordion-btn row ai-cen jc-sb gap-2" aria-controls="accordion-content-1" aria-expanded="true">
                    <h3>When will my order ship?</h3> 
                    <i class="fa-light fa-xmark"></i>
                </button>
            <div class="accordion-content" id="accordion-content-1">

                <p>Orders typically ship within 1-2 business days. During peak holiday season, please allow up to 3
                    business days for processing and shipping. You will receive an email notification with tracking
                    information once your order has shipped.</p>
            </div>
        </div>

is this the correct way to use aria-controls and aria-expanded? And then in javascript, just toggle the aria-expanded attr? The article i read said when aria-controls is set and aria-expanded="false" there will be a hidden attribute on the element it controls but im not seeing that in dev tools on #accordion-content-1 While i have you, what is the correct aria attr for close buttons? Would it be an aria controls for the parent element?

<div class="parent" 
id="parent">
  <button type="button" data-close aria-controls="parent">X</button>
  <div>
    <p>Some Content</p>
  </div>
</div>

<div class="parent" 
id="parent">
  <button type="button" data-close aria-controls="parent">X</button>
  <div>
    <p>Some Content</p>
  </div>
</div>

3 Replies

clevermissfoxOP•12mo ago

Looks like I’m missing a couple roles and an aria-labelledby which I though should be a aria-controlledby on the element that is hidden. I thought I read that if the button has the right attributes , it will add hidden on the element it controls (in this case #accordion-content-1) automatically whenever aria-expanded changes https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Web Accessibility Initiative (WAI)

Accordion Pattern (Sections With Show/Hide Functionality)

Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).

vince•12mo ago

I was gonna link that page because I've used that in the past, and looking at the example it says not to use it in prod which I conveniently didn't see before 🙈

clevermissfoxOP•12mo ago

Uh oh Great

Gaming

Programming

A11y masters....help