Antwort an „j.j.“ verfassen

Hallo Rolf!

"Nicht bedienbar" bedeutet hier: Nicht für jeden bedienbar. Lass die Seite mal von jemandem testen, der einen Screenreader verwendet.

Die Seite ist nicht barrierefrei und war nie so gedacht. Es gibt marginale Ansätze nach dem Motto: besser als nichts.

NVDA kann ich auch selber verwenden. Bei mir funktioniert die Seite. Ja, für Sehbehinderte stehen nur die wenige Informationen aus dem alt zur Verfügung weil der Bildinhalt selbst nicht beschrieben wird.

kaputtes HTML

Deiner Privatmeinung wird von offizieller Seite deutlich widersprochen: validator.nu.

Jein. Das HTML ist laut Validator okay, aber der merkt längst nicht alles.

Sorry, das ist doch nicht der Punkt. Der Validator prüft den Code auf Gültigkeit und leider nicht auf persönliche Formatierungsvorlieben von Felix R.

Dein HTML ist enthält Konstrukte, die unüblich, unpassend oder veraltet sind

  • Navlinks sind üblicherweise eine Liste. Deren Einträge setzt man mit Flexbox nebeneinander. Für den Abstand zwischen den Navitems verwendet man einen Margin auf den li oder - moderner - die gap Eigenschaft. Aber nicht &nbsp.

ok, lieber ein Flexbox Layout anstatt fünf  ? Kannst Du gerne so machen, meine Prioritäten sind anders.

  • Deine Bildinfo ist semantisch falsch. Das ist keine Description List.

Veto! Das ist semantisch korrekt, RTFM!

Und es ist auch kein Element, das role="alert" verdient: "The ARIA alert role is used to communicate important and usually time-sensitive messages to users. When this role is added to an element, the browser sends out an accessible alert event to assistive technology products, which can then notify the user." Wenn überhaupt, ist das eine aria-live Region.

Veto! Meine (sehr eingeschränkten) Tests mit NVDA haben ergeben, daß mit diesem Layout nur role=alert ein brauchbares Ergebnis liefert (soweit ich als Sehender das beurteilen kann) role=live kommt erst wenn alle Bilder vorgelesen wurden, nach zwischenzeitlichen Interaktionen oft garnicht.

  • Die Bedienung, bei der ein Hover über einem Radiobutton schon ausreicht, um ihn zu selektieren, führt teils zu vogelwilder Reaktion der Seite.

Ja, nicht ganz ungewollt. Das hat sich aus einer anfänglichen Nutzeranalyse ergeben (da waren die Bilder selber noch nicht anklickbar). Die Hälfte der Probanten hat nicht herausgefunden, daß man auf die gelben Knödel klicken muß, um etwas zu bewegen. Durch das hover=click Verfahren gab es eine sehr gute Chance, draufzukommen. Ich hab mehrfach ergebnislos erwogen, das wieder zu ändern. Der Kunde würde auf ein entsprechendes Ansinnen antworten: warum? soll ich ihn an Dich verweisen😀?

Hier fehlt auch die semantische Beziehung zwischen Radiobutton und Bild. Wenn ich Button 3 auswähle, weiß ein Screenreader nicht, dass Bild 3 dazu gehört.

Veto! Damit der Screenreader nicht 12 sinnlose Buttons vorliest, werden diese übersprungen (wg. aria-hidden=true böse-böse-böse), stattdessen wendet sich der Screenreader direkt den fokusierbaren Bildern zu (wg. tabindex=0). wenn man ein bild „klickt“, wird wegen role=alert die Beschriftung gleich vorgelesen. Einfach mal testen, VoiceOver oder NVDA hast auch Du!

  • Dass Dir (bzw. Herrn H) ein Karussell wichtig ist, ist wohl offensichtlich.

