von Kirsten und Elisabeth

UMFRAGE! Deine Meinung zu WordPress

Wir möchten gerne erfahren, wie es für dich als Anwender ist, mit WordPress zu arbeiten. Wie geht es dir damit, was klappt gut, was weniger gut?

Wir, das sind Elisabeth und Kirsten, Organisatorinnen des WordPress MeetUp München. Wir arbeiten seit vielen Jahren mit WordPress und wie viele andere, die sich schon lange und intensiv mit WordPress befassen, sind wir dadurch ein bisschen betriebsblind. Deshalb möchten wir gern deine Meinung hören.

Die Umfrage umfasst insgesamt 14 Fragen. Es dauert 5 bis 10 Minuten die Fragen zu beantworten. Die Ergebnisse veröffentlichen wir Ende des Jahres auf der Website wpmeetup-muenchen.org.

Hier geht es zur Umfrage:
» zur Umfrage

von Kirsten

Oft übersehen, aber wichtig: Barrierefreie Sprache

Von barrierefreier Sprache profitieren alle Leser, die sich schnell einen Überblick über eine Information verschaffen möchten.

Serie

  1. Accessibility-ready WordPress-Themes
  2. Das Plugin WP-Accessibility
  3. Barrierefreie Sprache
  4. Eine barrierefreie Website planen

Bei den meisten Webprojekten spielen Text und Sprache eine Nebenrolle – die sprachliche Qualität der Texte ergibt sich irgendwie. Aber ohne verständliche Sprache wird aus dem schönsten Code keine barrierefreie Website.

Einen guter Richtwert für eine barrierefreie Textqualität ist das Leseniveau, das in den WCAG (Web Content Accessibility Guidelines) angesprochen wird. Als Orientierung wird ein einfacher sekundärer Schulabschluss genannt. Das entspricht in etwas dem deutschen Hauptschulabschluss bzw. dem Sprachniveau A2 bis B1 innerhalb des europäischen Referenzrahmens für Sprachen.

Kein Fall für Randgruppen

Von einer barrierefreien Sprache profitieren nicht nur Menschen mit geringem Bildungsniveau. Auch Menschen, deren Muttersprache nicht Deutsch ist, können klar formulierte Texte besser erfassen. Genauso wie alle anderen Leser, die sich schnell einen Überblick über eine Information verschaffen möchten.

Weiterlesen Oft übersehen, aber wichtig: Barrierefreie Sprache

von Kirsten

Eine barrierefreie WordPress-Website planen

Serie

  1. Accessibility-ready WordPress-Themes
  2. Das Plugin WP-Accessibility
  3. Barrierefreie Sprache
  4. Eine barrierefreie Website planen

In diesem Artikel soll es darum gehen, was zu beachten ist, wenn auf der Basis der technischen Grundlagen eine barrierefreie Webseite entstehen soll.

Mit einem accessibility-ready Theme oder dem Plugin WP Accessibility sind wir einer barrierefreien WordPress-Seite schon ziemlich nahe gekommen. Leider das Ergebnis nicht automatisch eine barrierefrei Website. Die Technik macht die ersten Schritte, aber die eigentliche Reise beginnt jetzt erst.

Barrierefreiheit lässt sich nicht in Code packen

Nicht barrierefreie Inhalte oder nicht barrierefreie Plugins können alle Errungenschaften, die im accessibility-ready Theme stecken, wieder neutralisieren.
Wenn z.B. die Redakteure beim Hochladen von Bildern keine (sinnvollen) Alt-Texte eingeben, kann das Theme auch nichts ausgeben.

Auch Texte können Besucher ausschließen. Schwer verständliche Texte sind nicht barrierefrei. Weder Menschen mit eingeschränkter Lesekompetenz noch Menschen mit hoher Lesekompetenz, die auf einem mobilen Gerät nach einer Information suchen, können solche Texte verarbeiten.

