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

Цель веб-доступности — сделать веб-страницы более удобными для навигации и чтения. В первую очередь это помогает людям с ограниченными возможностями, но многие практики веб-доступности полезны всем читателям. Мы стремимся придерживаться Руководства по обеспечению доступности веб-контента[англ.] версии 2.1[1], на которых и основаны следующие рекомендации. Страницы, которые следуют им, проще читать и редактировать каждому.

Структура статьи

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

Стандартизация структуры статей уже является принятой практикой в Википедии, см. руководства в Википедия:Оформление статей § Структура статьи и Википедия:Оформление статей § Деление на разделы.

Заголовки

Заголовки должны описывать содержимое разделов и располагаться в последовательном порядке.

Размещайте заголовки последовательно, начиная со 2-го уровня (==), затем 3-го (===) и т. д. (1-й уровень — автоматически сгенерированный заголовок всей страницы.) Не пропускайте уровни заголовков, например, используя заголовки для выделения — это не их семантическая цель.

Примеры правильного и неправильного использования вложенных заголовков
Правильно Хаотично Пропущены уровни

[Преамбула статьи]
== Раздел == [2-го уровня]
=== Подраздел === [3]
== Раздел == [2]
=== Подраздел === [3]
==== Подподраздел ==== [4]
== Раздел ==[2]

[Преамбула статьи]
==== Раздел? ==== [4]
=== Раздел? === [3]
== Раздел? == [2]
== Раздел? == [2]
==== Раздел? ==== [4]
=== Раздел? === [3]

[Преамбула статьи]
[Пропущен раздел 2-го уровня]
=== Раздел? === [3]
== Раздел ==[2]
[Пропущен подраздел 3-го уровня]
==== Подраздел? ==== [4]
== Раздел == [2]

Не используйте разметку точки с запятой (используемой для создания списков описаний[англ.]) для создания псевдозаголовков, и старайтесь избегать использования псевдозаголовков через полужирный шрифт. Программы чтения с экрана и другие вспомогательные технологии могут использовать только заголовки, размеченные через разметку заголовка. Для уменьшения размера содержания статьи используйте шаблон {{TOC limit}}. В случае, если {{TOC limit}} не может использоваться из-за полезных заголовков в других местах статьи, использование полужирного шрифта для под-под-под-заголовков вызывает наименьшее число проблем для пользователей программ чтения с экрана. Использование псевдозаголовков должно означать, что вы исчерпали все другие варианты, и должно быть редким.

Примеры допустимого и неправильного использования псевдозаголовков и списков описаний
Допустимо Неправильно

[Преамбула статьи]
== Раздел == [2-го уровня]
=== Подраздел === [3]
'''Псевдо-заголовок'''
== Раздел == [2]
=== Подраздел === [3]
==== Подподраздел ==== [4]
;Термин
:за которым следует определение в качестве списка описаний

[Преамбула статьи]
== Раздел == [2-го уровня]
=== Подраздел === [3]
;Псевдозаголовок
== Раздел == [2]
=== Подраздел === [3]
=== <big>Подраздел</big> === [3]

Выносные элементы

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

В зависимости от разных факторов, расположение нескольких изображений друг под другом рядом с коротким текстом может привести к тому, что изображения будут отображаться как часть следующих разделов. Это не проблема доступности, так как программы чтения с экрана читают альтернативный текст (alt=[4]) каждого изображения в том месте, где оно располагается в коде страницы.

Разрешение

Статьи Википедии должны быть доступны читателям, использующим устройства с малыми разрешениями экрана или небольшими экранами. Минимальное разрешение, которое считается возможным поддерживать без отрицательного эффекта для других пользователей, — 1024×768. Все статьи должны выглядеть приемлемо в этом разрешении без чрезмерной горизонтальной прокрутки. Иногда это является проблемой в статьях с несколькими изображениями по обе стороны от текста. Хотя на низких разрешениях браузеры будут стараться растянуть абзацы по вертикали, старайтесь не добавлять изображения или другие выносные элементы по обеим сторонам от текста одновременно. Большие таблицы и изображения также могут создавать проблемы: иногда горизонтальной прокрутки не избежать, но следует попытаться переделывать чрезмерно широкие таблицы, чтобы они растягивались вертикально, а не горизонтально.

