Der erste Punkt ist: brauchen Sie das wirklich? Wenn möglich, ist es immer wieder bewiesen, dass Text neben Ihren Symbolen die zugänglichste und klarste UX ist (siehe Apples jüngste Panne). Aber wenn Sie es tun müssen (und ich verstehe es, manchmal muss man es tun), haben Sara Soueidan und Scott O’Hara ein Paar Artikel, die alle Optionen gut darlegen und tatsächliche Forschung zu diesem Thema präsentieren.
- Sara Soueidan: Zugängliche Symbol-Schaltflächen
- Scott O’Hara: Kontextbezogene Auszeichnung von zugänglichen Bildern und SVGs
Wenn Sie einfach nur gesagt bekommen wollen, was Sie tun sollen, würde ich den Ansatz wählen: Verwenden Sie einfach Text in der Schaltfläche.
<button aria-expanded="false" id="menu-trigger">
<svg viewBox="0 0 32 32" width="32px" height="32px"
aria-hidden="true" focusable="false">
<!-- svg content -->
</svg>
Menu
</button>Sara sagt: Es gibt keinen einen Weg, der für alle gilt, aber es scheint, dass Sie wirklich tatsächlichen Text in dieser Schaltfläche verwenden und ihn entweder ausblenden oder irgendwie überschreiben müssen. SVG allein hat keine felsenfeste Methode, um einer Schaltfläche oder einem Link einen zugänglichen Namen zu geben.
Lustig, wie lange dieses Muster schon schwierig zu meistern ist.
Ich bin sicher, dass die Einbeziehung eines
aria-labelimbutton-Element eine mögliche Vorgehensweise ist, um es gut aussehen zu lassen und gleichzeitig zugänglich zu machen. Ich würde jedoch argumentieren, dass Sie immer Text einfügen sollten, um die kognitive Belastung der Benutzer zu reduzieren, wo immer möglich.Ich stimme zu, ich denke, es ist am besten, etwas beschreibenden Text in die Schaltfläche einzufügen. Sie können den Text immer in ein Span-Tag einpacken und ihn dann mit einer nur für Screenreader sichtbaren Klasse visuell ausblenden. Auf diese Weise, wenn die Website beim Laden von CSS fehlschlägt oder der Benutzer einfach nur das reine HTML ohne CSS oder JavaScript sehen möchte, wird der Browser den Text trotzdem in der Schaltfläche anzeigen.
Wie sieht es mit dem Titel-Attribut bei der Schaltfläche aus?
Wäre das nicht der perfekte Einsatzzweck dafür? Es bietet einen "Tooltip", falls der Benutzer mit dem Symbol nicht vertraut ist, und gibt Screenreadern einen aussagekräftigen Titel.
Betr. Titel / Tooltips gelten nicht als zugänglich
https://www.w3.org/TR/html/dom.html#the-title-attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
Und man sollte sich nicht darauf verlassen. Allerdings gibt es mit etwas Recherche Workarounds, um Tooltips zugänglich zu machen.
https://inclusive-components.design/tooltips-toggletips/ (Ihre Kilometerleistung kann variieren) Aber meine Gedanken wären die gleichen wie bei PDFs: nur verwenden, wenn nötig (nicht nur, weil).
Ja, wenn Sie auf einen Tooltip angewiesen sind. Aber in den von Sara Soueidan erstellten Beispielen gäbe es gar keinen Tooltip.
Was ich sagen wollte ist, warum das Titel-Attribut nicht einmal als Möglichkeit zur Bereitstellung eines aussagekräftigen Labels für Screenreader betrachtet wird?
Das Titel-Attribut ist nicht für alle die perfekte Lösung, aber es würde sehenden Benutzern mit einem Zeigegerät helfen. Tastaturbedienende Benutzer benötigen zusätzliche :focus-Stile, nur Touch-Benutzer bleiben außen vor und benötigen eine JavaScript-Lösung.
Aber was die progressive Verbesserung angeht, denke ich, ist das Titel-Attribut die beste Wahl. Meine einzige Frage ist, warum das Titel-Attribut nicht getestet wurde? Ignorieren Screenreader das Titel-Attribut (wegen übermäßigem SEO-Gebrauch)?
Sie heben Apple in Ihren Kommentaren zu den externen Artikeln hervor, aber um fair zu sein, Google hat den Beginn des Trends in seinen Webdiensten stark vorangetrieben, lange bevor Apple dazukam.