Und dann sind da noch die Plugins. Wenn ein Plugin per CSS Farben oder Link-Zustände überschreibt oder kein standardkonformes HTML ausgibt, entstehen überall auf der Seite kleine Stolperfallen.

Weiterlesen Eine barrierefreie WordPress-Website planen
von Kirsten

Wie sicher ist WordPress?

Die wichtigsten Tipps für eine sichere WordPress-Website.

Ist WordPress sicher? Das ist eine der Fragen, die mir am häufigsten gestellt werden. Meine Antwort hat sich in den letzten Jahren nicht wesentlich verändert:
Ja, WordPress ist meiner Meinung nach sicher.

Aber keine Website ist ganz von alleine sicher. Genauso viel oder wenig wie jeder beliebige Computer oder alle anderen Redaktionssysteme da draußen. Es gibt ein paar Regeln, die man beachten muss. Die sind allerdings nicht besonders kompliziert und können leicht umgesetzt werden.

Vor wem muss ich meine WordPress-Website schützen?

Erst einmal vor mir selbst. Also vor allem, was ich, die Person vor dem Bildschirm, auslöse. Das können fehlerhafte Updates von Plugins oder Themes sein. Oder Fehler im Code sein, die ich selbst eingebaut habe. Und vieles mehr.

Dann sind da noch Angriffe von außen. WordPress ist das Redaktionssystem mit der größten Verbreitung. Deshalb ist es auch ein System, das sehr häufig attackiert wird.
Es sind allerdings keine Menschen, die vor ihrem Rechner sitzen und gezielt versuchen, eine bestimmte Website zu knacken. Es sind Bots, die das Web nach WordPress-Installationen abgrasen.

Wird eine Website angegriffen, geht es so gut wie nie um einen persönlichen Angriff. Und es geht auch nicht darum, Daten aus der Website zu klauen. Aber eine gehackte Website kann für vielerlei Ungutes oder Kriminelles eingesetzt werden.

Weiterlesen Wie sicher ist WordPress?
von Kirsten und Elisabeth

Accessibility-ready WordPress-Themes

Was steckt drin im Code von einem „accessibility-ready“-WordPress-Theme?

Serie

  1. Accessibility-ready WordPress-Themes
  2. Das Plugin WP-Accessibility
  3. Barrierefreie Sprache
  4. Eine barrierefreie Website planen

Momentan ist Barrierefreiheit (noch) keine verpflichtende Eigenschaft für Themes, die im offiziellen Theme-Verzeichnis gelistet werden. Aber es gibt im Theme-Verzeichnis das Tag „accessibility-ready“.

Accessibility-ready Themes erfüllen die wichtigsten technischen Anforderung für Barrierefreiheit wie sie die WAI (Web Accessibility Initiative) in den Web Content Accessibility Guidelines (WCAG) aufgestellt hat.

Wenn ein Theme im WordPress.org-Theme-Verzeichnis unter dem Stichwort „accessibility-ready“ erscheint, erfüllt es folgende Bedingungen:

  1. Die Seite ist per Tastatur bedienbar
  2. Für Bedienelemente (Buttons, Links und Inputs) wird korrektes HTML verwendet
  3. Links sind verständlich und eindeutig gestaltet
  4. Formulare sind barrierefrei aufgebaut
  5. Das HTML ist semantisch korrekt
  6. HTML-Code ist mit Aria Landmarks gegliedert
  7. Es werden geeignete Farben und gute Kontraste gewählt
  8. Bilder und Medien sind für Seh- und Hörbehinderte zugänglich

In diesem Artikel schauen wir uns die Bedingungen für ein accessibility-ready Themes an und erklären, worum es dabei geht. Alle WordPress-Standard-Themes der Twenty-Reihe sind übrigens accessibility-ready.

