Я имею в виду то, что скринридер озвучивает для кнопки, на которую вы нажимаете, чтобы поставить лайк посту. Или, возможно, можно добавить и другие реакции, но мой скринридер об этом вообще ничего не сообщает. Единственный элемент, для которого у меня есть метка, — это элемент, отображающий текущее количество лайков, если оно равно 1 или больше. Если оно равно 0, этот элемент отсутствует. Однако кнопка, которую мне нужно нажать, чтобы добавить реакцию «Like», не имеет метки для моих скринридеров на Windows, Mac и iOS.
Я слепова, поэтому не использую мышь. Кроме того, атрибут title в целом проблематичен для сенсорных взаимодействий, поскольку обычно нет простого способа вызвать наведение курсора мыши.
Надеюсь, это поможет…
Для ясности: я имею в виду кнопку #discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button. У этой кнопки нет ни атрибута title, ни aria-label; внутри находится только SVG, у которого установлен атрибут aria-hidden. И даже если бы это было не так, ни этот SVG, ни его дочерние элементы не содержат никакой информации, которую мог бы использовать скринридер. Поэтому решение здесь следующее:
- Добавить этой кнопке атрибут aria-label с текстом вроде «Поставить лайк этому посту» или «Добавить реакцию Like» или подобным. Поскольку в будущем могут появиться и другие реакции, эта формулировка должна явно указывать, какая именно реакция добавляется.
- Элемент, содержащий счётчик,
#discourse-reactions-counter-916340, вероятно, должен получить более подробную информацию о том, кто именно отреагировал и какой реакцией. Я не знаю, как люди с нормальным зрением получают эту информацию — возможно, при клике на это число появляется всплывающее окно. Но это также должно быть доступно для скринридеров и пользователей клавиатуры.
- Если в будущем будут добавлены другие реакции, они также должны быть доступны не только для мыши, но и для сенсорного управления, клавиатуры и скринридеров.
На данный момент, по крайней мере для меня, виджет позволяет добавлять только реакцию «like».
Извините за множество сообщений, но это показывает, насколько тщательным иногда приходится быть, чтобы найти причину проблемы. Атрибут title для постов, которые не мои, в настоящее время находится на родительском div-элементе самой кнопки «like». Однако, чтобы скринридер его распознал, атрибут title должен быть на самой кнопке. Скринридеры не считывают title с произвольных элементов. За последние 25 лет это обобщение слишком часто нарушалось. Поэтому, если переместить атрибут title на дочерний элемент <button>, скринридер будет правильно его распознавать.