CSS-live.ru

Заметки о черновике CSS-свойства «alt»

Перевод статьи Брюса Лоусона «Notes on draft CSS “alt” property» с сайта brucelawson.co.uk.

Недавно в Рабочей группе CSS была дискуссия про свойство alt, которое должно было быть добавлено в CSS. Цель этого свойства – помочь вспомогательной технологии понять значение символов юникода, встроенных в визуальное представление документа с помощью сгенерированного контента CSS. Проблема описана Джеймсом Крейгом – славным малым по доступности контента из Apple.

Вот уже год как это свойство поддерживается в виде -webkit-alt и только что было добавлено в черновик спецификации CSS-модуля псевдоэлементов 4-го уровня. Представим, что вы используете символ звездочки, чтобы показать что что-то является «Новым» при помощи генерации CSS-контента, используя в качестве селектора класс .new.

.new::before { 
  content: url(./img/star.png);
  alt: "Новый!"; 
}

Свойство alt предоставляет информацию вспомогательным технологиям.

Строка alt может быть пустой. Допустим, вы генерируете «►», чтобы показать, что виджет является раскрываемым. Так как вы милый человек и ответственный разработчик, вы используете aria-expanded="false" в HTML. Следовательно, вы бы использовали пустой alt в генерирующем этот символ CSS, который генерирует символ, чтобы помешать вспомогательным технологиям «любезно» прочитать вслух «Чёрный указывающий направо указатель» после того, как вспомогательная технология передала пользователю ARIA-информацию:

.expandable::before {
  content: "\25BA"; /* a.k.a. ► */
  alt: ""; 
  /* aria-expanded="false" готово в DOM, 
     т.к. этот псевдоэлемент оформительский */
}

Обновлено в 17:05 по Гринвичу. Fantasai из Рабочей группы CSS засыпала всю рабочую группу емейлами, протестуя против этого синтаксиса (перевод этого письма дан в низу статьи — прим. перев.). У меня нет фаворита в состязании синтаксисов. Этим постом я хочу показать, что нам необходим некий механизм, чтобы дать альтернативный контент вспомогательным технологиям, с учетом того, что мы позволяем нетекстовому контенту быть сгенерированным при помощи CSS.

Когда я твитнул об этом ранее, несколько человек возразили против этой идеи, потому что при таком подходе контент вносится в CSS. Но поезд уже ушел, с тех пор, как появилось свойство content, которым люди пользуются уже целую вечность. Если вы скажете, что «добавление неоформительсого контента на страницу является злоупотреблением CSS, авторы которого заслуживают 100500 лет в чистилище, и чтобы Тим Бернерс-Мефистофе-Ли выливал горячее молоко им на штаны всякий раз, когда они пытаются уснуть», то я отчаянно закиваю головой в знак согласия.

Но иногда, по организационным причинам, или если вам достался «в наследство» чужой код, или если вы беретесь за рефакторинг кода, толком не разобравшись в нем, то вы работаете с CSS, который генерирует иконки. Это новое свойство, как минимум, позволяет автору сделать этот контент более доступным.

Несколько лет назад я присоединился к веб-команде через неделю после того, как их совершенно новый сайт был запущен фирмой Биг Лондон Эдженси, на месяцы позже срока и за тонны бабла сверх бюджета. Этот сайт был отвратительной помойкой из вложенных табличных ячеек и GIF-распорок, со ссылками «кликниздесь», указывающих на PDF. Конечно, я мог немедленно уволиться и позволить банку изъять мой дом за неуплату.

Вместо этого, я спокойно указал всем, кто был готов прислушаться, на все косяки сайта и планировал, как его можно было бы переделать. Но выжидая подходящего момента, я делал маленькие поправочки там-сям, чтобы его улучшить и понемногу сделать доступнее; вычищая из ссылок атрибуты title, тупо дублирующие их текст, заменяя «кликниздеськи», вставляя пустой alt-текст в GIF-распорки в тех кусочках шаблона, что были под моим контролем.

Это было до эпохи ARIA, но я бы вцепился в возможность добавить role="button" к этой жуткой мешанине вложенных <div>’ов, который вываливала CMS. Да, гораздо лучше потратить огромные деньги, чтобы поставщик CMS изменил шаблоны, а затем протестировать каждую отдельную формочку в каждом отдельном браузере, но это просто невозможно.

