Ich bin es gewohnt zu benutzen title="" Attribut auf meinen Links/Buttons/… um sie zu detaillieren. Aber Bootstrap verwendet viele aria-label="" Attribute, aus Gründen der Zugänglichkeit, soweit ich das verstanden habe.
Also erstelle ich Schaltflächen wie:
<button
id="show-raw-result"
class="btn btn-default btn-sm btn-twigfiddle"
title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
aria-label="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw">
<span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>
Aber den Titel zu kopieren/einzufügen, um ein Arien-Label zu erstellen, sieht einfach hässlich aus. Welche soll ich wählen und warum?
ARIA-Tags werden für behinderte Besucher Ihrer Website verwendet. Es ist sehr nett von Bootstrap, dass sie es standardmäßig unterstützen.
Accessible Rich Internet Applications (ARIA) definiert Möglichkeiten, Webinhalte und Webanwendungen (insbesondere solche, die mit Ajax und JavaScript entwickelt wurden) für Menschen mit Behinderungen zugänglicher zu machen. Beispielsweise ermöglicht ARIA zugängliche Navigationspunkte, JavaScript-Widgets, Formularhinweise und Fehlermeldungen, Aktualisierungen von Live-Inhalten und mehr.
Quelle: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
Um Ihre Frage zu beantworten, welche Sie verwenden sollten, verwenden Sie nur die title-Attribut. Denn dieses Attribut wird verwendet, wenn Sie mit der Maus über die Schaltfläche gehen und den Text von anzeigen title als Kurzinfo. Mit aria-label wird auf diese Weise nicht unterstützt.
Um Screenreader und auch einen Tooltip zu unterstützen, verwenden Sie sowohl das aria-label- als auch das title-Attribut.
Wenn Sie den Tooltip nicht benötigen, verwenden Sie aria-label, da dies die bevorzugte Wahl für die Unterstützung der Barrierefreiheit ist.
Bitte überprüfen Sie die folgende Rangfolge gemäß der Website der W3C.org Web Accessibility Initiative:
<label for="reference-id for labelled form-element" class="visuallyhidden"><form-element aria-label="label for the form-element"><form-element aria-labelledby="reference-id's for label-element"><form-element aria-describedby="reference-id's for descriptive-element"><form-element title="description for the element">
Die ausschließliche Verwendung des Title-Tags wird weder empfohlen noch von allen Screenreadern unterstützt. Tatsächlich können viele Screenreader den Titel-Tag nicht fokussieren, sodass er über die Tastatursteuerung nicht zugänglich ist, und überspringen daher das Lesen des Inhalts.
Beschriftungssteuerung
https://www.w3.org/WAI/tutorials/forms/labels/
Ansatz 4: Verwendung des title-Attributs
Das Titelattribut kann auch verwendet werden, um Formularsteuerelemente zu identifizieren. Dieser Ansatz ist im Allgemeinen weniger zuverlässig und wird nicht empfohlen, da einige Screenreader und unterstützende Technologien das title-Attribut nicht als Ersatz für das label-Element interpretieren, möglicherweise weil das title-Attribut häufig verwendet wird, um unwesentliche Informationen bereitzustellen. Die Informationen des Titelattributs werden visuellen Benutzern als Tooltip angezeigt, wenn sie mit der Maus über das Formularfeld fahren.
IMHO sollten Sie den Button nicht separat mit aria-labelledby beschriften müssen, da das Buttons-Element bereits “(Icon hidden by CSS !?) Show raw result” lautet, was IMHO bereits ausreichend verständlich ist.
Es wäre wahrscheinlich besser, das unter dem folgenden Link verfügbare grundlegende Beispiel des WAI für aria-described zu erweitern, was für Ihr Beispiel Folgendes ergibt:
Verwenden der Eigenschaft aria-describedby, um eine beschreibende Bezeichnung für Steuerelemente der Benutzeroberfläche bereitzustellen
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1
<button
id="show-raw-result"
class="btn btn-default btn-sm btn-twigfiddle"
title="Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw"
aria-describedby="description-raw-result"
<span class="glyphicon glyphicon-asterisk"></span> Show raw result
</button>
...
<div id="description-raw-result">Result was not easily readable so it has been automatically cleaned up, use this button to see the result raw</div>
Bitte beachten Sie, dass es unter Beispiel 4 auch ein ausführlicheres Beispiel mit Tooltips gibt, aber es erfordert, dass Sie auch die JavaScript-Funktion showTooltip() implementieren. Es bleibt also Ihnen überlassen, ob Sie weiterhin das title-Attribut für den Tooltip verwenden oder den beschreibenden Text lieber als Tooltip mit den folgenden beiden Event-Handlern anzeigen möchten:
onmouseover="tooltipShow(event, this, 'description-raw-result');"
onfocus="tooltipShow(event, this, 'description-raw-result');"
Leider gibt es meines Wissens keine Abkürzung für die Anzeige von Tooltips, die Referenzen wie das Attribut aria-describedby verwenden können.
