Доступность: sr-only или aria-label

из MDN:

в приведенном ниже примере кнопка стилизована под типичную кнопку "Закрыть" с крестиком посередине. Поскольку ничто не указывает на то, что целью кнопки является закрытие диалога, атрибут aria-label используется для предоставления метки любым вспомогательным технологиям.

<button aria-label="Close" onclick="myDialog.close()">X</button>

согласно документации Bootstrap:

скрыть элемент для всех устройств, кроме экрана читатели С. sr-только

поэтому я думаю, что я мог бы также написать:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>

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

12
accessibility html twitter-bootstrap wai-aria

1 ответов

в Примере MDN считыватель экрана будет просто говорить только слово "закрыть", так как aria-label переопределяет текст в кнопке. Это будет работать, даже если вы повторно используете код без Bootstrap.

в вашем примере читатель экрана будет говорить "закрыть x", так как вы ничего не делаете, чтобы скрыть" x " от читателей экрана. Вы также добавляете текстовый узел, чтобы затем скрыть его с помощью класса.

Я бы использовал пример из MDN.

10