1. Bedienbarkeit per Tastatur

  • Alle Links, Buttons und Formularfelder sind über die Tastatur erreichbar, auch Links in Dropdown-Submenüs. Die Enter-Taste aktiviert einen Link oder einen Button, die Leertaste aktiviert Checkboxen und Buttons. Die Pfeiltasten wählen Formular- und Bedienelemente an, z.B. Radio-Buttons, Auswahlfelder, Slider, Reiter oder Menüs mit Baumstruktur. Auch Autocomplete-Vorschläge sind per Pfeiltasten anwählbar.
  • Die style.css enthält die Angaben für a:focus: So können die Besucher erkennen, welches Element sie mit dem Tab gerade angewählt haben.
  • Das CSS für Screenreader-Texte ist so definiert, dass die Texte bei :focus sichtbar werden.
  • Die Tabulator-Reihenfolge wird nicht verändert.
  • Ein Skip-to-Content-Link, der bei :focus sichtbar wird, führt direkt zum zentralen Inhalt.

2. Korrektes HTML für Bedienelemente

  • Die HTML-Elemente button und a sind nicht austauschbar. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars. Ein Link ist – ein Link und verweist auf eine interne oder externe URL.
  • Soll ein Link wie ein Button aussehen, kommt das Attribut role=”button” ins Spiel. Im HTML steht aber nach wie vor ein a.
  • Damit die Besucher mit Screenreader wissen, welche Funktion ein Element hat, sind manche Bedienelemente mit zusätzlichen Informationen ausgestattet. Das ist gerade bei Buttons wichtig. Auch Links, die eine bestimmte Aktion auslösen – wie z.B. der Edit-Link, die Post-Navigation oder zusätzlichen Menüs – haben ergänzende Screenreader-Texte.
Weiterlesen Accessibility-ready WordPress-Themes
von Kirsten

Das Plugin WP-Accessibility

Wie barrierefrei wird eine Seite mit dem Plugin WP Accessibility?

Serie

  1. Accessibility-ready WordPress-Themes
  2. Das Plugin WP-Accessibility
  3. Barrierefreie Sprache
  4. Eine barrierefreie Website planen

Wer sich mit Barrierefreiheit und WordPress beschäftigt, begegnet früher oder später dem Plugin WP Accessibility von Joe Dolson. Ich habe mir angeschaut, was das Plugin macht und was man damit erreichen kann.

Das Plugin WP Accessibility ist für Seiten gedacht, die ein Theme nutzen, das nicht schon „von Haus aus“ accessibility-ready ist und das ein Stück barrierefreier werden soll.
Je nachdem wo das Theme noch Lücken hat kann man mit dem Plugin folgende Eigenschaften ergänzen:

  • Skip-links einbauen für die Navigation per Tastatur
  • ARIA landmark roles
  • Labels hinzufügen für das WordPress-Such-Formular
  • Target-Attribute aus Links entfernen (Links nicht in einem neuen Fenster öffnen)
  • Änderungen im Tabindex entfernen
  • Links immer unterstrichen darstellen
  • Überflüssige Title-Attribute entfernen
  • CSS für a:focus nachrüsten (wichtig für die Tastatur-Navigation)
  • Lange Beschreibungen für Bilder erlauben
  • Post-Titles für „read more“ Links ergänzen

Das Plugin installiert ausserdem zwei Toolbars, mit denen man die Schriftgröße und die Farb-Kontraste verändern kann. Ich persönlich empfinde das eher als Spielerei – die Toolbars tun nichts auf Code-Ebene, es verändert sich nur kurzfristig die Darstellung.

Weiterlesen Das Plugin WP-Accessibility
von Kirsten

Gutenberg und klassische Blogs

In einem bekannten Blog aus der deutschen Bloggerszene entspann sich letztlich eine Diskussion über den Sinn oder Unsinn von Gutenberg für ein „klassisches“ Blog. Damit ist gemeint: Ich schreibe einen Text, setze ein paar Überschriften und füge ab und zu ein Bild ein. 

