Nun gibt es in WordPress aber ein Problem. Der “Skip-To-Content”-Button in den neuen FSE-Themes verfügt über keine ID und kann dementsprechend gar nicht angesteuert werden. Der Button wird automatisch generiert, was schonmal zu anderen Problemen führt wie hier von Hans-Gerd berichtet. Das automatische generieren heißt aber die normalen User:innen können das so gar nicht selber reparieren, denn sie können die ID nicht selber dem Button hinzufügen.

Contributor:innen zur Hilfe!

Was man nun also tun muss, ist bei WordPress Bescheid zu geben, damit mit etwas Glück sich eine der zahlreichen Contributor:innen um das Problem kümmern kann. Also erstmal melden, ein Ticket erstellen im WordPress Trac-System. Das kann tatsächlich jede:r mit einem WordPress-Account. Die Meldung an das WordPress-Core-Team sieht dann so aus: Link zur Meldung. Darunter wird dann natürlich erstmal etwas diskutiert.

Idealerweise nimmt sich jemand dem Problem an und programmiert einen Fix wie hier auf der github-Unterseite für WordPress.

Wird dies dann angenommen, geprüft und für den nächsten Release übernommen hat man sehr viel Glück gehabt. Und so können wir uns auf das neue Feature in WordPress 6.8 freuen, dass diesen Monat noch erscheinen soll. Auf englisch: “Accessibility Improvements in WordPress 6.8“

Es hat also geklappt!

Der Beitrag Eine kleine Reise in die Barrierefreiheit erschien zuerst auf Phillip Roth.

“GiSNEp” is what a lot of people read here. But more about letter recognition later

The first pillar of sustainability is “people”. We can do a lot of things in ways of saving the environment but never without forgetting that people and therefore accessibility should always be considered first priority. So when we try to find a new font for our company, website, project or whatever we should make sure people are happy with it. This helps everyone.

When creating a brand design choosing the font we use for copy and headlines usually comes right after the logo design and the colours because it needs to look good in context. I will not be talking about headlines in this article as they of course can’t be neglected when designing, but they don’t need to be as legible and accessible as regular informative text in the copy. Headlines should of course be legible aswell, it’s just that the bigger size of them helps reading a lot. We’re talking about copy text here though.

Myths & audience

The commonly distributed myth is that Comic Sans is the most accessible font made for dyslexic people. And no surprise – it is in a way. It was created for young pupils though that just started to learn reading and writing so it resembles the things they learn early. And often times they learn the letters like this and might even read comics where the font resembles Comic Sans. And for that audience it does work well, because that’s all they know. For older audiences though we have to consider the following.

There even is a font made specifically for dyslexic people “Dislexie“, but not all dyslexic people agree that this helps them. All people are different.

“Lexend” and “InclusiveSans” are examples of fonts made especially for readability and therefore also for accessibility. But more on how to achieve this later.

All people

This is of course an impossible task/audience because there will always be individuals that can read this or that font better than any other. Even personal preferences can lead to this. Font preferences are far away from a reading deficiency though, and good readability helps everyone (as do most accessibility improvements).

People with poor vision

When dealing with poor vision there is lots of ways we can help people read. A good font is one of them. We’ll learn more later.

Learning disability

Learning disabilities can vary very much. So here we should try to provide individual solutions.

Aphasia or dyslexia

These conditions both lead to make reading more difficult and we can address those difficulties by choosing a font that tries to eradicate all the little problems that arise with letters.

Example

For people to better understand what dyslexia is like, Daniel Britton designed a typeface that recreates the feeling of reading with dyslexia. You can see the full version of his work here:
https://danielbritton.info/dyslexia/

Checking the site today I can see that the images for the videos aren’t loaded. But you can see the videos by clicking on the missing preview images.

The Chrome-Browser extension “Silktide Accessibility Checker” has a dislexia simulator which is worth a try. You will see a lot of jumping and swapped letters. Check it out.

What makes a font readable

Aside from the contrast that the font needs to have against the background it is on, it’s important that the letters can be identified and distinguished from each other easily. The letters need to be open and not crammed so when seen in small, in bad light or blurry they can be identified. Line thickness should be visually consistent and not too thin because of the same reasons. The Disney logo font above does most of this wrong. Here’s another example:

You can see that the “C” and “e” in Modern No. 20 are almost closed and the thin lines don’t help at all when it gets blurry or small. Close your eyes a little, then you know.

Text size is of course important here aswell, because when the letters are huge you won’t have that many problems with that. So make sure your text is big enough to read. 18px rendered size for copy text is considered good. Keep in mind that people will try to enlarge text with Ctrl + on Windows or Command + on OSX in browsers, and make sure that works properly.

Openess and condensed

It’s no surprise really that this almost looks like a test at the optician where you have to say in which direction the circle opens. And exactly that is what you need letters to be open for. When it gets blurry or you have low contrast, small letters etc. it’s really helpful for identifying letters.

As you can see in this example narrow or condensed fonts don’t help with the openness to distinguish letters from each other. The almost closed “C” and “e” don’t help either. Same goes of course for letter spacing. If you don’t have enough space in between letters, that will lessen readability.

Distinguishing letters

The letters themselves should be easily distinguished from each other. A good test to see if a font is good at this is the big i small L and 1 test aswell as the bdqp test. Don’t end up with imposter letter syndrome!

As you can see in Gill Sans you can’t differentiate at all between I, l and 1. That works far better in BBC Reith which was designed for readability by the BBC and is used throughout their whole design. The p q d b test pretty much means: “When I mirror the letter, will it look the same?” and BBC Reith is very good at this but surprisingly ye olde Gill Sans doesn’t fail it either with the d and b. This is by the way why some people will read the “D” in the Disney logo as a “G”. It’s a mirrored “G”.

Here’s a list of imposter letter:

• qp
• db
• 0O
• nu
• il1I
• 69
• a8
• a6
• 6g
• rn, m

So what’s the solution Phillip?!??

