Versions

Accordion5.fwaction (2020-02-02) (Downloaded 24 times)

Contains:

  • Accordion5 Page (page-action) - v. 0.4.2
  • Accordion5 Element (item-action) - v. 0.4.0

Compatible: Pro 7

Author: Walter Davis

accordion accessibility html 5 responsive

Accordion5 is a completely JavaScript-free* way to make accordion effects. It uses the HTML5 <details> tag, which is actually designed for this purpose, instead of a bunch of JavaScript to hide and show elements. Because the elements of the accordion aren’t removed from the page flow with display: none, screen readers and other assistive devices (and Google) can see them and understand what they are.

*JavaScript-free to a point: all modern “evergreen” browsers can use it without any help. IE, however (which even its own parents have disowned) needs a JavaScript “polyfill” to see and understand this tag. There is an option in the Action interface to enable this if you need it.

To use, apply the Accordion5 Page Action to your page, and set the options you want to use there:

  • Install IE polyfill
  • Only one segment open at a time
  • Scroll into view (and offset from the top of the page) – only active on small screens

If you don’t enable any of these options, then no JavaScript will be injected into your page.

Next, draw or insert an HTM box that will hold all of the segments of your accordion. Apply the Accordion5 Element Action to this box. Choose which heading level you will use for your Accordion headers. These elements will be converted to the <summary> tag inside each <details> element, so you can ignore any styling that Freeway gives an <h2> or whichever heading you choose.

Insert another HTML box inline within the box you just created. This will become your first accordion segment. Double-click into this element, and type some text for the heading. Type a return, and then type some more text as the details about that heading. You may style this text as you like, or you can leave it plain, and set your styles later when we add the global styles. Select the first line (the heading) and click on the h2 (or h3 or h4, if you selected one of those in the previous step) in the Styles palette. Finally, set the inline box to be Available width and Flexible height in the Inspector. Finally, copy this box to the clipboard, double-click in its parent HTML box so you have a text cursor, and paste enough copies of it to fill in your accordion structure.

Now you can edit the elements until they have your desired headings and content. Preview in a browser, and you should see all of the headings, and none of the details. Each heading will have a little ▶︎ next to it, which pivots to become a ▼ when you click the heading (also revealing the details).

Style

To style the headings and details, you need to add two or three permanent styles to your document, using the Edit Styles dialog. You will need to pay particular care when adding these that they do not have names, only tags. Freeway is very helpful, and will keep trying to sneak a name into the interface, unless you tab into the Name field, delete what is there, and tab back out.

summary This is the style that controls what the headings look like. Use the font and style attributes to make the headings look how you like them. Use the Extended dialog to add cursor: pointer to this style, so the mouse will change to make it look “clickable” in a desktop browser. Whatever color you choose here will carry over to the disclosure triangles.

details This is the font style that will govern how the revealed details look when the heading is toggled. You can choose fonts, color, size, whatever, and this will apply to all of the details in all accordions on the page. You can also use the borders and background colors and padding and margins in this style, to govern how each element will relate to its neighbors.

summary:focus Some browsers will draw a bold blue border box around the heading whenever it is clicked. This is an affordance for visitors who are using keyboard controls or other assistive devices, so they can see which heading is selected, and open or close the details with a click of the Return key. You may want to change the way this selection looks – perhaps substitute a background color or shadow or a different outline, or remove the effect altogether with outline: none. You will need to use the Extended dialog to enter that.

Note carefully: these styles are not meant to be applied to elements or text in your page. You add them to your Styles palette, and you leave them there. The Action will apply the necessary tags to the elements you apply them to so that these styles have effect. This is not WYSIWYG, you have to proof your work in a browser.

Special thanks to Bill Jordan, who sponsored development of this Action!

0 Comments

Sign In or Sign Up to comment.