A lot of talk is going on in the frontend world about a11y, WCAG, & Section 508.

It seems none of us can agree on proper implementation of frontend components, but at least everyone is creating solutions for this important web development framework.

I want to compare a few examples of the Accordion Component.

NOTE: I really don't want this article to come across negatively. I hate using "PROS & "CONS" but it best explains the features. I honestly think all parties do an awesome job.

The W3 WAI-ARIA Authoring Practices Outline offers more detail on functions: WAI-ARIA Accordion Practices


Ebay Mind Components

DEMO: http://ianmcburnie.github.io/mindpatterns/accordion/

  <div class="accordion accordion-js" id="accordion-0" aria-live="polite" role="tablist">
    <div>
        <h4 role="tab" aria-selected="true" id="accordion-0-tab-0" aria-controls="accordion-0-panel-0" aria-expanded="true" tabindex="0">First Amendment</h4>
        <div role="tabpanel" aria-hidden="false" id="accordion-0-panel-0" aria-labelledby="accordion-0-tab-0">
          Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </div>
    </div>
</div>

Cons:

  1. Hard coded H4 for the Trigger
  2. Major Divititis
  3. Panel not focused

Pros:

  1. JS is an easy jQuery Plugin
  2. ARIA Live announcement
  3. Up/Down Key moves focus

U.S. Web Design Standards

DEMO: https://standards.usa.gov/accordions/

   <div class="usa-accordion">
    <ul class="usa-unstyled-list">
      <li>
        <button class="usa-button-unstyled" aria-expanded="true" aria-controls="amendment-1">First Amendment</button>
        <div id="amendment-1" class="usa-accordion-content">
          <p>
          Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
          </p>
        </div>
      </li>
   </ul>
</div>

Cons:

  1. I don't like block elements inside of List Markup. Seems like mis-usage of structure.
  2. Long Class names
  3. Panel not focused

Pros:

  1. "EXPANDED" / "COLLAPSED" reported
  2. Up/Down Key moves focus

Deque

DEMO: https://dequeuniversity.com/library/aria/tabpanels-accordions/tabbed-accordion

  <ul class="tablist" role="tablist">
    <li>
        <div class="tab active" role="tab" aria-setsize="4" aria-posinset="1" aria-selected="false" aria-controls="panel1" tabindex="0">First Amendment</div>
        <div id="panel1" class="tabpanel active" role="tabpanel" aria-hidden="true">
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </div>
    </li>    
</ul>

Cons:

  1. I don't like block elements inside of List Markup. Seems like mis-usage of structure.
  2. Spacebar doesn't trigger panel
  3. Weird combination of down key to activate and tab to skip elmements

Pros:

  1. You can TAB into active Panel
  2. JS is an easy jQuery Plugin
  3. Up/Down Key moves focus

My Version

DEMO: http://codepen.io/dubrod/full/XKVxzw/

  <dl class="accordion" tabindex="0">
        <dt role="tab" tabindex="0" aria-controls="acc1">
            First Amendment
        </dt>
        <dd aria-hidden="true" id="acc1" tabindex="0" role="tabpanel">
            Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </dd>
        <dt role="tab" tabindex="0" aria-controls="acc2">
            Second Amendment
        </dt>
        <dd aria-hidden="true" id="acc2" tabindex="0" role="tabpanel">
            A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
        </dd>
        <dt role="tab" tabindex="0" aria-controls="acc3">
            Third Amendment
        </dt>
        <dd aria-hidden="true" id="acc3" tabindex="0" role="tabpanel">
            No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
        </dd>
</dl>

Cons:

  1. Up/Down Key does NOT move focus

I like the combination of the Definition List and the Tab Roles I think it provides excellent feedback during Screen Reader usage. It also creates an alternative to the DIV overkill.

Looking forward to future conversations and development on a11y components.


2,383 7 14