Текст

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

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

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

  1. Не используйте графические символы, такие как ♥ (символ сердца), (если скрин-ридеры не читают их или на проверку значение прочтённого отличается от подразумеваемой иконкой информации[5]), вместо этого используйте иконку-картинку с прописанной текстом информацией в атрибуте alt. Предварительно желательно проверить, что графический символ скрин-ридеры могут произнести и произносят текстом, отражающим именно нужное значение, которое легко возникает при визуальном восприятии.
  2. Для символов, вызывающих проблемы у программ чтения с экрана, уже могут быть созданы шаблоны создающие изображения и замещающий текст. Примером может служить шаблон стрелки {{→}} (см. категория «Шаблоны:Иконки»).

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

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

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

Ошибочное использование символов латинского алфавита вместо символов кириллицы или наоборот (кирлат) недопустимо.

Размер шрифта

Короткая ссылка-перенаправление

Участникам следует избегать ручного увеличения и уменьшения размера шрифта без особой необходимости[6]. Увеличенный и уменьшенный размер шрифта в основном нужно задавать автоматическими средствами, такими как заголовки разделов и таблиц или шаблоны, сделанные с особым вниманием к оформлению. Уменьшенный размер шрифта может также понадобиться больши́м таблицам, чтобы они поместились на экран.

Если увеличенный или уменьшенный размер шрифта необходим, его следует задавать в процентных единицах (например, 90%), а не в абсолютных (12.6px). Это повышает доступность для слабовидящих пользователей, использующих размер шрифта, больший стандартного. Уменьшенный размер шрифта нужно использовать умеренно. Избегайте уменьшения размера шрифта в блоках, которые уже используют уменьшенный размер, таких как шаблоны-карточки, навигационные шаблоны, врезки, подписи к изображениям и секции примечаний.

Итоговый размер шрифта ни при каких обстоятельствах не должен быть меньше 85 % размера шрифта страницы (11,9px в теме «Векторная» или 10,8px в теме «Monobook»).

Обратите внимание, что HTML-тег <small> предназначен для выделения важной информации, набираемой мелким шрифтом[англ.], поэтому его не следует использовать для чисто визуальных изменений (для этого есть шаблоны {{small}} и {{smalldiv}}).

Другие языки

Текст или отдельные слова не на русском языке должны быть обёрнуты в Шаблон:lang, который использует определённые ИСО 639 коды языков, или же шаблон конкретного языка, например Шаблон:lang-en. Шаблоны добавляют атрибут lang, благодаря чему синтезаторы речи могут произнести эту часть текста на правильном языке (например, синтезатор eSpeak NG; не все синтезаторы это поддерживают[7]).

Ссылки

  1. Указывайте содержательные описания ссылок, особенно внешних (в частности, избегайте писать «нажмите сюда!», «это» и т. д.)[8][9].
  2. Не используйте символы Unicode в тексте ссылки как иконку-ссылку, вместо этого используйте иконку-картинку с заданным alt текстом. Например, символ «→» некоторые скрин-ридеры могут не произнести или произнесённое «ссылка стрелка вправо» будет не так полезно как, например, текст «ссылка переход к месту в тексте» или символ и текст вместе «→ переход» «ссылка стрелка вправо переход».

Цветовое оформление

Короткая ссылка-перенаправление

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

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

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

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

Списки

См. также: ВП:Колонки и ВП:Оформление статей § Списки внутри статьи

Не разделяйте элементы списка, оставляя пустые строки или разрывы столбцов таблицы между ними. Это относится к элементам в списке описаний (список, создаваемый с помощью ведущего символа точки с запятой или двоеточия, что также часто можно встретить на страницах обсуждений), в упорядоченном списке или неупорядоченном списке. Списки предназначены для группировки взаимосвязанных элементов, но строкой видимая группировка на деле нарушается — пустая строка будет интерпретирована Медиавики как конец одного списка и начало нового списка. Чрезмерное количество двойных переносов строк также мешает работе скрин-ридеров, которые будут объявлять множество списков в том случае, когда предполагался только один список, и, таким образом, может вводить в заблуждение или сбивать с толку пользователей этих программ. Такое ненадлежащее форматирование также может более чем в три раза увеличить время, необходимое им для зачитывания списка.

Аналогичным образом, не меняйте тип начальных маркеров списка (символы двоеточия, звёздочки или решётки) в одном списке (для программ два уровня списка — это список и вложенный список, один список — это один уровень списка). Когда отступ делается в ответе к комментарию, который уже начинался с любого смешанного чередования двоеточий и звёздочек, а иногда и знаков решётки, необходимо скопировать последовательность, какой бы она ни была, этих использованных выше символов и добавить ещё один подобный символ. В качестве альтернативы, просто вставьте Шаблон:Outdent и начните новое обсуждение (например, новым HTML-списком первого уровня).