As you can see there aren’t that many things you have to look at when searching for a font for your copy text. Just do these tests and look if your font is good for readability. In Google Fonts or any font software you can choose your own preview text. Try it out!

If you want to help lots and lots of people you could even let them choose their own font, like the Kindle does. Here is an old version:

If marketing won’t like this one because they want their design to be consistent, make them choose an accessibility-friendly font for copy text when the next design iteration is due. Lots of good fonts available, like this is written in Atkinson Hyperlegible for example.

There’s many other things you can do to help readability like reduced highlighting, small line length, no justification with wonky spaces in between words, good line spacing, varying layouts broken up by subheadings to keep the reader animated and help digest the input, white space to give eyes a place to rest etc. etc. But these are the basics for choosing a font.

Last but not least…

Thank you for sharing the article and sharing your thoughts!

Der Beitrag The most accessible font erschien zuerst auf Phillip Roth.

Das WordPress läuft, alle Plugins sind installiert und funktionieren, das Theme sieht schick aus. Warum braucht das denn jetzt ein Update? Die Kurze Antwort: Sicherheit. WordPress wird in den meisten Fällen über die Plugins gehackt, wenn diese ein Sicherheitsleck aufweisen. Ebenso ist es möglich, dass WordPress selbst noch eine Lücke offen hat und dementsprechend gefixt werden muss. Themes bieten weniger Angriffsfläche, aber auch diese haben manchmal ein Sicherheitsproblem, gerade die komplexeren wie DIVI, Avada, Enfold und Co. mit ihrem riesen Anhang an Code.

Die Hacker suchen sich natürlich das Content Management System mit der weitesten Verbreitung und das ist…. Trommelwirbel:

Jetzt denkt ihr Moment, ich hab doch gar keine sensiblen Daten auf meiner Installation. Was wollen denn die Hacker dann? Die machen das heutzutage, um einfach Werbung auf eurer Seite zu schalten, mit Hilfe eurer Seite Unmengen an Spam verschicken oder sogar Bitcoin-Mining auf Kosten eurer Userinnen. Das Ergebnis einer gehackten Seite sieht meist so aus:

Ihr bekommt von Google den Riegel vorgeschoben und eure User sehen nur noch das. Damit seid ihr und euer Geschäft offline. Das kann dann einige Tage dauern bis das repariert und wieder online ist, je nach Branche ein Milliardenverlust

Was tun? Warum Backups?

Es müssen also die Updates durchgeführt werden. Okay, warum brauche ich dann ein Backup? Im Idealfall hast du immer ein Backup deiner aktuellen Installation (Dateien und Datenbank). Sollte dein WordPress gehackt werden kannst du immer direkt deine aktuelle, funktionierende Installation neu aufspielen.

Für Updates ist die Regel: Ein Backup vor dem Update (funktionierende Installation), dann machst du deine Updates und dann machst du noch ein Backup. Noch weißt du nicht, ob das neue Update ein komplett funktionierendes System ist. Manchmal fallen nicht funktionierende Sachen erst nach ein paar Tagen auf denn:

Plugin Trouble

Es ist jetzt so, dass es tatsächlich durch ein Plugin-Update auch passieren kann, dass etwas kaputt geht. z.B. macht eine Developerin ein Update ihres Plugins und plötzlich kollidiert der Code mit einem anderen Plugin. Eine Newsletteranmeldung funktioniert nicht mehr, Events werden nicht mehr angezeigt, das aufploppen der Bilder geht nicht mehr, das Menü öffnet sich nicht mehr etc. etc.

Das passiert tatsächlich relativ selten, kann aber unangenehm werden wenn Anmeldungen verschwunden sind oder Ähnliches, dehalb immer schön die Seite kontrollieren nach den Updates.

Theme Updates

Auch das Theme kann unter Umständen ein Einfallvektor für einen Hacker darstellen. Deshalb achte auch hier darauf, dass du immer eine aktuelle Version verwendest.

Server-Updates

Und dann gibt es noch die PHP-Updates deines Servers. Die Software des Servers bekommt regelmäßig Security-Updates. WordPress läuft auf der Software PHP und sollte nach Möglichkeit immer mit der neuesten PHP-Version betrieben werden. So bekommt man übrigens auch Geschwindigkeitsvorteile beim Laden der Seite.

Es kann jetzt aber sein, dass ein Plugin sehr alt ist und der Code nicht mehr mit der neuesten PHP-Version läuft. Das sollte nach einem Update natürlich kontrolliert werden und das Plugin dann ausgetauscht werden. Also Vorsicht bei der Plugin-Wahl. Immer schön schauen, dass das Plugin noch gepflegt wird.

Unschön wird es wenn dein Theme nicht mehr funktioniert. Das kann bei sehr alten Themes passieren, aber auch bei jüngeren Themes, die nicht mehr gepfleget werden. Dann muss man entweder selber ran es zu reparieren oder braucht schnell ein neues Theme.

Wie mach ich das denn jetzt?

Das einfachste ist ein Backup-Tool, das regelmäßig Backups macht wie z.B. BackWPup. Das sorgt dafür, das Dateien und Datenbank gesichert werden so wie du das möchtest. Es kann auch sein, dass dein Hoster tägliche Backups macht und du so schon abgesichert bist was diese angeht. Informiere dich bei deinem Hoster, ob dies so ist, und was es kostet ein Backup einzuspielen. Das ist gerade bei den Billighostern oft mit Kosten verbunden. Bei coolen Hostern hast du selber die Macht und kannst per Knopfdruck in Minuten ein Backup einspielen.

Die Updates kannst du selber über das WordPress-Dashboard managen. Aufgrund der Sicherheitsgefahren fährt WordPress automatische Updates für WordPress Minor Versionen (5.7.2 -> minor Version; 5.8 -> Major Version). Auch automatische Plugin-Updates kann man aktivieren, da dies aber zu den vorher genannten Problemen führen kann ist das nicht unbedingt die beste Lösung. Wenn du aber eher ängstlich bist kann man dann auch 3 Wochen sorgenfrei in den Urlaub fahren, ohne dass die Seite gehackt wird

