Как-то я совсем расслабился :( Все выходные пребывал в какой-то прострации, и лишь сожалел, что не делал ничего.

Сегодня доработал графический материал Седоны и сделал "доступной" её разметку.

Что значит "доступность"? С одной стороны, это удобство интерфейса с точки зрения позиционирования элементов, присутствия нужного функционала, эстетики (очень связано с UI/UX, хотя вообще об этом другой специалист должен думать). С другой - удобство управления сайтом для пользователя, о чём верстальщику не лишне помнить.

Возьмём такие распространённые примеры.

• Человек смотрит сайт, не пользуясь мышью.
• Человек использует скринридер на сайте.

В первом примере мыши нет. Приходится передвигаться с помощью tab & shift+tab на клавиатуре, а пробелами - нажимать кнопки и открывать ссылки. Поэтому, с точки зрения данного человека важны следующие вещи:

• Правильный порядок перехода табами. Допустим, если на первом табе я на логотипе, а следующий спускает меня в подвал - очень странное поведение. Обычно причины - неумеренность использования tabindex'ов, использование нецелевых элементов в разметке (допустим, это див, а не кнопка), и кажущиеся интерактивными элементы на самом деле не такие.

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

• Ожидаемые реакции на фокус элемента, нажатие на него. Браузеры по умолчанию ставят, допустим, outline, если элемент в фокусе. По умолчанию, это тоненькие синие обводки. Если верстальщик по приказу свыше убрал эту "гадость", переопределив стили, с точки зрения соответствия макету это хорошо, но пользователь клавиатуры не сможет определить, в каком поле формы он находится (и сама форма станет для него абсолютно бесполезна). А если нет состояния active - как узнать, что ты нажал на кнопку, если не пользуешься мышью?
• Единообразность стилей. Если это ссылка, человек должен быть уверен, что это ссылка. Не стоит заставлять пользователя "догадываться", что это за элемент и можно ли кликать на него, и что будет, если кликнешь. Этот антипаттерн вовсю используется в вирусной рекламе, и я думаю, желательно не уподоблять свои сайты всяким мошенническим продуктам.

Именно по этой причине я не уверен, должны ли быть "причины" в моём макете интерактивными. По макету - вроде нет. По смыслу - человек видит много полезной информации, а если захочет посмотреть поподробнее? По идее, не достигнет он ожидаемого.

Что будет, если человек захочет использовать скринридер? По идее, он не видит "красивости" дизайна сайта (а может, и реально не видит, например для слепых удобно использовать читалки), но ему нужно знать, о чём сайт и что нужно сделать.

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

Поэтому я и сомневаюсь по поводу интерактивности причин в Седоне: допустим, я прочитал такую-то причину ("Там есть мост дьявола!"), и я никогда не слышал о нём. И мне любопытно, что это. По идее, я попробую кликнуть на ссылку, чтобы узнать, что это за мост дьявола такой :)

Данная работа по доступности, согласно мнению авторов интенсива, необязательна и в наших реалиях довольно редка (могу ошибиться, но называлась цифра 15% - доля сайтов, где разметка доступна, а не только выполнена). На западе, мне думается, эта доля выше (потому что отношение к людям, читающим или слушающим сайты, как и к людям с ограниченными возможностями, лучше, чем у нас). Значит, человек, который понимает, зачем и как делать разметку доступной, может быть востребован на западе как специалист, и также это хорошая основа для вообще профессионала в этой области. Поэтому, я считаю нужным думать о данных критериях, несмотря на то, что они необязательны в большей (?) части реальных ТЗ на вёрстку.