Вадим

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

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

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

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

Не совсем.
1) Не все скринридеры посчитают title существенным для озвучивания (пруфов на руках нет).
2) Есть степень специфичности, на основе которой решается что озвучить пользователю.
aria-label приоритетнее чем title.
title наименее приоритетный, насколько я помню. Его перебьёт всё что угодно, и если совсем ничего нет, даже content, только тогда на него обратят внимание.
title - нет на мобильных девайсах. По крайней мере визуально (voiceover`ом не проверял)

Вот скрин кнопки "подписаться" под Вашим вопросом из дерева доступности в десктопном гугл хром:

Как видно - по итогу пользователю зачитается "Подписаться1", потому что aria-labelledby и aria-label не заданы, а content приоритетнее чем атрибут title.

А в приведённом Вами примере, если опустить aria-label, то, на вскидку, должен зачитать: "изображение" + значение атрибута alt + "ссылка", так как контент есть.
А вот если бы в ссылке не было вообще ничего и картинка рисовалась на css, скажем, фоном. Вот тогда, НАВЕРНОЕ, можно было бы сказать что aria-label и title равны. Но только при условии что скринридер вообще считает title за семантический атрибут.

То, о чём Вы спрашиваете, официально называется WAI-ARIA.
Тут можно скачать бесплатно экранного диктора и с помощью него тестировать свои сайты, осуществляя навигацию по ним с помощью табуляции, а так же открывая специальное меню с помощью горячих клавиш (командная кнопка приложения, которую назначите, по умолчанию ins+f7, или f6? Не помню уже точно :-) )

Доклады Вадима Макеева на ютубе:
https://www.youtube.com/watch?v=MWJKwn_gKR4
https://www.youtube.com/watch?v=ssJsjGZE2sc

Если действительно умеете соблюдать семантику, то, скорее всего, Вы уже сделали достаточно.
Рускоязычные ресурсы по доступности:
https://weblind.ru/
specialbank.ru/guide (В данный момент чёт не работает, но должен)
Есть курс, где учат именно этому: https://kurmak.info/
Статья на хабре: https://habr.com/ru/post/40730/ (там внизу есть полезные ссылки)
Тут можно найти информацию по этому вопросу, в том числе перевод статей из первой ссылки англоязычных ресурсов

В подкасте Веб-стандарты упоминается об этом очень часто. Тут можно прослушать все выпуски, а так же покопаться в выпусках и поискать упоминания доступности и статьи про это.

Есть англоязычные ресурсы
Про доступные компоненты: https://inclusive-components.design/ (нажимаете в хроме справа сверху "перевести страницу" и профит)
Есть спецификация: https://www.w3.org/TR/wai-aria-1.1/#usage (аналогично, перевод в браузере и профит)
MDN: https://developer.mozilla.org/en-US/docs/Learn/Acc...

По порядку:
1) Не совсем верно. Не рекомендуют оставлять дефолтный аутлайн. Рекомендуют менять стиль элемента, когда он в фокусе, чтобы пользователю было удобнее осуществлять навигацию и ориентироваться какой элемент в данный момент активный. И оставлять дефолтный аутлайн если Вы не хотите с этим заморачиваться.

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.