Comments 39
Кнопки неочевидного назначения, неподписанные поля, капча, автостарт звуков и видео, особенно в фоновых вкладках — это все даже для зрячего пользователя зло.
А почему не говорить-то? Какое отношение программист из одного отдела большой имеет к проблемам курьеров, нанятых даже не другим отделом, а дочерней компанией и почему он должен "считать нормальным" (или не считать) себя? Мы, конечно, можем относиться к Mail.ru сколь угодно плохо по ряду причин (главная из которых — активное содействие чекизму в РФ, менее существенные — злоупотребления рекламой своих продуктов, совсем несущественная — проблемы с курьерами в одной из дочек). Но какое отношение к этому имеет человек, никоим образом ко всему этому непричастный и занимающийся исключительно общественно полезным трудом?
Иначе говоря: допустим, мы негативно относимся к российской власти. Должны ли мы негативно относиться к, скажем, веб-мастеру, который разрабатывает сайты для мэрии одного из городов России? Или к участковому? Или к любому другому из сотен тысяч, кто "работает на этих"?
Тут корректнее спрашивать с тех, кто пользуется их сервисами и приносит компании деньги, а не с тех, кто их делает.
Конкретно в моем случае — это скорее осознанный выбор. Я был программистом до того, как стал интересоваться доступностью, и мне нравится то, что я делаю. Должность аксессабилити-инженера всеже больше менеджерская должность, писать код там надо сильно меньше.
С другой стороны компания поддерживает мои интересы, со мной над статьей работали: редактор, корректор и дизайнер, которые помогали мне подготовить материал, это компания платит им зарплату, не я, Плюс компания позволила воспользоавться ее медийным ресурсом, и в том, что вы увидели эту статью тоже заслуга компании.
Моя предыдущая статья вышла только в моем личном блоге на хабре, и охват был на порядки меньше.
Так что не плохо, все отлично)
Но я понимаю к чему вы клоните, и в целом, скорее склонен согласиться, но ситуация меняется)
С другой стороны компания поддерживает мои интересы
То есть вместо того, чтобы сделать все свои интерфейсы доступными, компания "вложилась" в очередной маркетинговый материал? Если вам при этом ещё и не заплатили гонорар, то у меня для вас печальная новость — вас поимели.
В HTML существует шесть уровней заголовков, которые обозначаются тегами от H1 до H6 и используются именно в этом порядке, создавая иерархическую структуру.Было бы очень хорошо, если бы вы привели пруфы.
[...]
Другой частой ошибкой является неправильная последовательность в заголовках. Согласно стандарту, сначала используется заголовок H1, он должен быть один на странице. Следующий заголовок всегда будет H2. Если нужен вложенный заголовок, то используется H3, а если нужен равнозначный заголовок, то снова используется H2.
Дело в том, что я заглядывал в спецификацию и не видел там ни сведений, что номера обозначают уровень иерархии (на самом деле уровень значимости), ни требования вложенности строго по номерам без пропусков (есть только указания для случая вложенных элементов
section), ни требования единственности h1.Насколько я знаю, всё это — популярные мифы, тиражируемые доморощенными сеошниками.
Но допускаю, что я читал недостаточно хорошо. Если вы приведете цитаты из стандарта, буду благодарен.
спасибо за комментарий по делу)
Буду отвечать частями, по поводу пруфов, хорошее замечание, учту его при написании следующих статей
что номера обозначают уровень иерархии
Я не говорил, что номера обозначают уровень иерархии, я лишь сказал, что заголовки на странице создают иерархическую структуру
ни требования вложенности строго по номерам без пропусков
На сайте w3c есть еще туториалы по доступности, где рекомендуют следующее:
Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
А вот по поводу использования только одного заголовка H1 действительно ни слова, но и в примерах, я не нашел использования двух заголовков H1.
С другой стороны, структура заголовков должна отражать структуру вашей страницы. И если Вам необходимо использовать 2 верхнеуровнего заголовка, то пожалуйста, но мне это сложно представить.
ПС доступнсть — это как идеал, к нему можно стремиться, но, кажется, достичь невозможно слишком уж большой спектр всевозможных нарушений.
А вот по поводу использования только одного заголовка H1 действительно ни слова, но и в примерах, я не нашел использования двух заголовков H1.
Многие посадочные страницы имеют несколько заголовков H1. Но на них мало кто заботится о доступности )
мне это сложно представить
Любой многоколоночный интерфейс. Например.
Вы приводите пример где вообще нет тегов ни h1 ни h2, зачем?
Я привёл пример, где уместный несколько верхнеуровневых заголовков, чтобы вы смогли себе это представить. Ну а добавить h1 да, надо бы.
с тем же успехом можно взять заголовок h1 в нем написать название страницы, а уже ниже использовать несколько заголовков h2 и это будет семантически более верно
И какое может быть название у страницы, на которой выводится несколько равноправных панелей?
Ну они же как-то логически объединены, раз они выводятся на одной странице. Вот так и назовите
Это как с названием серии фильмов.
h1 Список фильмов о Джеймсе Бонде
h2 Доктор Ноу (1962)
h2 Из России с любовью (1963)
h2 Голдфингер (1964)
h2 Шаровая молния (1965)
h2 Живёшь только дважды (1967)
…
Каждый из этих фильмов равноправный друг к другу, но есть общее
Та же история с названием книг
Мне сложно представить, книгу у которой первые 100 страниц одно название а со 101 автор говорит, теперь книга называется по другому и продолжает повествование.
Общее только одно — все сущности находятся на одном сайте. Нет никакого смысла задавать h1 с названием сайта.
вы говорите про абстрактные сущности на абстрактном сайте, без абстрактного заголовка. Допускаю, что такое может быть.
На реальном примере не встречал
Я дал конкретную ссылку на конкретном сайте. Ну или вот ещё одна, возможно, понятней будет.
2. Невидимые картинки — не всегда зло, например, если они используются исключиительно в декоративных целях, шоббуло. Вот в ленте новостей считается хорошим тоном давать к каждой новости картинку. Пусть «ролевую», не связанную именно с данной новостью, лишь бы была. Можно высосать ей из пальца содержимое alt, а можно не делать этого, чтобы не ездить по ушам тому же незрячему бесполезной информацией: тут красивая картинка, которую мы поставили, чтобы радовала глаз, но по чесному на нее плевать и зрячим. Да, и aria-hidden никто не отменял, как раз для таких случаев годится.
3. В целом, Вы открыли
- Да, но мы тут не про знание стандартов а про удобство использования, на тайтл нельзя навести фокус, поэтому его нет в статье
- Решать должен видеть пользователь контент или нет не входит в понятие доступности Доступность про то, что вне зависимости от способа потребления контента он был доступен всем. А уж хороший это контент или нет — это другой вопрос
- Большая часть популяризационных статей в той или иной степени пересказ стандартов
2. Я согласен, что в принципе не дело автора решать, кто что должен «видеть», иначе можно дойти и до «время работы врача видно, а остальное — только для здоровых». Но мы живем в реальном мире, а Вы пишите в первую очередь об удобстве пользования. В этом контексте, как мне представляется, стоит упомянуть и о других способах решения проблемы, тем более что тот же WCAG вполне себе оперирует понятием «исключительно декоративный», вынося соответствующие элементы за рамки требований по доступности.
3. Это-то и плохо. ИМХО куда полезнее разбирать типичные примеры ошибок и предлагать доступные (в широком смысле слова) пути их исправления, разумеется, опирающиеся на стандарты, но и на здравый смысл. Вот в грехе № 2 Вы упоминаете неподписанные кнопки, и все правильно пишите, но кнопки ли это, может это (внешние) ссылки по своему назначению?
Пустой атрибут alt — это, вероятно, самая распространенная проблема, с которой я сталкиваюсь. Программы экранного доступа читают описание изображения вслух. Если описания нет, то незрячий пользователь услышит просто «картинка» или «графика», что не даст никакого контекста или смысла.
Во времена табличной верстки для любой служебной графики, размещенной на веб-странице, рекомендовалось всегда явно указывать пустой alt-текст (alt=""). Вот что об этом писал Дмитрий Кирсанов в своей книге «Веб-дизайн»:
…
- Для распорок (стр. 237) и декоративных элементов, не несущих никакой информации, обязательно указывать пустой
alt-текст (alt=""). Как ни странно, этот простейший случай не является значением по умолчанию, так что автор должен сам позаботиться об обнуленииalt-текста во всех вспомогательных изображениях.
…
… Важно также не забывать указывать
alt=""при всех таких распорках (как и при любой другой служебной графике), чтобы не раздражать «исподним» визуального форматирования тех, кому нужен лишь текстовый образ вашей страницы.
В несколько измененном виде эта рекомендация дожила и до наших дней. Вот что об этом пишет Николай Шабалин в своей статье «Как правильно написать alt-текст»:
Но в этом случае некоторые скринридеры начнут читать
src, что ещё хуже. Поэтому лучше оставлять пустойalt. Из двух зол выбирают наименьшее.
<img src="orange-cat-2.jpg" alt="">
Еще одно зло — обнуление outline, и при навигации из клавиатуры не понятно какой елемент в фокусе.
Всё-таки доступность — это не только для слепых, но и для "слабодвигающихся". Да и не только для них.
В наши дни сайт может быть недоступным даже для обычных людей.
Каждый человек вне зависимости от его мобильности должен иметь свободный доступ ко всем объектам общественной инфраструктуры. Я согласен. Но, к сожалению, такие приспособления иногда создаются для галочки. И с сайтам такая же ситуация.
Блин, почему бы не делать сразу универсальный интерфейс для всех? Например, не лесенку, а некрутую горку по спирали и т.д.
Понимаю, что внедрить на тысячи ресурсов это не реально, но хотя бы сделать обязательным для новых.
— Задалбливает рекламой где только можно…
все продукты, приблизившиеся к орбите Я. махом
разбавляются массой кнопок с чекбоксами «Установи ..»
— Не брезгует извращать корневые принципы UX\UI для привлечения подписчиков…
обмен местами кнопок ОК и НЕТ в установщике Я.Браузера помните?
(а сколько было от Я. подобного, ух..)
— врезал в плеер на Я.Видео дико громкую рекламу(2 шт),
которую можно выключить… через 10 сек
— у Я. наверное, самая агрессивная и хамская по тональности кампания продвижения
продуктов в Рунете, без коммюнити и ТП для пользователей продуктов, по сути,
предел интереса и охвата аудитории — люди из IT и продаваны из около-айтишной сферы
— не побоюсь резких слов, Я. могильщики массового народного продукта, — Народ.ру
пусть это страницы были смешны и бедны с точки зрения разных профи, но
огромная масса людей обучалась и культуре кода и структурированию контента,
да много чему. Всех выгнали на мороз
И тут чел (пока не дочитал до комментов, не знал даже кто, пофиг же кто, лишь бы умнО было написано) как второпях стандарты и правила из W3S, я всё искал, а где соль? Тут же просто пересказ, урезанный причём. Кто из практикующий фрондов не знаком со всем перечисленным? Бесспорно, условия не всегда позволяют строго следовать .., но зачем столько апломба? Мде…
Эмоциональное.
г-н Лебедев настолько странно организовал процесс актуализации стиля,
что на диз Я. смотреть всё тошнее и тошнее. Дизайн морд Я. это просто какой-то мамонт из 2000-ых, там что тупо никого не подпускают к причёсыванию, у нас немало достойных спецов UI вообще-то
Даже в небольших фирмах на дизайн могут оказывать существенное влияние мнения и пожелания руководства (иногда совершенно неадекватные). У меня был случай, когда розовый цвет кнопок в дизайне одной системы «продавила» одна из женщин, которой этот цвет нравился. А она нравилась начальнику. Всё, кнопки должны быть розовыми. Вот такой карикатурный пример из реальности.
И ещё на счёт alt. На сколько я знаю, альт лучше не добавлять к техническим изображениям, либо иконкам.
Просьба
Я Вас очень попрошу попробовать на меня не обижаться за все то, что я напишу ниже.
Я не нисколько не хочу Вас обидеть или поставить под сомнение Вашу квалификацию.
Мой агрессивный, предельно возмущенный тон, продиктован ровно теми же причинами, которые Вас заставили попытаться разобраться в этой теме. И к сожалению, Вы стали жертвой сложившейся ситуации.
Сами скринридеры, разумеется, не видят страницу и не понимают, что перед ними находится. Поэтому наша задача, как разработчиков, с одной стороны, предоставить скринридеру как можно больше данных, а с другой стороны, не мешать ему работать.
Совершенно справедливо. И для этого существует стандарт семантической верстки HTML5 которую большая чатсь скринридеров либо игнорирует, либо интерпретирует неправильно. И их нельзя за это судить, конечно, в силу истории становления стандарта.
Грех 1. Бардак в заголовках
В HTML существует шесть уровней заголовков, которые обозначаются тегами от H1 до H6 и используются именно в этом порядке, создавая иерархическую структуру.
То о чем Вы пишите в этом разделе, касается исключительно норм стандарта HTML4, потерявшим свою актульность в 2009 году и не имеет ничего общего со стандартом HTML5.
Иерархия заголовков h1-h6 это спецификация структурирования документа из стандарта HTML4, которую для обратной совместимости сохранили в HTML5 придумав для этого сложнейший алгоритм формирования неявных секций.
Чем допустил громадную ошибку, о которой им тогда говорили в том числе и я в составе других орущих заинтерисованных.
Первые версии черновика HTML5 вообще исключали теги h1-h6 из допустимых тегов.
Должен был быть только тег h. К сожалению продавленное решение обратной совместимости, привело к сохранению h1-h6 и созданию алгоритма формирования неявных секций, который по своей сложности превышает весь html5 стандарт вместе взятый.
Но самое главное не это, а то что в 2021 году, люди вроде Вас до сих пор думают, что структура документа формируется именно этим образом. А между тем, правила формирования документа были кардинально изменены в 2009 году, когда черновик стандарта html5 быть признан готовым к началу процедуры стандартизации.
Формирование аутлайна согласно html5 спецификации семантической верстки, происходит за счет уровня вложенных секций, у которых может быть заголовок с любой цифрой.
Иными словами, в отличии от html4 где была совершена неудачная попытка построения структуры документа заголовками, был реализован почти универсальный алгоритм формирования структуры любой сложности, где степень специфичности контента, определялось его уровнем вложенности, а не номером заголовка у тега h.
В спецификации html5 номер заголовка не имеет НИКАКОГО ЗНАЧЕНИЯ. за исключением особого случая, когда верстальщик в нарушение спецификации, в одну секцию добавляет больше одного заголовка. В этом случае запускается алгоритм формирования неявных секций, для разрешения конфликтной ситуации.
Люди из добрых побуждений, не хотели принимать мысль о том, что не внеся радикальное правило, о не валидности такой верстки, своими действиями приведут все к коллапсу. Что и случилось.
Сейчас в 2021 году, единицы знают как правильно формировать аутлайн в html5 стандарте. И десятки тысяч думают, что иерархия заголовков h1-h6 это именно то, что согласно стандарту должно выполнять эти функции.Что естественно не так.
Грех 3. Невидимые картинки
Согласно стандарта html5 трактования тега img зависит от трех его состояний:
главное — наличие атрибута src с корректным значением, в противном случае этот элемент ничего не представляет.
После чего оценивается три состояния атрибута alt. А именно:
1) alt атрибут отсутствует вообще — должно интерпретироваться как изображение которое представляет основной контент, при этом на момент его публикации определить альт атрибут не было никакой возможности.
2) alt атрибут задан пустым значением — должно интерпретироваться как изображение сервисного характера. ДЕкоративное изображение. То есть изображение которое не имеет никакого отношения к контенту вообще.
3) И, конечно, alt атрибут задан.
В силу сложившихся обстоятельств, громадное количество людей, в том числе авторов ПО читалок, стали заблуждаться ровно так же как и Вы. И относительно заголовков и изображений и много чего другого в стандарте HTML5. А виной тому стала одна корпорация, которая вложила в стандарт больше всех сил, а именно Google.
До 2018 года, не существовало ни одного стороннего инструмента, который бы мог подтвердить или опровергнуть правильность интерпретации той или иной семантической структуры. Фактически с 2009 года по 2018 год, всем html5 стандартом можно было только клопов давить.
Что все и делали, потому что ни теги, ни вся его семантика НИ НА ЧТО не влияла.
Авторы Читалок, рынок которых формируется совершенно особым образом, вынуждены решать две задачи, с одной стороны читать тот бардак который верстают люди, с другой стороны попытаться понять как работать со стандартом, у которого ничего кроме бумажной спецификации, написанное инопланетянами для инопланетян — нет.
Все текущие рекомендация W3C на которые вы ссылаетесь, написаны людьми не имеющими и малейшего отношения к формированию стандарта. Как и сама w3c.
На сегодняшний момент де факто, мы имеем ситуацию, когда большинство участников рынка читалок, имеет ПО которое чуть более чем полностью НЕ соответствует стандарту. И фиг бы с ним если бы не 2018 год.
Хаос начался в 2018 году, когда вдруг гугл в своем алгоритме ранжирования контента начинает учитывать семантику HTML5 именно так как она выписан в стандарте.
Которому как я написал выше протоиворечит работа читалок.
Традиция работы которых формировалось в диком мире и никем не регулировалась почти 9 лет.
И черт бы со всем этим было бы во второй раз. В конце концов, HTML5 аутлайн настолько гибок, что можно и соблюсти правила заголовков h1-h6 и нормы HTML5, только вот беда,
Вы и многие подобные Вам, распространяют чепуху относительно того КАК нужно верстать правильно. Настаивая на, не выдерживающей никакой критики, форме H1-H6 заголовков, не позволяющим решать насущные задачи даже в далеком 2003 году. Когда стали думать о html5.
В чем конечно Вы не виноваты. Ну разве что совсем немного в том, что прежде чем писать такой материал, не дали себе труда прочитать стандарт HTML5 в его оригинале от группы WHATWG, которая занималась им с 2004 года, и который поддреживается ВСЕМИ браузерами. А не то недоразумение которое w3c выкладывало якобы как официальный стандарт.
Доступность — это просто, Или 5 смертных грехов доступности