Fazit

Das ist schon ein wenig Aufwand und ihr könnt natürlich manuell das alles machen mit den Updates, der Funktionskontrolle und der Sicherheitsüberwachung aber einige Anbieter bieten dementsprechend eine automatische Sicherheits- und Funktionsüberwachung. Und hier kommt der Sales-Pitch am Ende des Blogbeitrages: Auch ich biete das an

Der Beitrag WordPress Updates erschien zuerst auf Phillip Roth.

• 7:00 Duschen, Zähneputzen
• 7:30 Tropf anlegen, zugeklebtes Auge ausspülen, erste Tablette, Augensalbe
• 8:00 Blut abnehmen, nur 3 Versuche gebraucht! ?
• 8:30 Frühstück
• 8:32 Feststellen, dass statt Gabel und Messer nur zwei Gabeln dabei sind, Messersuche auf Station
• 8:43 Frühstück ein Brötchen, ein Brot, restliche Tabletten
• 9:10 Nachfragen ob man vergessen hat mich in der Zahnklinik anzumelden. Ich soll ja eigentlich zwischen 8:00 und 10:00 da sein und ich muss da ja noch irgendwie hin
• 9:24 Tropf ab & Achja Herr Roth, da war ja noch was, Sie müssen doch schnell rüber in die Zahnklinik! Wir machen Ihnen fix die Papiere fertig
• Visite fällt dementsprechend aus, ich latsch rüber mit Baustellenumweg
• 9:54 Herr Roth! Sie sind ja gar nicht angemeldet und warum kommen Sie so spät!?!!!
• 10:04 Nein nein Herr Roth, als Konsilpatient müssen Sie hier vorne Warten und nicht im Wartezimmer.
• 10:05 Wartestart auf zu niedrigem Holzstuhl im zugigem Flur
• 10:46 “Herr Roth sie sind hier völlig falsch, das macht doch die andere Abteilung!” Wir gehen 6,5 Meter weiter den Gang runter. “Setzen Sie sich in diesen Warteraum, sie werden aufgerufen.”
• [ Anmerkung der Redaktion ] In diesem Wartezimmer der Zahnklinik steht ein Süßigkeitenautomat. Kannste dir nicht ausdenken.
• 11:05 Behandlung
• 11:17 Warten auf die Papiere im Wartezimmer
• 11:22 Die Zahnarzthelferin gibt mir die Papiere und sagt sie hätte das mal am Rücken gehabt und fragt sich wie ich das nur aushalte im Gesicht und Mundhöhle [ Anmerkung der Redaktion: Es sieht schon 100% besser aus ]
• 11:40 Komme auf Station, Pflegerin wartet schon auf mich, ich soll auf ein anderes Zimmer umziehen also sofort Packen
• 11:55 Ich sitze auf gepacktem Koffer & Rucksack, Schwester kommt rein: Achnee Herr Roth, doch erst nach dem Mittagessen
• 12:00 Putzhilfe putzt Zimmer
• 12:10 Hautbehandlung
• 12:42 sonst steht das Essen immer spätestens 12:15 am Bett, heute natürlich nicht
• 12:49 Chili Con Carne mit Reis, Apfel, Scheibe Mini-Kuchen
• 13:15 Augensalbe, Tabletten, Augenkühlung zum abschwellen
• 13:50 kurz weggepennt, jetzt Umzug!
• 14:20 neu eingerichtet in neuem Zimmer. Neuer unbekannter Nachbar noch verschollen. Koffer etc. weist auf Rentner hin.
• 14:30 Dieter, 83, kommt rein, auf Krücken mit Schnurres, muss erstmal ankommen
• 15:00 Dieter ist mit seiner 4-Jahre Story zu Herz, Knien, Haut etc. fertig.
• 15:30 neue Infusion
• 16:30 Frau kommt zu Besuch, bringt frische Klamotten
• 17:15 Tropf ab
• 17:45 schnell noch zum Kiosk einen Kakao kaufen
• 18:00 Abendbrot, 3 Brote, bestimmt der 4. Kirschjoghurt, den ICH NIE BESTELLT HABE!
• 18:30 Tabletten, Augensalbe
• 19:41 Opi ist mit Zeitung in der Hand eingeschlafen, hält Sie im Schlaf zwischendurch wieder hoch mit geschlossenen Augen ?
• 19:57 Opi kämpft mit Fernseher-Kopfhörerbuchse
• 21:15 letzte Infusion für heute ?
• 22:30 Tropf fertig
• 23:00 Opi macht seine Sauerstoffmaschine an. Die läuft jetzt die ganze Nacht ?

Bevor ich jetzt die Augenbehandlung bekomme noch ein Nachtrag: Der Opi ist mega-supernett, und ich konnte trotz Sauerstoffmaschine gut Schlafen.

Der Beitrag Warum man im Krankenhaus nicht Arbeiten kann erschien zuerst auf Phillip Roth.

Vorab: Wenn du erstmal lernen möchtest was barriefreie Websites eigentlich sind und warum man Websites so programmieren und gestalten sollte dann lies hier:
Barrierefreie Websites einfach erklärt.

Einleitung

Die ergänzende, unabhängige Teilhabeberatung des Vereins Selbstbestimmt Leben in Köln brauchte eine barrierefreie WordPress Website. Nach dem ersten Treffen war klar, dass die Website nicht nur barrierefrei im eigentlichen Sinne werden soll, sondern auch Menschen helfen soll, die eventuell erst gerade eingeschränkt wurden und dementsprechend vielleicht noch gar keine helfenden Technologien benutzen oder benutzen können. Auch alten Menschen, die sich vielleicht mit Computern noch nicht so auskennen sollte mit allen Mitteln geholfen werden.

Die Website: EUTB Köln

Die Themeauswahl

