README

A collection of elements without styling for our Contao Themes. Contained Elements:

• Contentbox
• Teaserbox
• Price Table
• Feature Element
• Slider Element
• Content Wrapper
• Contrast switcher icon
• Size icon insert tag with backlink

Available insert tags

{{comp::contrast}}
{{comp::size::barrierefreiheit.html#fontSize}}

Where link can be replaced by a alias or a Uri in the comp::size::link insert tag. If no link is specified, the tag generates a link to the root page.

The insert tags can be placed anywhere you like, and the appearance depends on your theme or styling.

This symbol stands for switch between high and low contrast:

and this for change font size:

But these are only two examples. The appearance depends on your theme and styling.

The SVG icons are taken from: https://github.com/google/material-design-icons (See also the enclosed license under LICENSE_MATERIAL_DESIGN_ICONS).

Available CSS classes

The bundle provides several CSS classes for high contrast mode:

# excerpt

.hc-invert,
.hc-invert-pictures img,
.hc-invert-pictures svg {
    filter: invert(1);
}

.hc-greyscale,
.hc-greyscale-pictures img,
.hc-greyscale-pictures svg {
    filter: grayscale(1);
}

.hc-bg-black {
    background: black !important;
    color: white !important;
}

These classes can be used to control how the website behaves when high contrast is applied. All classes can be found here.

Configuration

You have the option to configure the use of high contrast, auto high contrast and font size to a small extent. This is done in the start point of the website for the entire page tree below. You can find the options under ► pages ► website start page under the legend ► WCAG settings (Web Content Accessibility Guidelines). WCAG here stands for the official Web Content Accessibility Guide.

The difference between High Contrast and Auto High Contrast is that High Contrast allows users to manually activate the contrast mode with a click, while Auto High Contrast automatically enables the contrast mode when the system’s dark mode is active.

Here you can de/activate features (i.e. insert tags) individually and define the assignment between the page explaining the font size change and the icon.

German

Dieses Bundle bringt verschiedene Elemente mit Templates (ohne Styling) für unsere Contao Themes mit. Enthaltene Elemente:

• Contentbox
• Teaserbox
• Preistabelle
• Feature-Element
• Slider-Element
• Inhaltscontainer
• Kontrastwechsler Icon
• Insert Tag für Schriftgröße mit Backlink-Funktion

Verfügbare Insert-Tags

Das Bundle stellt die zwei Insert-Tags bereit:

{{comp::contrast}}
{{comp::size::link}}

Wobei link beim Insert-Tag comp::size::link durch einen alias oder eine Uri ersetzt werden kann. Wird kein link angegeben, so generiert das Tag einen Link auf die Root-Page. Die Insert-Tags können beliebig platziert werden, wobei das Aussehen von Ihrem Theme oder Styling abhängig ist.

Dabei steht dieses Symbol für hohen Kontrast umschalten:

und dieses für Schriftgröße ändern:

Das sind aber nur zwei Beispiele. Die Darstellung ist von Deinem Theme und vom Styling abhängig.

The SVG icons stammen aus: https://github.com/google/material-design-icons (Siehe dazu auch die beiliegende Lizenz unter LICENSE_MATERIAL_DESIGN_ICONS).

Verfügbare CSS-Klassen

Das Bundle stellt mehrere CSS Klassen für den hohen Kontrast Modus bereit:

# Auszug

.hc-invert,
.hc-invert-pictures img,
.hc-invert-pictures svg {
    filter: invert(1);
}

.hc-greyscale,
.hc-greyscale-pictures img,
.hc-greyscale-pictures svg {
    filter: grayscale(1);
}

.hc-bg-black {
    background: black !important;
    color: white !important;
}

Mit diesen Klassen kann gesteuert werden, wie sich die Website bei der Anwendung von hohem Kontrast verhält. Alle Klassen sind hier zu finden.

Konfiguration

Es gibt die die Möglichkeit, die Verwendung von hohem Kontrast, automatischem hohem Kontrast und Schriftgröße in geringen Umfang zu konfigurieren. Das geschieht im Startpunkt der Website für den gesamten darunter liegenden Seitenbaum. Die Optionen ist unter ► Seiten ► Website-Startseite unter der Legende ► WCAG-Einstellungen (Web Content Accessibility Guidelines) zu finden. WCAG steht hier für die offiziellen Richtlinien zur barrierefreihen Gestaltung von Websites.

Der Unterschied zwischen hohem Kontrast und automatischem hohem Kontrast besteht darin, dass High Contrast manuell per Mausklick aktiviert werden kann, während Auto High Contrast den Kontrastmodus automatisch einschaltet, sobald in den Systemeinstellungen der Dark Mode aktiviert ist.

Hier können Sie Features (sprich Insert-Tags) einzeln de/aktivieren und die Zuordnung zwischen der Seite zur Erläuterung der Schriftgrößenänderung und dem Icon festlegen.

DEV

run before commit

vendor/bin/ecs check src tests