Orlok: Frage zum Wiki-Artikel ‚ul‘

Beitrag lesen

Hallo Marc

Wenn du von Deinem Screenreader "Liste mit Automarken" vorgelesen bekommst und danach "Liste mit 5 Einträgen" - Was würdest du in dieser Liste erwarten? ;-)

Warum sollte ein Nutzer von assistiven Technologien das nicht verstehen.

Du setzt voraus, dass in jedem Fall zunächst die Überschrift vorgelesen und dann die Liste angesagt wird, aber das muss nicht zwingend so sein. Denn die allermeisten assistiven Technologien ermöglichen es, semantisches Markup vorausgesetzt, bestimmte Seitenelemente wie Überschriften, Absätze und eben auch Listen über dafür vorgesehene Tasten direkt anzusteuern. Wie du sicher selbst weißt.

Wenn wir nun ein Markup haben, ähnlich den Beispielen des Wiki-Artikels …

<h3>Automarken</h3>
<ul>
  <li>Audi</li>
  <li>Bentley</li>
  <li>Mercedes</li>
</ul>
<h3>Motorradmarken</h3>
<ul>
  <li>Kawasaki</li>
  <li>Yamaha</li>
</ul>

… dann könnte das im Browserfenster in etwa so angezeigt werden:


#Automarken#

  • Audi
  • Bentley
  • Mercedes

#Motorradmarken#

  • Kawasaki
  • Yamaha

Für jemanden der die Seite visuell wahrnimmt, wäre in so einem Fall sofort ersichtlich, was der Inhalt der Listen ist, da der Kontext, also die Überschriften, ebenfalls wahrgenommen wird. Nutzer assistiver Technologien erschließen sich die Inhalte einer Seite aber nicht zwingend in der gleichen Weise, in dem Sinne, dass sie sich etwa die ganze Seite oder den ganzen Abschnitt vorlesen lassen. Das heißt, es ist nicht auszuschließen, dass sich jemand explizit nur die Überschriften oder eben nur die Listen ausgeben lässt.

Würde sich der Nutzer etwa eines Screenreaders also unter Verwendung der entsprechenden Taste, oder der entsprechenden Tastenkombination, nur die Listen ansagen lassen, dann würde hier vermutlich sowas vorgelesen wie: „Liste mit drei Einträgen. Liste mit zwei Einträgen.

Würde das Markup jedoch so aussehen …

<h3 id="autos">Automarken</h3>
<ul aria-labelledby="autos">
  <li>Audi</li>
  <li>Bentley</li>
  <li>Mercedes</li>
</ul>
<h3 id="motorraeder">Motorradmarken</h3>
<ul aria-labelledby="motorraeder">
  <li>Kawasaki</li>
  <li>Yamaha</li>
</ul>

… dann würde sich an der Darstellung zwar nichts ändern, aber für den Fall, dass sich jemand nur die Listen der Seite oder des Abschnitts ansagen lassen möchte, würde nun bei entsprechender Unterstützung etwas vorgelesen wie: „Automarken, drei Einträge. Motorradmarken, zwei Einträge.

Während bei dieser Form der Erschließung der Seiteninhalte ohne aria-labelledby also der für sehende Benutzer wahrnehmbare Kontext verloren ginge, würde er bei der Verwendung dieses Attributs erhalten bleiben. Das war im Wesentlichen der Grund dafür, weshalb ich aria-labelledby bezogen auf die Beispiele des Artikels ins Spiel gebracht habe.

Dass Listen direkt angewählt werden stellt aber wahrscheinlich nur eine Ausnahme dar und in der Regel werden sich Nutzer von Screenreadern wohl tatsächlich den jeweiligen Abschnitt vorlesen lassen, so wie ein sehender Nutzer ihn sich durchliest, wobei dann natürlich auch keine Notwendigkeit besteht, den Zusammenhang von Überschrift und Liste nochmals kenntlich zu machen.

Die Verwendung von aria-labelledby könnte sogar von Nachteil sein, da in diesem Fall der Titel der Liste gegebenenfalls zweimal vorgelesen wird. Inwiefern man sowas in den Einstellungen des jeweiligen Programms verhindern kann, entzieht sich meiner Kenntnis. Wäre dies möglich, dann würde der Einsatz von aria-labelledby nicht schaden und in bestimmten Situationen von Vorteil sein, wenn es hingegen nicht möglich ist, was ich vermute, dann wäre es ein Handel, und es sollte zu Gunsten der üblicheren Praxis auf das Attribut verzichtet werden.

Ich nehme an, dass dies einer der Gründe ist, weshalb sich Leute die sich damit auskennen gegen die Verwendung von aria-labelledby in solchen Fällen ausgesprochen haben.

Dass darüber hinaus eine Überschrift zum Labeln einer Liste vielleicht ohnehin nicht die beste Wahl darstellt, steht dann wieder auf einem anderen Blatt.

Jedenfalls hoffe ich nun hinreichend deutlich gemacht zu haben, weshalb ich es zunächst für eine gute Idee gehalten habe, bei einem Markup wie in den Beispielen des Artikels das Attribut aria-labelledby hinzuzufügen.

Dass dies tatsächlich keine so gute Idee war, haben wir ja nun geklärt, denke ich. ;-)

Also, nochmals vielen Dank und Gruß,

Orlok

0 50

Frage zum Wiki-Artikel ‚ul‘

Orlok
  • barrierefreiheit
  • frage zum wiki
  • html
  1. 0
    MrMurphy1
    1. 0
      Orlok
      • barrierefreiheit
      • html
      1. 0
        marctrix
        1. 1
          marctrix
  2. 0

    ARIA-Rollen

    Matthias Scharwies
    1. 0
      Matthias Apsel
      1. 0
        Matthias Scharwies
  3. 0
    Gunnar Bittersmann
    1. 0
      Gunnar Bittersmann
  4. 1
    Matthias Apsel
    • barrierefreiheit
    1. 1
      Orlok
      1. 1
        Matthias Scharwies
      2. 0
        marctrix
        1. 0
          MrMurphy1
          1. 1
            Tabellenkalk
            1. 0
              Felix Riesterer
              1. 0
                Der Martin
          2. 0
            marctrix
            1. 0
              Auge
              • barrierefreiheit
              • humor
              1. 0
                marctrix
                • humor
                1. 0
                  Der Martin
                  1. 0
                    Tabellenkalk
        2. 0
          Auge
          1. 0
            marctrix
            1. 0
              Auge
              1. 0
                marctrix
                1. 0
                  Auge
                  1. 0
                    marctrix
                    1. 0
                      marctrix
                    2. 0
                      Matthias Apsel
                      1. 0
                        Auge
                        1. 0
                          Matthias Apsel
                          • menschelei
                          1. 0
                            Auge
                      2. 0
                        marctrix
                2. 0
                  MudGuard
              2. 0
                Der Martin
                • humor
                1. 1
                  Auge
                  1. 0
                    Tabellenkalk
                    1. 0
                      Auge
        3. 0
          Orlok
          • barrierefreiheit
          • html
          1. 2
            Matthias Apsel
          2. 1
            marctrix
            1. 0
              Matthias Apsel
              1. 0
                marctrix
                1. 0
                  Matthias Apsel
                  1. 0
                    marctrix
                    • zu diesem forum
                    1. 0
                      Matthias Apsel
                      1. 2
                        marctrix
            2. 1
              marctrix