Здравствуйте, друзья!
Представляем вашему вниманию третью часть нашего крайне нерегулярного цикла обзоров игр ЗОК 2021.
В основном речь сегодня будет идти об игре Виталия Блинова «Билет в один конец», хотя полноценный её обзор сделать пока не вышло. Кроме того, вы узнаете об играх «Про кота» и «про собаку», от разработчика с ником Виктор.
Приятного прослушивания!
Ссылки на игры:
Билет в один конец:https://blinovvi.com/train/
про собаку:https://play.ifiction.ru/about-the-dog/
Инъекция марса:https://play.ifiction.ru/injection-of-mars/
Ромео должен умереть: https://iplayif.com/?story=http://db.crem.xyz/f/uploads/romeo.ulx
Здравствуйте.
Сделайте пожалуйста обзор на игру «С улицы Бассейной.». Я в неё немного поиграл и не очень понял один момент.
Здравствуйте! Обзор я конечно сделаю, но это будет именно обзор , а не прохождение.
Так что в нём вполне может не быть ответа на ваш вопрос. Напишите, что именно не поняли, если знаю ответ помогу.
Здравствуйте! Большое спасибо за отзыв по «Билету». Честно сказать, я не ожидал, что в него вообще удастся поиграть людям с ограничениями зрения. Это оказалось возможным, и я очень рад! Сейчас идёт работа над новой версией игры, у меня уже список замечаний и предложений от игроков. На карту и другие графические элементы будут обязательно добавлено текстовое описание. Если знаете, как это правильно сделать, чтобы программа распознавала, подскажите, пожалуйста. У меня пока есть два варианта (в принципе, я могу добавить оба): alt и title. Например: <> Когда выйдет новая версия игры, дам вам знать.
В предыдущем комментарии не показывается html-код примера, вот он: img src=»» alt=»Текст, отображаемый, когда изображение не загрузилось» title=»Текст, отображаемый во всплывающей подсказке»
Атрибутов title на сегодняшний день вообще стоит избегать. Для доступности они обычно мало ценны, а в некоторых случаях даже вредят. С точки же зрения обычного визуального пояснения они утрачивают актуальность из-за всё большего распространения сенсорных устройств, где курсор мыши в типовом варианте использования отсутствует.
Если у вас графические элементы страницы сделаны через <img>, то да, для меток надо использовать текст в значении атрибута alt: <img alt="Рыцарь в доспехах">
Если у вас любой другой тип элемента страницы с отсутствующим явным текстом, например, кнопка с графической иконкой, то для невизуального подписывания надо использовать текст в значении атрибута aria-label: <button aria-label="Настройки"></button>
Есть и ряд других приёмов, но они для более сложных случаев, типа реализации текстовой метки элемента x как ссылки на содержимое элемента y. Это вряд ли понадобится.
Следует учитывать, что в текстовые метки не надо записывать метаданные о типе элемента, потому что вспомогательными технологиями эта информация извлекается и обрабатывается самостоятельно. То есть надо писать не "Изображение рыцаря в доспехах" или "Кнопка настроек", а просто "Рыцарь в доспехах" и "Настройки".
Чисто декоративные изображения, типа волнистой линии под заголовком, подписывать не надо. им надо либо оставлять пустой атрибут alt (<img alt=" ">), либо назначать роль декоративного элемента (<img role="presentation">), но лучше в принципе реализовывать как фоновый элемент CSS.
Важным нюансом является то, что длинные описания в обычных текстовых метках — это не очень хорошо. Они получаются громоздкими, мешающими навигации, а главное не дают возможности дополнительно размечать длинный текст для удобства, например, делить на абзацы, расставлять заголовки или размечать списки. Это как раз может быть актуальным для текстового описания изображения карт, которое обычно требует достаточно объёмного текста.
Здесь можно прибегнуть к разным решениям: от реализации простого спойлера, показывающего по нажатию текстовое описание карты, до разных специфических конструкций, в том числе полностью визуально скрытых.
Вот один из возможных примеров специального решения:
<figure aria-labelledby="map">
<img id="map" alt="Карта местности">
<figcaption class="sr-only">
<h2>Заголовок</h2>
<p>Описание.</p>
</figcaption>
</figure>
Здесь создана семантика для сложного описания изображения, а сам текст описания (figcaption) скрыт для визуального просмотра за счёт специального стилевого класса. Класс же тут должен быть такой:
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
Есть альтернативные способы длинных описаний, типа атрибута longdesc для <img>, но его лучше не использовать. Выше я показал оптимальное из специальных решений.
P.S. Мне только прислали комментарий, а подкаст и игру я не смотрел, так что прошу прощения, если где-то непонял контекст. Отвечал как для общего случая.
Никита, спасибо за развёрнутый ответ.
Виталий, насколько я понимаю «билету в один конец» подходит вариант с атрибутом alt.
Всем привет! Позвольте узнать доступна ли указанное в комментариях игра для мобильных устройств? А если точнее для программы экранного доступа? Таких как толкбек, и многих других?
Заранее большое спасибо за ответ!
Никита, спасибо за ответ! Да, я думаю, мне достаточно будет добавить alt.
Виталий, если речь идёт о «Билете в один конец», игра запускается в браузере. Я пока не разбираюсь в программах экранного доступа, но могу предположить, что доступность должна быть такая же, как с компьютера.
Понял, большое спасибо за ответ.
Я прослушал подкаст и посмотрел несколько первых экранов игры с отладчиком.
Причина упомянутых в подкасте глобальных проблем с программой экранного доступа JAWS в том, что по какой-то причине в интерфейсе создан элемент кнопки (<button>), внутрь которого вставлены уже все остальные элементы управления в виде ссылок (<a>). Чисто случайно повезло, что это хоть как-то работает с некоторыми другими программами. С тем же TalkBack на Android, про который спрашивал Виталий Скиндер, работать это не будет. Да и если говорить просто об управлении с клавиатуры (фокусирование ссылок по Tab и Shift+Tab), то это тоже закономерным образом сломалось.
Кнопка и ссылка — это интерактивные элементы HTML, с которыми подразумевается взаимодействие, поэтому друг в друга их вставлять нельзя. Я сходу не понял, чем вызван этот костыль с кнопкой, в которую вставлены ссылки. Если это типа для кликабельности пустого места между ссылками, то правильно это делается через добавление под ссылки блока слоя, внутрь которого добавляется пустая ссылка с блочным отображением (display: block), чтобы она растянулась на весь блок, ну и эту техническую ссылку, чтобы она не мешалась, убирают из клавиатурной навигации (tabindex="-1")и скрывают для вспомогательных технологий (aria-hidden="true"). То есть блок слоя, кликабельного мышкой или касанием в любом месте, будет выглядеть примерно так:
<div>
<a href="#" style="display: block; height: 100%;" tabindex="-1" aria-hidden="true"></a>
</div>
Ну это, конечно, если я правильно понял мотивацию создания текущего костыля с кнопкой, внутрь которой вставлены ссылки.
Nikita, спасибо за комментарий. Использование button, скажем так, исторически сложилось, и я уже убрал его в новой версии, которая постепенно готовится к выходу.
Насколько я понимаю, тем не менее, добавлять alt в изображения всё равно необходимо, и эта работа тоже уже идёт.
Да, ссылки внутри <button> и alt у картинок — это два отдельных вопроса.