Википедия:Доступность

Эта страница — эссе о Википедии Эссе поясняет некоторые особенности работы Википедии (или мнение части участников об этих особенностях). Эссе не является правилом или руководством. Вы можете обсудить эту страницу или обновить её.

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

• ВП:ДО

Цель веб-доступности - сделать веб-страницы более удобными для навигации и чтения. Хоть доступность и нужна в основном людям с ограниченными возможностями, она полезна всем пользователям.

Основой данного руководства являются Web Content Accessibility Guidelines^[англ.] версии 2.2.

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

Заголовки должны описывать содержимое разделов и должны размещаться последовательно, начиная со второго уровня (==), продолжая третьим (===), затем четвёртым (====), а после - пятым (=====) и шестым (======).

Заголовки первого уровня используются MediaWiki автоматически в названии страницы, и не должны использоваться в её теле.

Используйте псевдозаголовки только как крайнюю меру при исчерпании всех возможных уровней заголовков (включая шестой) и невозможности как-либо по-иному структузировать страницу. Создавайте псевдозаголовки используя только жирный шрифт (''' '''); не создавайте их используя точку с запятой (;) - разметку, которая должна использоваться только вместе с :, т.е. для создания списков описаний^[англ.] - или устаревший HTML-тег <big>. Не используйте псевдозаголовки для уменьшения размера таблицы "Содержание" - если эта таблица, используя тему оформления Vector, по высоте больше 1500 пикселей, используйте шаблон {{toc limit}}, но никогда не используйте в статьях __NOTOC__, даже если высота этой таблицы при использовании вышеуказанного шаблона всё равно больше 1500 пикселей.

Размещайте выносные элементы (располагающиеся слева/справа от основного текста), включая изображения, внутри разделов, к которым они принадлежат. Не размещайте изображения, относящиеся к одному разделу, в конце предыдущего.

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

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

По умолчанию большинство скринридеров игнорируют зачёркивание (<s>) и удаление текста (<del>) - из-за этого оно не должно использоваться в статьях. Не используйте его для обозначения своих возражений к каким-либо частям статьи; закомментируйте эту часть используя <!-- и -->, удалите её, или используйте один из шаблонов-предупреждений и объясните свои возражения на странице обсуждения статьи.

Скринридеры поддерживают юникод очень по-разному. Если такое устройство не распознаёт какой-либо символ, то этот символ будет либо полностью проигнорирован, либо произнесён как вопросительный знак. Из-за этого не используйте нечитаемые символы вроде ♥ (символ сердца) - используйте их иконки с соответствующим alt-текстом. Для символов, вызывающих проблемы у программ чтения с экрана, уже могут быть созданы шаблоны, заменяющие их изображениями и alt-текстом, например шаблон стрелки {{→}} - см. категорию Шаблоны:Иконки.

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

Не делайте так, что для доступа к информации надо с ней взаимодействовать - не используйте всплывающие подсказки или любой другой текст, доступный только по наведению курсора/нажатию, т.е. не используйте шаблон {{comment}} или скрытые блоки. Исключением являются аббревиатуры и их расшифровка, которые нужно оформлять через шаблон {{abbr}}.

Не используйте тег <u> для "важной" информации - используйте его только как альтернативу шаблону {{так в источнике}}, т.е. помечайте им неправильно написанные слова при цитировании, для чего он и предназначен^[3].

• ВП:РТ

Не увеличивайте и не уменьшайте самостоятельно размер текста без острой на то необходимости. Увеличенный или уменьшенный размер шрифта в общем случае должен получаться автоматически, например при использовании заголовков, шаблонов-карточек, навигационных шаблонов и т.д. Если уменьшенный или увеличенный размер шрифта необходим, его нужно задавать в относительных единицах (процентах (%), em^[англ.]), а не абсолютных (пикселях (px), пунктах (pt)) — с использованием относительных единиц при масштабрировании страницы размер текста увеличивается, при абсолютных — остаётся тем же. Избегайте уменьшенного размера шрифта там, где он уже меньше обычного — в шаблонах-карточках, навигационных шаблонах, врезках, подписях к изображениям и секциях с примечаниями. Итоговый размер шрифта ни при каких обстоятельствах не должен быть меньше 85 % от изначального размера шрифта страницы (11,9px в теме оформления Vector или 10,8px в теме Monobook).

Обратите внимание, что тег <small> должен использоваться только для дисклеймеров, условий договора, информации об авторском праве и прочих юридических формальностей, написанных мелким шрифтом (англ. fine print) или для мимоходных комментариев^[4], а не просто для оформления текста мелким шрифтом. Используйте для изменения размера шрифта шаблон {{resize}} или {{font}}.

Не используйте числовые формы вроде ½ — эти символы чаще всего не работают со скринридерами. Используйте шаблон {{дробь}} или {{дробь2}}.