Например, в обсуждении, следуйте ✔ этой наилучшей практике: 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример
** Вопрос: Что вам в этом нравится? —Участник:Пример2
*** Это кажется соответствует духу Википедии. —Участник:Пример

или ✔, в немаркированном обсуждении: 

: Поддерживаю. Мне нравится эта идея. —Участник:Пример
:: Вопрос: Что вам в этом нравится? —Участник:Пример2
::: Это кажется соответствует духу Википедии. —Участник:Пример

Это ✔ тоже приемлемая практика (для подавления маркера в ответе): 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример
*: Вопрос: Что вам в этом нравится? —Участник:Пример2
*:: Это кажется соответствует духу Википедии. —Участник:Пример

Но ❌ не делайте так (происходит переключение типа первого списка с маркированного списка на список описаний): 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример
:: Вопрос: Что вам в этом нравится? —Участник:Пример2

и не ❌ так (тоже происходит переключение типа первого списка с маркированного списка на список описаний): 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример
:* Вопрос: Что вам в этом нравится? —Участник:Пример2

и не ❌ так (была оставлена пустая строка между элементами списка): 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример

** Вопрос: Что вам в этом нравится? —Участник:Пример2

и не ❌ так (перепрыгивание больше чем на один уровень списка): 

* Поддерживаю. Мне нравится эта идея. —Участник:Пример
*** Вопрос: Что вам в этом нравится? —Участник:Пример2

Это в общем случае снижает уверенность оранжевый ❌ (встретившись с не очень логичными чередованиями в викиразметке в редакторе): 

: Поддерживаю. Мне нравится эта идея. —Участник:Пример
:* Вопрос: Что вам в этом нравится? —Участник:Пример2

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

Множество абзацев внутри элементов списка

Обычная разметка списка в Медиавики (символами), к сожалению, несовместима с обычной разметкой абзацев в Медиавики (переносами строк).

Чтобы вставить несколько абзацев в элемент списка, ✔ разделите их с применением {{pb}}: 

* Это один элемент.{{pb}}Это другой абзац внутри первого элемента.
* Это другой элемент.

Это также можно сделать ✔ напрямую, используя HTML-разметку для абзацев (обратите внимание на наличие закрывающего тега </p>): 

* Это один элемент.<p>Это другой абзац внутри первого элемента.</p>
* Это другой элемент.

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

* Это один элемент.<!--
--><p>Это другой абзац внутри первого элемента.</p>
* Это другой элемент.

Этот же метод можно использовать ✔ для различных видов блоков-включений внутри элемента списка (потому что технически, элементы списка — это блочные элементы, внутри которых могут содержаться другие блочные элементы): 

* Это один элемент.<!--
--><p>Это другой абзац внутри первого элемента, и далее процитируем кого-нибудь:</p><!--
-->{{talk quote block|Представьте мир, в котором каждый житель планеты получал бы свободный доступ ко всей совокупности человеческого знания.|Джимбо}}<!--
--><p>Это последний абзац внутри всё первого же элемента списка.</p>
* Это другой элемент.

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

Не используйте ❌ переводы строк для визуальной имитации абзацев, потому что их применение семантически отличается: 

* Это один элемент.<br /> Это тот же самый абзац, с переводом строки перед этой его частью.
* Это другой элемент.

Тег перевода строки предназначен для оформления переносов внутри абзаца, например строк в блоке стихотворения или в блоке исходного кода. См. также описание Медиавики-тегов <poem> (англ.) (Расширение: Poem) и <syntaxhighlight> (англ.) (Расширение: SyntaxHighlight).

Определенно не пытайтесь ❌ использовать символ двоеточия для выравнивания уровня отступа (чтобы выглядело «как абзац» в элементе списка), поскольку (как упоминалось выше) это создает три отдельных списка (и визуально единый элемент будет на деле разорван): 

* Это один элемент.
: Это будет отдельным (не связанным с первым элементом) списком.
* Это будет третьим списком.

Или вы можете ✔ использовать один из шаблонов-списков (Template:HTML lists[англ.]), чтобы гарантировать сгруппированность материала. Это более удобно для включения блочных элементов, таких как преформатированный код, в списки: 

