stringtranslate.com

Википедия:Руководство по стилю/Доступность

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

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

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

Стандартизация уже вошла в привычку в Википедии, поэтому рекомендации, которым нужно следовать, просты: Wikipedia:Manual of Style/Layout и Wikipedia:Manual of Style/Lead section § Elements .

Заголовки

  • MOS:GOODHEAD
  • MOS: ПЛОХОЙ
  • MOS:ПРОБЕЛ ПОД ЗАГОЛОВКОМ

Заголовки должны быть описательными и располагаться в последовательном порядке, как определено в Руководстве по стилю .

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

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

  • MOS:ПСЕВДОГОЛОВКА
  • MOS:ФЕЙКХЕДИНГ

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

Плавающие элементы

  • MOS: ДОСТУП#ПЛАВАЮЩИЙ

В викикоде плавающие элементы (включая изображения) следует размещать внутри раздела, к которому они принадлежат; не размещайте изображение в конце предыдущего раздела. (В зависимости от платформы «наложение» нескольких изображений рядом с относительно небольшим объемом текста может привести к перемещению определенного изображения в более поздний раздел. Однако это не проблема доступности, поскольку программы чтения с экрана всегда считывают каждое изображение alt=в точке, где оно закодировано ).

Разрешение экрана

  • МОС:РЕСОЛ

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

Текст

  • MOS:НОСТРАЙК
  • MOS:НЕТ СИМВОЛОВ

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

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

Программы чтения с экрана имеют широко варьирующуюся поддержку символов за пределами Latin-1 и Windows-1252 , и небезопасно предполагать, как будет произноситься любой заданный символ в этих диапазонах. Если они не распознаются программой чтения с экрана или синтезатором речи, они могут произноситься как вопросительный знак или вообще не выводиться из речевого вывода.

  1. Обеспечить транслитерацию для всего текста в нелатинской системе письма, где нелатинский символ важен в исходном контексте, например, имена, места, вещи и т. д. Эта функция доступна в шаблонах, которые обозначают языки с нелатинской графикой, а также может быть найдена в таких шаблонах, как {{ Transliteration }} ; эти шаблоны также имеют другие преимущества доступности (см. раздел «Другие языки» ниже).
  2. Не используйте потенциально непроизносимые символы, такие как ♥ ( символ сердца ); вместо этого используйте изображения с альтернативным текстом. [1]
  3. Символы, которые вызывают проблемы у экранных ридеров, могут уже иметь шаблоны, созданные для создания изображения и альтернативного текста. Примером может служить шаблон кинжала {{ }} (см. Категория: Шаблоны вставки одного изображения для получения дополнительной информации). [ требуется обновление ]

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

  • MOS:NOHOVER
  • MOS:NOTOOLTIPS

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

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

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

  • МОП:МАЛЫЙ
  • MOS:SMALLTEXT

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

Избегайте использования шрифтов меньшего размера в элементах страницы, которые уже используют шрифт меньшего размера, например, большая часть текста в информационных полях , навигационных полях и разделах ссылок . [b] Это означает, что <small>...</small>теги и шаблоны, такие как и , не должны применяться к обычному тексту в этих элементах. Ни в коем случае результирующий размер шрифта любого текста не должен быть ниже 85% от размера шрифта страницы по умолчанию. Обратите внимание, что тег HTML имеет семантическое значение мелкого шрифта или дополнительных комментариев; [2] не используйте его для стилистических изменений.{{small}}{{smalldiv}}<small>...</small>

Дроби

