K
Kristina Ejstes-Svensson
1) ACCORDION STYLING SETTINGS - such as for FAQ accordions for easier detection:
Accordions are for most readers hard to detect due to the fact that the sections are just as white as the surrounding. And, that the small expansion arrow symbol is located at the far right. To avoid having to add explanations such as ”In this expandable section you find …” we would appreciate being able to make settings such as you today offer for FAQ accordions.
2) STYLING SUGGESTIONS - as settings mentioned above or as a stylesheet template:
  • Position the expansion arrowhead to the left
  • Make it more visible by making the it arrowhead bolder.
  • Possibility to add a background color and / or a border color to the accordion heading section.
3) ACCORDION NAVIGATION / LINK BEHAVIOUR
Where accordions are used for long nested descriptions, we also use accordion within accordions. Primarily as a nifty way to narrow down use case pages with long script samples, and to separate the top mandatory code from the lower-level optional code variants. This calls for better built in navigation assistance. And, that links are handled in search. When a search result include content in an accordion this accordion must be opened and the searched value must be highlighted.
4) ACCORDION HEADING NAVIGATION SUGGESTION
In this example the top level accordion is with H2 heading and the sub-accordions are H3.
This is the desired behavior when using the right-side table of contents called ”In this article”:
  • No accordion should be expanded from the beginning.
  • When the user selects H2 heading it should open that accordion.
  • When the user selects an H3 heading it should open the master H2 accordion AND the H3 level sub-accordion. Or at least let the link move the cursor position closer to the approximate area …