Um sich Arbeit zu sparen sucht man sich natürlich ein WordPress-Theme, dass bereits weitestgehend barrierefrei ist. Zusätzlich musste das Theme ausdrücklich nicht den neuen WordPress-Editor Gutenberg unterstützen, denn das diverse Team der EUTB wollte aufgrund der besseren Barrierefreiheit nur mit dem Classic-Editor arbeiten. Fündig wurde ich bei dem großartigen Frontend-Spezialist Sami Keijonen, der mit seinem Kuorinka Theme ein tolles, sogar kostenloses Theme für unsere Zwecke hatte. Trotzdem musste es natürlich noch auf die Wünsche der Kundin und meine Wünsche angepasst werden mittels eines programmierten Child-Themes.

Die nicht sichtbaren Features

Das Theme hat natürlich schon einiges mitgebracht wie z.B. den Direkt-zum-Inhalt-Button, der als erstes erscheint wenn man sich ohne Maus mit der “Tab”-Taste durch die Seite navigiert (Für Menschen die nicht mit der Maus oder über Touch navigieren). Alle Logos und Bilder wurden natürlich mit einem Alternativtext hinterlegt, denn die Kundin ist schließlich blind und kann sich die Bildbeschreibung nur so von ihrem Screenreader vorlesen lassen.

Das Theme brachte auch schon sogenannte Landmarks mit, die man mit helfenden Technologien praktikabel ansteuern kann.

Wenn wir uns jetzt an die Überschriftenhierarchie von HTML halten sollte also nicht mehr allzu viel schiefgehen können.

Die Pluginauswahl und Anpassung

Das umstrittenste Plugin in der Installation ist sicherlich das WP-Accessibility-Plugin. Das ist die Toolbar an der Seite für Kontrast und große Schrift. Ich hatte damals gesagt, dass das eingeschränkte Personen nicht brauchen, da Sie diese Funktionen doch selber über ihren Browser steuern können. Meine Kundin argumentierte, dass wenig technisch affine Menschen, alte Menschen oder Menschen, die erst gerade eingeschränkt wurden, dies aber vielleicht nicht können oder wissen. Da es um eine Beratungsstelle für genau diese Leute geht, sollte man sich auch um diese Kümmern. Das leuchtete mir dann auch ein, also bauten wir es ein.

Die Vergrößerungsfunktion ist relativ unproblematisch, sie vergrößert einfach alles wie es auch über das Keyboard mit der Tastenkombination Strg und + beziehungsweise Command und + am Mac funktioniert.

Die Kontrastfunktion müsste tatsächlich noch jemand testen, dafür haben wir leider noch niemanden gefunden. Es ist nicht immer alles einfach mit der Barrierefreiheit. Die Standardeinstellung sollte aber schon so einiges abdecken.

Hinzuprogrammiert kam noch der Leichte-Sprache-Button mit dem bekannten Icon, um auch diese Zielgruppe zu erreichen. Der Text dafür wurde von einer Expertin erstellt. Damit die Texte in leichter Sprache auch tatsächlich verständlich geschrieben sind, wurden Sie von Menschen der Zielgruppe daraufhin geprüft!

Für die Vorlesen-lassen-Funktion gab es leider kein Plugin, aber zum Glück stellt Responsive Voice für nicht-kommerzielle Zwecke ihren Service mit entprechender Lizenz zur Verfügung. Es musste also nur noch in die Templates eingearbeitet werden und das Ohr-Icon als On-Off-Schalter programmiert werden.

Auch diese Funktion brauchen natürlich keine Menschen, die z.B. schon lange blind sind, weil diese bereits helfende Technologien zum Vorlesen-lassen nutzen. Der Button ist also z.B. tatsächlich für Menschen, denen das hilft, weil das Lesen für Sie zu anstrengend ist.

Die Navigation

Sieht erstmal aus wie ne stinknormale Navigation, muss aber so programmiert sein, dass man sich mit der Tab-Taste durchtabben kann. Das hatte der Theme-Programmierer schon sehr gut hinbekommen. Ein kleines Problem gab es noch mit dem Screen-Reader JAWS meiner Kundin, der keine Unterseiten vorlas, weil es ein Focus-Problem gab, das aber mit ein wenig CSS gelöst werden konnte. Hier zeigt sich allerdings, dass man immer schon früh von Userinnen testen lassen sollte!

Der Inhalt

Der unkomplizierte Inhalt dieser Seiten ist relativ einfach barrierefrei zu halten, so lange man sich daran hält Bilder mit Alternativtext auszustatten, Links vernünftigt benennt und sich and die HTML-Überschriftenhierachie hält. Einer bitte der Kundin bin ich noch nachgegangen: JAWS hat in Listen bei jedem Unterpunkt den Punkt vorne mit vorgelesen. Also habe ich diesen versteckt und durch einen ersetzt, der nicht vorgelesen wird.

Die Blogarchivseite wurde auch optimiert. Wenn man durch Tab oder mit dem Screenreader von Link zu Link navigiert werden die “Weiterlesen”-Links nicht beachtet sondern nur die verlinkten Überschriften. Die Seite hat es allerdings nicht in die endgültige Website geschafft, da hier der Kundin eine einfache Seite für Ihren Bedarf reichte.

Die Sprachen

Auch wenn die EUTB ihre Beratung nur in deutsch anbietet (mit einer Dolmetscherin geht es aber natürlich!) sollte die Seite einmal kurz in vielen Sprachen erklären, was das Angebot der EUTB ist. Das ist in sofern problematisch, da ein Screenreader den Text dann auch in der richtigen Sprache vorlesen muss. Sonst hört sich das dann so an wie Lothar Matthäus auf Englisch und das will ja niemand.

Für die sieben Sprachen wurde dementsprechend die Seite so programmiert, dass das sogenannte “lang”-Attribut den Inhalt umschließt und der Screenreader so weiß, in welcher Sprache er vorlesen soll. Da Responsive Voice für nur wenige Sprachen vorhanden ist haben wir uns gegen das umprogrammieren für die Vorlesen-lassen-Funktion entschieden. Diese wird auf den Sprach-Seiten nicht dargestellt.