Ich bin der Dienstleister, mir ist das egal. Und ob Du es glaubtst oder nicht: Ich habe anfangs von einem 3d-Karussell abgeraten aus zwei Gründen:

  1. Küstlerisch: Die Kunstwerke sollten im Vordergrung stehen und nicht hinter auffälliges Webdesign zurücktreten (sieht man oft genug)
  2. Technisch: Hier werden alle Bilder sofort heruntergeladen, was zu entsprecheden Downloadzeiten führen kann. Auch <img loading=lazy> tut es hier nicht.

Es dominiert die Seite. Deswegen brauchst Du Felix also nicht anzupflaumen.

Der Mensch hat mich ungefähr dreimal beleidigt, was erwartest Du? Ich bin nicht Jesus.

Ich würde Dir ja gerne neuere CSS Funktionen wie abs() ans Herz legen, aber Du möchtest offenbar auch ältere Browser unterstützen und da gibt's die noch nicht.

wozu genau braucht man abs()?

--Ort: calc( var(--Nr) - var(--check) );
 --Abs: max( var(--Ort), var(--Ort) * -1 );

<Quatsch/> wie es Dir als Developer gefällt, <Quatsch/>

Ich bin Dienstleister

Insbesodere empfinde ich es als störend, dass es - außer beim Wischen auf dem Handy - gefühlt 2 Sekunden dauert, bis nach einem Bildwechsel die Bildbeschreibung erscheint.

Richtig! This was a stupid regression from previous codeland, sorry for that! Probier heute nochmal, evtl. Cache leeren.

  • Du setzt einen tabIndex auf die Bilder und ein click-Event auf die Bilder. Das ist falsch - Bilder sind keine interaktiven Elemente.

Naja ... tabindex ist ein Hack wg. <input aria-hidden=true>, damit Screereeder stattdessen die Bilder als interaktive Elemente sehen - siehe oben. Nach meinen Tests verbessert es die Nutzererfahrung. Wenn mich die Kenntnis ereilt, daß dem nicht so ist, werf ich das wieder raus.

  • Die Radiobuttons würde ich übrigens per JS einfügen und nicht vorab ins HTML schreiben lassen. Das ist eine Fehlerquelle, und ohne JS ergeben die Buttons ohnehin keinen Sinn.

Veto! Ohne JS funktioniert das Karussell sehr wohl. Die Abstände zwischen den Bildern sind allerdings ungleichmäßig, teiweise überlappend und das Schriftfeld funktioniert nicht. Teste mit einem Browser Deiner Wahl! (bei Palemoon 33.7 (2025) und Vivaldi 1.5 (2019) leider ohne 3d-Effekt, auf Android wird leider ein zweistöckiges „g“ verwendet, außer bei Brave)

Der Kunde will den Code anfassen.

Aber warum?

Ja warum nicht? selfHTML? War da mal was? H ist übrigens Selfhtml-Leser, vielleicht hören wir och was ...

Du schreibst doch selbst: Diesen Weg hab ich gewählt, um den Mann nicht zu überfordern und alles "self-contained" (wie sagt man da auf Deutsch?) zu halten., d.h. Herr H kennt die Basics von HTML, es darf aber nicht zu komplex werden. Es wäre doch wesentlich bequemer für ihn, wenn Du eine Beschreibungsformat hättest. Das kann in einem <script type="text/plain"> Element stehen. Und Du hättest dann jederzeit die Option, das HTML zu optimieren, ohne ihm erklären zu müssen, wie er dann die Bilder einpflegt.

Warum? Du willst ein Problem lösen, das nicht existiert. Es wurde erklärt und ein paar mal überwacht. Seit 2½ funktioniert alles zur vollsten Zufriedenheit der Beteidigten.

Aber die Seite ist jetzt so und wenn Herr H nicht 10 Bilder pro Monat malt, dann lohnt sich eine generelle Umstellung wohl auch nicht mehr.

Die Umstellung hätte sich zu keinem Zeitpunkt gelohnt, es gibt keinen Grund.

Rolf

tschüs

j.j.

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen