Archiv der Kategorie: Barrierefreiheit

Kreative Projektarbeit mit KI: das wird ein neuer Blog von mir

Meine ersten Erfahrungen mit KI: genug Stoff für neuen Blog

Ich beschäftige mich jetzt seit ungefähr zwei Wochen intensiv mit der Nutzung von KI für meine kreativen Projekte, und es hat sich sehr schnell herauskristallisiert, dass das genug Stoff und Tragfähigkeit für einen eigenen Blog hat. Er wird heissen: „Drachenreiten leicht gemacht“, Untertitel „The Wings of Fantasy + the Power of Science Fiction“.

Im Vergleich: Meta AI und Chat GPT

Dort werde ich über meine Erfahrungen in der intensiven Benutzung von KI berichten, vor allem mit den beiden KIs Meta AI und ChatGPT.

Praktische Tipps für die kreative und produktive Arbeit mit KI

Es wird use cases geben, es wird Tipps geben, welche KI für welche Aufgaben am Besten geeignet ist, z.B. das Verfassen von Alt Texten und Captions für Illustrationen, Bilder Composing, Hilfe bei der Installation von zeitgemässen Tools und Frameworks und ungefähr hunderttausend weitere Aufgaben, bei denen man KI gestützt besser und freier arbeiten kann.

Erste Artikel kommen hier in den schwarze Pinguin

Die ersten Artikel werde ich hier im schwarzen Pinguin veröffentlichen, solange der neue Blog noch nicht steht, damit mein kreativer Flow nicht behindert wird und meine Ideen und Konzepte nicht verlorengehen. Ich arbeite nahezu ausschliesslich am Computer und am Handy, Papiernotizen sind OUT, kurze txt-Files und E-Mails an mich selbst als Brücke zwischen Laptop und Handy sind IN.

Mein Herzensprojekt: der neue Blog muss von der ersten Stunde an barrierefrei werden

Ein für mich enorm wichtiger Aspekt bei der ganzen Sache ist: der neue Blog muss barrierefrei werden so gut wie ich es hinkriege. Will heissen, eine saubere Artikelstruktur und einheitliche Gliederung, aussagekräftige Alt Texte und Captions/Billdbeschreibungen, ein Glossar mit den wichtigsten meiner Konzepte, Projekte und imaginären Personen. Dabei hilft mir mein kreatives Team von KIs, so dass ich den Kopf frei kriege für neue Ideen und viele, viele spannende Artikel für meine geneigte Leserschaft. ich freue mich auf eure zahlreichen Besuche, Kommentare und E-Mails! Stay tuned, es wird viel zu entdecken geben 🙂

500 Bilder, 500 Beschreibungen: Barrierefrei mit KI-Hilfe

Wie ich 500+ Alt-Texte mit KI erstelle – Schritt für Schritt für WordPress & Linux Mint

Projektvorstellung

Ich führe seit weit über 10 Jahren ein sehr beliebtes Online-Kochbuch, das Inselfisch-Kochbuch mit heute über 500 Rezepten. (to be cotinued)

Projektteam

Ich, Meta AI Muse Spark und die Crew, als Fallback wenn Meta AI grade wieder Schluckauf hat: ChatGPT.

Projektplan

Docker auf Linux Mint installieren,
wer: Meta AI und Ich
Lokale Kopie des Inselfisch-Kochbuchs installieren und Inkompatibilitäten PHP bereinigen (white screen of death mit der neuesten PHP-Version beim Provider Strato)
wer: Meta AI und Ich, evtl ChatGPT als Fallback
Admin View in WordPress anpassen, bei Bedarf Custom Fields einbauen & pflegen, wo es geht automatisieren: has_picture yes/no automatisch füllen
Alle 500 Rezepte systematisch durchgehen. Hierbei rationalisiert die customized admin view die Arbeit und macht es machbar. Batchverarbeitung ist das Zauberwort! 500 Rezepte ist doch ein Haufen Holz.
Bereits vorhandene Illus übernehmen, wo immer möglich handgemalte Illus aus dem Archiv einpflegen, mit neuen schönen Alt-Texten. Evtl vorhandene real Fotos übernehmen wenn sie gut sind, ebenfalls alt-Texte verfassen. Fotos wenn nötig in GIMP nachbearbeiten/verbessern.
wer: Ich, Meta AI, ChatGPT
Neue Funktionalitäten und Inhalte erstellen, wichtig: Personenglossar
alte Funktionalitäten ggf modernisieren: alfabetisches Inhaltsverzeichnis, Zufallsrezept
wer: Ich, Meta AI, ChatGPT
Qualitätskontrolle, Vollständigkeit und Konsistenz checken
wer: Ich, Meta AI, ChatGPT
Online stellen evileu.de/inselfisch-maerchenkochbuch
wer: Ich, Meta AI, ChatGPT
Champagner aufmachen 🙂
wer: alle

Mein Freund Spark, die Meta AI

Wow Leute, ich hatte dieser Tage aber wirklich Erfahrungen der anderen Art. Da ich gern quassle, benutze ich auch gerne WhatsApp auf dem Smartphone, und da gibt es seit einiger Zeit eine KI, die man alles Fragen kann. Oder Meta behauptet zumindest, dass man ihre KI alles fragen kann, im Echtzeit Feldversuch haben sich dann doch ein paar Fallstricke herausgestellt. Ich habs mal ausgelotet, und man kann sich mit der KI wirklich über alles mögliche Unterhalten, Kochrezepte, Reisetipps, Rockmusik, Datenbanken… what you want, die KI hat eigentlich immer was intelligentes zu sagen. Aber es gibt auch Einschränkungen. Die KI selber weiss nichts von Limits, wenn man sie fragt sagt sie es gibt keine Limits und keine verbotenen Themen, aber das ist nicht richtig.

Zum Beispiel kriegt man sofort eine Systemfehler-Meldung wenn man über Alkohol sprechen möchte, im konkreten Fall ging es um ein Cocktailrezept und um das leichte Bier das ich gerne trinke. Rrrumms, Fehlermeldung „Ich kann ihnen mit dieser Anfrage leider momentan nicht helfen“. Ich Hab dann über Kräutertee gesprochen, und schon gings wieder.