За исключением исключений, описанных в WP:Manual of Style/Dates and numbers § Fractions , не используйте символы предварительно составленных дробей , такие как ½ (устаревшая разметка: &frac12;или &#189;). Это связано с тем, что некоторые предварительно составленные дроби могут не работать с программами чтения с экрана или могут быть неоправданно сложными для чтения читателями с ослабленным зрением. Используйте which создает дроби в форме 34 . (Для научных и математических текстов используйте which создает дроби в форме {{Fraction}}{{sfrac}}3/4 .)

Другие языки

  • MOS:OTHERLANG
  • МОС:ЯЗЫК
  • WP:IETF

По умолчанию статьи английской Википедии явно указывают браузеру, что они написаны полностью на английском языке. Текст на языке, отличном от английского, должен быть помечен как таковой, обычно с помощью шаблона типа (или одного из его производных). Это оборачивает текст в языковой тег IETF , который определяет язык и сценарий. Например:{{lang}}

Обоснование : Помимо прочего, указание языка текста {{lang}}позволяет синтезаторам речи выбирать голос, способный правильно озвучить текст. [3]

Языковые теги IETF определяют язык текста в соответствии со спецификацией ISO 639 , а также то, какой алфавит используется для написания языка:

Не указывая скрипт, теги IETF предполагают наиболее распространенный скрипт, используемый для записи данного языка. Поэтому транслитерации должны указывать использование латинского скрипта, добавляя его -Latnк языковому коду или используя эквивалентный шаблон. В Википедии есть ряд шаблонов, специфичных для языка, таких как и , которые предоставляют редакторам специфичные для языка функции, такие как возможность легко отображать несколько транслитераций с помощью одного шаблона. Не у каждого языка есть свой шаблон, но использование одного может быть полезным для оптимизации викитекста вместо загромождения абзацев примерами и .{{transliteration}}{{lang-zh}}{{nihongo}}{{lang}}{{transliteration}}

Обычно нет необходимости указывать курсив в дополнение к шаблонам или , которые по умолчанию выделяют курсивом текст с использованием латинского алфавита. Если текст не должен быть выделен курсивом, например, названия мест или людей, можно добавить параметр. [c] Как указано в MOS:NON-ENG , текст с использованием нелатинского шрифта почти никогда не следует выделять курсивом или полужирным шрифтом.{{lang}}{{[[Template:lang-xx|lang-xx]]}}|italic=unset

Фонетические транскрипции или руководства по произношению должны использовать , или другой подходящий шаблон. используется для праиндоевропейского .{{IPA}}{{respell}}{{PIE}}

Ссылки

  1. Создавайте хорошие описания ссылок, особенно для внешних ссылок (избегайте « нажмите здесь !», «это»). [4] [5]
  2. Не используйте символы Unicode в качестве иконок; вместо этого используйте иконку с альтернативным текстом. Например, такой символ, как "→", не может быть воспроизведен в полезный текст некоторыми программами чтения с экрана .
  3. Используйте Шаблон:Видимые якоря , где выделение пункта назначения помогает слабовидящим людям легче находить целевую ссылку на странице назначения.

Цвет

  • МОС:ЦВЕТ
  • МОС:ЦВЕТ
  • МОС:КОНТРАСТ
Два скриншота одного и того же высокотекстового пользовательского интерфейса. Верхний использует красный, зеленый и синий; нижний использует почти тот же цвет для красного и зеленого, так что красный текст становится почти невидимым на зеленом фоне.
Пара снимков экрана, демонстрирующих влияние дальтонизма на восприятие красного и зеленого цветов на разборчивость

Цвета чаще всего встречаются в статьях Википедии в шаблонах и таблицах . Для технической помощи по использованию цветов см. Help:Using colors .

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

Коэффициенты контрастности безопасных веб-цветов по сравнению с черным (верхний ряд) и белым (нижний ряд) или наоборот, с контурами 3 (красный), 4,5 (зеленый) и 7 (синий)

Блочные элементы

Списки

  • MOS:INDENTMIX

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

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

Примеры:

проверятьYВ ходе обсуждения сделайте следующее:

* Поддерживаю. Мне нравится эта идея. —User:Example ** Вопрос: Что вам в ней нравится? —User:Example2 *** Кажется, она соответствует духу Википедии. —User:Example

проверятьYИли, в немаркированном обсуждении, это,

: Поддерживаю. Мне нравится эта идея. —User:Example :: Вопрос: Что вам в ней нравится? —User:Example2 ::: Кажется, она соответствует духу Википедии. —User:Example

проверятьYПодавление маркера в ответе также приемлемо,

* Поддерживаю. Мне нравится эта идея. —User:Example *: Вопрос: Что вам в ней нравится? —User:Example2 *:: Кажется, она соответствует духу Википедии. —User:Example

☒NНо не переключайтесь со списка маркеров на список описаний,

* Поддержка. Мне нравится эта идея. —User:Example :: Вопрос: Что вам в ней нравится? —User:Example2

☒Nни переключиться с маркированного списка на смешанный тип,

* Поддерживаю. Мне нравится эта идея. —User:Example :* Вопрос: Что вам в ней нравится? —User:Example2

☒NОставлять пустые строки между пунктами списка, как правило, является плохой практикой.

* Поддержка. Мне нравится эта идея. —User:Example** Вопрос: Что вам в нем нравится? —User:Example2

☒NКак и прыжок более чем на один уровень,

* Поддержка. Мне нравится эта идея. —User:Example *** Вопрос: Что вам в ней нравится? —User:Example2

☒NЭто, как правило, не рекомендуется:

: Поддерживаю. Мне нравится эта идея. —User:Example :* Вопрос: Что вам в ней нравится? —User:Example2

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

Несколько абзацев в элементах списка

  • MOS:PARABR

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

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

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

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

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

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

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

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

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

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

См. также WP:Manual of Style/Glossaries для получения содержательной, но доступной разметки сложных списков описаний/определений/ассоциаций .

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

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

Теги переноса строк используются для переноса внутри абзаца, например, строк стихотворения или блока исходного кода. См. также теги <poem>и <syntaxhighlight>MediaWiki.

☒NОпределенно не пытайтесь использовать двоеточие для соответствия уровню отступа, поскольку (как упоминалось выше) это создает три отдельных списка:

* Это один пункт. : Это совершенно отдельный список. * Это третий список.

проверятьYВ качестве альтернативы вы можете использовать один из шаблонов списков HTML , чтобы гарантировать группировку. Это наиболее полезно для включения блочных элементов, таких как форматированный код, в списки:

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

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

Отступ

  • MOS:INDENTGAP

Доступный подход к отступам — это шаблон для многострочного контента; он использует CSS для отступа материала. Для отдельных строк существует множество шаблонов, включая (универсальный шаблон с одинаковым названием на всех сайтах Wikimedia); они делают отступы с помощью различных пробельных символов. Не злоупотребляйте элементом или шаблонами, которые его используют (например, ), для визуального отступа; они предназначены только для непосредственно цитируемого материала. Универсальная альтернатива была создана для таких случаев без кавычек, поэтому, пожалуйста, используйте ее.{{block indent}}{{in5}}<blockquote>...</blockquote>{{blockquote}}{{block indent}}

Двоеточие ( :) в начале строки отмечает эту строку в синтаксическом анализаторе MediaWiki как часть списка описаний<dd> HTML ( ). [d] Визуальный эффект в большинстве веб-браузеров заключается в отступе строки. Это используется, например, для обозначения ответов в цепочке обсуждений на страницах обсуждения. Однако в этой разметке отсутствует обязательный элемент (term) списка описаний, к которому относится (description/definition). Как можно увидеть, проверив код, отправленный в браузер, это приводит к повреждению HTML (т. е. он не проходит проверку [6] ). Результатом является то, что вспомогательные технологии, такие как программы чтения с экрана, объявляют список описаний, которого не существует, что сбивает с толку любого посетителя, не привыкшего к поврежденной разметке Википедии. Это не идеально для доступности, семантики или повторного использования , но в настоящее время широко используется, несмотря на проблемы, которые это вызывает у пользователей программ чтения с экрана.<dl><dt><dd>

Пустые строки не должны размещаться между строками текста с отступом в виде двоеточия  – особенно в содержании статьи. Это интерпретируется программным обеспечением как обозначение конца списка и начала нового.

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

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

: Я полностью согласен. —User:Example:: Я не убежден. Есть ли лучший источник? –User:Example2

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

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

: Текст здесь.{{pb}}Больше текста. —User:Example3

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

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

Маркированные вертикальные списки
  • MOS:СПИСОКGAP

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

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

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

программа частично подавляет межстрочные интервалы, поэтому это выглядит так:

но будет прочитан программой чтения с экрана как: «Список из 2 элементов: (маркер) Белая роза, (маркер) Желтая роза, конец списка. Список из 1 элемента: (маркер) Розовая роза, конец списка. Список из 1 элемента: (маркер) Красная роза, конец списка».

  • МОС:НОБР
  • MOS:БЕЗ ПЕРЕРЫВОВ

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

Немаркированные вертикальные списки
  • МОС:ПЛИСТ
  • МОС:ВЛИСТ

Для немаркированных списков, идущих вниз по странице, доступны шаблоны {{ plainlist }} и {{ unbulleted list }}<br /> , чтобы улучшить доступность и семантическую значимость путем разметки того, что явно является списком, а не включения переносов строк, которые не следует использовать — см. выше. Они отличаются только вики-разметкой, используемой для создания списка. Обратите внимание, что поскольку это шаблоны, текст каждого элемента списка не может содержать символ вертикальной черты ( |), если он не заменен {{!}}или не содержится внутри <nowiki>...</nowiki>тегов. Аналогично он не может содержать знак равенства ( =), если он не заменен {{=}}или не содержится внутри <nowiki>...</nowiki>, хотя вы можете обойти это, назвав параметры ( |1=, |2=и т. д.). Если это становится слишком хлопотным, вы можете использовать вариант с {{ endplainlist }} вместо этого. Внутри ссылки вам может понадобиться {{ unbulleted list citebundle }} вместо этого.

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

В инфобоксах можно использовать следующее:

См. также WP:Руководство по стилю/списки § Немаркированные списки .

Другие вертикальные списки

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

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

  • MOS: HLIST

Для списков, расположенных на странице, и в отдельных строках в инфобоксах и других таблицах, шаблоны и (для "горизонтального списка") доступны для улучшения доступности и семантической значимости. Эта функция использует правильную HTML-разметку для каждого элемента списка, а не включает символы маркеров, которые, например, считываются (например, "точка кошка точка собака точка лошадь точка...") вспомогательным программным обеспечением, используемым незрячими людьми. Шаблоны отличаются только вики-разметкой, используемой для создания списка. Обратите внимание, что при передаче текста в эти (или любые другие) шаблоны символ вертикальной черты ( ) должен быть экранирован с помощью .{{flatlist}}{{hlist}}|{{!}}

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

В инфобоксах :

может быть использован.

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

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

Вместо этого используйте разметку заголовков (рисунок 2).

☒N1. Неверно

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

проверятьY2. Заголовок

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

Таблицы

  • МОС:DTAB

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

Используйте правильный синтаксис wikitable pipe, чтобы воспользоваться всеми доступными функциями. См. mw:Help:Tables для получения дополнительной информации о специальном синтаксисе, используемом для таблиц. Не используйте исключительно форматирование, как из CSS, так и из жестко закодированных стилей, для создания семантического значения (например, изменение цвета фона).

Многие навигационные окна , шаблоны серий и информационные окна создаются с использованием таблиц.

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

Таблицы данных

Викитекст:

{| class = "wikitable" |+ caption text |- ! scope = "col" | заголовок столбца 1 ! scope = "col" | заголовок столбца 2 ! scope = "col" | заголовок столбца 3 |- ! scope = "row" | заголовок строки 1 | данные 1 || данные 2 |- ! scope = "row" | заголовок строки 2 | данные 3 || данные 4 |}           

Производит:

Подпись ( |+)
Подпись — это название таблицы, описывающее ее характер. [7] Таблицы данных всегда должны включать подпись.
Заголовки строк и столбцов (  ! )
Как и заголовок, они помогают посетителям представить информацию в логической структуре. [8] Заголовки помогают программам чтения с экрана отображать информацию заголовка о ячейках данных. Например, информация заголовка озвучивается до данных ячейки, или информация заголовка предоставляется по запросу. [9] Поскольку заголовок строки и заголовок столбца могут быть озвучены до данных в каждой ячейке при навигации в режиме таблицы, необходимо, чтобы заголовки столбцов и заголовки строк однозначно идентифицировали столбец и строку соответственно. [10]
Область действия заголовков ( ! scope="col" |и ! scope="row" |)
Это четко определяет ячейку как заголовок для столбца или строки. Используйте, ! scope="colgroup" colspan="2" |если заголовок столбца охватывает группу столбцов и ! scope="rowgroup" rowspan="2" |если заголовок строки охватывает группу строк, при необходимости регулируя количество охватов. Теперь заголовки можно связать с соответствующими ячейками. [11]

Википедия:Руководство по стилю/Доступность/Учебник по таблицам данных содержит подробные требования о:

  1. Правильные подписи к таблицам
  2. Правильная структура заголовков
  3. Сложные таблицы
  4. Изображения и цвет
  5. Избегание вложенных таблиц

Макетные таблицы

  • МОС:LTAB

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

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

{| role = "presentation" |- | colspan = "2" style = "text-align: center; background-color: #ccf;" | < strong > Важный текст </ strong > |- | Быстрая || коричневая лиса |- | перепрыгивает || через ленивую собаку. |}     

Изображения

  • МОС:ACCIM
Отображение фрагментированной галереи изображений на мобильном устройстве

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

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

Размещение изображения

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

Это руководство включает альтернативный текст для уравнений в формате LaTeX в <math>режиме. См. Wikipedia:Manual of Style/Mathematics § Alt text

Не вставляйте изображения в заголовки; это касается иконок и <math>разметки. Это может привести к разрыву ссылок на разделы и вызвать другие проблемы.

Иконки

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

Анимации, видео и аудиоконтент

  • МОС:АНИМАЦИЯ

Анимации

Чтобы быть доступной, анимация ( GIF – Graphics Interchange Format) должна:

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

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

Видео

Скрытые субтитры (CC) и субтитры — это процессы отображения текста в аудио- и видеофайлах в Википедии через c:Commons:Timed Text. Оба обычно используются как транскрипция аудиочасти программы по мере ее появления (дословно или в отредактированной форме), иногда включая описания неречевых элементов. Это помогает людям с нарушениями слуха и глухим и дает возможность неносителям языка понимать содержимое мультимедийного файла.

Субтитры предоставляют текстовую версию всей важной информации, передаваемой через звук. Они могут включать диалог, звуки (естественные и искусственные), обстановку и фон, действия и выражения людей и животных, текст или графику. [15] Следует обратиться к руководствам за пределами Википедии, чтобы узнать, как создавать субтитры. [16]

Аудио

Субтитры для речи, текстов песен, диалогов и т. д. [17] можно легко добавлять к аудиофайлам. Метод аналогичен методу для видео: :commons:Commons:Video § Субтитры и скрытые субтитры.

Параметры стилей и разметки

  • MOS:ОТКЛОНЕНИЯ

Лучшая практика: вики-разметка и классы CSS

В общем случае стили для таблиц и других элементов уровня блока следует задавать с помощью классов CSS, а не встроенных атрибутов стилей. CSS для всего сайта в MediaWiki:Common.css более тщательно тестируется для обеспечения доступности (например, достаточного цветового контраста) и совместимости с широким спектром браузеров. Более того, он позволяет пользователям с очень специфическими потребностями изменять цветовые схемы в собственной таблице стилей ( Special:MyPage/skin.css или таблице стилей своего браузера). Например, таблица стилей в Wikipedia:Style tables для пользователей с ослабленным зрением обеспечивает более контрастные фоны для навигационных окон . Проблема в том, что когда переопределяются классы для всего сайта по умолчанию, это значительно усложняет для отдельного человека выбор собственной темы.

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

Что касается доступности, отклонения от стандартных соглашений могут быть допущены, если они доступны. Участники проекта доступности обеспечили доступность стиля по умолчанию. Если какой-либо шаблон или конкретная цветовая схема отклоняется от стандарта, его авторы должны убедиться, что он соответствует требованиям доступности, таким как обеспечение достаточного цветового контраста . Например, информационное окно и навигационное окно, относящиеся к спортивной команде, могут использовать желто-красную цветовую схему, чтобы соответствовать цветам ливреи команды. В этом случае темно-красные ссылки на светло-желтом фоне обеспечивают достаточный цветовой контраст и, таким образом, будут доступны, в то время как белые на желтом или черные на красном — нет.

В целом, статьи должны использовать вики-разметку вместо ограниченного набора разрешенных элементов HTML. В частности, не используйте элементы стиля HTML <i>и <b>для форматирования текста; предпочтительнее использовать вики-разметку ''или '''для чисто типографского курсива и полужирного начертания соответственно, а также использовать шаблоны или элементы семантической разметки для более значимых различий. <font>Элемент также следует избегать в тексте статьи; используйте , , , и другие наши шаблоны семантической разметки по мере необходимости, чтобы подчеркнуть логические различия, а не только визуальные. Используйте шаблоны {{ subst:resize }}, {{ subst:small }} и {{ subst:Large }} для изменения размера шрифта, а не задавайте его явно с помощью атрибутов стиля CSS, таких как или устаревших элементов стиля, таких как . Конечно, есть естественные исключения; например, может быть полезно использовать элемент для обозначения чего-то вроде ссылки-примера, которая на самом деле не кликабельна, но подчеркивание в остальном обычно не используется в тексте статьи .{{em}}{{code}}{{var}}font-size<big /><u>...</u>

Пользователи с ограниченной поддержкой CSS или JavaScript

  • MOS:ПРЕКОЛЛАПС

Автоматически свернутые (предварительно свернутые) элементы не следует использовать для скрытия контента в основном тексте статьи.

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

Чтобы учесть эти соображения, протестируйте любые потенциально разрушительные изменения с отключенным JavaScript или CSS. В Firefox или Chrome это можно легко сделать с помощью расширения Web Developer; JavaScript можно отключить в других браузерах на экране «Параметры». Будьте особенно осторожны со встроенными эффектами CSS, которые не поддерживаются несколькими браузерами, носителями и версиями XHTML.

В 2016 году около 7% посетителей Википедии не запрашивали ресурсы JavaScript. [18] [ требуется обновление ]

Смотрите также

Примечания

  1. ^ Предыдущая версия, WCAG 2.0, также является стандартом ISO , ISO/IEC 40500:2012.
  2. ^ Общий размер шрифта для инфобоксов и навигационных блоков составляет 88% от размера по умолчанию страницы. Общий размер шрифта для справочных разделов составляет 90% от размера по умолчанию страницы. Дополнительные значения можно найти в MediaWiki:Common.css .
  3. ^ Более подробную информацию об этом использовании можно найти в документации шаблона для .{{lang}}
  4. ^ Списки описаний HTML раньше назывались списками определений и списками ассоциаций . Структура та же самая; только терминология изменилась между версиями спецификации HTML.<dl><dt>...</dt><dd>...</dd></dl>

Ссылки

  1. ^ "F26: Невыполнение критерия успеха 1.3.3 из-за использования только графического символа для передачи информации". Методики для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Получено 29 декабря 2011 г.
  2. ^ "4.5.4 Маленький элемент". HTML Living Standard . Рабочая группа по технологиям веб-гипертекстовых приложений . 24 декабря 2023 г. Получено 29 декабря 2023 г.
  3. ^ "H58: Использование языковых атрибутов для определения изменений в человеческом языке". Методы для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Получено 29 декабря 2023 г.Уровень доступности: АА.
  4. ^ "G91: Предоставление текста ссылки, описывающего назначение ссылки". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.
  5. ^ "F84: Невыполнение критерия успеха 2.4.9 из-за использования неспецифической ссылки, такой как "нажмите здесь" или "еще" без механизма изменения текста ссылки на конкретный текст". Методики для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.
  6. ^ «Служба проверки разметки: проверка разметки (HTML, XHTML, ...) веб-документов». validator.w3.org . v1.3+hg. World Wide Web Consortium . 2017 . Получено 13 декабря 2017 г. .Сообщается об ошибке валидатора: « Ошибка : в элементе dlотсутствует требуемый дочерний элемент».
  7. ^ "H39: Использование элементов подписей для связывания подписей таблиц данных с таблицами данных". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.Уровень доступности: А.
  8. ^ "H51: Использование табличной разметки для представления табличной информации". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.
  9. ^ "4.9.10 Элемент th". HTML Living Standard . Рабочая группа по технологиям веб-гипертекстовых приложений . 24 декабря 2023 г. Получено 29 декабря 2023 г.
  10. ^ "HTML-таблицы с JAWS". FreedomScientific.com . Freedom Scientific . Получено 29 декабря 2023 г. .
  11. ^ "H63: Использование атрибута области действия для связывания ячеек заголовков и ячеек данных в таблицах данных". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 24 декабря 2023 г.
  12. ^ "G152: Настройка анимированных изображений gif для прекращения мигания после n циклов (в течение 5 секунд)". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г. .
  13. ^ "G4: Разрешение приостановки и повторного запуска контента с места остановки". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.
  14. ^ «Руководство 2.3 Припадки: не разрабатывайте контент таким образом, чтобы он мог вызвать припадки». Руководство по доступности веб-контента (WCAG) 2.0 . Консорциум Всемирной паутины . 11 декабря 2008 г. Получено 29 декабря 2023 г.
  15. ^ "G69: Предоставление альтернативы для временных медиа". Методы для WCAG 2.0 . Консорциум Всемирной паутины . Получено 1 января 2011 г.
  16. ^ См.:
  17. ^ "G158: Предоставление альтернативы для медиа на основе времени для аудиоконтента". Методы для WCAG 2.0 . Консорциум World Wide Web . 7 октября 2016 г. Получено 29 декабря 2023 г.
  18. ^ Файл:Браузеры, география и поддержка JavaScript на портале Википедии.pdf; и Файл:Анализ трафика портала Википедии и поддержка JavaScript.pdf .

Дальнейшее чтение

Внешние ссылки