1. Formulare seien in Accordions gut untergebracht. - Nicht ohne Templateänderungen mit Javascript und je nach Ansatz auch PHP. Man kann es mit gewissen Einschränkungen hinbekommen, eine wirklich saubere Lösung ist jedoch noch nicht bekannt. Das Accordion-Script weiß nichts von ggf. auftretenden Formularfehlern und klappt es ungeachtet dessen wieder zu. Wodurch angezeigte Fehlermeldungen nicht sichtbar sind, was beim Benutzer für Irrtümer sorgt. Außerdem verbleibt das Formular dennoch im ungesendeten Fehlerzustand, was im Fall eines Seiten-Reloads zu der in dieser Situation verwirrenden, aber natürlich logischen Browsermeldung führt, die Daten müssten erneut gesendet werden.

2. Man könne mit Bordmitteln einen geöffneten Toggler nicht anders stylen als die geschlossen. Auch das stimmt nicht - ist sehr einfach mit CSS zu bewerkstelligen. So zum Beispiel:

.ce_accordion div.accordion > div {
margin-top:-1px;margin-bottom:0px;margin-left:0px;margin-right:0px;
padding-top:0px;padding-left:5px;padding-right:5px;
border-right:solid 1px #B8B6B6;border-left:solid 1px #DBD1D1;
border-bottom:solid 1px #B8B6B6;
background:#F6F4F4;
}

/* geschlossen */
.ce_accordion div.toggler {
margin-bottom:0px;
padding:0 10px;
background:#656565 url(”../files/layout/accord_zugeklappt.gif”) right center no-repeat;
font-weight:normal;
font-size:12px!important;
color:#FFFFFF;
border-bottom:solid 1px #ADADAD;
}

/* offen */
.ce_accordion div.active {
padding:0 10px;
background:#6268A2 url(”../files/layout/accord_aufgeklappt.gif”) right center no-repeat;
font-weight:normal;
color:#FFFFFF;
border-bottom:solid 1px #4D4D4D;
}

/* Mouseover */
.ce_accordion div.hover {
text-decoration:none;
background:#6268A2 url(”../files/layout/accord_hover.gif”) right center
no-repeat; cursor:pointer;
}

Für Bereichsbegrenzungen kann man außerdem natürlich auch die id des jeweiligen Contao-Containers voranstellen (#main, #right, …) oder eine individuelle id.

Ein weiterer Wunsch ist mitunter auch, eine Accordion-Gruppe mit einem individuellen Container zu umgeben, dem man dann z. B. ein float:left zuweisen kann, damit die Gruppe von nachfolgenden Inhalten umflossen wird wie ein eingefügtes Bild im Artikel. Wie Du schon schriebst ist ja beim Einsatz von Accordions der Kontext besonders wichtig und dies ist eine Erweiterung der Möglichkeiten. Vor allem nützlich bei Liquid Design, denn Accordions, die sich bei hoher Monitorauflösung über die gesamte Breite der Hauptspalte erstrecken, sehen nicht nur meistens bescheiden aus, sondern passen optisch häufig auch nicht zum Inhalt. Nichts leichter als das:
Einfach je ein HTML-Element vor die Accordion-Gruppe platzieren und eines danach. Im ersten befindet sich das öffnende Tag und im zweiten das schließende . Im CSS-Selektor von “meine_klasse(n)” kann man dann seine Anweisungen platzieren. Noch besser geeignet ist eine id, weil man dann mit den Standardklassen alles speziell für diese ID noch weiter aufdröseln kann, während nicht dieser id angehörende Accordions davon unberührt bleiben.

Na ja, unterm Strich fand ich den Artikel ein wenig am “ein nicht unkritisches Pattern”-Thema vorbei, weil über allg. “Usability”- u. Ästhetik-Aspekte keine Hilfestellung zu den technisch kritischen Punkten bietet.

bin gerade zufällig auf diesen Blog-Artikel gestoßen.
Gerade das mit dem + und - unter Berücksichtigung der Usability finde ich sehr interessant.

Während des Lesens fiel es mir quasi wie Schuppen von den Augen und mir wurde klar, wie oft ich selber intuitiv eher auf eine Plus-Symbol als auf den Link selbst klicke, um einen Link o.ä. zu öffnen.

Vielen Dank für den guten Artikel.

Gruß
Heiko