4 replies

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>

KP-C

Kevin Powell - Community•3y ago•

4 replies

curiousmissfox

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>

<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>

A11y masters....help

Similar Threads

A11y masters....help

Similar Threads

Similar Threads

Similar Threads