Kleine Anpassungen

Beim Testen fallen natürlich auch kleine Sachen auf wie z.B. der “•”, den das SEO-Plugin Yoast im Seitentitel (Text, der oben im Browsertab angezeigt wird) standardmäßig als Trennzeichen benutzt. Der wird blöderweise vorgelesen, was ja vollkommen unnötig ist. Umwandeln zu einem “–” und alles ist gut. Von dieser Art gab es viele kleine Sachen zum umbauen. Früh Testen hilft!

Fazit

Mit meinen bereits sehr guten Kenntnissen zu barrierefreien Websites komme ich nicht ans Ziel. Das Testen einer Screenreader-Userin ist unheimlich wichtig und sollte schon früh im Website-Erstellungs-Prozess stattfinden und nicht erst mit der fertigen Website beginnen. Gemeinsam kann man so eine optimal Seite erstellen, die für die jeweilige Zielgruppe perfekt angepasst ist, und neben der generell barrierearmen Website noch mehr Menschen den Zugang erleichtert.

Danke

Neben dem Team der EUTB geht großer Dank an Rian Rietveld, die mit mir bereits im Vorfeld das Theme auf seine Tauglichkeit ausgetestet hat und mir überhaupt sehr viel zum Thema barrierefreie Websites beigebracht hat. Sie bietet jetzt beim A11Y Collective Kurse für Content-Ersteller und Programmierer an, die ich jedem wärmstens empfehlen kann!

Der Beitrag Barrierrefreie Website mit WordPress am Beispiel der EUTB Köln erschien zuerst auf Phillip Roth.

Eine meiner Lieblingswebsites ist übrigens die von Jeff Bridges. Die ist natürlich weder barrierefrei, noch einfach zu lesen. Ich möchte lediglich darauf hinweisen, dass man noch Kunst machen darf im Netz! Und selbst Jeff Bridges hat für jedes Bild einen Alternativ-Text hinterlegt, wenn auch nicht immer ganz richtig.

Beliebte Fehler

Viele, meist weniger gestaltungsaffin, aber um so mehr perfektionistisch veranlagte Menschen (die, die jetzt umso zusammen geschrieben wollen wissen) denken, dass es gut wäre Text im Blocksatz zu setzen, weil das dann so schön links und rechts abschließt. Das ist aber leider nicht so schön, weil es zu großen Lücken im Text selbst führt. Diese werden verstärkt, wenn die Silbentrennung gerade mal in einem Browser nicht funktioniert, der Absatz sehr schmal, oder auf einem schmalen Handy dargestellt wird. Lustigerweise verwenden viele den Blocksatz auf dem schmalen Handy. Dem Lesefluss tut das eher weh und die unterschiedlich großen Lücken sind doch auch nicht wirklich schön oder? Deshalb lieber schön linksbündig, und wenn es geht mit Silbentrennung.

Ausgezeichnet

Für manche mag das toll sein, oder den Eindruck erwecken, dass DER Teil des Textes jetzt interessanter wird, in Wahrheit wird der Text aber einfach nur sehr sehr unleserlich, wenn er mit fett, Farbe und vielen Links versehen ist. Guter Text wird auch so gelesen!

Raleway als Copy/Fließtext

Mein Lieblingsbeispiel für einen falsch genutzten sogenannten Display-Font ist die Schriftart Raleway. Ursprünglich für Überschriften bzw. große Buchstaben konzipiert und gestaltet, benutzen sie selbst große Onlinemagazine wie zett als Fließtext! (Update: Sie tun es nicht mehr!) Dafür wurde sie nie gemacht und ist deshalb einfach auch sehr schwer lesbar. Informiert euch ein wenig, wofür eine Schrift gemacht worden! Das merkt man doch auch beim Lesen oder?

Zu kleine Schrift

Als mittlerweile 45-jähriger, der endlich mal zum Optiker muss (ich) ist es schwer, als Oma ist es schwer, als Schüler:in mit Brille ist es schwer, als draußen Stehende mit Sonne auf dem Display ist es schwer, als Brillenträger:in mit verlegter Brille ist es schwer. Macht es den Leuten doch einfach einfach. Aber schau mal, immernoch besser lesbar als Raleway Und schau auch immer, dass die Schriften skalierbar bleiben! (Windows Strg & +, OSX Command & +)

Kontrast

Am häufigsten sehe ich es beim Zuckerbäcker. Weiße Schrift auf pinkem Hintergrund. Das ist so schon sehr schwer lesbar, beim Lesen mit Sonneneinfall auf deinem Handy wirst du es erst recht merken. Nutze den Contrastchecker und erziehle ein Ergebnis von AA. Dann bist du auf der sicheren Seite

Fazit

Es gibt natürlich noch viel mehr Sünden und auch gute Beispiele, die man aufführen könnte, aber wenn das oben alles schonmal behoben wäre, wäre ich schon sehr sehr glücklich.

Der Beitrag Web und Schrift, die einfachen Grundlagen erschien zuerst auf Phillip Roth.

WordPress selbst

Dein WordPress solltest du immer auf dem allerneuesten Stand halten, allein wegen der Security. Es nützt dir nichts, wenn du ein wenig Geld oder Zeit gespart hast bei den Updates, nur um dann von einem Hacker Werbung auf deiner Seite geschaltet zu bekommen und dann eine schöne Sperre für drei Monate von Google bekommst. Deine Kunden können deine Seite nicht erreichen und du sinkst stark in deinem Google-Ranking. Die neuesten schicken Features verpasst du auch!

WordPress Plugins

Das Gleiche gilt natürlich für deine Plugins. Wobei es hier passieren kann, dass es einfach seit zwei Jahren keine Updates mehr gab, weil der Programmierer z.B. unbekannt verzogen ist. Du solltest dir sehr genau überlegen, ob du ein nicht gepflegtes Plugin benutzen möchtest.

