CODEWITHSUNDEEP
htmlcsswai-aria
jansyb04
jansyb04

Reputation: 161

Accessibility issue with pure CSS accordion

I have an accordion that I'm struggling to make keyboard accessible. I'm using an input element to track when user clicks on accordion and display the hidden content, which is what's causing the issue since the input it's set to display: none.

Is there a way around to making it accessible? I'm still learning about web accessibility. Would appreciate any tips! 

.accordion {
  width: 100%;
  box-shadow: 0 12px 12px -6px rgba(0, 0, 0, 0.2);
}

.accordion input[name="panel"] {
  display: none;
}

.accordion label {
  position: relative;
  display: block;
  padding: 1em;
  background: rgba(65, 64, 66, 0.8);
  border-radius: 0.2em 0.2em 0 0;
  width: auto;
  font-size: 1.2em;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: FSHumanaRegular;
  margin-top: 1em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion label:after {
  content: "+";
  position: absolute;
  right: 1em;
  width: 1em;
  height: 1em;
  color: #eee;
  text-align: center;
  border-radius: 50%;
  background: #fdb600;
}

.accordion label:hover {
  color: #fdb600;
}

.accordion input:checked + label {
  color: #fdb600;
}

.accordion input:checked + label:after {
  content: "-";
  line-height: 0.8em;
}

.accordion .accordion_content {
  overflow: hidden;
  max-height: 0px;
  position: relative;
  padding: 0 1.425em;
  background: rgba(255, 255, 255, 0.6);
  box-sizing: content-box;
  transition: all 150ms cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion .accordion_content .accordion_body {
  line-height: 1.4em;
  padding: 1.8em 0 1.5em;
}

input[name="panel"]:checked ~ .accordion_content {
  max-height: 1000em;
}
<div class="accordion" id="myAccordion">
							<div>
								<input type="checkbox" name="panel" id="accordionContent">
								<label for="accordionContent">Historical Data</label>
								<div class="accordion_content">
									<div class="accordion_body">
                    <!-- CONTENT -->
                    <p>Hello, world!</p>
									</div>
								</div>
							</div>
</div>

Upvotes: 1

Views: 833

Answers (1)

Canica
Canica

Reputation: 2738

To start with, you shouldn't be using a checkbox to collapse/expand any element (bad practice). You can instead use a <button> that would trigger/control this functionality and on this button you should further add the proper ARIA values.

You can look into the following ARIA attributes to help you further enable accessibility on a collapsible element. 

           aria-expanded="false" 
           aria-controls="collapsedElementId"

For example, Bootstrap's implementation of the collapse component uses such markup to enhance accessibility: https://getbootstrap.com/docs/4.1/components/collapse/#accessibility

Upvotes: 1

Related Questions