Где живёт паттерн visually-hidden?

Question

[Johny Smith]

Где живёт и развивается паттерн visually-hidden, на просторах интернета встречается достаточно большое количество его реализаций, но единого какого то централизированного репозитория на гитхабе найти что то не удаётся, одна из его версий:

Answer 1

[Rustam Bainazarov]

Представленный выше код, что называется, overkill.

Сам использую подобный, но с pointer-events: none; visibility: hidden; и без white-space и clip-свойств. Надо тоже их добавить, хорошая идея :))

Upd. Хотя вот так будет лютый overkill:

.is--visually-hidden {
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

Только что там с accessibility -- фиг его знает. Тут уже жду комментариев, если они будут.

Update. Если кто не понял, мой код -- это сборная солянка всего что только можно для прикола. Кода из картинки автора вопроса вполне достаточно.

Comments

[Johny Smith]

хайпа не словило, вопрос не завирусился

[Rustam Bainazarov]

Olek1, просто он слишком специфический.

[Johny Smith]

SmthTo,

что там с accessibility -- фиг его знает

А что не так с ним, какие строчки вас смутили в вашей версии для A11Y

[Rustam Bainazarov]

Olek1, не проверял ни разу через screen reader, мол, распознают ли они скрытые этими всеми свойствами элементы.

[Johny Smith]

SmthTo, они не хавают font-size:0; это я знаю точно, а больше я нипрочто и не слышал даже

[Rustam Bainazarov]

Olek1, интересно, как они обрабатывают pointer-events и user-select.

[Johny Smith]

SmthTo,
зашёл к ним на сайт (к фанатам a11y) почитать чтото про css, а оказалось у них даже поиска нет на главной странице, чтобы ввести кудато "CSS", такой вот парадокс, доступность бывает сурова:

[Rustam Bainazarov]

Olek1, мне название этого движения напоминает одну аббревиатуру — АУЕ.

Answer 2

[Degenerated]

Как я понял, живёт он тут: https://allyjs.io/tutorials/hiding-elements.html
Про развитие судить сложно, последнее обновление в 2017 году