Text elements
Die Text-Elemente liefern barrierefreien Code. TinyMCE bietet in den Default-Einstellungen allerdings (zu) viel Freiheit für Redakteur:innen, Barrieren wie schlechte Textkontraste, zu kleine Schrift, zentrierten Text oder Text im Blocksatz etc. zu verwenden. Außerdem können unzugängliche Styles aus anderen Anwendungen hinein gepastet werden.
TinyMCE anpassen
TinyMCE anpassen, damit Redakteur:innen nicht versehentlich Barrieren einbauen können.
Deaktivieren:
- Textfarbe
- Hintergrundfarbe
- Schriftarten
- Schriftgrößen
- Ausrichtung
- Liniendicke
- Tabellen
Stattdessen lieber vordefinierte Formatvorlagen anbieten.
Die Option „Bearbeiten / Als Text einfügen“ als Default konfigurieren.
Die H1 als Überschriften-Ebene rausnehmen.
Überschriften jeder Hierarchie-Stufe in unterschiedlichen Größen anbieten (damit Redakteure nicht aufgrund der Größe auswählen).
Headline
The headline element adds a single headline to your page. You can set the level of the headline ranging from h1 to h6.
The first headline on this page was created by using a headline element with the level set to h1.
But you do not have to use this element to add a headline to your page. Almost every other element features an additional input field to add a headline also offering the levels h1 to h6.
List
Das Content-Element „Aufzählung“ ist unproblematisch in Bezug auf die Barrierefreiheit.
Ordered list Example
- Ordered List Example 1
- Ordered List Example 2
- Ordered List Example 3
- Ordered List Example 4
Unordered multilevel list Example
- Ordered List Example
- Ordered List Example
- Ordered List Example
- Ordered List Example
- Ordered List Example
- Ordered List Example
Description list
With the description list element you can arrange a list of terms and descriptions. Common use cases would be a glossary or a list of key-value pairs.
- Headline
- Title of a text
- Subhead
- Brief elaboration of the headline
- Lead
- Opening paragraph
- Kicker
- Closing paragraph
Table
To create a table you can use the table element. Contao offers a special back-end widget, similar to the one utilized for lists, to add columns and rows, define a head- and footer-row and add a summary for the table content. In the front-end output, special classes can be chosen and added to the table, rows and cells. Just check the HTML code of the page content elements, to explore the possible classes.
In addition, you can add a sorting option for the frontend to make the table sortable by all columns.
Example
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| Column 1 | Column 2 | Column 3 |
| Column 1 | Column 2 | Column 3 |
| Column 1 | Column 2 | Column 3 |
Code
To provide a snippet of programming code like i.e. Php or JavaScript, you use the code element. The code will not be executed in the front-end of the page.
<script>
alert("Hello World!!");
</script>Markdown
Since Contao 3.3.x Contao ships with the markdown content element.
What is Markdown?
Markdown is a markup language with plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name.
From wikipedia