Десять лет назад учили определять декоративное изображение или нет вовсе не из соображений о доступности. Про нее тогда никто не говорил.
В первую очередь это делалось чтобы определить соответствующий метод вставки изображения чтобы помочь браузеру с эвристиками для определения приоритизации загрузки ресурсов.
Да, сейчас мы можем откладывать загрузку с load lazy, но если изображение расположено в первом "экране" - то это то что стоит делать.
Что ещё поменялось с тех пор? Ну, переход на http2, но стала ли приоритизации загрузки ресурсов бесполезной? Я чёт такой информации не встречал.
Поэтому если вы выставляете изображение с пустым alt - скорее всего что-то вы делаете не так.
А ещё есть seo аспект, тогда картинки, alt которых бы дублировал текстовый контент был бы избыточным - перестает таковым быть. Но тогда картинку стоит скрыть от скринридеров соответствующими атрибутами.
А что если картинка не загрузилась и тогда у нас в контенте будет два дублирующих текста, один от alt, а другой от текстового контента? Хорошего ответа у меня нет, можно пробовать скрывать(или стилизовать) через псевдоэлементы, если он очень мешает. (Да-да, у не загрузившейся картинки они есть).
Тоже участвовал в данной олимпиаде, правда с чуть более худшим результатом в отборочном и аналогичным в финале) Даже близко не топ100.
Хотел поделиться с Вами намного более простым и, на мой взгляд, изящным способом решения задачи про шахматы:
1. Делаем клеточки
<button></button>
— тогда у них появляется :focus (чтобы не прописывать всем элементам tabindex=0 или не делать контролов форм не на форме, как в предложенном решении), а так же лучше для доступности.
2. Для доски нужно убрать overflow, а для каждой клеточки сделать абсолютно спозиционированный ::after или ::before элемент.
3. С помощью множественно background-image через linear-gradient рисуем «карту» возможных ходов конём из каждой ячейки.
4. делаем pointer-events:none для этого псевдоэлемента.
Итого: получаем независимость от разметки, а так же её чистоту и простоту.
Upd: то это не то что стоит делать.
Десять лет назад учили определять декоративное изображение или нет вовсе не из соображений о доступности. Про нее тогда никто не говорил.
В первую очередь это делалось чтобы определить соответствующий метод вставки изображения чтобы помочь браузеру с эвристиками для определения приоритизации загрузки ресурсов.
Да, сейчас мы можем откладывать загрузку с load lazy, но если изображение расположено в первом "экране" - то это то что стоит делать.
Что ещё поменялось с тех пор? Ну, переход на http2, но стала ли приоритизации загрузки ресурсов бесполезной? Я чёт такой информации не встречал.
Поэтому если вы выставляете изображение с пустым alt - скорее всего что-то вы делаете не так.
А ещё есть seo аспект, тогда картинки, alt которых бы дублировал текстовый контент был бы избыточным - перестает таковым быть. Но тогда картинку стоит скрыть от скринридеров соответствующими атрибутами.
А что если картинка не загрузилась и тогда у нас в контенте будет два дублирующих текста, один от alt, а другой от текстового контента? Хорошего ответа у меня нет, можно пробовать скрывать(или стилизовать) через псевдоэлементы, если он очень мешает. (Да-да, у не загрузившейся картинки они есть).
Личный опыт.
Хотел поделиться с Вами намного более простым и, на мой взгляд, изящным способом решения задачи про шахматы:
1. Делаем клеточки — тогда у них появляется :focus (чтобы не прописывать всем элементам tabindex=0 или не делать контролов форм не на форме, как в предложенном решении), а так же лучше для доступности.
2. Для доски нужно убрать overflow, а для каждой клеточки сделать абсолютно спозиционированный ::after или ::before элемент.
3. С помощью множественно background-image через linear-gradient рисуем «карту» возможных ходов конём из каждой ячейки.
4. делаем pointer-events:none для этого псевдоэлемента.
Итого: получаем независимость от разметки, а так же её чистоту и простоту.
codepen.io/Mr_DECOY/pen/gOOvybZ