Auf deinem Server läuft ja auch Software die sichereitsrelevante Updates bekommen sollte (PHP). Ein Update der PHP-Software kann dazu führen, dass ein Plugin nicht mehr funktioniert. Da ist es besser, man sucht sich einen Ersatz bevor es zum Crash kommt, oder man schmeißt das Plugin ganz raus, wenn es nicht so wichtig ist.

Website-Design

Website-Design verändert sich natürlich mit der Zeit und muss neue Anforderungen erfüllen. Ich habe früher z.B. nur für den Desktop gestaltet und es durfte bloß nicht gescrollt werden, welch eine Bürde für den User, Scrollen!

Heute muss das auf jedem Kleinstdevice funktionieren und die Leute scrollen eigentlich ganz gerne, denn sie haben gelernt, dass Klicken = Wartezeit bedeutet. Sidebars fallen weg, Schriftenmode verändert sich, “barrierefrei” ist das neue responsive, es muss beim Social Sharing ein schickes Bild angezeigt werden etc. etc.

Wenn man kontinuierlich das Design und die Informationen der Website weiterentwickelt hat kann man es durchaus schaffen, seine Website für immer zu behalten, wie bei einem Haus, das man ständig in Schuss hält. Aber mal ehrlich, das schaff ich auch nicht. Allein aus dem Grund, weil man ja auch mal was neues haben möchte. Ich mach das ja schon länger mit den Websites, hier meine Website von 2005

Das Design ist häufig auch verantwortlich für die Performance der Seite, also die Geschwindigkeit in der sie lädt. Durch eine schnell ladende Website kann zusätzlich der CO₂-Ausstoß verringert werden, deine Website verbraucht so beim ausliefern weniger Ressourcen. Bei Google ist Ladegeschwindigkeit ein großer Rankingfaktor.

WordPress Theme

Ja warte mal, haben wir darüber nicht gerade gesprochen? Jein. Du kannst das Design deiner Seite theoretisch anpassen ohne das Theme technisch auf Stand zu halten. Wie WordPress selbst und den Plugins kann auch dein Theme bei einem PHP-Update in die Knie gehen. Also auf jeden Fall Testen vor der Umstellung!

Fazit

Für all das brauchst du eigentlich keine neue Website, sondern eher ein paar Umbaumaßnahmen. Es kann aber natürlich sein, dass es sich wie bei einem alten ungepflegten Auto verhält, und man schauen muss, ob man lieber ein neues kauft, weil die anstehenden Reparaturen so umfangreich sind, dass ein neues, schickes und umweltfreundliches Auto einfach mehr Sinn macht.

Der Beitrag Wann ist meine WordPress Website veraltet? erschien zuerst auf Phillip Roth.

Hier geht es heute um Werkzeuge zum Testen. Ich habe extra nicht alle Tools verlinkt, es geht eher um Werkzeugarten, da sollte jeder dann das für sich passende raussuchen.

Es gibt durchaus Tools die bei vielen Checks helfen und dir so Hinweise geben, ob deine Website Hilfe braucht. Ich habe hier mal eine unvollständige Liste von Tools erstellt, die dich unterstützen können. Diese werden aber nur ca. 30%-50% der Fehler auf der Website erfassen. Alles ist besser als nix

Dein Browser

Das einfachste zum Testen ist, ob deine Website programmatisch eine logische Reihenfolge einhält. Das geht indem du das CSS (Styling) deiner Website deaktivierst. In Firefox z.B. unter Ansicht, Webseiten-Stil, Kein Stil. Für Chrome gibt es schöne Erweiterungen, z.B. Disable CSS. Das wird dann zwar hässlich, aber du kannst sehen, ob die Reihenfolge deiner Inhalte Sinn macht.

Nach diesem Test kannst du gleich noch schauen, ob sich deine Website problemlos vergrößern oder verkleinern lässt. STRG und + beziehungsweise Befehlstaste und + am Mac. Strg und Minus, um es wieder zu verkleinern, Strg und 0 also Null, um wieder den Normalzustand herzustellen.

Dein Keyboard.

Das hört sich jetzt erstmal bekloppt an, aber wenn du deine eigene Website nicht rein mit deinem Keyboard navigieren kannst, ist sie nicht barrierefrei. Mit Tab kannst du z.B. den Fokus auf dem nächsten Link oder das nächste Eingabefeld erreichen und mit Eingabetaste (Return) bestätigen. Link zu Firefox Tastenkombinationen. Du wirst schnell merken, ob du weißt wo du dich befindest (Fokus vorhanden?) auf der Seite und ob das überhaupt klappt mit dem durchtabben (Tabreihenfolge sinnvoll?).

Deine Website in Graustufen

Deine Website sollte ohne Farben funktionieren. Nur so stellst du sicher, dass z.B. eine Farbenblinde sich problemlos auf deiner Seite orientieren kann. Ein Link z.B. sollte nicht nur farblich als solcher erkennbar sein, sondern unbedingt auch unterstrichen. Sowohl für Firefox als auch für Chrome gibt es unzählige Erweiterungen. Ausprobieren!

Headings Map

Headings Map gibt es als Extension/Add On für Chrome und Firefox und fügt ein kleines Icon in eurer Browserleiste ein. Mit Headingsmap kannst du kontrollieren, ob es auf deiner aktuellen Seite wirklich nur eine H1-Überschrift gibt, und ob die restlichen Überschriften korrekt verschachtelt sind. Das ist wichtig, denn einige Screenreader-User navigieren sich durch Überschriften auf den Seiten und nicht z.B. über Links. Google wird es dir ebenso danken.

axe

axe ist eine Erweiterung, die es für Firefox und Chrome gibt und sich in die Entwickler-Tools einfügt.