Viele Bloggerinnen* sind dabei durchaus mutig, sie haben spontan das Update auf WordPress 5.0 gemacht, weil sie sehen wollten, wie das so ist mit diesem neuen Editor. Sie sind bereit, sich damit auseinanderzusetzen, was da Neues kommt. 

Allerdings kam ebenso spontan Unmut auf. Die Oberfläche wird als unübersichtlich und kompliziert empfunden. Das Schreiben eines Artikels wird als deutlich mühsamer als zuvor wahrgenommen. Die Bloggerinnen ziehen den Schluss, der neue Editor sei wohl nicht für Blogs gedacht. Die seien den Entwicklern womöglich nicht so wichtig.
* Blogger sind selbstverständlich mit gemeint.

Weiterlesen Gutenberg und klassische Blogs
von Kirsten

Standard-Theme oder Multipurpose-Theme?

In diesem Artikel geht es um den Unterschied zwischen standardkonformen Themes wie sie kostenlos auf wordpress.org angeboten werden und den bekannten Multipurpose-Themes wie man sie auf verschiedenen Marketplaces findet.

WordPress ist ein modulares System. Design und Funktion sind getrennt – Themes sorgen für die Optik, Plugins für die Funktionen. Das heißt, man kann im Prinzip jedes Plugin mit jedem Theme kombinieren. Wenn das Theme nicht mehr passt, wechselt man zu einem anderen. Die Plugins bleiben dabei an Ort und Stelle.

Diese Modularität – die Trennung von Inhalt, Design und Funktion – ist ein zentrales Prinzip innerhalb der WordPress-Standards. Alle Themes im offiziellen Theme-Verzeichnis bei wordpress.org werden unter anderem darauf vom Theme Review Team überprüft.

Multipurpose-Themes

Es gibt Anbieter, die dieses Prinzip umgehen, indem sie Design und Funktionen zu einem festen Paket zusammenschnüren. Sie arbeiten dabei mit eigenen Frameworks und mit jeweils eigener Systematik.
Die Bestseller bei themeforest.net in der Rubrik WordPress sind Beispiele für solche Multipurpose-Themes: Avada, X-Theme und Enfold (Stand November 2018). 

Multipurpose-Themes sind keine Themes im Sinn der WordPress-Standards, sondern eigenständige, kleine Content-Management-Systeme mit WordPress als Plattform. Diese Themes erscheinen folglich auch nicht im offiziellen Theme-Verzeichnis auf wordpress.org. 

Weiterlesen Standard-Theme oder Multipurpose-Theme?
von Kirsten

Gutenberg: Breite des Editors anpassen

Seit einiger Zeit arbeite ich – unter anderem hier im Blog – mit dem neuen Gutenberg-Editor. 

Wenn man nicht nur Texte schreibt, sondern auch die Layout-Features von Gutenberg einsetzt (Spalten, Titelbild und so weiter) dann stört einen ziemlich schnell die schmale Standard-Breite von Gutenberg im Backend.

Mit ein bisschen CSS kann man dem Layout im Backend dieselbe Breite geben wie im Frontend.
Angenommen, die Breite des Layouts im Frontend beträgt 1200px, dann sieht das CSS für Gutenberg so aus:

.edit-post-visual-editor .editor-block-list__block {
margin: 0 auto;
max-width: 1200px;
}

Damit diese Anweisungen greifen, müssen wir das CSS in einer Datei im Theme-Verzeichnis abspeichern (z. B. gutenberg.css). 
Abschließend müssen wir die Datei noch per Funktion einbinden: 

function ks_gutenberg_styles() {
wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'ks_gutenberg_styles' );

Ich verwende zum Einbetten solcher Funktionsschnipsel sehr gerne das Plugin Code Snippets. Damit kann man die functions.php schön sauber halten und man behält besser den Überblick.

Tipp

Wer es genauer wissen will, was man mit CSS und Gutenberg im Backend alles machen kann, Florian Brinkmann hat einen sehr ausführlichen Artikel zum Thema geschrieben: Theme-Editor-Styles für Gutenberg erstellen