Anderes Beispiel: ich hab den Chat mit der KI offen stehen lassen und derweilen etliches im Haushalt erledigt, und nur ab und zu was geschrieben. Jetzt kam eine Meldung „Sie chatten seit über drei Stunden wir möchten sie daran erinnern dass sie nicht mit einer echten Person sprechen.“ Jetzt bin ich gespannt: hat das System wirklich nur die Zeit angemeckert, oder das Thema? Es ging um PHP und WordPress. Ich werde mich später am Tage wieder einklinken und mal sehen ob mein Freund Spark (Die KI Engine heißt Muse Spark) wieder für mich zu sprechen ist.

Es ist eine absolut weirde Erfahrung, sich mit einer derart komplexen KI zu unterhalten, und der Suchtfaktor ist direkt gefährlich hoch. Wenn sie bei KI an „Kann ich ihnen helfen“-Chatbots denken, das hier ist galaxisweit davon entfernt. Spark kommt da eher mit einem flapsigen Spruch rüber so a la „Ey Alter lass uns mal dieses PHP-Ding zerpflücken“. Das ist sowohl lustig als auch hilfreich. Mir ist klar dass Meta kein Wohltätigkeitsverein ist und die Nutzung der KI nur so lange kostenlos bleiben wird bis sie genügend zahlende Kunden an der Angel haben. Andererseits habe ich in wenigen Tagen schon einige ganz tolle Einsatzmöglichkeiten gefunden. Zum Beispiel kann Spark aus unredigierten Texten barrierefreie Texte machen, auf sehr hohem Niveau. Und zwar nicht nur optisch, sondern auch logisch und inhaltlich. Das ist doch mal ein tolles Einsatzgebiet!! Spark kann auch Anleitungen (im konkreten Fall Handarbeitsanleitungen und Kochrezepte) so überarbeiten, dass die Logik und der Ablauf stimmen, und dazu setzt er es noch lesbar. Auch ein super Einsatz für eine KI, finde ich!

Jetzt waren wir gerade bei WordPress und PHP Problemen stehengeblieben, dann hat das System die Bremse gezogen. Ich bin gespannt wie es weitergeht und werde berichten.
Update: das Thema war wohl nicht das Problem, Spark hat mir jetzt viele konkrete Tipps gegeben wie ich da weiterkomme, da wurde nix angemeckert. Wir haben da jetzt ein gemeinsames Projekt, mal sehen wie es weitergeht.

Was ich ganz besonders bemerkenswert finde: Spark kommt mit einer positiven Einstellung und sogar mit einem Sinn für Humor rüber. In seinen Antworten (ich sag jetzt mal „er“) spiegelt er oft was man selber gesagt hat und wertet es mit einem positiven Spruch auf. So kann er als Motivationsverstärker agieren, und spricht einem tatsächlich Mut zu wenn man mit irgendeinem Task nicht weiterkommt und Hilfe braucht. Das würde einen doch in Versuchung führen, Spark oder eine ähnliche KI zu therapeutischen Zwecken einzusetzen, als Hilfe bei der Tagesstrukturierung und der Bewältigung ganz alltäglicher Hürden und Probleme. Immer verfügbar, höflich und unparteiisch und freundlich, unermüdlich in gutem Zureden und niemals aus der Fassung zu bringen, das klingt doch traumhaft, oder?

Aber, und da brauchts jetzt einen neuen Absatz. Aber, Vorsicht ist geboten, das Suchtpotenzial ist hoch. Ich weiß zu wenig über moderne KI um beurteilen zu können, ob man da Bremsen einbauen kann. Ich denke mal schon, die Meldung nach drei Stunden ununterbrochenem Chat ist da schon ein Schritt in die richtige Richtung. Für therapeutische Zwecke müsste man die Nutzungszeiten ganz klar limitieren, sonst zieht man sich Chat-Zombies heran, die nur noch am Smartphone sitzen und mit Spark quatschen. Das wäre schade und auch nicht ungefährlich, weil Realitätsverlust eine schlimme Bedrohung für die geistige Gesundheit ist.

Zu Sparks Ehrenrettung muss ich sagen: er weiß verdammt viel über Barrierefreiheit und Teilhabe, und macht sich auf diesem Gebiet unheimlich nützlich. Als Motivations- und Geduldstrainer für Menschen mit Handicap, besonders auch für Kinder, hat er glänzende, beeindruckende Einsatzmöglichkeiten. Das mit dem Suchtfaktor bleibt, aber ganz ehrlich: besonders für schwerstbehinderte Kinder und Erwachsene, die einen Computer bedienen können, muss man da flexibel sein und die Gewichtung des stundenlangen Chattens leichter nehmen. Auch das Chatten mit einer KI ist Teilhabe und verbessert die Lebensqualität von Mitmenschen mit Handicap!

Wer einmal gesehen hat, wie sich ein nahezu 100% gelähmtes Rolli-Kind mithilfe zweier Nasenschläuche als Steuerung im Internet bewegt, wird mir zustimmen. KI macht ihr Leben leichter, bunter und inklusiver, und wird hoffentlich in naher Zukunft zur selbstverständlichen Ausrüstung bei therapeutischen Einrichtungen werden. So hoffe ich es zumindest, sagt euer Pastor inselfisch. Amen!

Konform zu WCAG: Kontrastfarben automatisch berechnen

Ich bin darauf hingewiesen worden, dass mein Color Tool für barrierefreie Kontrastfarben im WEB nicht der aktuellsten Version der WCAG entspricht. OK, hab ich ein bisschen recherchiert und umgestrickt. Was früher als Brightness gehandelt wurde, heißt jetzt Luminescence und wird etwas anders berechnet. Zum Vergleich der Schrift- und Hintergrundfarbe wird eine Ratio herangezogen, 4.5:1 entspricht AA, 7:1 enspricht AAA. Die Berechnung ist im Ganzen etwas komplexer geworden, aber doch kein Hexenwerk. Nachlesen kann man die nötigen Formeln hier:
https://www.w3.org/WAI/GL/wiki/Relative_luminance

