От автора: к настоящему времени многие из вас должны были видеть этот мем из четырех блоков про American Chopper. Для тех, кто не видел, они отличаются от огромного количества недоступных мемов в Twitter, которые не содержат описаний. Черт, для многих из нас это большое упущение.
Но в отличие от стандартных мемов, этот содержит довольно много текста. Больше, чем соответствует 400-символьному ограничению Twitter для alt-текста. Больше текста, чем может понадобиться обычному пользователю. Создание мемов, подобных этому, требует особого подхода.
Обычно я не имею дела с мемами, потому что они упускают многое. В этом случае я понял, что, хотя большинство создателей мемов даже не думают о таких вещах, как люди с плохим зрением (или ужасные мониторы), для меня не было никакой причины игнорировать такую возможность.
Таким образом, я создал на CodePen мем. Когда я твитнул о нем, я сделал снимок экрана с кодом CodePen и использовал его, как изображение. Я также связал его с Pen как текстовую альтернативу, чтобы те, кто не могут видеть изображение, могли по крайней мере получить весь текст (и контекст).
Ниже в блоке CodePen я рассказал немного том, что я сделал, чтобы вы могли использовать эту технику для других мемов в будущем. Или просто создайте форк и расширьте это ужасный American Chopper мем. Если вы не видите блок CodePen, перейдите прямо на Pen.
Предыстория
Так как исходные мемы, которые я смог найти, были очень низкого качества, я просто решил найти на YouTube оригинальное видео и сделать новые снимки.
Из них я сделал их фоновые изображения для нескольких div с фиксированным соотношением сторон, которые растягивались и сжимались, чтобы соответствовать окну просмотра (в перспективе я, вероятно, должен буду оформить их нумерованным списком). Это позволило мне легко помещать текстовые блоки поверх изображений, что означает, что они будут покрывать как можно больше пространства изображения, чтобы показать текст. Я даже попытался сохранить странное расстояние блоков относительно краев панели.
Так как я не мог полагаться на текст alt изображений, чтобы описать фоновые изображения под текстом, я решил поместить описание изображения прямо в блок, а затем использовать CSS, чтобы визуально скрыть его. Таким образом, пользователи экранного диктора все равно будут слышать описание изображения.
Поскольку я решил использовать базовый размер шрифта, чтобы надписи не становились слишком маленькими на небольших размерах экранов (font-size: calc (1vw + .65em);), текст одного блока может перекрывать другой. Но пользователи экранных дикторов могут об этом не заботиться. Я проверил все с помощью одного знакомого пользователя, и у него текст соответствовал тому, что у меня размещено в блоках.
И все. Страница распределяется на всю ширину экрана, чтобы при этом была доступна ссылка на Pen, и читатели могли получить текст.
Заключение
Для практиков доступности или кого-либо еще, кто хочет позволить большему количеству людей наслаждаться вашими причудливыми мемами — вы можете использовать это в качестве примера того, как можно сделать даже ужасный юмор более всеобъемлющим.
Черт, может, ваш мем даже попадет в еженедельную подборку CodePen Spark.
Обновление: Поэкспериментируйте с этим Pen
Я создал другой пример (встроенный ниже), который обыгрывает известный мем с одним изображением и двумя блоками текста.
Задайте body { font-size } и отступы для p:nth-child(2) и p:nth-child(3) под свой текст. Если вы измените фоновое изображение, чтобы создать другой мем, обязательно обновите текст в span, так как прямо сейчас это альтернативный текст для изображения Вилли Вонки.
Экспериментируйте и создавайте собственные мемы!
Обновление: Круто
Мем с Вилли Вонкой был выбран для размещения на главной странице CodePen. И оставался там, пока его не вытеснила парочка пингвинов. Но спасибо Скотту Винклу, который твитнул об этом.
Обновление: Задумчивый кот
Следующая идея родилась во время общения в Твиттере. Все, что я сделал — это развил мем с Вилли Вонкой, поменял изображение и текст и настроил соотношение сторон блока.
Автор: Adrian Roselli
Источник: http://adrianroselli.com/
Редакция: Команда webformyself.