Wenn du die automatisierte Analyse durchlaufen lässt wird dir axe zeigen wo sich Probleme auf der Website befinden könnten. axe kann z.B. nämlich nicht genau wissen, ob das Hintergrundbild einen zu niedriegen Kontrast gegenüber der Schriftfarbe darstellt. Aber es zeigt es dir an, und du kannst es kontrollieren und gegebenenfalls ändern.

WAVE

Wave ist ähnlich wie axe eine Erweiterung für deinen Chrome- oder Firefox-Browser. Sie zeigt dir Fehler in einer eigenen Seitenleiste an, die auf deiner Seite relevant sein könnten. Wie bei axe musst du aber selbst kontrollieren, ob das für die verschiedenen Fehler auch wirklich der Fall ist.

WCAG Contrast Checker

Es gibt sehr viele Contrast Checker, diesen benutze ich einfach gerne. Man gibt einfach Vorder- und Hintergrundfarbe an und sollte dann mindestens AA erreichen. Das ist die Vorgabe von WCAG 2.0, der Richtlinie für barrierefreie Webinhalte. Link zum Contrast Checker.

Deine Website anhören

Mit Voice-Over auf dem Mac (Achtung nur im Safari!) oder NVDA auf dem Windows-Rechner kannst du dir deine Website anhören und über dein Keyboard navigieren. Viele Blinde benutzen auch JAWS, das aber eine sehr teure Lizenz erfordert. Alle haben ihre Eigenarten, deshalb ist es ideal, wenn du alle Testen kannst. Wenn deine Website aber mit einem gut funktioniert bist du schon sehr sehr weit gekommen! Als erstes wirst du merken, ob die Sprache deiner Website richtig angegeben ist

Fazit

Hab ich was vergessen? Natürlich! Es gibt noch unzählig viele mehr Tools, die dabei helfen verschiedenste Fehler zu finden. Ich freue mich über Empfehlungen hier drunter oder wo auch immer du den Link von mir gefunden hast.

Der Beitrag Tools um deine Website auf Barrierefreiheit zu Testen erschien zuerst auf Phillip Roth.

So muss ich aber heutzutage oft argumentieren, wenn ich Kunden zu barrierefreien Websites bewegen möchte. Denn eine barrierefreie Website wird dir mehr einbringen, weil einfach mal 20% deiner UserInnen gerade irgendein Handicap haben, mit dem es schwierig ist deine Website zu benutzen.

Wie ich bei Maja gelernt habe sieht es in Deutschland nämlich so aus:

• 9,3% der Bevölkerung hat eine Schwerstbehinderung
• 8% der Männer und 0,4% der Frauen sind farbenblind
• 4% der Bevölkerung haben Legasthenie oder Diskalkulie

Jeder 5. in Deutschland ist also auf eine barrierefreie Website angewiesen. Bedenkt man dabei, dass nur ca. 5% der Behinderungen angeboren sind, kannst auch du Morgen dazugehören Gebrochene Arme/Schultern, Brille vergessen, kannst die Sprache nicht so gut, draußen Arbeiten etc. ist da nicht eingerechnet! So kleine Dinge wie ein niedriger Kontrast können schon dafür sorgen, dass einfach mal keiner bei Sonnenlicht deine Website lesen kann!

Was für Menschen sind das?

Barrierefreiheit wird heutzutage gerne über UserInnen-Personas vermittelt, als empathischer Mensch gefällt mir das. Die englische Regierung ist so fortschrittlich und hat ein paar eigene Personas entwickelt:

Claudia ist eine 54-jährige Sozialarbeiterin und ihr Sehvermögen ist eingeschränkt.

Ashley ist 24 und blind, hat einen Abschluss in Kunst und ist Verwaltungsassistentin.

Ron ist 82 und Rentner. Er hat Athritis, kann nicht gut hören, hat grauen Star und ne neue Hüfte.

Chris ist ein 54-jähriger Buchhaltungsmanager und hat rheumatische Athritis.

Pawel hat einen Abschluss in Chemie. Er hat Asperger-Syndrom und eine Angststörung.

Simone ist eine 41-jährige Office-Managerin und hat Dyslexie.

Saleem ist 22 und gerade arbeitslos. Er ist taub.

Während es bei Saleem halbwegs klar ist, dass er z.B. Untertitel oder Gebärdensprache bei Videos braucht, ist es bei anderen UserInnen nicht unbedingt direkt ersichtlich, was an einer Website für sie angepasst werden muss.

Wir nehmen mal Ron den Rentner. Er kann wegen seiner Athritis die Maus nicht benutzen und muss deswegen mit dem Keyboard navigieren, was bei jeder Website problemlos möglich sein sollte. Das heißt mit Tab kann man sich durchtabben, und man weiß durch den Fokus immer wo man sich befindet.

Er kann wegen des grauen Stars auch schlecht Sehen, weiß aber leider gar nicht, dass es ihm mit mit Strg+ möglich sein sollte eine Website vergrößern. Für ihn wäre ein Knöpfchen toll, mit dem er das machen kann.

Es ist also eine Kombination aus vielen kleinen Aspekten, die es Menschen möglich macht deine Website zu nutzen. Je mehr dein Webdesigner weiß und anwenden kann, je mehr ist deine Seite für viele Menschen zugänglich und nutzbar. Die meisten dieser Dinge führen aber auch allgemein zu Verbesserungen deiner Website.

Barrierefreiheit hilft allen UserInnen

Eine richtige Struktur und Semantik führt dazu, dass Google deine Seite mag. Darauf zu achten, dass Buttons groß genug sind zum Klicken hilft jeder Userin. Ein ausreichender Kontrast stellt sicher, dass auch bei Sonnenlicht auf dem Handy deine Website gut lesbar ist. Ausreichender Weißraum zum “Atmen” überfordert die UserInnen nicht kognitiv und macht sowieso ein schönes Layout. Und so weiter und so weiter.

Während Accessibility an sich kein direkter Ranking-Faktor bei Google ist, sind dennoch viele Faktoren, die für die Accessibility wichtig sind, auch für das Ranking bei Google sehr förderlich.

Rechtliches