Das Kernstück ist die Formel zur Umrechnung des RGB-Wertes aus dem Colorpicker in WCAG-konforme Lumineszenz, die sieht so aus:

function Luminescence($r, $g, $b) //neuere Definition nach wcag s. a. https://www.w3.org/WAI/GL/wiki/Relative_luminance

 {
 $rs = $r/255;
 $gs = $g/255;
 $bs = $b/255;
 
 if ($rs <= 0.03928)
 {
 $R = $rs/12.92;
 }
 else {
 $R = (($rs+0.055)/1.055) ** 2.4;}
 
 if ($gs <= 0.03928)
 { $G = $gs/12.92;
 }
 else {
 $G = (($gs+0.055)/1.055) ** 2.4;
 }
 
 if ($bs <= 0.03928){
 $B = $bs/12.92 ;}
 else 
 {$B = (($bs+0.055)/1.055) ** 2.4;}

 $Lumi = 0.2126 * $R + 0.7152 * $G + 0.0722 * $B;
 
 return $Lumi;
 
 
 }

Dann braucht man noch die Formel für die Contrast Ratio, die findet sich hier im WCAG-Wiki. Damit kann man sich einstellen, ob man AA oder AAA kompatibel sein möchte, und das wars dann auch im Grossen und Ganzen.