{{маркированный список
|1=Это один элемент:
<pre>
Это некоторый код.
</pre>
Это всё ещё внутри первого элемента.
|2=Это второй элемент.
}}

Но этот метод не используется на страницах обсуждений.

Отступы

Не злоупотребляйте тегом <blockquote></blockquote> или шаблонами, которые его используют (такими как {{blockquote}}, его другое часто используемое название {{quote}}) для достижения визуального отступа; они предназначены только прямого цитирования материала (и зачитываются скрин-ридерами как «(цитата) материал»). Необходимый незначимый отступ можно оформить задав padding-left в стилях. Отодвинуть на заданное число пробельных символов может Шаблон:Nbsp.[11]

Символ двоеточия (:) в начале строки преобразуется, проходя через синтаксический анализатор Медиавики, в тег <dd> — часть HTML списка определений (<dl>).[a] Визуальный эффект этого в большинстве веб-браузерах — отступ строки. Отступ используется, например, чтобы обозначить ответы в разветвлённых дискуссиях на страницах обсуждений. Однако, в разметке из одних только <dd> отсутствует другой элемент списка описаний — <dt> (тег термина), к которому должен относиться <dd> (тег описания/определения). Как можно увидеть при проверке кода, переданного в браузер, это приводит к нарушенному HTML (например, этот код не проходит валидацию[англ.][12]). Это не идеально для доступности, семантики и повторного использования[англ.], но в настоящее время широко применяется, несмотря на проблемы.

Пустых строк не должно быть между строками текста с отступами-двоеточиями — особенно в контенте статьи. Это интерпретируется Медиавики как конец одного списка и начало нового списка.

Если между текстом необходимо пустое место, то есть два подхода, которые дают разные результаты в скрин-ридерах:

Первый — добавить пустую строку с таким же количеством двоеточий в ней, как перед текстом в строках над и под этой пустой строкой. Такое приемлемо, когда два участника делают комментарии сразу друг под другом на одинаковом уровне отступов. Например: 

: Полностью согласен. —Участник:Пример
:
: Не убедили. Есть ли доступный источник получше? –Участник:Пример2

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

