I need to expand and collapse pure css accordion when I hit keyboard Enter Key for web accessibility

Question

I have created an accordion with an input checkbox. No Js used. I need to expand and collapse the accordion when I hit Enter Key in the keyboard. It's for web accessibility. please help me to solve this.

HTML code below

<div class="tabs">
        <div class="tab">
          <input type="checkbox" id="chck1" />
          <label class="tab-label" for="chck1">
            Item 1
          </label>
          <div class="tab-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
          </div>
        </div>
      </div>

CSS code below

$midnight: #2c3e50;
$clouds: #ecf0f1;
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
  &-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: $midnight;
    font-weight: bold;
    cursor: pointer;
  }
  &-content {
    max-height: 0;
    padding: 0 1em;
    color: $midnight;
    background: white;
    transition: all .35s;
  }
}
input:checked {
  + .tab-label {
    background: darken($midnight, 10%);
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }
}

Answer 1

The problem with your current pattern

I know it is frustrating when you ask a simple question of "how do I do this" and someone says "do this instead", but as you have marked this as "accessibility" the way you are implementing this at the moment is problematic.

For example an <input type="checkbox"> should not exist outside of a <form>, so to make your HTML valid you would have to wrap it in a <form> element. This then changes the behaviour for a screen reader user as a screen reader would enter "forms mode" which changes the behaviour of the screen reader. There are other reasons such as forms mode expecting Enter to submit something etc. etc.

As you seem to be looking for something that will work without JavaScript (as a fallback....you still need JavaScript to progressively enhance accessibility) may I suggest a much simpler way.

<details> and <summary>

It is not often I am able to prescribe a "magic bullet" for a problem, but <details> and <summary> are actually pretty awesome.

Firstly support is pretty good and most of the semantics are dealt with automatically for you!

The way to use it is pretty simple, <details> is your outer wrapper and this contains the <summary> element. The <summary> element is effectively your accordion section heading and then you can add anything you want within the <details> section below it.

See the following fiddle:

<details>
   <summary>Item 1</summary>
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
</details>

As you can see you get so much baked in functionality. You also get automatic properties such as "expanded / collapsed" announced in most browser / screen reader combinations. Finally in browser that don't support it it just falls back to static content.

What about Internet Explorer etc?

Now there are a couple of issues with <details> and <summary>. Internet Explorer does not support it.

This is where we use some JavaScript to improve the accessibility.

If we modify the HTML slightly to include aria-expanded, tabindex="0" and role="button" this fixes the problem. However there is no point doing this for any browser other than IE so I would add it conditionally.

<details>
       <summary role="button" aria-expanded="false" tabindex="0">Item 1</summary>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
    </details>
    <details>
       <summary role="button" aria-expanded="false" tabindex="0">Item 2</summary>
       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!</p>
    </details>

You may also want to add aria-controls for completeness but I wanted to give you a 99% compatible solution as simply as possible.

Also bear in mind you would need to handle toggling the aria-expanded state and actually hiding and showing the content etc.

A polyfill I found that may help and a final word on Headings

Here is a polyfill I found for <details> and <summary> that looks pretty good. I have confirmed it is MIT license so you can use it.

I would share my own polyfill but it has several dependencies whereas this one is standalone.

it also appears to deal with a part I left out of discussion so far - headings. If you use headings (<h2> to <h6>) to denote each section (depends on page structure whether correct or not) then ideally these should go around the <summary>.

This is because <summary> is treated like a button. However other than headings and section elements nearly everything else can go into the <summary> element as it accepts phrasing content.

**most of the time I would say it is beneficial to wrap a <summary> in an appropriate level <h2> to <h6> due to how screen reader users navigate, but it is not a requirement. **

Styling etc.

A final thing that might not be immediately apparent. If you want to apply styling based on the current start (expanded / closed) it exposes an attribute open when expanded.

<details open> (expanded) vs <details> (closed).

You can use this for CSS selectors with details['open'] to style the container and details[open]>summary to style the summary.

Answer 2

document.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    document.getElementById("#chck1").checked = true
  }
});