Custom framework attributes (data-* and ARIA)
data-* attributes and ARIA attributes power two important layers of a well-built web project: interactive JavaScript behavior (via frameworks) and accessibility for assistive technologies. This article shows you how to add both through Site Designer’s Content pane.
What are data-* attributes?
data-* attributes are custom HTML attributes that store information for JavaScript without affecting layout or presentation. Every CSS framework uses them to wire up interactive components without inline JavaScript:
- Bootstrap:
data-toggle="modal",data-target="#myModal",data-dismiss="modal",data-ride="carousel" - Foundation:
data-accordion,data-reveal,data-orbit,data-sticky,data-dropdown - Materialize:
data-target="mobile-nav",data-badge-caption="new"
When you add a framework component through Site Designer’s canvas, the necessary data-* attributes are inserted automatically. However, for advanced configurations — such as customizing a Foundation accordion to allow multiple open panels — you’ll need to add or modify data-* attributes manually.
Adding data-* attributes in Site Designer
- Select the element on the canvas.
- Open the Content pane (the pane that shows the element’s inner content and tag settings).
- Scroll to the Attributes section.
- Click Add Attribute.
- Enter the attribute name (e.g.,
data-toggle) and value (e.g.,modal). - Press Enter to apply.
The attribute is immediately added to the element’s HTML and visible in the code view.
ARIA roles
ARIA (Accessible Rich Internet Applications) attributes supplement HTML semantics for users who rely on screen readers. Key ARIA roles you may need to add manually:
| Attribute | Value / Usage |
|---|---|
role | navigation, dialog, main, banner, complementary, search |
aria-label | A short text description of the element (e.g., aria-label="Main navigation") |
aria-hidden | true — hides the element from assistive tech (use for decorative icons) |
aria-expanded | true / false — indicates open/closed state of accordions and dropdowns |
aria-modal | true — tells screen readers a dialog is a modal (use with role="dialog") |
Add ARIA attributes exactly the same way you add data-* attributes: through the Content pane → Attributes section.
When to add attributes manually vs. let the framework handle it
| Scenario | Who handles it |
|---|---|
| Inserting a Foundation reveal from the canvas | Site Designer (automatic) |
| Customizing a Foundation accordion to allow multiple open panels | Manual (data-multi-expand="true" on the ul) |
| Making a Bootstrap modal accessible | Site Designer adds role="dialog" and aria-labelledby automatically |
Adding aria-label to a decorative icon link | Manual |
| Implementing a fully custom dropdown (no framework) | Manual — all data-* and ARIA |
Example: Foundation accordion with custom options
A standard Foundation accordion is created automatically. To allow multiple panels open simultaneously, add this attribute to the <ul class="accordion"> element:
- Attribute name:
data-multi-expand - Value:
true
And to allow all panels to be closed (none forced open):
- Attribute name:
data-allow-all-closed - Value:
true
These are added in the Content pane’s Attributes section — no code editing required.
