Как задать название кнопок для доступности Google PageSpeed?

Для задания названий кнопок для доступности Google PageSpeed, необходимо использовать атрибут aria-label или aria-labelledby в элементе кнопки.

Атрибут aria-label используется для указания конкретного текстового описания элемента, который будет доступен для чтения с использованием программных средств. Например, чтобы задать название кнопки "Оформить заказ", вы можете использовать следующий код:

<button aria-label="Оформить заказ">Оформить</button>

Атрибут aria-labelledby используется для задания связанного элемента, которое содержит текстовую метку, идентифицирующую элемент. Идентификаторы метки могут быть указаны в атрибуте id для других элементов на странице. Например, если у вас есть элемент с идентификатором "order-label", который содержит текстовую метку "Оформить заказ", вы можете использовать следующий код:

<button aria-labelledby="order-label">Оформить</button>
<label id="order-label">Оформить заказ</label>

Таким образом, при использовании элемента <button> с атрибутами aria-label или aria-labelledby, вы обеспечиваете доступность для программных средств, таких как экранные читалки, и позволяете пользователю понять назначение кнопки даже без визуального представления. Это также будет полезно при проверке и оптимизации страницы с помощью инструментов, таких как Google PageSpeed.