Anatomy of code
- Wrapper (div class)
- Button class (affects look and feel of accordion)
Aria-controls (details-1) has to match item wrapper (div id="details-1")
svg = Scalable vector graphic (a symbol of some kind)
- Examples: plus sign, minus sign, smiley face
- svg class is in code to define the bullet symbol (plus-sign)
Span class-"gb-c-accordion__heading gb-u-type-p—small" converts font type and symbol from large accordion to small accordion (deleting this makes default small accordion)
- When we share the snippets of code, we'll provide explanation of what parts of the code can be changed and how that affects the accordion is rendered on the live webpage
Best Practices
- Need summary text on page (not just accordion)
- Contact info outside accordion also
- Make ALL links unique, even if they are tucked into different accordion items and not always visually visible
- Registrar landing page has large divider accordion
- All accordions on site used to be unordered lists (UL) with list items (LI), but Jaron and Adrian transformed small and large into div classes
- NOTE – Do NOT use WYSIWYG to edit accordions once they're made
Accessibility
- Where possible, add content to webpage, not a linked PDF
- Usability (for mobile, etc) don't need app or to download
- When PDF absolutely needed, we have a remediation process