{"id":663,"date":"2017-09-02T04:02:40","date_gmt":"2017-09-02T02:02:40","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=663"},"modified":"2017-09-02T04:12:11","modified_gmt":"2017-09-02T02:12:11","slug":"ein-dicker-fetter-wordpress-bug-die-sache-mit-den-alt-texten","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2017\/09\/02\/ein-dicker-fetter-wordpress-bug-die-sache-mit-den-alt-texten\/","title":{"rendered":"Ein dicker, fetter WordPress-Bug: die Sache mit den Alt-Texten"},"content":{"rendered":"<h2>Warum sind Alt-Texte so wichtig?<\/h2>\n<p>Wenn man Bilder in seine Webseite einf\u00fcgt, kann man viel falsch machen. Zum Beispiel (was in WordPress leicht passiert) keinen Alt-Text einf\u00fcgen, 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\u00fcr User von Screenreadern und anderen Hilfsmitteln die einzige M\u00f6glichkeit ist, Informationen \u00fcber Bilder\u00a0 zu erhalten. Und auch f\u00fcr nicht barierrefreie Seiten gilt: der Alt-Text ist nach W3C ein &#8222;required&#8220; Attribut, also eine Pflichtangabe.<\/p>\n<h2>Bilder einf\u00fcgen in WordPress: schnell mal dr\u00fcbergeklickt<\/h2>\n<p>WordPress bietet zwar beim Hochladen \u00fcber die Mediathek die M\u00f6glichkeit, einen Alternativtext zum Bild einzugeben, aber es meckert auch nichts an wenn man dieses Feld leer l\u00e4\u00dft und ein Bild ohne Alt-Text hochl\u00e4dt. Hier geh\u00f6rt eine Pr\u00fcfung hin, die den Anwender auf den Fehler hinweist!<\/p>\n<p>Wenn sie \u00fcbrigens beim Bilder hochladen vergessen haben,\u00a0 alt-Texte anzugeben, wird der jeweilige Dateiname daf\u00fcr verwendet. Das ist g\u00e4ngige Praxis, aber nicht sch\u00f6n, weil der Screenreader dann eben -zig mal DSC01648 oder sowas vorliest, und das bringt nat\u00fcrlich \u00fcberhaupt nichts.<\/p>\n<p>Und sogar wenn man brav seinen Alt-Text eingibt, hat WordPress so seine Schwierigkeiten mit der Verwaltung. Das hatte ich in einem Beitrag \u00fcber die Bildausgabe schon einmal erw\u00e4hnt, aber es ist ein derart kapitaler Bug, da\u00df ich ihn jetzt nochmal ausf\u00fchrlich beschreibe. Ich mu\u00df jetzt mal ein bi\u00dfchen ausholen, um das n\u00e4her zu erkl\u00e4ren.<\/p>\n<h2>Wo landet der Alt-Text auf der Datenbank?<\/h2>\n<p>Zur Erinnerung: das Bild als solches landet in der wp_posts mit dem Post Type attachement. In der wp_postmeta\u00a0 gibt es dann tats\u00e4chlich noch\u00a0 einen Datensatz mit einem Fremdschl\u00fcssel, der die ID unseres Bild-Datensatzes aus der wp_posts enth\u00e4lt. Da wo im Feld meta_key das Schl\u00fcsselwort _wp_attachment_image_alt steht, da steckt daneben im Feld meta_value der alt-Text.<\/p>\n<p>Das klingt soweit ja noch ganz gut, aber was, wenn man Alt-Texte nachtr\u00e4glich \u00e4ndern will oder mu\u00df?<\/p>\n<h2>Dann passiert folgender bl\u00fchende Unsinn:<\/h2>\n<p>Wenn sie jetzt im visuellen Editor hingehen und das jeweilige Bild bearbeiten, k\u00f6nnen sie zwar einen neuen, besseren alt-Text eingeben, aber der wird mitnichten in der Datenbank\u00a0im 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\u00e4umen 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\u00fc\u00dfte erst das betreffende Bild aus dem Beitrag l\u00f6schen und aus der Mediathek wieder neu hereinnehmen, dann d\u00fcrfte wieder das Datenbankfeld f\u00fcr den alt-Text herangezogen werden.<\/p>\n<p>\u00dcbrigens: wenn sie den Alt-Text im visuellen Editor ge\u00e4ndert haben und jetzt eine programmgesteuerte Ausgabe der alt-Texte via get_image_attribute() oder \u00c4hnlichem probieren, kriegen sie nat\u00fcrlich die falschen Alt-Texte angezeigt, n\u00e4mlich die aus der wp_postmeta, und nicht die aus dem img-src-Tag. Sch\u00f6ner Sch&#8230;, nicht wahr?<\/p>\n<h2>Konsequenzen dringend n\u00f6tig<\/h2>\n<p>Das ist ein richtiger dicker, fetter Bug, da gibts kein Sch\u00f6nreden. Und es ist besonders \u00e4rgerlich, weil eben die Alternativtexte f\u00fcr die Barrierefreiheit so wichtig sind! Da d\u00fcrfen sich die WordPress-Entwickler in B\u00e4lde etwas einfallen lassen, das Thema &#8222;Accessibility&#8220;, wie die Barrierefreiheit im Englischen hei\u00dft, ist auch in USA aktuell und taucht dort immer \u00f6fter in den Medien auf. Es gab auch schon spektakul\u00e4re 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\u00e4nglichkeit von Webseiten ist eben ein brandaktuelles Thema, nicht nur bei uns.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warum sind Alt-Texte so wichtig? Wenn man Bilder in seine Webseite einf\u00fcgt, kann man viel falsch machen. Zum Beispiel (was in WordPress leicht passiert) keinen Alt-Text einf\u00fcgen, 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,15,9,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/663"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=663"}],"version-history":[{"count":3,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/663\/revisions"}],"predecessor-version":[{"id":666,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/663\/revisions\/666"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}