Was ist der Unterschied zwischen den Attributen aria-label und title?

Question

Ich bin es gewohnt, title="" Attribut auf meine Links/Buttons/... zu verwenden, um sie zu beschreiben. Aber Bootstrap verwendet viele aria-label="" Attribute, aus Gründen der Zugänglichkeit, soweit ich das verstanden habe.

So komme ich bis erstellen 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 Kopieren/Einfügen des Titels eine Arie-Label erstellen sieht einfach hässlich. Welchen sollte ich wählen und warum?

Answer 1

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, Web Inhalte und Web-Anwendungen (vor allem diejenigen, entwickelt mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen zu machen. Zum Beispiel: ARIA ermöglicht barrierefreie Navigationspunkte, JavaScript-Widgets, Formulare Hinweise und Fehlermeldungen, Live-Content-Updates und mehr.

Quelle: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Um Ihre Frage zu beantworten, die Sie verwenden sollten, verwenden Sie nur die title -Attribut. Dieses Attribut wird verwendet, wenn Sie mit der Maus über die Schaltfläche gehen und den Text title als QuickInfo anzeigen. Mit aria-label wird auf diese Weise nicht unterstützt.