Rechtlich ist das jetzt schon spannend, denn die Web Content Accessibility Guidelines (WCAG; englisch für „Richtlinien für barrierefreie Webinhalte“) sind in der Europäischen Union verbindlich für öffentliche Stellen. Seit dem 23. September 2019 für neue und ab 23. September 2020 für bestehende Websites. Und wer weiß, vielleicht wird das bald für Unternehmen auch so sein.

Fazit

Es sind viele Dinge, die einen Unterschied machen. Einen Alternativtext für ein Bild, ein Link der nicht verwirrend in einem neuen Tab aufgeht, eine Navigation die einer Screenreader-Userin sagt, ob der Punkt noch Unterpunkte hat oder nicht. Jede Verbesserung hilft vielen Menschen!

Wer wissen möchte wie das an einem konkretem Beispiel aussieht liest meinen Artikel: Barrierefreie Website am Beispiel. Barrierefreiheit ist ein ständiger Prozess, den man von Anfang an in jedem Projekt berücksichtigen sollte. Auch meine eigene Website hat durchaus noch einiges an Optimierungspotenzial!

Wer noch mehr lernen und seine Website schonmal grob überprüfen möchte, kann gut bei diesen tollen Postern anfangen. Sie erklären noch einmal, was für die verschieden UserInnen wichtig ist. Und wenn ihr Fragen habt oder eure Website optimieren möchtet, kann ich natürlich jederzeit helfen!

Der Beitrag Barrierefreie Websites einfach erklärt erschien zuerst auf Phillip Roth.

WordPress ist ein Content Management System (CMS). Das heißt mit WordPress kann man die Inhalte seiner Website erstellen, anordnen, ändern und verwalten. WordPress ist nur eins von vielen CMS auf dem weltweiten Markt wie Drupal, Typo3, Joomla etc. Es ist allerdings weltweit das bei weitem Erfolgreichste. Es wird auf 34% der top 10 Millionen Websites betrieben.

Der Unterschied zwischen WordPress.com und WordPress.org

WordPress wurde 2003 von Mike Little und Matt Mullenweg veröffentlicht als Weiterführung der Blogsoftware b2/cafelog. Daraus entstanden ist einerseits der Hostingservice WordPress.com, bei dem man gegen Bezahlung eine WordPress-Seite betreiben kann und diese als Service komplett gepflegt wird. Andererseits ist die WordPress Open-Source-Software etstanden, die unter WordPress.org kostenlos erhältlich ist, und die jeder auf jeglichem Server installieren kann, der die Vorraussetzungen erfüllt. Bei dieser Variante muss man sich selbst um Updates, Sicherheit und Pflege kümmern. Über diese Variante spreche ich hier.

Wie funktioniert dieses WordPress?

Die Software basiert auf einer Datenbank und Skriptdateien, die auf diese Datenbank zugreifen. Die Datenbank muss man sich wie eine komplexe Exceldatei vorstellen. Die Skripte sind mit Platzhaltern gefüllt, die sich dann die Inhalte der Tabellenzellen ziehen. Ähnlich wie bei einem Serienbrief in Word, der sich die Adressen aus einer Exceldatenbank zieht. Ein Beispiel:

Die Userin ruft eine Seite auf, die Daten werden aus der Datenbank abgerufen. Diese Daten können z.B. der Titel der Seite sein, der Inhalt der Seite, aber auch komplexere Sachen wie der Inhalt der Navigation, der Aufbau des Menüs, die URL unter der die Datei des Website-Logo abgelegt ist und vieles mehr. Diese Inhalte der Datenbank werden dann per Script in ein HTML-Dokument umgewandelt und an den Browser geliefert. Die Website wird wie gewünscht auf dem Rechner dargestellt.

Die Inhalte kann man im sogenannten Backend editieren, um die besagte Datenbank anzupassen oder um z.B. Bilder hochzuladen. Das sieht dann so aus:

Das Backend

Nach dem einloggen wird man auf dem Dashboard begrüßt, der Schaltzentrale für die Verwaltung einer Website mit WordPress.

Von hier aus kann man neue Seiten oder Beiträge erstellen, Bilder und Videos hochladen, das Navigationsmenü und Design anpassen, Kommentare verwalten, neue Userinnen anlegen oder sonstige Einstellungen bearbeiten.

Der Editor

Bei der Erstellung der Seiten hilft der Editor mit dem Namen “Gutenberg”. Der Editor wird ständig weiterentwickelt und arbeitet mit sogenannten Blöcken. Jeder Absatz ist ein Block, jede Überschrift, jedes Bild, Video, Tweet-Embed etc. Es gibt mittlerweile an die 100 verschiedenen Blöcke, die z.B. auch verschachtelt werden können. Die beste Übersicht über die Blöcke und deren Verwendung bietet die Gutenberg-Fibel von meiner Kollegin Jessica Lyschik.

Wer den Editor schnell mal Testen möchte kann das auf der Demo-Seite tun. Aber natürlich kann man dort keine Bilder hochladen.

Der Editor besteht grob aus dem Bearbeitungsfeld (hier in der Mitte), dass möglichst nah an die Websiteansicht herankommen soll, und dem Einstellungsfeldern rechts, die sich je nach Auswahl der Blöcke im Bearbeitungsfeld ändern (in meinem Screenshot sieht man Einstellungen für das ausgewählte Bild).

Einmal veröffentlicht (der blaue Button rechts oben), kann man nun auf der Beitrags-, News- oder Aktuelles-Seite der Website den neuen Eintrag sehen. Wenn man in gleicher Weise eine Seite erstellt hat kann man nun hingehen und diese zu einem Navigationsmenü hinzufügen. Das zu zeigen würde hier allerdings zu weit gehen, ich wollte ja nur kurz erklären, was dieses WordPress eigentlich ist ?

Schreib mir, oder kommentiere wenn du Fragen hast!

Der Beitrag WordPress einfach erklärt erschien zuerst auf Phillip Roth.