Два года спустя, когда старший менеджер, который заказывал этот ужасный сайт, ушёл, и нам стало можно сбросить с себя эту ношу, мы это сделали. Тогда мы всё сделали правильно. Но для тех, кому был нужен контент и кто не мог ждать почти три года (т.е. для всех), я рад, что залеплял пластырями и полировал дерьмо.

Обычно говорят, если дело стоит делать, то его стоит делать хорошо. Но так же разумно помнить: иногда, если дело стоит делать, лучше сделать его хоть как-то, чем вообще никак. Если вам приходится иметь дело с осмысленным контентом, сгенерированным при помощи CSS, то, по меньшей мере, теперь вы можете сделать его доступнее.

Дополнение. Письмо fantasai в рассылке Рабочей группы CSS (ссылка на оригинал)

4.11.2014 Алан Стирс написал:

2.11.2014 Джеймс Крейг написал:

С тех пор, как было предложено CSS-свойство «alt», прошло два года. Обсуждение закончилось выводом, что это была необходимая и полезная идея и что она будет добавлена в редакторский черновик. Мне сказали, что в дальнейших действиях нет необходимости.

Начало обсуждения: http://lists.w3.org/Archives/Public/www-style/2012Nov/thread.html#msg233

Предложение Таба о свойстве «alt»: http://lists.w3.org/Archives/Public/www-style/2012Nov/0317.html

Уточнения: http://lists.w3.org/Archives/Public/www-style/2012Nov/0318.html

И это свойство поддерживается в вебкит (в виде -webkit-alt) уже около года.

Реализация CSS-свойства -webkit-alt (текстовая альтернатива для псевдоэлементов генерируемого контента ::before and ::after)

https://bugs.webkit.org/show_bug.cgi?id=120188

Я повторно отправляю это в www-style с префиксом [css-pseudo], т.к. оно ещё так и не превратилось в черновик за последние два года.

Я добавил примерный черновик этого свойства: http://dev.w3.org/csswg/css-pseudo/#alt-property

Я возражаю против этих изменений.

  • Я не думаю, что это хорошее решение проблемы
  • Если мы решим сделать это, то этому свойству место в модуле Content рядом с 'content', а не в модуле псевдоэлементов.
  • Кроме того, поскольку в настоящее время мы поставили задачу опубликовать css-pseudo без этого свойства, я не думаю, что редакторы должны добавлять что-нибудь ещё без общего решения рабочей группы. (Также, в целом, хотя я не и не особенно в курсе о порядке составления текста и получения разрешения WG по нему, я не думаю, что редакторам следует добавлять совершенно новые свойства без получения явного согласия WG.)

Позвольте раскрыть пункт а) подробнее для всех читателей этой рассылки, поскольку это технический момент, а не организационный.

Самая первая «важная» проблема со свойством «alt» – оно плохо каскадируется. Информацию, которую вы стараетесь каскадировать, должна быть связана с информацией, установленной для «content». Поскольку это отдельное свойство, оно будет участвовать в каскаде независимо, и «вероятно» следующее стилевое правило «content» забудет указать «alt», ведя к несоответствию между «alt» и «content».

Вторая проблема заключается в том, что у нас уже есть несколько решений этой проблемы, которые не требует дополнительных свойств (плохо каскадируемых)

Решение А, с помощью модуля сгенерированного контента CSS3

content: url(star.png), "альтернативный (запасное решение) текст";

Решение Б, с помощью модуля речи CSS3

@media speech {
     ... { content: "альтернативный текст"; }
   }

Решение С, с помощью модуля речи CSS3

@media not speech {
     ... { content: "вещи с неречевыми эквивалентами";
}

Почему мы не развиваем эти идеи, вместо копирования плохо продуманных идей WebKit?

~fantasai

P.S. Это тоже может быть интересно:

2 комментария

  1. А вы обращали внимание на тег альт в своих статьях? Я вот недавно об этому узнала от этих ребят https://ifish2.ru/teg-alt/ как только прописала везде, так сразу статы сайта подскочили! Прочтите и вы — пригодится!

    1. Бегло просмотрел, вроде написано довольно толково… только alt – не тег, это атрибут! :) Безусловно полезный, причем в первую очередь для людей со скринридерами и т.п. (а поисковики – скорее приятный бонус).

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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