web-dev-qa-db-fra.com

Quelle est la différence entre les attributs aria-label et title?

J'ai l'habitude d'utiliser title="" attribut sur mes liens/boutons/... pour les détailler. Mais bootstrap utilise beaucoup de aria-label="" attributs, pour des raisons d'accessibilité pour autant que je sache.

Je viens donc de créer des boutons comme:

<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>

Mais copier/coller le titre pour créer une étiquette aria semble juste moche. Laquelle devrais-je choisir et pourquoi?

htmltwitter-bootstraptitlewai-aria
35
Alain Tiemblo

Les balises ARIA sont utilisées pour les visiteurs handicapés de votre site. C'est très sympa de Bootstrap, qu'ils le supportent par défaut.

Les applications Internet riches accessibles (ARIA) définissent les moyens de rendre le contenu Web et les applications Web (en particulier celles développées avec Ajax et JavaScript) plus accessibles aux personnes handicapées. Par exemple, ARIA permet des repères de navigation accessibles, des widgets JavaScript, des conseils de formulaire et des messages d'erreur, des mises à jour de contenu en direct, etc.

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

Pour répondre à votre question, laquelle vous devez utiliser, utilisez uniquement l'attribut title-. Parce que cet attribut est utilisé si votre souris passe sur le bouton et affiche le texte de title comme info-bulle. Avec aria-label n'est pas pris en charge de cette manière.

14
tjati