TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #167 3.77K
Длинный alt

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

Не буду разгонять, что подробнейшее описание картинок странно как минимум потому, что зрячие в них обычно не всматриваются, а быстро пролистывают, схватив с них эмоцию в контексте текста вокруг. Читать по диагонали можно, слушать — сложно.

А вот Адриан Розелли подробно и с примерами объясняет, почему длинные тексты в alt — плохо.

1. Альтернативный текст рисуется в браузерах вместо картинок, если картинки по какой-то причине не загрузились. И если с короткими текстами всё более-менее аккуратно рисуется, то с текстом, который не помещается в изначальную «коробочку» для картинки, каждый браузер ведёт себя по-разному. Safari вообще текст перестаёт рисовать. А в Chrome и Firefox текст либо ломает вёрстку, либо обрезается без скролла.

2. Скринридеры читают весь текст. И по нему сложно навигироваться. Причём для многострочных альтов ещё и не понятно, это уже основной текст или ещё старый alt зачитывается. Если там какие-то излишние подробности, то слушать такой текст будет максимально странно.

3. Ссылки и тексты на другом языке (отличном от языка элемента или страницы) в разных скринридерах тоже читаются по-разному, но везде что-то ломается.

В общем, если вы зачем-то решили описывать картинку максимально подробно, то подумайте несколько раз, зачем. И тем более не перекладывайте всё на AI полностью — из благого намерения получится ужасный UX для тех, ради кого это как будто и делается.

https://adrianroselli.com/2024/04/long-alt.html
Adrian Roselli Long Alt TL;DR: Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language. Here We Go Sometimes you can have too much alternative text, particularly for an <img>. I don’t mean there is a limit to what is allowed…
  • 👍 23
  • 💯 6
  • ❤ 5
  • 👏 1
  • 🤨 1
More from @mefody_dev
  1. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  2. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  3. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  4. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  5. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  6. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →