Das Komplementärbild
Aktualisieren!
Nachdem ich dies auf Twitter geteilt habe, habe ich fantastisches Feedback von einigen Leuten erhalten, die regelmäßig Screenreader verwenden.
Das wichtigste Feedback ist die Konsistenz der Inhaltserkennung bei der Verwendung verschiedener Navigationsmodi:
Das Hauptproblem, das ich habe, ist jedoch, dass sowohl bei JAWS als auch bei NVDA die Beschreibungen immer nur gelesen werden, wenn ich die Links durchquere, indem ich die Tabulatortaste oder Umschalttaste + Tab drücke. Sie lesen nicht, wenn ich mit dem virtuellen Cursor herumpfeile oder eine Linkliste aufrufe.
Vor diesem Hintergrund habe ich eine sekundäre Demo erstellt, die positiver aufgenommen wurde!
Wie bei jedem Benutzeroberflächen-/Erfahrungskonzept sollten Sie unbedingt mit echten Menschen teilen, testen und Feedback von ihnen einholen! 👍
Hinweis für den Leser…
Bitte beachten Sie, dass dies nur ein Konzept ist und nicht per se in der Produktion verwendet werden sollte.
Wenn es um Bilder im Web und Zugänglichkeit geht, gibt es eine Reihe verschiedener Bildkonzepte zu berücksichtigen. Konzepte wie ein " inhaltliches " Bild zur Beschreibung eines Produkts oder ein " dekoratives " Bild zur Unterstützung des visuellen Kontexts in einer grafischen Benutzeroberfläche.
Diese Konzepte helfen Ihnen bei der Entscheidung, wie Sie das Bild für Hilfstechnologien am besten darstellen. Dann wiederum unterstützende Technologien, um Menschen mit Behinderungen die Bedeutung oder den Zweck des Bildes zu vermitteln.
Was passiert jedoch, wenn keines der Konzepte dabei hilft, Ihren speziellen Kontext zu beschreiben? 🤔
Das kleine Bild, das nicht konnte
Betrachten Sie die folgende Inhaltsansicht für einen Online-Möbelshop:
Der obige Screenshot zeigt eine Artikellistenansicht. Jedes der angezeigten Elemente besteht aus einem Ankerelement. Jedes Element enthält:
- ein eingebettetes Miniaturbild;
- der Produkttitel;
- der Produktanbieter;
- und der Preis.
Das Problem hier ist die potenzielle Ausführlichkeit jedes Links, wenn er von einem Screenreader angetroffen wird. Der Titel, der Anbieter und der Preis sind ziemlich viele Informationen, die man allein aufnehmen muss; wollen wir auch hier die Bildbeschreibung mit aufnehmen?
Das scheint eine Menge Inhalt zu sein, den man auf einmal konsumieren kann.
Eine mögliche Lösung …
Ich denke, wir sind uns alle einig, dass, da das Bild Teil des Links ist, eine gründliche Bildbeschreibung über das Alt -Attribut zu einer übermäßig ausführlichen Ankündigung führen würde.
Lassen Sie uns versuchen, unsere Benutzer nicht mit zu vielen Informationen auf einmal zu überfordern.
Also, was ist hier die Lösung? Vielleicht könnten wir die Alternativtext-Beschreibung vollständig entfernen und jedes Bild als „dekorativ“ deklarieren? Damit könnten Screenreader-Benutzer jeden Link aktivieren und zur Artikel-Landingpage gehen, um eine genauere Beschreibung zu erhalten, richtig?
Sind das eigentlich "dekorative" Bilder? Reicht in diesem speziellen Kontext einer Artikelliste die Textbeschreibung aus, damit jemand beim Navigieren durch die Liste ein Verständnis gewinnt?
Das Dilemma
Als sehender Benutzer habe ich den Vorteil, die Liste der Artikel mit meinen Augen zu scannen, um schnell zu verstehen, was das Produkt ist und wie es aussieht . Wenn ich etwas sehe, das mich interessiert, kann ich auf den Link klicken und das Produkt weiter ansehen. Wenn mich der Artikel nicht anspricht, kann ich einfach weitermachen und sehen, was noch in der Liste steht.
Auf der anderen Seite hätte jemand, der auf unterstützende Technologien wie einen Bildschirmleser angewiesen ist, nur ein grundlegendes Verständnis für jedes Element.
Betrachten Sie im obigen Beispiel die "Schlüsselwörter", die einem Screenreader-Benutzer in jedem Listenelement zur Beschreibung des Produkts zur Verfügung stehen. Sie könnten sein:
- "Stuhl"
- "Sofa"
- "Tisch"
Reicht das wirklich aus, um sich ein klares Bild von dem Artikel zu machen? Noch wichtiger, ist dies ein Beispiel für Gleichberechtigung ? Ein ** ** sehender Benutzer könnte sich ein Verständnis verschaffen, indem er einfach das Miniaturbild betrachtet, aber ein Blinder würde nur eine einfache Textbeschreibung erhalten. Nein, ich würde sagen, das ist keine gleichwertige Erfahrung.
Blinde Benutzer sollten den gleichen Zugang zu Inhalten haben, zu denen sehende Benutzer Zugang haben.
Damit jemand mit dem „dekorativen“ Bildkonzept jeden Artikel besser verstehen kann, muss er jeden Link aktivieren, auf der Zielseite navigieren und die Beschreibung finden. Dies würde für einen Screenreader-Benutzer viel mehr Arbeit bedeuten, um das vollständige Bild verfügbar zu haben, das ein sehender Benutzer einfach aus der Auflistungsansicht verstehen könnte.
Ein neues Bildkonzept, das es zu berücksichtigen gilt
Wir wissen also, dass es zu viele Informationen auf einmal wären, wenn wir eine detaillierte Bild-Alt-Text-Beschreibung hinzufügen würden. Andererseits würde das Fehlen einer Beschreibung zu einer Ungleichheit der Benutzererfahrung führen, die wir ebenfalls vermeiden sollten.
Was können wir tun, um die Situation zu entschärfen?
Betrachten wir ein neues Bildkonzept, das ( noch ) nicht dokumentiert ist, etwas, das ich nenne:
Das "komplementäre" Bild
Was – er hat den Titel des Posts in der Post gesagt! 😱
Die Idee ist, die Bildbeschreibung verfügbar zu machen, sie aber als sekundären Inhalt zum Hauptinhalt des Ankerelements zu platzieren.
Wie erreichen wir das? Schauen wir uns zunächst ein einfaches Beispiel für einen der aktuellen Artikellinks an:
Aktuelles Artikelbeispiel
<a href="#"> <img class="image" src="table.jpg" alt="Round table top, birch wood color. Table is supported by three legs, black color. Legs stem from the middle of the table outward towards the floor." /> <span class="title">Key Side Table by GamFratesi</span> <span class="price">$179.00</span> </a>In diesem Beispiel sehen wir die Bildbeschreibung innerhalb des Alt-Attributs. Das ist großartig, aber wie wir besprochen haben, könnte es für jemanden zu einer übermäßig ausführlichen Erfahrung führen, alles auf einmal zu konsumieren.
Was hat es also mit einem „komplementären“ Bild auf sich?
Ergänzendes Bildbeispiel
<a href="#" aria-describedby="image-description"> <img class="image" src="table.jpg" alt="" /> <span class="title">Key Side Table by GamFratesi</span> <span class="price">$179.00</span> </a> <span id="image-description" hidden> Round table top, birch wood color. Table is supported by three legs, black color. Legs stem from the middle of the table outward towards the floor. </span>Der Unterschied ist hier:
- Der Alt-Text-Inhalt wurde entfernt. Damit ignorieren Screenreader das Bild und gehen beim Durchlaufen des Seiteninhalts vorbei.
- Ein verstecktes Containerelement wurde hinzugefügt, das den Inhalt der Bildbeschreibung enthält. Auf diesen Container wird auch eine eindeutige ID angewendet.
- Das Attribut aria-describedby wurde dem Element a hinzugefügt, dessen Wert auf die Container-ID der Bildbeschreibung gesetzt ist.
Mit diesem Markup wird die Bildbeschreibung immer noch angekündigt, aber sie ist sekundär oder "komplementär" zum aktuellen Kontext; eine Auflistung von Links.
Mit anderen Worten, die Bildtextbeschreibung wird nach dem primären Linktext gelesen. Diese Lösung ermöglicht es dem Benutzer jetzt, den primären Linktext und den ergänzenden Bildbeschreibungstext zu hören, wenn er durch die Linkliste navigiert, wodurch eine gleiche Benutzererfahrung generiert wird! 💯
Das Tolle an dieser speziellen Lösung ist auch, dass einige Screenreader eine Pause zwischen dem primären Linktext und der ergänzenden Bildbeschreibung einfügen, wenn sie laut über das Attribut aria-describedby vorgelesen werden.
Demo!
Sehen Sie sich die Demo in Aktion an!
Versuchen Sie , einen Bildschirmleser zu laden, und hören Sie sich an, wie sich jeder der Links in der Auflistung anhört! 🎧
Gedanken?
Was haltet ihr von dieser Lösung? Würden Sie das „komplementäre“ Bildkonzept für Ihr aktuelles oder nächstes Projekt in Betracht ziehen? Gib mir Bescheid!
Fröhliches Hacken! 😄⌨️🚀