marctrix: (Meta)-Infos zu Texten

problematische Seite

Hej alle,

Ich mache mir gerade ein paar Gedanken zu längeren Texten. Ich finde es immer schön, wenn ein paar Informationen vorne weg stehen.

Wenn es barrierefrei sein soll (und das soll es ;-) ), müssten über diese Beschreibungen mittels aria-describedby auch Screenreader-Nutzer informiert werden.

Meiner Meinung nach wären diese Infos am Anfang des Artikels gut aufgehoben - also im header. Sauber verpackt in aufklappbare Elemente, um Sehenden anzuzeigen, dass es Infos gibt, ohne aber den eigentlichen Text aus dem Viewport zu schieben.

Meine Idee habe ich in einem Codepen veröffentlicht. Falls die nur ist (ich habe die jedenfalls so noch nicht gesehen), kann das Beispiel gerne ins Wiki übernommen werden - ich werde es meinerseits in einem Buch nutzen.

Hier geht es zum Beispiel

Hat jemand was zum Meckern/zu verbessern?

Marc

  1. problematische Seite

    Hallo marctrix,

    Meiner Meinung nach wären diese Infos am Anfang des Artikels gut aufgehoben - also im header. Sauber verpackt in aufklappbare Elemente, um Sehenden anzuzeigen, dass es Infos gibt, ohne aber den eigentlichen Text aus dem Viewport zu schieben.

    Doch. Finde ich sehr gelungen. Man sieht solche Zusammenfassungen immer öfter. Es spricht auch nichts dagegen, die Zusammenfassung ausgeklappt zu lassen, imho.

    Meine Idee habe ich in einem Codepen veröffentlicht. Falls die nur ist (ich habe die jedenfalls so noch nicht gesehen), kann das Beispiel gerne ins Wiki übernommen werden - ich werde es meinerseits in einem Buch nutzen.

    Danke.

    Hat jemand was zum Meckern/zu verbessern?

    nach „ca“ fehlt der Punkt.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Hej Matthias,

      Hat jemand was zum Meckern/zu verbessern?

      nach „ca“ fehlt der Punkt.

      ;-)

      Ist erledigt (habe es ausgeschrieben) - danke für die Rückmeldung!

      Marc

  2. problematische Seite

    Danke Marc, für das anschaulich dokumentierte Beispiel.

    Finde ich ein praktisches und hilfreiches Mittel bei der Gestaltung. Und sehr sauber umgesetzt. Die Lösung für den fehlenden Punkt gefällt mir auch. ;-)

    Gruß
    Sanddorn22

    1. problematische Seite

      Hej Sanddorn22,

      danke für das Lob - alle Beispiele sind natürlich frei nutzbar. - Eine Lizenz wie GPL spare ich mir. Ich denke, die Erfindungshöhe ist nicht hoch genug, um ein Urheberrecht überhaupt zu rechtfertigen...

      Von daher habe ich vermutlich eh keine rechtlichen Ansprüche, will aber deutlich machen, dass Weiterverbreitung ausdrücklich gewünscht ist!

      Vielleicht wird das Web ja durch diesen und andere Codepens ein bisschen barriereärmer!

      Bei @Gunnar Bittersmann finden sich übrigens auch immer interessante Codebeispiele ;-)

      Ich nehme nicht an, dass er etwas frei zugänglich online stellt, was nicht genutzt werden sollte!

      Marc

  3. problematische Seite

    Hallo marctrix,

    Meine Idee habe ich in einem Codepen veröffentlicht. Falls die nur ist (ich habe die jedenfalls so noch nicht gesehen), kann das Beispiel gerne ins Wiki übernommen werden

    Finden wir auch eine passende Stelle im Wiki?

    //@Matthias Scharwies

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  4. problematische Seite

    Hallo marctrix,

    Noch mal deutlich, damit es nicht beim circa-Punkt untergeht.

    Es ist meiner Meinung nach nicht notwendig, die zusätzlichen Infos initial zu verstecken, im Gegenteil bedeuten sie doch einen zusätzlichen Klick. open existiert. Schließlich dienen die Zusatzinfos ja jedem Nutzer - sie liefern Informationen, ob der folgende Artikel überhaupt der Richtige für ihn sein könnte.

    Dennoch ist mMn. das details-Element semantisch korrekt. Für eine besonders gute Nutzererfahrung sollte man sich den Zustand des details-Elements merken, zum Beispiel im localStorage.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.