Ммм я хз даже

(чем выше, тем более общие правила, ниже более частные. Потом мб поменяю порядок)

• Основы доступности
  • Ключевые термины
  • WCAG AA
  • Важность доступности
  • Немного о с*гме-9
• Контраст
  • Картинки как фон
• Наведение (hover)
• Управление с клавиатуры и навигация
• Плохие практики (что делать нельзя)
• Двигающиеся элементы
• Для мобильных устройств

О чём не надо

• Семантических HTML (не поддерживается ftml)
• Дизайн (это не учебник по дизайну)
• Поддержка старыми браузерами (just let it go bro)
• aria- (по уровню запарности сопоставимо с WCAG AAA)
• Слух (аудио-элементы не распространены на вики)

Введение

Доступность является той вещью в веб-разработке, о которой ленивые разработчики стараются лишний раз не вспоминать. Создание дизайна для людей с особыми нуждами — это, как может показаться, лишняя морока. «Зачем стараться для 0.1% пользователей сайта?» — может задать себе вопрос такой горе-разработчик, и, казалось бы, будет прав. Но доступность покрывает не только лишь людей с особыми нуждами, но и людей с расстройствами и неврологическими заболеваниями, проблемами с мелкой моторикой, проблемами со зрением. И, конечно же, самых обычных пользователей Интернета, которые просто не хотят напрягаться для ознакомления с содержимым статьи. Уже не выглядит как 0.1%, не так ли?

К сожалению, даже осознавая это, на сайте всё также появляются дизайны, которые очень сложно назвать легкочитаемыми. Пользователи пишут CSS-код для своих статей, часто не задумываясь над тем, как это будет ощущаться прочими пользователями. Принцип «LGTM» («Looks Good To Me», рус. «И так сойдёт»), несомненно, покрывает большую часть волнующих читателя вопросов о внешнем виде статьи, но способен дать осечку на моментах, которые упустить очень легко.

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

О WCAG

WCAG (Web Content Accessibility Guidelines, рус. Руководства по доступности веб-контента) — широкий и крайне подробный перечень руководств, разрабатываемый Консорциумом Всемирной паутины для продвижения и стандартизации множества практик, направленных на улучшение доступности веб-страниц. На сегодняшний день этот документ является краеугольным камнем в создании интерфейсов не только лишь для людей с ограниченными возможностями, но и для абсолютно всех людей, заставляя разработчиков следовать надлежащим практикам.

WCAG имеет несколько уровней, упорядоченных по уровню соответствия стандартам:

• A — низший уровень. Покрывает собой самые базовые элементы пользовательского интерфейса, необходимые подавляющему большинству пользователей веб-страницы.
• AA — средний уровень. Покрывает собой наиболее широкий спектр проблем, с которыми могут столкнуться люди, испытывающие трудности в навигации и использовании веб-страниц.
• AAA — наивысший уровень. Покрывает собой крайне широкий спектр проблем, большая часть из которых являются крайне специфичными.

К огромному сожалению, большинство сайтов в интернете не соответствуют даже WCAG A. WCAG AA реализуют чаще всего лишь крупные сайты с широкой аудиторией, и даже в таком случае им не всегда удаётся полностью соответствовать всем рекомендациям. WCAG AAA, в свою очередь, реализуется исключительно на сайтах, разрабатываемых специально для людей с ограниченными возможностями или для покрытия максимально возможной аудитории, часто в ущерб дизайну (например, сайты различных правительств часто стараются соответствовать именно этому уровню).

Данное руководство нацелено на соответствие как минимум наиболее значимым критериям WCAG AA. Однако не стоит из-за этого переживать! На практике большая часть рекомендаций данного уровня просты для реализации и не требуют огромных усилий, однако значительно способны увеличить доступность веб-страницы. Ваша страница в любом случае не будет соответствовать WCAG AA полностью, и об этом в следующей главе.

О Sigma-9

Sigma-9 — это текущая визуальная тема сайта русского филиала SCP Foundation. Она по умолчанию применяется на все страницы, создаваемые на этой вики. И она, в совокупности с HTML-«скелетом» сайта, не соответствует WCAG A (хотя это в большей степени заслуга структуры страниц, перенятой с Wikidot). А потому любые её производные, как бы вы не старались и не изощрялись с CSS, не будут соответствовать WCAG AA. Моё честное мнение о Sigma-9 вы можете узнать здесь.