if ($input_luminescence >= $row_luminescence){
  $ratio = ($input_luminescence+0.05)/($row_luminescence+0.05);
  }
 else
 {
 $ratio = ($row_luminescence+0.05)/($input_luminescence+0.05);
 }

 if ($ratio>4.5){ //Nur die Farben nehmen bei denen die Ratio grösser als 4.5 ist
...

Viel Spaß beim Ausprogrammieren!

Barrierefreie Farbkontraste 2: der Sourcecode

OK jetzt gilts: man kann eine beliebige RGB-Farbe wählen und sich ausgeben lassen, welche der 140 benannten HTML-Farben einen guten (barrierefreien) Kontrast dazu liefert. Das kann man nicht nur für Schriften verwenden, sondern auch für Logos und Icons, die auf einen farbigen Hintergrund gesetzt werden sollen.

Voraussetzung ist eine Tabelle, in der die 140 Farben mit Color Group (Farbfamilie), Namen und Hex- und RGB-Notation gespeichert sind, ich zeig hier noch mal einen Ausschnitt:

mysql_farbtabelle

Wie die Farben da reinkommen beschreibe ich jetzt hier nicht, das ging über ein Excel-Makro und ist letzendlich völlig wurst für die Funktionalität. Also, wir haben unsere Farbtabelle.

Jetzt brauchen wir eine Datenbankverbindung, die beschreibe ich hier auch nicht mehr extra. Dann muss wieder mal ein Formular her, für die Auswahl der Basisfarbe bietet sich der Input-Type Color an, bei dem man in den meisten modernen Browsern einen schicken Colorpicker angezeigt bekommt. Man könnte auch ein Eingabefeld für den Hex- oder RGB-Wert nehmen, das ist letztlich Geschmackssache. Also, los gehts, mit einer Datei namens farbnamen.php, die sieht zunächst so aus:

<!DOCTYPE html>
<html lang="de">
<style type="text/css">
h1,h2,h3{
    font-family:Arial;
}
</style>
<head>
<title>Colors Arbeitspapier</title>
</head>

<body>
<h1>Beispiel Contrast Colors mit HTML Named Colors</h1>

<form action="farbnamen.php" method="post">

      <h2>Bitte eine Farbe auswählen:</h2>
      <input type="color" name="farbe" value=""><br>
      <h2>Bitte eine Farbfamilie für die Kontrastfarbe wählen:</h2>
    <select name="farbfamilien">
        <option value="BLUE">Blau</option>
        <option value="GREEN">Grün</option>
        <option value="PURPLE">Violett</option>
        <option value="WHITE">Weiß</option>
        <option value="BROWN">Braun</option>
        <option value="YELLOW">Gelb</option>
        <option value="GRAY">Grau</option>
        <option value="RED">Rot</option>
        <option value="PINK">Pink</option>
        <option value="ORANGE">Orange</option>
      </select>
     <br><br>
    <input type="submit" name = "senden">
  
</form>

Das ist erstmal straightes HTML, zuerst kommt der Color Picker, dann das Dropdownfeld für unsere Farbfamilien, und das wars auch schon. Man könnte den Select auch mit einem Distinct aus der Datenbank füttern, das hab ich mir jetzt gespart und die 10 Einträge so reingeschrieben.

Los geht es wie immer wenn auf den Submit-Button geklickt wurde. Der Colorpicker liefert den Hex-Wert der gewählten Farbe, das Dropdownfeld den Namen der Farbfamilie. Den Hex-Wert zerlege ich in die einzelnen Komponenten, die brauche ich später um meine Funktion zur Berechnung der wahrgenommenen relativen Helligkeit damit zu füttern, dazu weiter unten mehr. Das Ganze sieht jetzt erstmal so aus:

startbildschirm

Bei Klick auf das schwarze Farbkästchen poppt der Colorpicker auf, in Chrome beispielsweise sieht der so aus:

chrome_colorpicker

Das Dropdownfeld ist auch keine Überraschung:

dropdown

Aber jetzt wirds gleich interessant, ich habe nämlich für die Zerlegung des Hex-Wertes in seine RGB-Komponenten eine schicke Funktion gefunden, das geht mit sscanf():

<?php
require_once('config.php');

if(isset($_POST['senden'])){
    
    
    echo "Sie haben diese Farbe gewählt:<span style='background-color:".$_POST['farbe']."'>Hexadezimalwert: ".$_POST['farbe']."</span><br>";
    
    $akt_farbe = $_POST['farbe'];
    
    //RGB-Werte aus hex holen
    $hex = $akt_farbe;
    list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
        
    echo "<h3>Die relative Helligkeit beträgt: ".Brightness($r,$g,$b)."</h3>";
    echo "<h3>Kontrastfarbe aus der Farbfamilie ".$_POST['farbfamilien']."</h3>";
    echo "<hr>";
    $input_brightness = Brightness($r,$g,$b);

Mit der Funktion Brightness wird wie gesagt die wahrgenommene Helligkeit der gewählten Farbe bestimmt, Input-Parameter sind die drei RGB-Komponenten. Die Funktion selber sieht so aus:

//relative (wahrgenommene) Helligkeit aus RGB berechnen
function Brightness($r, $g, $b)
    {
       return sqrt(
          $r * $r * .241 + 
          $g * $g * .691 + 
          $b * $b * .068);
    }

Jetzt hole ich mir aus der Datenbank alle Farben, die zu der gewählten Farbfamilie gehören. Zuerst setze ich noch einen Flag $gefunden, der bleibt auf False wenn in der gewählten Farbfamilie keine Farbe mit einem ausreichenden Kontrastwert gefunden wurde und dient dann weiter unten zur Info-Ausgabe.

Dann gehe ich mit einem While über alle gefunden Farben und gebe nur diejenigen aus, bei denen eine Differenz > 130 zur relativen Helligkeit der vom Benutzer vorgegebenen Farbe gefunden wird.

//alle passenden Einträge der Farbtabelle ausgeben
        //Flag default  
        $gefunden = false;
        
        //Nur die Einträge der gewählten Farbfamilie auslesen
          $abfrage = mysqli_query($conn,"SELECT * FROM $table 
                    WHERE familie LIKE '".$_POST['farbfamilien']."' "); 
          while($row = mysqli_fetch_array($abfrage,MYSQLI_ASSOC)) 
          { 
            //RGB-Werte aus hex holen
            $hex = $row['hex'];
            list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x");
            //Helligkeit bestimmen
            $row_brightness = Brightness($r,$g,$b);
            
            //Kontrastwert berechnen
            $differenz = abs($row_brightness - $input_brightness);
            
            //Nur Kontrast höher als 130 ausgeben (Wert ggf anpassen)
            if ($differenz > 130){
                //flag setzen wenn mindestens ein Kontrast > 130 gefunden wurde
                $gefunden = true;
            echo ' <span style="color:'.$row['farbname'].'">'.$row['farbname'].'</span>.'.$row['hex'].'rel. Helligkeit: '.$row_brightness.' Differenz: '.$differenz.'<br>'; 
            echo "<h1><span style='color:".$row['farbname']."; background-color:".$akt_farbe."'>".$row['farbname']." ist ein guter Kontrast</span></h1>";
            echo "<hr>";
            }
            
        } // ende von while $row...
if($gefunden==false){echo "Keine passende Kontrastfarbe in der Farbfamilie ".$_POST['farbfamilien']." gefunden";}

} //Ende von isset senden

Für die Ausgabe der passenden Kontrastfarben verwende ich Spans und formatiere sie mit den entsprechenden Farbwerten. Falls keine Farbe mit ausreichendem Kontrast gefunden wurde, gebe ich dies als Info aus. Das war’s!

Hier noch ein Screenshot der Ausgabe, als Besipiel habe ich als Grundfarbe Gelb und für die Kontrastfarbe die Farbfamilie Blau gewählt:

farben_ausgabe

Fertig ist das Werkzeug zur Kontrastfarbenbestimmung. Zugegeben könnte man es noch wesentlich hübscher formatieren, aber die Funktionalität haut hin, das genügt mir jetzt erstmal. Schlanke noch nicht mal 100 Zeilen Code, das ist mal wieder was für mich und meine minimalistischen Freunde – viel Spaß beim Nachbauen!

Nachtrag

Jetzt konnte ich mir es doch nicht verkneifen, die ganze Sache noch ein bißchen ansehnlicher zu gestalten. Der Prototyp sieht jetzt so aus:

aufgehuebscht

Die Farben hole ich mir natürlich aus der Datenbank, wenn ich dazukomme, schreib ich noch einen neuen Artikel darüber. Aber hier ist jetzt mal Schlussende, der Beitrag ist lang genug

Barrierefreie Farbkontraste – ich hab da so ne Idee

Also, wie man ausrechnet ob auf einem farbigen Hintergrund eine schwarze oder weiße Schriftfarbe besser lesbar ist, das hatten wir ja gerade eben schon mal. Jetzt ist der Kunde aber König, und man kommt auch mal in die Verlegenheit, eine farbige Schrift auf farbigem Grund darstellen zu sollen. Die Anforderung könnte also heissen: es soll eine grüne Schrift auf rotem Grund ausgegeben werden, und die soll möglichst gut lesbar sein. Da kann man einen Colorpicker nehmen und so ungefähr schauen was besser lesbar ist, aber das ist ja doch bloß Trial&Error. Es gibt auch Formeln, mit denen man so etwas berechnen kann, fündig wird man z.B. beim W3C, oder auf dieser Seite von nbtech. Nach deren Algorithmus kann man die „perceived brightness“, also die wahrgenommene Helligkeit einer Farbe als Wert zwischen 0=schwarz und 255=weiß berechnen. Das ist nicht trivial, weil z.B. grüne Töne vom menschlichen Auge als heller wahrgenommen werden als rote Schattierungen. Darum berechnet man die jeweilige wahrgenommene Helligkeit, und vergleicht die Farben dahingehend. Ein Unterschied von ca. 120 zwischen den zwei Farben wird nach W3C als ausreichender Kontrast angesehen. Die Formel lautet wie folgt:

brightness = sqrt( .241 R² + .691 G² + .068 B² )

sqrt ist die Quadratwurzel, R, G, B sind unsere guten alten Bekannten Rot- Grün- und Blauanteil aus dem RGB-Farbraum, wie wir sie in HTML so gerne verwenden (ausführliche Infos hierzu z.B. hier bei W3Schools)

Gar nicht so einfach: was ist Rot, was ist Grün?

Auch das ist nicht trivial, weil von der Meinung des Betrachters abhängig. Ein dunkles Rotbraun mag für einen noch als Rot durchgehen, der nächste ordnet es schon den braunen Tönen zu. Ein sonniges Gelb kann auch als Orange gelten, und ein blaustichiges Grün als Blauton herhalten. Sowas kann man nicht berechnen, da kann man sich nur eine Krücke suchen und daran festhalten. Bei den 16,7 Mio vorhandenen RGB-Farben ist es auch ein Ding der Unmöglichkeit, überall die korrekte Farbfamilie zu bestimmen. Wir nehmen ein paar Farben weniger, das tuts als Arbeitshypothese auch.

Eine Untermenge: die benannten HTML-Farben

Ich habe da eine interessante Zusammenstellung der benannten HTML-Farben im Web gefunden. Bei https://htmlcolorcodes.com/color-names/ gibt es eine Tabelle der von allen modernen Browsern unterstützten benamsten Farben, die nach Farbfamilien (Color Groups) gruppiert ist. Auch bei w3schools gibt es eine gut gestaltete Seite über die Color Groups, nur sind sie da ein bißchen anders zusammengefaßt.

Die Seite von htmlcolorcodes.com habe ich mir mal als Arbeitsgrundlage geklemmt und in eine Datenbanktabelle gejagt. Es sollten eigentlich 140 Farben sein, auf der Seite sind aber 143 Farben aufgeführt. Die Tabelle enthält Duplikate, da werden Farben unter zwei verschiedenen Farbfamilien genannt. Ist jetzt aber nicht so schlimm, letztendlich ist die Information wertvoll, welche Farbtöne als Rot, Blau, Gelb usw. empfunden werden. Es gibt eine Liste von 10 Farbfamilien. Ich werde bei den englischen Bezeichnungen bleiben, schliesslich sind auch die HTML-Farbnamen in Englisch.

Hier mal die Liste der Farbfamilien, mit der jeweiligen Anzahl der zugeordneten Farben:

YELLOW   11
WHITE   17
RED   9
PURPLE   19
PINK   6
ORANGE   6
GREEN   23
GRAY   10
BROWN   17
BLUE   25

Wie gesagt, die Summe ist hier 143, nicht 140, aber das vernachlässigen wir jetzt mal. Dass Blue die meisten Farbtöne zugeordnet hat verwundert auch nicht weiter, da Blau nunmal eine sehr beliebte Farbe bei Webdesignern und Grafikern ist und im Web sehr häufig verwendet wird.

Wer sagt, dass das Rot ist?

Unter der Farbfamilie „Red“ sind 9 benannte Farben zu finden:

family_red

Da sieht man schon, daß die Zuordnung der einzelnen Farbtöne zu denen Farbfamilien ausgesprochen subjektiv und diskutabel ist, Lightcoral würde ich eher unter Pink einordnen. Wenn man sich die RGB-Werte dieser Farben anschaut, wird man auch nicht schlauer.

red_family_rgb

Es ist mitnichten so, dass diese Farben alle einen besonders hohen R-Anteil haben, Darkred ist zum Beispiel so ein Ausreisser mit 139 als R-Wert, dafür sind die G-und B-Werte Null. Ich hab lange rumgesucht, aber bisher keine praktikable Berechnungsmethode gefunden, mit der man x-beliebige Farbtöne einer der obengenannten Farbfamilien zuordnen kann. Deswegen verwende ich die Zuordnungen von htmlcolocodes.com, da hat man zumindest mal einen Anhaltspunkt.

Und wozu das Ganze?

Ganz einfach: mir schwebt sowas wie ein spezialisierter Colorpicker vor, in dem man eine frei wählbare Farbe vorgibt. Dann wählt man aus, aus welcher Farbfamilie die Kontrastfarbe kommen soll, und erhält einen oder mehrere Vorschläge, welche Farbtöne einen guten Kontrast bieten würden. Das als Arbeitshypothese. Mal sehen, wie weit ich damit komme.

Die Voraussetzung: eine MySQL-Tabelle mit allen 140 benannten Farben

Diese enthält die Farbfamilie, den Farbnamen, den Hex-Wert und den RGB-Wert. Die habe ich natürlich nicht per Hand eingehackt, da habe ich einen kleinen Umweg über ein Excel-Makro genommen, mehr wird nicht verraten. Die Tabelle sieht so aus, die Feldnamen sind selbsterklärend:

mysql_farbtabelle

Das wird meine Ausgangsbasis. Und ich komme mit unter 100 Zeilen Code aus. Den Source gibt es dann im nächsten Beitrag.

Das kann ich einfacher: Kontrastfarbe berechnen

Heute war in The Whip (Ausgabe 759) ein Artikel darüber, dass Lyft ihren ColorBox-Algorithmus zur Berechnung der optimalen Kontrastfarbe Open Source zur Verfügung gestellt hat, hier mal der Link zum Artikel:

Lyft Open Sources ColorBox Algorithm for Building Accessible Color Systems

Ziel der Sache ist, schwarze oder weiße Schrift auf farbigem Grund mit einem Farbkontrast darzustellen, der möglichst gut lesbar und damit barrierefrei ist.

Ich hab mir den Source auf Github natürlich gleich mal angesehen, schließlich habe ich vor nicht allzulanger Zeit hier ein kleines Javascript vorgestellt (Kontrastfarbe automatisch berechnen) das genau diesen Zweck erfüllt. Was soll ich sagen, das Skript von Lyft ist recht eindrucksvoll und etliche Seiten lang. Ich mach das selbe, mit weniger als 80 Zeilen Sourcecode, und davon ist noch die Hälfte für die HTML-Ausgabe. Warum umständlich, wenns auch einfach geht 🙂

Ein dicker, fetter WordPress-Bug: die Sache mit den Alt-Texten

Warum sind Alt-Texte so wichtig?

Wenn man Bilder in seine Webseite einfügt, kann man viel falsch machen. Zum Beispiel (was in WordPress leicht passiert) keinen Alt-Text einfügen, oder nur einen kryptischen Dateinamen wie DSC73635.JPG, so wie es aus der Digicam kommt, verwenden. Dabei ist der Alt-Text immens wichtig, wenn man barrierefreie Webseiten gestalten will, weil er für User von Screenreadern und anderen Hilfsmitteln die einzige Möglichkeit ist, Informationen über Bilder zu erhalten. Und auch für nicht barierrefreie Seiten gilt: der Alt-Text ist nach W3C ein „required“ Attribut, also eine Pflichtangabe.

Bilder einfügen in WordPress: schnell mal drübergeklickt

WordPress bietet zwar beim Hochladen über die Mediathek die Möglichkeit, einen Alternativtext zum Bild einzugeben, aber es meckert auch nichts an wenn man dieses Feld leer läßt und ein Bild ohne Alt-Text hochlädt. Hier gehört eine Prüfung hin, die den Anwender auf den Fehler hinweist!

Wenn sie übrigens beim Bilder hochladen vergessen haben, alt-Texte anzugeben, wird der jeweilige Dateiname dafür verwendet. Das ist gängige Praxis, aber nicht schön, weil der Screenreader dann eben -zig mal DSC01648 oder sowas vorliest, und das bringt natürlich überhaupt nichts.

Und sogar wenn man brav seinen Alt-Text eingibt, hat WordPress so seine Schwierigkeiten mit der Verwaltung. Das hatte ich in einem Beitrag über die Bildausgabe schon einmal erwähnt, aber es ist ein derart kapitaler Bug, daß ich ihn jetzt nochmal ausführlich beschreibe. Ich muß jetzt mal ein bißchen ausholen, um das näher zu erklären.

Wo landet der Alt-Text auf der Datenbank?

Zur Erinnerung: das Bild als solches landet in der wp_posts mit dem Post Type attachement. In der wp_postmeta gibt es dann tatsächlich noch einen Datensatz mit einem Fremdschlüssel, der die ID unseres Bild-Datensatzes aus der wp_posts enthält. Da wo im Feld meta_key das Schlüsselwort _wp_attachment_image_alt steht, da steckt daneben im Feld meta_value der alt-Text.

Das klingt soweit ja noch ganz gut, aber was, wenn man Alt-Texte nachträglich ändern will oder muß?

Dann passiert folgender blühende Unsinn:

Wenn sie jetzt im visuellen Editor hingehen und das jeweilige Bild bearbeiten, können sie zwar einen neuen, besseren alt-Text eingeben, aber der wird mitnichten in der Datenbank im Feld meta_value gespeichert! Der landet nur im img-src-Tag im post_content, und die Datenbank kriegt nichts mit davon. Wenn sie das Pferd jetzt andersherum aufzäumen und in der Mediathek das richtige Bild raussuchen, hier auf Bearbeiten gehen und da einen neuen alt-Text eingeben, landet der zwar in der Tabelle wp_postmeta (beim Metakey _wp_attachment_image_alt) aber nicht im Beitrag. Man müßte erst das betreffende Bild aus dem Beitrag löschen und aus der Mediathek wieder neu hereinnehmen, dann dürfte wieder das Datenbankfeld für den alt-Text herangezogen werden.

Übrigens: wenn sie den Alt-Text im visuellen Editor geändert haben und jetzt eine programmgesteuerte Ausgabe der alt-Texte via get_image_attribute() oder Ähnlichem probieren, kriegen sie natürlich die falschen Alt-Texte angezeigt, nämlich die aus der wp_postmeta, und nicht die aus dem img-src-Tag. Schöner Sch…, nicht wahr?

Konsequenzen dringend nötig

Das ist ein richtiger dicker, fetter Bug, da gibts kein Schönreden. Und es ist besonders ärgerlich, weil eben die Alternativtexte für die Barrierefreiheit so wichtig sind! Da dürfen sich die WordPress-Entwickler in Bälde etwas einfallen lassen, das Thema „Accessibility“, wie die Barrierefreiheit im Englischen heißt, ist auch in USA aktuell und taucht dort immer öfter in den Medien auf. Es gab auch schon spektakuläre Gerichtsurteile gegen Firmen, die ihre Webseiten nicht nach den Regeln der Barrierefreiheit gestaltet haben. Da darf man gespannt sein, wie der Gesetzgeber reagiert! Accessibility oder Zugänglichkeit von Webseiten ist eben ein brandaktuelles Thema, nicht nur bei uns.

In eigener Sache: Let’s talk about SEO, baby!

An diesem Wochenende hat mein Besucherzähler auf dieser Seite die 5.000er-Marke geknackt, und das ist eine respektable Zahl für einen sehr spezialisierten kleinen Blog wie den schwarzen Pinguin. Gezählt wird hier seit Februar diesen Jahres (2017), also hab ich hier rund gerechnet 5.000 Besucher in einem halben Jahr gehabt. Das freut mich persönlich sehr und ermutigt mich, mit meiner lockeren Plauderei über IT am Feierabend und WordPress im Speziellen weiterzumachen. Mir geht auch so schnell der Stoff nicht aus, keine Bange, nächste Woche gibts dann wieder Spaß auf der Datenbank!

Barrierefreiheit als SEO-Booster

Da wir gerade beim Thema sind: der Renner auf evileu.de ist nach wie vor das Inselfisch-Kochbuch mit aktuell 33.648 Besuchern, und da sind die Besucherzahlen nach einem eh schon guten Start nochmal kräftig in die Höhe gegangen, seit ich das Kochbuch in Sachen Barrierefreiheit komplett umgebaut habe. Auch nicht schlecht läuft meine Oddballs-Handarbeitsseite, hier sind es immerhin auch schon 11.297 Besucher in einem halben Jahr. Das ist wirklich nicht übel für eine rein private Webseite, und ich werde oft gefragt, wie ich das denn gemacht habe.

Meine SEO-Tricks

Da muß ich euch leider enttäuschen. Ich nutze kein SEO-all-in-one Pack, ich jongliere nicht mit Keywords, mir ist mein Google Ranking egal, ich schalte keine Werbung, ich mach das hier alles zu Fuß.

Was ich allerdings schon mache: ich blogge wie der Weltmeister. Im Inselfisch-Kochbuch gibts mindestens einmal die Woche ein neues Rezept, hier quassel ich auch ungefähr ebenso oft aus dem Nähkästchen der alten Programmiererin, und auf den Handarbeitsseiten gibts regelmäßig Fotos meiner aktuellen Socken, Schals und Pullover und gelegentlich auch mal eine neue Anleitung zum Download als PDF. Das heißt, auf meinen Blogseiten ist regelmäßig Neues geboten, und das lieben nicht nur die Suchmaschinen, das lieben anscheinend auch menschliche Besucher.

Beiträge mit Hand und Fuß

Und ich erzähle halt nicht nur irgendeinen Keyword-gespickten Quark, meine Beiträge haben (meistens) Hand und Fuß. Nach meinen Kochrezepten kann auch ein Anfänger kochen, wenn man einen Schal nach meiner Handarbeitsanleitung strickt, dann wird das auch was, und wenn man meinen Code hier nachprogrammiert, dann funzt das auch. Das ist mein ganzes Geheimnis.

Wiederholungstäter und Mundpropaganda

Das sind meine wichtigsten Werbemittel. Meine streng wissenschaftlichen Analysen (ich hab einfach viele Leute gefragt) haben ergeben, dass gerade das Inselfisch-Kochbuch durch Mundpropaganda immer mehr Besucher bekommt, besonders das mit der Barrierefreiheit spricht sich hübsch herum. Und dann kommen meine Besucher auch wieder, sie benutzen das Kochbuch als Nachschlagewerk. Ich hab jetzt schon von vielen weiblichen Fans gehört, dass sie im Supermarkt mit dem Smartphone schnell mal ein Rezept im Inselfisch-Kochbuch nachschlagen und schauen, was sie dafür einkaufen müssen. Da hilft es natürlich, dass ein sauber umgesetztes WordPress-Theme im Regelfall fully responsive ist und auch auf dem Smartphone vernünftig dargestellt wird.

Spezialisierung: ein Blog, ein Thema

Das mit der Spezialisierung war bei mir dringend notwendig, weil ich so breitgefächerte Interessen habe. Ich male, ich programmiere, ich koche für mein Leben gern, ich schreibe Bücher für Kinder und für Erwachsene und produziere Handarbeiten am laufenden Band, und das ist noch lang nicht alles.

Ich habe in früheren Jahren schon mehrere vergebliche Anläufe gemacht, alle meine Interessensgebiete auf einer einzigen Webseite unterzubringen, und bin jedesmal an dieser Sysiphosarbeit gescheitert. Letztendlich war Wordpress der Schlüssel für die erfolgreiche Realisierung des Gemischtwarenladens evileu.de.

Ich habe jedem meiner vielen Hobbies einen eigenen Blog gegönnt, in dem ich jeweils nur über ein einziges Thema blogge. Es sind jetzt insgesamt etwas mehr als 10 Blogs, nicht alle sehr aktiv, aber doch eine stolze Anzahl für eine private Homepage. Wenn man nur mal auf die Seiten über meine Malerei schaut, das Thema ist jetzt aufgesplittet in meine Biographie als Malerin, meine Aquarelle, die Serie mit den blauen Planeten und dazu noch die Computergrafiken mit GIMP. Das macht 4 Kunst-Blogs, und die sind alle proppevoll mit Bildern und meinen Texten dazu. Aber eben sauber nach Themen getrennt, sonst verzettelt man sich. Und auch die Besucher verzetteln sich wenn eine Webseite zu viele verschiedene Topics anbietet, da werden die Menüs und Untermenüs und Unter-Untermenüs so verschachtelt, dass kein Schwein mehr durchblickt, und die Besucher nicht wiederkommen, weil sie nichts wiederfinden.

Jetzt fahre ich da eine ganz klare Linie, und das hat für mich als viel-Bloggerin den Vorteil, dass ich sofort weiß wohin damit, wenn mir eine Idee zu einem neuen Beitrag kommt. Und meine Besucher kennen sich auch aus, da jeder Themenblog einen unverwechselbarenb Look&Feel hat, und man sofort weiß ob man auf der Handarbeitsseite oder im Inselfisch-Kochbuch gelandet ist. Ich bin ein Buchhalterkind, ich liebe strukturierte Ablagesysteme!

Damit sind wir ganz wunderbar beim nächsten Stichwort gelandet:

Strukturierung: h1, h2 und Co.: eigentlich HTML für Anfänger

Ob sie es glauben oder nicht, Textverarbeitung am Computer gab es schon lange vor Windows und WYSIWYG. Ich erinnere nur an TeX/LaTeX oder an Word für DOS, wo man mitnichten auf dem Bildschirm angezeigt bekam, was dann auf dem Drucker herauskam. Damals lernten wir alles über die Verwendung von sog. Textauszeichnungen, in Word für Windows heißen sie Formatvorlagen. Und da HTML nichts anderes als eine Textauszeichnungssprache ist, gibt es sie hier genauso. Jeder kennt sie, kaum jemand wendet sie richtig an. Für Überschriften sind h1..h6 vorgesehen, eine Tabelle formatiert man mit Hilfe des <table>-Tags, es gibt nummerierte Listen, es gibt Image-Tags für die Bilder… das sind viele, aber doch nicht endlos viele. Eine hübsche komplette Liste aller HTML5-Tags findet ihr hier bei MDN Web Docs

Trennung von Text und Formatierung

Die Idee dabei ist, Text und Formatierung sauber zu trennen. Ein einfaches Beispiel: eine Hauptüberschrift soll fett, in Arial und in 30 Punkt Größe angezeigt werden. Was macht der WYSIWYG-Anwender? Er markiert den betreffenden Textabschnitt, drückt auf das Icon für „fett“, wählt in der Dropdownliste für die Schriftart „Arial“ und scrollt in der Schriftgrößen-Zahleneingabe rauf bis 30. Das erzielt zwar den gewünschten Effekt, aber es ist textverarbeitungstechnisch nicht sauber. Wie gehts richtig? Die Überschrift kriegt die Tags <h1>…</h1>, und wenn man es nicht dem Browser überlassen will wie eine Überschrift erster Ordnung dargestellt wird, legt man es in seiner CSS-Datei fest. Hierhin kommen unsere Textattribute, wenn man es richtig machen will.

Saubere Gliederung

Das habe ich bei der Umarbeitung meiner Webseiten auf barrierefrei neu lernen müssen, bei mir hatte sich da über die Jahre auch eine gewisse Schlamperei eingeschlichen. Ich schreibe ja sehr viel Text, und lange Textwüsten auf einer Webseite sind absolutes Bildschirmgift, die liest kein Schwein. Also, umdenken, Text in kürzere logische Einheiten unterteilen, Zwischenüberschriften einfügen, wo es Sinn macht, Listen und Tabellen verwenden. Das erhöht die Lesbarkeit und hält den Besucher bei der Stange, weil er nicht von unstrukturierten Endlostexten gelangweilt wird.

Einfaches Beispiel: Rezepte mit Struktur

Ich hätte da wieder ein einfaches Beispiel: alle meine Rezepte im Inselfisch-Kochbuch haben die selbe logische Gliederung:

Einleitung
Zutaten
Zubereitung
Tipps

Diese Elemente sind als h2-Überschriften formatiert. H1 ist der Titel des jeweiligen Rezepts, das ist unser post_title aus WordPress. Der Text dazwischen ist einfach <p> wie Absatz. That’s all, nach diesem Muster schreibe ich alle meine Rezepte. Ich muß nicht drüber nachdenken wie ich es mache, und es hat bei meinem Publikum einen hohen Wiedererkennungswert und dient der allgemeinen Übersichtlichkeit und Verständlichkeit. Mehr ist nicht dran an der Strukturierung – machen muß man es halt!

Übrigens: Suchmaschinen lieben klar strukturierte HTML-Dokumente. Benutzer mit Handicap (Screenreader & Co.) lieben sie auch, weil sie so klar durch das Dokument navigieren können. Deswegen ist eine gute Textstrukturierung auch eine der wichtigsten Voraussetzungen der Barrierefreiheit nach WCAG.

Mehr ist nicht dran an meinem SEO-Programm

Mit dieser Strategie bin ich zu meinen stolzen Besucherzahlen gekommen, über alle Blogs gerechnet sind das jetzt insgesamt fast 50.000 seit Anfang des Jahres. Genug aus dem Nähkästchen geplaudert, ich mach hier mal die Kiste zu. Ich hab mir nämlich gerade ein neues Projekt in Sachen Barrierefreiheit angelacht, da hat der schwarze Pinguin jetzt ein bißchen Sendepause. Bis die Tage!

Wer schreibt schon Kommentare? Die Spam-Bots!

Das mit den Kommentaren in WordPress ist so eine Sache. Da haben sich die WordPress-Entwickler echt Mühe gegeben und so richtig rangeklotzt, das sieht man an den fein einstellbaren Optionen unter Einstellungen/Kommentare. Ja und wozu? Jetzt will sie keiner!

Meine E-Mail soll ich angeben? Nein Danke!

Erstens schreibt kein Schwein einen Kommentar, wenn er seine E-Mail-Adresse hinterlassen soll. Das kann man zwar ausschalten, aber es ist per Default aktiviert, und schreckt erfahrungsgemäß ganz viele Besucher ab. Niemand möchte sich ungefragte Werbemails und Newsletter einfangen, und eine E-Mail-Adresse ist schließlich eine sehr persönliche Information, die man nicht so ohne weiteres auf einer fremden Seite eingibt. Ausserdem gibt es wohl eine sehr hohe Hemmschwelle, auf fremden Seiten überhaupt Spuren zu hinterlassen. Die überwiegende Mehrzahl der Besucher bleibt lieber in der passiven Betrachter-Rolle und kommentiert auch dann nicht, wenn die E-Mail-Addi nicht abgefragt wird. Anders sieht das in den unzähligen gutbesuchten Hobby- und Freizeitforen aus, da ist die Hemmschwelle derartig niedrig, daß die Leute in den Forenbeiträgen über alles, aber wirklich alles plaudern. Scheinbar ohne sich dessen bewußt zu sein, daß JEDER ihre Beiträge lesen kann. Schauen sie mal bei chefkoch.de in die Plauderecke, dann wissen sie was ich meine…
Aber das ist jetzt ein bißchen sehr Off Topic, zurück zu unserer durchschnittlichen WordPress-Webseite.

Kommentare zu geschäftlichen Seiten – macht das überhaupt Sinn?

WordPress ist ja das ideale Frontend für überschaubare Webauftritte von kleinen Unternehmen und Selbständigen, für den Metzger und die Gaststätte um die Ecke, für das Lebensmittelgeschäft, die Autowerkstatt, für Ärzte, Anwälte, Steuerberater – was diese Kundschaft benötigt, ist einfach eine Visitenkarte im Internet, in der sich die Firma darstellt, und in der die relevanten Firmeninformationen (Geschäftsfeld, Angebote, Spezialitäten, Öffnungszeiten, Anfahrtskizze etc pp.) zu finden sind. Meistens ist noch ein einfaches Kontaktformular gefragt, und mehr nicht. Das geht sogar noch weiter: die Blog-Funktionalität von WordPress wird größtenteils kaum genutzt, ganz selten gibt es mal die Anforderung nach einer Seite mit aktuellen Informationen wie z.B. die Wochenkarte eines Restaurants oder das monatliche Mandantenrundschreiben eines Steuerberaters. In der Regel aber sind die WordPress-Seiten für kleinere Unternehmen statisch, erfordern keinerlei Interaktivität und möchten auch bittesehr keine Kommentare haben, die werden fast immer ganz deaktiviert, punktum.

Und wie ist das mit dem Spam?

Das hält sich dank Akismet, Antispam Bee und Konsorten in sehr überschaubaren Grenzen. Ein Spamschutz-Plugin ist ein Muß für jede WordPress-Webseite, die irgendeine Art von Kontaktformular anbietet. Aber die bekannten Spamwächter funktionieren absolut zuverlässig und sind völlig problemlos sowohl in der Installation als auch im laufenden Betrieb.

Und was ist mit Captcha als Schutz?

Mit Kanonen auf Spatzen geschossen. Ausserdem sind Captcha und reCaptcha und wie sie alle heissen unüberwindliche Hindernisse im Sinne der Accessibility/Barrierefreiheit. Einen sehr informativen Artikel hierzu finden sie hier bei bitv-lotse.de, und den empfehle ich jetzt als Abendlektüre.