WBCE CMS Forum

awuest

Member

[gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

Hallo zusammen,
gibt es eine Möglichkeit die zwei Attribute einem Link zuzuweisen?
Ich versuche gerade dies
https://www.sitepoint.com/accessible-footnotes-css/
umzusetzen und möchte nicht das der Redakteur in "Quellcode Ansicht" umschalten muss und das von Hand eintragen.
Vielen Dank für eure Hilfe
Andreas

florian

Administrator

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

Direkt im CKEditor nicht ohne Eingriffe in den Code und ziemliches Javascript-Gefrickel (stackoverflow liefert Ansätze).

Was ich mir stattdessen vorstellen könnte, ist, da einen Workaround mit einem Droplet zu basteln:
Das Droplet heißt z.B. ariahref und hat folgenden Inhalt:

$wb_page_data = str_replace('footnote-label"','" aria-describedby="footnote-label"', $wb_page_data);
$wb_page_data = str_replace('zurueck-label"','" aria-label="Zurück zum Inhalt"', $wb_page_data);

Auf der Seite oder im Content wird es einfach mit [[ariahref]] aufgerufen.

Das Redateury gibt dann die gewünschte Aria-Link-Art im Feld CSS-Klasse ein:

und im Frontend wird daraus dann

<p><a class="" aria-describedby="footnote-label" href="#">link</a></p>
<p><a class="" aria-label="Zurück zum Inhalt" href="#">anderer link</a></p>

Edit: Semikolon im Codebeispiel ergänzt, danke für den Hinweis

Last edited by florian (30.06.2021 10:09:57)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

awuest

Member

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

DAnke Florian, die Lösung finde ich SUPER. Ich werde es ausprobieren und melde mich!!!
VG

awuest

Member

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

Sorry aber irgendwie klappt es nicht:
Habe das droplet erstellt (an der letzten Zeile noch ein ;)

$wb_page_data = str_replace('footnote-label"','" aria-describedby="footnote-label"', $wb_page_data);
$wb_page_data = str_replace('zurueck-label"','" aria-label="Zurück zum Inhalt"', $wb_page_data);

Ich habe das Droplet irgendwo auf der Webseite eingefügt! - IST es so richtig oder muss ich es an einer bestimmten Stelle einfügen?
Leider sieht mein Quellcode so aus:

<p>[[ariahref]]Maintaining&nbsp;<a class="footnote-label" href="#footnotes" id="footnotes-ref">footnotes</a>&nbsp;manually can be a pain.<br />

Habe ich das richtig verstanden? Das Droplet such auf der Webseite nach

<a class="footnote-label">footnotes</a>

und änder "class" in aria-describedby oder?
Habe ich das Droplet an der falschen Stelle eingefügt?
WAs mache ich falsch?

florian

Administrator

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

An sich sollte das so funktionieren. Wenn das Droplet nicht ausgeführt wird, gibt es drei Möglichkeiten:
1) Das Droplet heißt irgendwie anders (Tippfehler)
2) das Rendering der Seite ist unvollständig, ab, da müsstest Du mal ins Errorlog schauen, ob da irgend eine Exception erscheint
3) der Droplet-Outputfilter ist inaktiv (Admintools > Outputfilter Dashboard > Erweiterte Optionen, muss so aussehen:

Last edited by florian (30.06.2021 10:09:10)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

awuest

Member

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

Danke jetzt klappt es:
ich musste unter Droplets:
Name: ariahref
Beschreibung: [[ariahref]] Dies hat gefehlt
Jetzt muss ich noch sehen wie ich in der nummerierter Liste jedem <li> eine eigene id verpasse.
Hast du dafür einen Tip?
DANKE

florian

Administrator

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

Hm, das Beschreibungsfeld kann eigentlich leer bleiben. Eigenartig.

Für die <li>-Sache gibt es leider keine einfache Lösung, da müsste man sich mit regulären Ausdrücken irgend etwas ausdenken, und RegEx gehören leider zu den Dingen, die ich niemals verstehen werde. Tut mir leid, dass ich Dir da nicht weiterhelfen kann.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

jean

Member

Re: [gelöst] Link attribute wie "aria-label" und "aria-describedby" für CKEditor

>  nummerierter Liste jedem <li> eine eigene id verpasse

einfach durchzählen?

[== CSS ==]
/* Selects the second <li> element in a list */
li:nth-child(2) {}