Wie Arie verwenden, um eine Schaltfläche mit nicht-intuitivem Text tabel zu beschriften

Question

Ich habe einen Knopf, der wie folgt aussieht:

<button type="button"> 
    Remove 
</button> 

Kontextuell Benutzer, die sagen, werden in der Lage zu sehen, dass die Taste bezieht ein bestimmtes Produkt, das sie entfernen können. Für Benutzer mit einer Sehbehinderung ist der Text "Entfernen" jedoch nicht genug Information, um in Bezug auf das, was sie entfernen, hilfreich zu sein.

Ich weiß, dass aria-label ist, nach den MDN web docs, sollte verwendet werden, wie folgt:

es in Fällen verwenden, in denen eine Textbeschriftung auf dem Bildschirm nicht sichtbar ist

ich auch wissen Sie, dass aria-labelledby verwendet werden soll, um ein anderes Markup mit dem zu etikettierenden Element zu verknüpfen. Im Falle meines Buttons enthält der Button selbst das Label. Es ist einfach so, dass das Etikett selbst nicht beschreibend genug ist.

An dieser Stelle fragen Sie vielleicht, warum ich nicht nur den Schaltflächentext ändere! Zufällig möchte das UX-Team den Text der sichtbaren Schaltfläche nicht ändern. Daher versuche ich, die Barrierefreiheit für die Schaltfläche herauszufinden, ohne den sichtbaren Teil der Schaltfläche zu ändern.

Gibt es eine bestimmte Spezifikation, was in einer solchen Situation zu tun ist? Meine Neigung ist es, aria-label zu verwenden, aber ich bin nicht sicher, dass das ARIA-konform ist per se.

Vielen Dank im Voraus!

Answer 1

Wie auch immer, gibt es eine definierte Spezifikation, was in dieser Art von Situation zu tun ist? Meine Neigung ist, Aria-Label zu verwenden, aber ich bin nicht sicher, dass das ARIA-konform ist.

Ja, Sie können.

Das Attribut aria-label wird verwendet und ersetzt den inneren Text.

Specs für Text Alternative Computation definieren, dass aria-label wird in der Priorität (in Schritt 2C) verwendet werden, während der Inhalt wird nur, wenn nicht vorhanden ist (Schritt 2F)

Answer 2

Ja verwendet werden, können Sie aria-Label verwenden. Normalerweise hat es Vorrang vor sichtbarem Text oder Text innerhalb des Elements (in den meisten Fällen mit JFW, NVDA, VO, außer wenn benutzerdefinierte Einstellungen festgelegt wurden).

<button aria-label="Remove article XYZ">Remove</button> 

Wie alt-Attribut für Bilder, stellen Sie sicher, dass das aria-Etikett pro ce ausreicht, wird dh sichtbaren Text oder Text innerhalb des Elements sehr wahrscheinlich werden nicht gesprochen wird vollständig durch die Arie ersetzt -Etikette. Für unser Beispiel hier muss das Wort "Remove" auf dem Etikett stehen.

Als Alternative statt aria-Label, können Sie auch eine CSS-Klasse verwenden, um Text nur von Screenreadern gesprochen machen werden:

<button>Remove <span class="sr-only">XYZ</span></button> 

Sie den entsprechenden CSS-Code in Frameworks wie Bootstrap zu finden. In diesem Fall werden sowohl der sichtbare Text als auch der Screenreader-spezifische Text nacheinander gesprochen. Stellen Sie sicher, dass die Wörter nicht miteinander verklebt sind, da es sonst zu Ausspracheproblemen kommen kann.