Как правильно по доступности верстать презентационные бэкграунды через тег picture?

Question

[godsplane]

Презентационные картинки рекомендуют делать через css backgorund, но..
Допустим у меня два варианта фона для пк и для мобилки, можно в css через медиа указывать их, но это очень не удобно для вывода полей через админку и один из вариантов это тег picture с source:media (на самом деле других я не знаю)
Как правильно скрывать такие картинки?или давать понять скринридерам что они особо не важны и это просто задний фон блока.

Answer 1

[Вадим]

aria-hidden
ну и tab-index чтоб не фокусилось, если фокусится
---

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

А ещё можно просто прописать ссылку на картинку в css переменную в инлайн стилях, а на css уже в медиа указать какую переменную использовать.

Что-то вроде (увидеть смену картинки можно прямо тут, открыв код HTML или CSS - отработает медиазапрос):

Comments

[godsplane]

я думал про aria-hidden, но настолько ли он нужен здесь + на что его вешать?Как я понял он не скрывает дочерние узлы

[Вадим]

godsplane, А что, прям много вариантов на что вешать? Легко проверить.