При написании даты и времени используйте шаблон {{date}} — это придаёт дате и времени семантический смысл даты и времени и машиночитаемый формат, что полезно для програм, считывающих дату и время, например поисковикам.

Страницы русскоязычной Википедии указывают браузерам, что написаны на русском языке. Любой текст не на русском языке (в том числе имена собственные) должен быть обёрнут в шаблон {{lang}} с соответствующим кодом языка по ISO 639 — просто курсива ('' '') недостаточно для того, чтобы программа чтения с экрана поняла, на каком языке написан текст и переключила голос на подходящий.

Цитаты на иностранном языке должны переводиться, а их оригинальный текст надо оборачивать в шаблон {{оригинальный текст}}, с кодом языка. Если перевод цитаты по какой-то причине невозможен, текст цитаты надо оборачивать в {{lang}} или, используя для цитат просто тег <blockquote>, указать на нём атрибут lang=, с кодом языка после =.

Указывайте содержательные описания ссылок — избегайте ссылок вроде «Нажмите сюда!», «это» и тому подобных. Не используйте юникод в тексте ссылки как иконку-ссылку, вместо этого используйте иконку-картинку с заданным alt-текстом. Например, символ «→» некоторые скрин-ридеры могут не произнести или произнесённое «ссылка стрелка вправо» будет не так полезно как, например, «ссылка переход к месту в тексте» или символ и текст вместе «→ переход» «ссылка стрелка вправо переход».

• ВП:ЦВЕТ

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

Обязательный коэффициент цветовой контрастности (уровень AA) — не менее 4,5:1, для текста размером больше 18 пунктов (24 пикселя) в обычном начертании или 14 пунктов (19 пикселей) в полужирном — не менее 3:1. Проверить контрастность цветовой схемы можно с помощью шаблона {{Цветовой контраст}} или с помощью внешних инструментов (webaim.org, contrast-ratio.com). Участники могут убирать цветовые схемы, которые ухудшают контрастность для пользователей, из статей и шаблонов.

Для элементов интерфейса в Википедии используется цветовая палитра из руководства по стилю Викимедиа (англ.). Используйте эту палитру и при изменении цвета в статьях.

В навигационных шаблонах, карточках и таблицах не следует изменять стандартные цвета ссылок. Это не относится к таблицам-схемам, цвета фона ячеек которых несут информационный характер, и подписям, накладываемым на изображения. Консенсуса сообщества о применимости этой нормы руководства к шаблонам составов спортивных команд и маршрутным картам нет^[5].

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

*Первый элемент.

*Второй элемент.

*Третий элемент.

получается не один список, а три разных.

Создавайте списки в статьях только через * (маркированный список) или # (нумерованный список); не создавайте их используя <br> или текст на новой строке (2 отступа). Разметка списков описаний (; и :) должна использоваться только для создания списков описаний; не создавайте с помощью : немаркированные списки.

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

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

Не меняйте изначальный тип списка при ответе на сообщение. При ответе на сообщение в обсуждении скопируйте любую последовательность из *, : и # и просто вставьте новый символ отступа.

Когда в одной ветке ответов количество сообщений достигает 6 или 7, используйте шаблон {{outdent}} и начните новую ветку; сообщения глубже на маленьких разрешениях экрана будут отображаться по одной букве, делая их нечитаемыми.

Для вставки параграфа в список используйте шаблон {{pb}}, а не тег <br>, предназначенный для отступов внутри параграфа, и не : на новой строке, что создаёт новый список.

Для немаркированных списков, спускающихся вниз по странице, используйте шаблоны {{plainlist}} и {{немаркированный список}}. Применение этих шаблонов улучшает доступность и полноту семантического описания, когда разметка списка применяется к тому, что явно является списком, вместо переноса строк тегом <br>. Шаблоны отличаются только викиразметкой, используемой для создания списка. Обратите внимание, что, так как это шаблоны, в тексте элемента списка не может быть символа вертикальной черты (|), если он не был заменён на {{!}} или обёрнут в тег <nowiki></nowiki>, или знака равенства (=), если он не был заменён на {{=}} или обёрнут в тег <nowiki></nowiki>.

{{plainlist |
* Белая роза
* Жёлтая роза
* Розовая роза
* Красная роза
}}

{{unbulleted list
| Белая роза
| Жёлтая роза
| Розовая роза
| Красная роза
}}

Другим вариантом оформления в шаблонах, таких как нав. шаблоны и им подобных, или в любом подходящем блоке, может быть задание спискам стиля с помощью класса plainlist следующим образом:

• | класс_списков=plainlist или
• | класс_тела=plainlist.

В карточках можно использовать:

• | класс2=plainlist или
• | класс_меток=plainlist.