Разумеется, это не означает, что стремиться к совершенству смысла нет. Многие уже существующие визуальные темы и компоненты, такие как Тема BASALT, Тема Flopstyle: LITE и Компонент Sigma+ являются попыткой создать удобный и доступный интерфейс для всех пользователей и показывают, что даже в таких условиях можно добиться достойных результатов.

Ключевые концепции

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

Контрастность

/* Не только про текст, но и про элементы пользовательского интерфейса в том числе. */

Согласно WCAG 2.2, контрастность определяется как отношение относительной светлости (англ. relative luminance) более светлого цвета к более тёмному. Данное отношение вычисляется по следующей формуле:

где L₁ и L₂ — относительная светлость более светлого и более тёмного цветов соответственно. Относительная светлость каждого из цветов, в свою очередь вычисляется по следующей формуле:

где R, G и B представляют собой нормализированные (то есть в диапазоне между 0 и 1) линейные значения красного, синего и зелёного каналов sRGB соответственно. Наконец, данные цвета можно вычислить из цвета RGB, используя следующие формулы:

где R_sRGB, G_sRGB и B_sRGB — нормализованные значения соответствующего канала RGB исходного цвета.

Страшные формулы, не так ли? Не волнуйтесь, вам нет нужны их считать, так что их можете не заучивать. Информацию о том, откуда были выведены эти формулы, я предоставлять не стану, поскольку это материал на отдельную статью, к данной теме абсолютно не относящейся. Приведены формулы лишь для того, чтобы показать, как высчитывается численное значение контрастности согласно стандарту WCAG 2.2. В интернете есть множество инструментов, позволяющих высчитывать контрастность для текста автоматически, так что можете воспользоваться ими. Я пользуюсь WebAIM.

Отлично, теперь мы умеем высчитывать значение контрастности для двух отдельно взятых цветов. Можно заметить, что контрастность имеет диапазон от 1 (контраст минимален) до 21 (контраст максимален). В реальных условиях при разработке дизайна достичь соотношения больше, чем 10:1 крайне сложно. Например, стандартный текст на сайте имеет контрастность 12.63:1, несмотря на то, что цвет у шрифта практически чёрный.

Итак, для соответствия стандарту WCAG AA, ваш контент должен иметь контрастность не менее 4.5:1, за следующими исключениями:

• крупный текст — для него контрастность должна быть не менее 3:1
• декоративные элементы (элементы, не имеющие никакого функционала и не предоставляющие никакой информации) — не имеют ограничений

Крупный текст, в свою очередь, определяется либо как шрифт размером 18pt (на большинстве экранов соответствует около 24 пикселей), либо жирный шрифт размером 14pt (соответствует около 18 пикселей).

Данные правила, однако, распространяются не только на текст, как некоторые могли подумать, но на абсолютно весь контент на странице — блоки текста, кнопки, выпадающие списки, изображения и так далее.

Выше представлены примеры текста с размером 10pt, что чуть больше стандартного размера шрифта на сайте и примерно равно 13.3px. Абсолютно белый текст расположен по мере увеличения контраста на зелёном фоне различных оттенков: darkseagreen, seagreen и darkgreen.

Выше представлен пример, аналогичный предыдущему, за исключением того, что размер теперь уже полужирного шрифта равен 14pt, что примерно равно 18.6px. Сравнив две данные презентации вы легко можете заметить, насколько сильно влияет размер и толщина на читаемость текста, а также убедиться, что это не плацебо и на тусклых фонах текст всё равно является трудночитаемым.

Отдельно хочется отметить, что это касается не только текста, но и любых блоков вообще. Взгляните на следующие примеры блоков:

Для различного рода графики, требующей от пользования понимания чего-то, помимо цвета, крайне важным является контрастность с фоном, на котором элементы расположены. В обозначенном примере выше этому условию удовлетворяет только первый блок, тогда как остальные либо не имеют рамки, либо имеют, но она имеет недостаточный контраст с фоном, который по умолчанию имеет абсолютно белый цвет. В данном случае цветами рамок первого и третьего блока являются darkgreen и lightgray соответственно.

Дальнейшие рассуждения и примеры я считаю излишними, поскольку всё остальное является крайне специфичными требованиями, которые, как было сказано в начале статьи, в этой статье будут излишними за малой значимостью. Понимание контрастности решает, не буду врать, почти все проблемы с визуальным оформлением.

Наведение и фокус

Наведение и фокус — две наиболее распространённые интеракции с пользовательским интерфейсом, совершаемых мышкой.

Ссылки на использованные материалы:

• https://www.w3.org/WAI/WCAG22/Understanding/relative-luminance.html
• https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html