MrMurphy1: Preisangabe - barrierefrei

Hallo

ich habe grade ein Video angeschaut, in dem eine Preisangabe per Flexbox gestaltet wird, wobei es mir überhaupt nicht um Flexbox geht.

Der Quelltext lautet:

<div class="price">
   <span class="currency"></span>
   <span class="euros">19</span>
   <span class="cents">95</span>
</div>

Meine Frage: Ist der Quelltext barrierefrei? Wird der Quelltext als "Euro 19 95" vorgelesen oder als "Euro 1995"? Die zweite Zahl wäre falsch, es sollen 19,95 Euro sein.

Meiner Ansicht nach wäre als Quelltext

<p class="price">
   <span class="currency"></span>
   <span class="euros">19<span>,</span></span>
   <span class="cents">95</span>
</p>

sinnvoller, wobei das Komma für die Bildschirmausgabe ausgeblendet werden kann, wenn Euro- und Cent-Beträge auf dem Bildschirm optisch unterschiedlich angezeigt werden. Der Screereader würde das Komma mit vorlesen.

Liege ich mit meinen Überlegungen richtig?

Gruss

MrMurphy

  1. @@MrMurphy1

    <div class="price">
       <span class="currency"></span>
       <span class="euros">19</span>
       <span class="cents">95</span>
    </div>
    

    Meine Frage: Ist der Quelltext barrierefrei? Wird der Quelltext als "Euro 19 95" vorgelesen

    Das würde ich wegen des Whitespaces zwischen den spans erwarten.

    <p class="price">
       <span class="currency"></span>
       <span class="euros">19<span>,</span></span>
       <span class="cents">95</span>
    </p>
    

    Da hast du wohl das Start-Tag <span class="decimal-point"> vergessen. Und der gehört auch nicht zu den ganzen Euro. Und kein Whitespace zwischen den spans:

    <p class="price">
       <span class="currency"></span>
       <span class="euros">19<span><span class="decimal-point">,</span><span class="cents">95</span>
    </p>
    

    Im Deutschen steht das Währungszeichen üblicherweise hinter der Zahl.

    Statt class="price" bietet sich auch eine Auszeichnung mit Schema.org an: property="price" innerhalb von Offer, siehe Folie 112

    Nachtrag: Ist die Mehrzahl von Euro nicht Euro (ohne s)?

    LLAP 🖖

    --
    “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. Tach!

      <p class="price">
         <span class="currency"></span>
         <span class="euros">19<span><span class="decimal-point">,</span><span class="cents">95</span>
      </p>
      

      Also, ich hätte jetzt auch noch jede Ziffer einzeln ausgezeichnet. Neunzehn-komma-fünfundneunzig im Kontext eines Preises ist viel zu unverständlich. Das muss "ein Zehner neun Einer Komma neun Zehntel fünf Hunderstel" gesprochen werden, damit man das auch gaaaanz richtig versteht.

      dedlfix.

      1. @@dedlfix

        Also, ich hätte jetzt auch noch jede Ziffer einzeln ausgezeichnet.

        Das ist ganz sicher notwendig. Schließlich möchte man ja die 5 am Ende hervorheben. Weil der Kram hier nur 19,95 € kostet und nicht 19,99 € wie bei der Konkurrenz.

        LLAP 🖖

        --
        “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    2. Hallo Gunnar,

      Nachtrag: Ist die Mehrzahl von Euro nicht Euro (ohne s)?

      ich kenne:

      • Das kostet ein Euro.
      • Das kostet 10 Euro.

      Aber:

      • Ich habe keine Euros mehr auf dem Konto.

      Gruß
      Jürgen

      PS Die Euronen lassen wir jetzt mal draußen vor :)

      1. Hallo

        Du bist leider auf einen typischen Gunnar Bittersmann reingefallen.

        euros ist ein Klassenname, der in keinster Weise Rechtschreibregeln unterliegt. Ich habe ihn gewählt weil euro auf der Testseite bereits gegeben war. Ich hätte den genau so gut dudeldi oder hgtzruw oder emil nennen können.

        Mit meiner Frage nach einem barrierfreien Quelltext hat der Klassenname auch nichts zu tun. Also ein leider typisches Ablenkungsmanöver von Gunnar Bittersmann.

        Anstatt das ich sinnvolle Antworten nach der Barrierefreiheit bekomme wird mein Thema mit sinnfreien Rechtschreib-Diskussionen zugemüllt.

        Gruss

        MrMurphy

        1. Hallo,

          ich habe auf einen Nachtrag geantwortet, der mit deiner Frage wenig zu tun hat. Was ist daran ein „typischen Gunnar Bittersmann“?

          Außerdem hat er deine Frage doch beantwortet.

          Gruß
          Jürgen

        2. @@MrMurphy1

          Anstatt das ich sinnvolle Antworten nach der Barrierefreiheit bekomme wird mein Thema mit sinnfreien Rechtschreib-Diskussionen zugemüllt.

          Bullshit.

          Erstens nicht anstatt, sondern zusätzlich.

          Zweitens: Wenn du einen Thread erstellst, gehört er dir nicht. Du hast nicht zu bestimmen, was dort reingehört und was nicht.

          Drittens machst du aus einer Randbemerkung eine Zumüllung des Forums.

          [ ] Du hast das SELFHTML-Forum verstanden.

          LLAP 🖖

          --
          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  2. Hallo

    Der Quelltext lautet:

    <div class="price">
       <span class="currency"></span>
       <span class="euros">19</span>
       <span class="cents">95</span>
    </div>
    

    Meine Frage: Ist der Quelltext barrierefrei? Wird der Quelltext als "Euro 19 95" vorgelesen oder als "Euro 1995"? Die zweite Zahl wäre falsch, es sollen 19,95 Euro sein.

    Hier wird vorgelesen: „Euro 19 [kurze Pause] 95“, da zwischen den Zahlen Leerzeichen sind.

    Meiner Ansicht nach wäre als Quelltext

    <p class="price">
       <span class="currency"></span>
       <span class="euros">19<span>,</span></span>
       <span class="cents">95</span>
    </p>
    

    sinnvoller, wobei das Komma für die Bildschirmausgabe ausgeblendet werden kann, wenn Euro- und Cent-Beträge auf dem Bildschirm optisch unterschiedlich angezeigt werden. Der Screereader würde das Komma mit vorlesen.

    Liege ich mit meinen Überlegungen richtig?

    Hier wird vorgelesen: „Euro 19 [etwas längere Pause] 95“, da das Komma berücksichtigt wird.

    Im Ergebnis werden also beide Beispiele von Screenreadern so vorgelesen, wie es sein soll. Beim zweiten Beispiel ist das dritte Span-Element allerdings überflüssig.

    Viele Grüße,

    Orlok

    1. Hallo Orlok,

      Im Ergebnis werden also beide Beispiele von Screenreadern so vorgelesen, wie es sein soll. Beim zweiten Beispiel ist das dritte Span-Element allerdings überflüssig.

      <p>Euro 19,95</p>
      

      Das wird auch so vorgelesen.

      Bis demnächst
      Matthias

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

    Der Screereader würde das Komma mit vorlesen.

    Habe hier keinen Screereader und auch keine Erfahrung damit.
    Aber m.E. sollte Folgendes vorgelesen werden (und das Komma eben nicht):
    „19 Euro 95“

    Gruß
    Kalk