Для списков, идущих одной строкой, используйте шаблоны {{flatlist}} и {{hlist}}. Применение шаблонов улучшает доступность и полноту семантического описания, когда HTML-разметка корректно используется для каждого элемента списка, в отличие от простого текста с разделением через символы-маркеры, которые скринридерами зачитываются как, например, «маркер кошка маркер собака маркер лошадь маркер …»^{[комм. 1]}. Шаблоны отличаются только викиразметкой, используемой для создания списка. Обратите внимание, что когда текст передаётся в эти (или любые другие) шаблоны, символ вертикальной черты «|» следует экранировать применяя {{!}}.

{{flatlist |
* Белая роза
* Красная роза
** Розовая роза
* Жёлтая роза
}}

{{hlist
| Белая роза
| Красная роза
| Розовая роза
| Жёлтая роза
}}

Другим вариантом оформления в шаблонах, таких как нав. шаблоны и им подобных, или в любом подходящем блоке, может быть задание спискам стиля с помощью класса hlist следующим образом:

• | класс_списков=hlist или
• | класс_тела=hlist.

В карточках можно использовать:

• | класс2=hlist или
• | класс_меток=hlist.

Скрин-ридеры используют теги и атрибуты, созданные специально для таблиц, чтобы помочь пользователям ориентироваться в табличных данных.

Используйте для таблиц корректный викитекстовый синтаксис из чёрточек. Больше информации о синтаксисе, используемом для таблиц в викитексте, см. в документации на Медиавики.

Не используйте одно только визуальное оформление для придания семантического значения ячейкам (например, изменяя цвет фона).

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

Избегайте использования тегов <br> и <hr> в ячейках для визуального эффекта новой строки в ячейке — это не отражается в HTML. Скрин-ридеры зачитывают таблицу по составленному HTML — ячейку за ячейкой в строке, затем следующую строку, а визуально получившиеся от <br> и <hr> строки будут читаться по две строки за раз, без возможности перемещаться как по отдельным ячейкам.

Таблицы должны использоваться только для табличных данных, как в примере ниже.

Из данного викитекста:

{| class="wikitable"
|+ заголовок таблицы
! первый заголовок группы ячеек в таблице !! второй заголовок группы ячеек в таблице !! третий заголовок группы ячеек в таблице
|- <!--новая строка в таблице-->
| первая ячейка || вторая ячейка || третья ячейка
|-
| четвёртая ячейка || пятая ячейка || шестая ячейка
|}

Получается:

Более сложная таблица:

{| class="wikitable"
|+ заголовок таблицы
! scope="colgroup" colspan="3" | заголовок группы ячеек и их заголовков в таблице
|-
! scope="rowgroup" rowspan="2" | заголовок группы строк и их ячеек в таблице
| первая ячейка || вторая ячейка
|-
| третья ячейка || четвёртая ячейка
|}

Получается:

При использовании colspan всегда указывайте scope="colgroup"; при использовании rowspan — scope="rowgroup".

Никогда не вкладывайте таблицы в таблицы.

Избегайте использования таблиц для оформления — доступны альтернативы гораздо лучше с использованием <div>: CSS-таблицы (display: table; и display: table-cell;), inline-block (display: inline-block;), float (float: right; и float: left;) и flex (display: flex; и всё с ним связанное). При создании оформления с использованием <div> используйте по возможности стили шаблонов, а атрибут style= только для того, чтобы их не захламлять — в основном если нужно указать только один стиль.

