В чем разница между атрибутами aria-label и title?

Я использую атрибут title="" на моих ссылках/кнопках/..., чтобы детализировать их. Но bootstrap использует множество атрибутов aria-label="" по причинам доступности, насколько я понял.

Итак, я создаю такие кнопки, как:

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

Но копирование/вставка названия для создания арии-метки выглядит просто уродливо. Какой из них выбрать, и почему?

Ответ 1

ARIA-теги используются для отключенных посетителей вашего сайта. Это очень приятно Bootstrap, что они поддерживают его по умолчанию.

Доступные богатые интернет-приложения (ARIA) определяют способы создания веб-сайтов контент и веб-приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступным для людей с ограниченными возможностями. Например, ARIA предоставляет доступные навигационные ориентиры, виджеты JavaScript, форму подсказки и сообщения об ошибках, обновления в реальном времени и т.д.

Источник: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Чтобы ответить на ваш вопрос, какой из них вы должны использовать, используйте только атрибут title. Поскольку этот атрибут используется, если ваша мышь переходит через кнопку и отображает текст title в качестве всплывающей подсказки. С aria-label не поддерживается таким образом.