Второй подход, для случая когда оформляемый материал должен быть одним цельным комментарием (или цельным элементом списка, например, в статье), состоит в том, чтобы использовать разметку нового абзаца оставаясь на одной строке кода (см. более сложные примеры в предыдущем разделе #Множество абзацев внутри элементов списка): 

: Тут текст.{{pb}}Ещё текст. —Участник:Пример3

Для отображения математической формулы или мат. выражения на отдельной собственной строке, содержащей только формулу, рекомендуется использовалось <math display="block">1 + 1 = 2</math> вместо :<math>1 + 1 = 2</math>.

Вертикальные списки

Маркированные вертикальные списки

В маркированных вертикальных списках, не разделяйте элементы списка оставляя пустые строки между ними. Вместо этого используйте шаблон pb или HTML-разметку с тегом <p>.

Проблема с пустыми строками в том, что, когда элементы списка оказываются разделены более чем одним переводом строки, сгенерированный HTML список закончится перед (этим не одинарным) переводом строки и другой HTML список будет начат после этого перевода строки. То, что видно как один список, в действительности разбивается на несколько меньших списков для тех кто использует скрин-ридеры. Например, при следующем коде: 

* Белая роза
* Жёлтая роза

* Розовая роза

* Красная роза

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

  • Белая роза
  • Жёлтая роза
  • Розовая роза
  • Красная роза

этот перечень будет зачитан скрин-ридерами как «список из двух элементов: (маркер) Белая роза, (маркер) Жёлтая роза, конец списка. Список из одного элемента: (маркер) Розовая роза, конец списка. Список из одного элемента: (маркер) Красная роза, конец списка.» (на самом деле в Википедии «маркер» не зачитается, так как вместо текстового символа в ней картинка маркера; маркеры может начать зачитывать если, например в шаблоне, вид маркера специально был переопределён или вне Википедии)

Не разделяйте элементы списка через тег перевода строки <br />. Используйте {{plainlist}} / {{unbulleted list}}, если список должен остаться вертикальным; или рассмотрите возможность применения {{flatlist}} / {{hlist}}, если этот список может лучше отображаться будучи горизонтальным (внутристрочным), как описано в следующих двух разделах.

Немаркированные вертикальные списки

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

Пример plainlist
Викитекст Отображается как 
{{plainlist |
* Белая роза
* Жёлтая роза
* Розовая роза
* Красная роза
}}
  • Белая роза
  • Жёлтая роза
  • Розовая роза
  • Красная роза
Пример unbulleted list
Викитекст Отображается как 
{{unbulleted list
| Белая роза
| Жёлтая роза
| Розовая роза
| Красная роза
}}
  • Белая роза
  • Жёлтая роза
  • Розовая роза
  • Красная роза

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

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

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

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

Горизонтальные списки

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

Пример flatlist
Викитекст Отображается как 
{{flatlist |
* Белая роза
* Красная роза
** Розовая роза
* Жёлтая роза
}}
  • Белая роза
  • Красная роза
    • Розовая роза
  • Жёлтая роза
Пример hlist
Викитекст Отображается как 
{{hlist
| Белая роза
| Красная роза
| Розовая роза
| Жёлтая роза
}}
  • Белая роза
  • Красная роза
  • Розовая роза
  • Жёлтая роза

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

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

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

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

Заголовки списков

См. также: Псевдозаголовок

Ненадлежащее использование символа точки с запятой, чтобы выделить жирным «фейковый заголовок» перед списком (рис. 1), на деле создает разрыв списка и даже хуже. Строка с символом точки с запятой будет списком описаний (dl) из одного элемента (термина), без контента его описаний (значений), (зачитается как «список определений из одного элемента, перечисление» или просто «список из одного элемента, перечисление»), после этого второй список (зачитается как «список из шести элементов, перечисление» — при этом сложно понять, что это продолжение одного списка, а не два разных).

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

❌ 1. Некорректно 

; Благородные газы
* Гелий
* Неон
* Аргон
* Криптон
* Ксенон
* Радон

✔ 2. Заголовком 

== Благородные газы ==
* Гелий
* Неон
* Аргон
* Криптон
* Ксенон
* Радон

Таблицы

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

Используйте корректный викитабличный синтаксис из чёрточек, чтобы воспользоваться преимуществами всех имеющихся возможностей. Больше информации о специальном синтаксисе, используемом для таблиц, см. в документации Справка: Таблицы на Медиавики. Не используйте одно только визуальное оформление, через CSS (сайта/шаблона) или стили (например, атрибут style, прописанный для ячейки или переданный через шаблон), для придания семантического значения ячейкам (например, изменяя цвет фона).

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

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

Таблицы с данными

{|
|+ [текст заголовка]
|-
! scope="col" | [заголовок столбца 1]
! scope="col" | [заголовок столбца 2]
! scope="col" | [заголовок столбца 3]
|-
! scope="row" | [заголовок строки 1]
| [обычная ячейка 1-2] || [обычная ячейка 1-3]
|-
! scope="row" | [заголовок строки 2]
| [обычная ячейка 2-2] || [обычная ячейка 2-3]
…
|}
Заголовок таблицы (|+)
Заголовок таблицы — это название для всей таблицы, описывающее её суть[14] (также может зачитываться как «подпись таблицы» от caption). Таблицы с данными всегда должны содержать заголовок таблицы.
Заголовки строк и столбцов ( ! )
Как и заголовок таблицы, эти заголовки помогают представлять посетителю информацию в логически структурированном виде[15]. Заголовки помогают скрин-ридерам отразить заголовочную информацию, описывающую выбранную ячейку данных. Например, информация из заголовочной ячейки столбца зачитывается каждой раз перед зачитыванием данных обычной ячейки (смещение вниз-вверх по столбцу зачитывает заголовки строк, смещение по строке зачитывает заголовки столбцов), также информация о заголовках может индивидуально задаваться атрибутом header[англ.][16]. Поскольку заголовок столбца/строки может зачитываться каждый раз перед зачитыванием данных в каждой посещённой ячейке, когда используются возможности режима навигации по таблице в скрин-ридерах, необходимо, чтобы заголовки столбцов/строк уникально идентифицировали столбец/строку соответственно[17].
Scope для заголовков (! scope="col" | и ! scope="row" |)
Атрибут scope (область действия) чётко идентифицирует заголовок как заголовок строки или заголовок столбца. Это позволяет правильно соотносить ячейки данных с: заголовками; подзаголовками, сгруппированными одним заголовком; и, при необходимости, ячейками, не оформленными как заголовочные[18].

Таблицы-макеты

Избегайте использования таблиц для визуального позиционирования нетабличного контента. Таблицы с данными предоставляют дополнительную информацию и методы навигации, которые могут сбивать с толку, когда в контенте отсутствуют логические соотношения строк и столбцов. Вместо этого используйте семантически подходящие элементы или <div>'ы, свойства в style.

При использовании таблицы для позиционирования нетабличного контента помогайте скрин-ридерам идентифицировать её как таблицу-макет, а не таблицу данных. Задайте атрибут role="presentation" на саму таблицу и не добавляйте атрибутов summary. Не используйте связанных с тегами <caption> или <th> элементов внутри таблицы или внутри любых вложенных таблиц. В табличной викиразметке это означает, что не должно быть использований |+ или ! в начале строк. Убедитесь в корректности порядка, в котором контент будет зачитан. Визуальные эффекты, такие как выравнивание по центру или выделение жирным, могут быть созданы с применением CSS или семантических элементов. Например: 

{| role="presentation" class="toccolors" style="width:94%"
|-
| colspan="2" style="text-align: center; background-color: #ccf;" | <strong>Выделен важный текст</strong>
|-
| Зачитываемый || текст
|-
| в последовательном || порядке.
|}

Изображения

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

Стили и варианты разметки

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

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

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

См. также

Примечания

Комментарии

  1. ↑ HTML список определений (description list ) - то же самое что и структура <dl><dt>…</dt><dd>…</dd></dl>[1]. В разных версиях спецификации HTML назывался definition lists и association lists.

Источники

  1. ↑ Предыдущая версия, WCAG 2.0, — действующий стандарт ISO/IEC 40500:2012. Для сравнения см. добавленные руководства в версии 2.1.
  2. ↑ См. foundation:Resolution:Nondiscrimination (англ.)
  3. ↑ Nupedia.com Editorial Policy Guidelines. Version 3.29 (July 25, 2000) (англ.). Nupedia.com. Архивировано из оригинала 17 августа 2000 года.
  4. ↑ В Визуальном редакторе поле «Альтернативный текст» доступно при нажатии на изображение и кнопку «Править». Замещающий текст также может быть написан для шаблонов, других медиафайлов.
  5. ↑ F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information (англ.). Techniques for WCAG 2.0. W3C. Дата обращения: 8 августа 2022. (по разделу Tests сначала оценивается информация, затем проверяется не выдаётся ли отличающегося значения. Полностью символы не запрещаются.)
  6. ↑ Тем не менее, в общем случае не следует удалять любые пользовательские изменения размера шрифта при помощи бота.
  7. ↑ например, Windows Speech API потребуются языковые пакеты для Windows
  8. ↑ G91: Providing link text that describes the purpose of a link. Techniques for WCAG 2.0. World Wide Web Consortium. Дата обращения: 1 января 2011.
  9. ↑ F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text. Techniques for WCAG 2.0. World Wide Web Consortium. Дата обращения: 1 января 2011.
  10. ↑ Википедия:Голосования/Цвета ссылок
  11. ↑ При необходимости также можно перенести из англовики шаблоны, такие как en:Template:block indent (англ.) для многострочного контента или en:Template:in5 (англ.) для одиночных строк
  12. ↑ Markup Validation Service: Check the markup (HTML, XHTML, …) of Web documents. validator.w3.org. World Wide Web Consortium (2017). Дата обращения: 13 декабря 2017. Отчёт валидатора об ошибках содержит «Error: Element dl is missing a required child element.»
  13. ↑ в англовики используется интерпункт, который не зачитывается; в обычных списках Википедии маркер заменён на картинку и тоже не зачитывается; однако в отличающихся шаблонах рувики использован символ маркера и он зачитывается
  14. ↑ H39: Using caption elements to associate data table captions with data tables (англ.). W3C. Дата обращения: 10 августа 2022.
  15. ↑ H51: Using table markup to present tabular information (англ.). W3C. Дата обращения: 10 августа 2022.
  16. ↑ Table cells: The TH and TD elements (англ.). Techniques for WCAG 2.0. W3C. Дата обращения: 1 января 2011.
  17. ↑ Tables with JAWS (англ.). Freedom Scientific. Дата обращения: 18 февраля 2021.
  18. ↑ H63: Using the scope attribute to associate header cells and data cells in data tables (англ.). Techniques for WCAG 2.0. W3C. Дата обращения: 9 августа 2022.
  19. ↑ Technique: Referring to page content by its position от Harvard community

Ссылки