Таблицы, которые используются исключительно для оформления, всегда должны иметь role="presentation" на {|. Если на {| этого атрибута с именно этим значением нет — добавьте его туда.

• В большинстве случаев изображения должны содержать подпись, создаваемую с использованием вики-разметки вставки изображения. Подпись должна кратко описывать смысл изображения и ключевую информацию, которую оно пытается передать.
  • Изображения и иконки, если они не чисто декоративные, должны содержать alt-атрибут, который действует как замена этого изображения для незрячих читателей, поисковых роботов и другого невизуального просмотра веб-страниц. Если добавляется дополнительный alt-текст, он должен быть сжатым или иметь отсылки к тексту в подписи изображения и к тексту статьи по соседству с изображением. Больше ссылок по теме в ^[англ.]. При использовании изображения с рамкой подпись обычно воспринимается как alt-текст.
  • Если изображение не имеет подписи или атрибута alt (или он оставлен пустым), тогда скрин-ридер зачитывает имя файла. Могут возникать нежелательные ситуации в зависимости от имени файла и языка. Например, файлы «без рамки» можно встретить в карточках и иконках. (см. также ситуации без подписи в en:MOS:CAPLENGTH)
  • Атрибут alt также нужен при использовании изображения без рамки, чтобы скрин-ридеры читали в атрибуте alt, например, «❌» (символ Юникода) как «крестик» (текст, настроенный по умолчанию в скрин-ридере) и чтобы при отключенной загрузке изображений был показан символ Юникода «❌». Не нужно убирать alt и заменять «|alt=текст» на подпись «|текст», поскольку для изображения без рамки (без «|мини») и с пустым отключающим «|link=» (без ссылки на картинку) подпись преобразовывается вики-сайтом в два атрибута у img (в alt и одинаковый же с ним текст в title), которые в некоторых случаях могут прочитываться дважды, сначала из alt, затем из title, как «текст текст» — дублирующийся текст вводит в замешательство. Всплывающая подсказка title (которая у изображения «без рамки» заполнится значением подписи) с Юникод-пиктограммой символа для изображения символа не нужна: подсказку title через подпись лучше создавать с отличающимся от Юникод-пиктограммы текстом. Например, для подсказки title к изображению крестика подпись оставить пустой или заполнить текстом «некорректно».
• Избегайте использования изображений вместо таблиц. Там, где это возможно, любые графики или диаграммы должны иметь эквивалентную информацию в тексте или должны быть хорошо описаны (в подписи или в alt), чтобы пользователи, которые не могут видеть изображение, могли получить некоторое понимание замысла именно графического представления данных.
• Избегайте расположения изображений с левой стороны, так как левый отступ, будучи постоянно на одном уровне, облегчает чтение текста.
• Избегайте в тексте отсылок на изображения как на расположенные слева или справа. В мобильной версии все изображения могут быть по центру. Скрин-ридеры зачитывают простое чередование (текст изображение текст), без уточнения, в какой они стороне. Вместо этого используйте в тексте статьи дополнительную информацию (и текст в подписи, такой, чтобы их можно было соотнести), описывающую изображение.^[6].
• Детальное описание изображения, если оно неуместно в статье, можно разместить на странице самого изображения, а в статье упомянуть, что подробное описание доступно по ссылке на файл.
• Изображения должны быть в том разделе статьи, к которому они относятся (где-либо после заголовка и после подзаголовочных информационных шаблонов), а не в самом заголовке и не в конце предыдущего раздела до заголовка.
• Не вставляйте изображения в заголовки (сюда относятся различные иконки и математическая разметка <math>).

В общем случае, стили для таблиц и других блочных элементов должны задаваться CSS-классами, а не внутристрочным атрибутом style (его специфичность сложно перекрыть). Общий CSS в MediaWiki:Common.css влияет на весь сайт и более тщательно протестирован на доступность (например, что цвета достаточно контрастны) и совместимость с используемыми браузерами. Личный CSS (в Служебная:MyPage/skin.css или в задаваемых браузером стилях) позволяет пользователям с очень специфическими потребностями изменять цветовые схемы для себя. Например, на странице ВП:CSS для слабовидящих пользователей^[англ.] предлагается высококонтрастный фон для навигационных шаблонов. Проблема здесь в том, что когда классы стилей по умолчанию, работающие на весь сайт, переназначены локально, это затрудняет выбор индивидуальной темы оформления.

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

Сайт может быть открыт в браузерах с ограниченной поддержкой или отключёнными CSS и JavaScript. Разработчики поддерживают функционирование и редактирование сайта без JavaScript. Внося изменения, которые потенциально нарушают отображение или делают что-либо скрытым, желательно проверять их дополнительно при отключенных JS или CSS, чтобы хотя бы возможность чтения всего контента статей оставалась обеспеченной.

• Доступность — статья о доступности веб-сайтов и ПО для людей с ограниченными возможностями.
• Википедия:Оформление статей — руководство по оформлению статей в Википедии.
• Описание plainlist в MOS:PLAINLIST (англ.).
• Также отдельную справку по отступам (англ.).
• О таблицах и карточках в /Infobox accessibility (англ.).
• Оформление глоссариев (англ.) для насыщенной, но придерживающейся доступности, разметки сложных списков определений (англ.) и больше проблемных примеров с ними (англ.).
• Подробные примеры scope в en:WP:DTT (англ.).
• Википедия:HTML5.

• Введение в веб-доступность от Инициативы W3C по обеспечению веб-доступности^[англ.]
• Руководство по обеспечению доступности веб-контента (WCAG) 2.0 Уполномоченный русский перевод
• Руководство по доступности веб-контента 2.1 (WCAG) (англ.) от W3C (неофициальный перевод)
• Руководство по стилю для сайтов Викимедиа § Доступность (англ.)
• noJS: mw:No-JavaScript notes, Noscript.css, mw:Help:TemplateStyles#How can I target specific skins?, mw:Manual:Coding conventions/CSS#.client-js and .client-nojs
• ГОСТ Р 52872 «Интернет-ресурсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности»