Last active
November 11, 2020 19:43
-
-
Save DougCrossDesign/ec88d50d94214f99b6aadc0510ccb3b5 to your computer and use it in GitHub Desktop.
Web Accessibility - Accordions
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example-wrapper"> | |
| <p>Tab through accordions, tap the spacebar to open accordion.</p> | |
| <div id="accordion" class="accordion-example"> | |
| <ul class="accordion-controls" aria-label="Accordion Control Group Buttons"> | |
| <li> | |
| <button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">Apples</button> | |
| <div id="content-1" aria-hidden="true"> | |
| <p>Apples are a fine fruit often associated with good health, and fewer doctor’s appointments.</p> | |
| <p>Example: An apple a day keeps the doctor away.</p> | |
| </div> | |
| </li> | |
| <li> | |
| <button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">Lemons</button> | |
| <div id="content-2" aria-hidden="true"> | |
| <p>Lemons are good with almost anything, yet are often have a negative connotation when used in conversation.</p> | |
| <p>Example: The bread from the french bakery is normally very good, but the one we bought today was a lemon.</p> | |
| </div> | |
| </li> | |
| <li> | |
| <button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">Kiwis</button> | |
| <div id="content-3" aria-hidden="true"> | |
| <p>Kiwis are a fun, under-appreciated fruit.</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var accordionButtons = $('.accordion-controls li button'); | |
| function accordionToggle() { | |
| $('.accordion-controls li button').on('click', function(e) { | |
| $control = $(this); | |
| accordionContent = $control.attr('aria-controls'); | |
| checkOthers($control[0]); | |
| isAriaExp = $control.attr('aria-expanded'); | |
| newAriaExp = (isAriaExp == "false") ? "true" : "false"; | |
| $control.attr('aria-expanded', newAriaExp); | |
| isAriaHid = $('#' + accordionContent).attr('aria-hidden'); | |
| if (isAriaHid == "true") { | |
| $('#' + accordionContent).attr('aria-hidden', "false"); | |
| $('#' + accordionContent).css('display', 'block'); | |
| }if (isAriaHid == "false") { | |
| $('#' + accordionContent).attr('aria-hidden', "true"); | |
| $('#' + accordionContent).css('display', 'none'); | |
| } | |
| }); | |
| }; | |
| function checkOthers(elem) { | |
| for (var i=0; i<accordionButtons.length; i++) { | |
| if (accordionButtons[i] != elem) { | |
| if (($(accordionButtons[i]).attr('aria-expanded')) == 'true') { | |
| $(accordionButtons[i]).attr('aria-expanded', 'false'); | |
| content = $(accordionButtons[i]).attr('aria-controls'); | |
| $('#' + content).attr('aria-hidden', 'true'); | |
| $('#' + content).css('display', 'none'); | |
| } | |
| } | |
| } | |
| }; | |
| $(document).ready(function() { | |
| //call this function on page load | |
| accordionToggle(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Example Reset*/ | |
| #example-wrapper{ | |
| max-width: 900px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| /* List Item Styles */ | |
| $list-item-margin: 0.75em; | |
| /* Button Styles */ | |
| $accordion-button-bgcolor: rgba(255,255,255,1); | |
| $accordion-button-txtcolor: rgba(0,0,0,1); | |
| $accordion-button-border-width: 1px; | |
| $accordion-button-border-style: solid; | |
| $accordion-button-border-color: rgba(0,0,0,1); | |
| $accordion-button-padding: 1em; | |
| $accordion-button-font-family: 'Helvetica', Arial, sans-serif; | |
| $accordion-button-font-size: 1em; | |
| /*Content Div Styles*/ | |
| $accordion-content-font-family: 'Helvetica', Arial, sans-serif; | |
| $accordion-content-font-size: 1em; | |
| #accordion{ | |
| ul, .accordion-controls{ | |
| /*Base*/ | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| li{ | |
| /*Vars*/ | |
| margin-bottom: $list-item-margin; | |
| button{ | |
| /*Base*/ | |
| width: 100%; | |
| text-align: left; | |
| /*Vars*/ | |
| border-color: $accordion-button-border-color; | |
| border-style: $accordion-button-border-style; | |
| border-width: $accordion-button-border-width; | |
| background-color: $accordion-button-bgcolor; | |
| color: $accordion-button-txtcolor; | |
| padding: $accordion-button-padding; | |
| font-family: $accordion-button-font-family; | |
| font-size: $accordion-button-font-size; | |
| } | |
| div{ | |
| /*Base*/ | |
| display: none; | |
| /*Vars*/ | |
| font-family: $accordion-content-font-family; | |
| font-size: $accordion-content-font-size; | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Web Accessibility - Accordions | |
| ------------------------------ | |
| An example of web accessible HTML accordions using Aria attributes aria-controls and aria-expanded and the panel id to allow javascript to handle the active and inactive accordion panels. | |
| A [Pen](https://codepen.io/DougCrossDesign/pen/dVxMaj) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io). | |
| [License](https://codepen.io/DougCrossDesign/pen/dVxMaj/license). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment