stringtranslate.com

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

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

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

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

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

Заголовки

  • МОС:ГУДХЕД
  • МОС:ПЛОХАЯ ГОЛОВА
  • МОС:SPACEUNDERHEADING

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

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

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

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

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

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

  • МОС:ACCESS#FLOAT

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

Разрешение

  • МОС:РЕСОЛ

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

Текст

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

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

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

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

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

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

  • МОС: НИКАКОГО
  • MOS:NOTOOLTIPS

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

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

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

  • МОС:МАЛЫЙ
  • МОС: МАЛЫЙ ТЕКСТ

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

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

Фракции

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

Другие языки

  • МОС:ДРУГОЙЯЗЫК
  • МОС:ЯЗЫК
  • WP:IETF

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

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

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

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

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

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

Ссылки

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

Цвет

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

Цвета чаще всего встречаются в статьях Википедии в шаблонах и таблицах . Техническую помощь по использованию цветов см. в разделе «Справка: Использование цветов» .

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

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

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

Списки

  • МОС:ИНДЕНТМИКС

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

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

Примеры:

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

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

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

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

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

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

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

* Поддерживать. Мне нравится эта идея. —Пользователь:Пример :: Вопрос: Что вам в этом нравится? —Пользователь:Пример2

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

* Поддерживать. Мне нравится эта идея. —Пользователь:Пример :* Вопрос: Что вам в этом нравится? —Пользователь:Пример2

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

* Поддерживать. Мне нравится эта идея. —Пользователь:Пример** Вопрос: Что вам в этом нравится? —Пользователь:Пример2

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

* Поддерживать. Мне нравится эта идея. —Пользователь:Пример *** Вопрос: Что вам в этом нравится? —Пользователь:Пример2

☒NОбычно это не рекомендуется:

: Поддерживать. Мне нравится эта идея. —Пользователь:Пример :* Вопрос: Что вам в этом нравится? —Пользователь:Пример2

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

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

  • МОС:ПАРАБР

К сожалению, обычная разметка списка 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 = Это второй элемент.}}

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

Отступ

  • МОС:ИНДЕНТГАП

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

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

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

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

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

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

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

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

: Текст здесь.{{pb}}Дополнительный текст. —Пользователь:Пример3

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

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

Маркированные вертикальные списки
  • МОС:LISTGAP

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

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

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

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

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

  • МОС:НОБР
  • МОС:NOBREAKS

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

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

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

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

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

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

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

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

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

  • МОС:ХЛИСТ

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

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

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

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

Список заголовков

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

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

☒N1. Неверно

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

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

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

Таблицы

  • МОС:ДТАБ

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

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

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

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

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

Викитекст:

{| class = "wikitable" |+ текст заголовка |- ! область действия = "столбец" | заголовок столбца 1 ! область действия = "столбец" | заголовок столбца 2 ! область действия = "столбец" | заголовок столбца 3 |- ! область = "строка" | заголовок строки 1 | данные 1 || данные 2 |- ! область = "строка" | заголовок строки 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. Как избежать вложенных таблиц

Таблицы раскладки

  • МОС:ЛТАБ

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

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

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

Изображений

  • МОС:АКЦИМ
  1. Изображения и значки, которые не являются чисто декоративными, должны включать атрибут alt , который заменяет изображение для слепых читателей, поисковых пауков и других пользователей, не имеющих визуального представления. Если добавляется дополнительный замещающий текст, он должен быть кратким или отсылать читателя к заголовку или соседнему тексту. (Дополнительную информацию см. в WP:Руководство по стилю/Доступности/Альтернативный текст для изображений . Дополнительные сведения об значках см. в WP:Руководство по стилю/Доступность/Иконки § Помните о доступности для людей с нарушениями зрения .)
  2. В большинстве случаев изображения должны включать подпись с использованием встроенного синтаксиса изображения. Подпись должна кратко описывать смысл изображения и важную информацию, которую оно пытается передать.
  3. Избегайте использования изображений вместо таблиц и диаграмм. По возможности любые диаграммы и диаграммы должны иметь текстовый эквивалент или быть хорошо описаны, чтобы пользователи, которые не видят изображения, могли получить некоторое представление о концепции.
  4. Избегайте размещения текста между двумя изображениями или, если это абсолютно необходимо, не используйте изображения фиксированного размера .
  5. Избегайте неразборчивых галерей , поскольку размер экрана и форматирование браузера могут повлиять на доступность для некоторых читателей из-за фрагментированного отображения изображений ( например ). Статьи с большим количеством изображений могут быть недоступны в мобильных версиях Википедии. В идеале на странице должно быть не более 100 изображений (независимо от их размера). См. MediaWiki:Ограничить количество изображений на странице.
  6. Не указывайте в тексте изображения как расположенные слева или справа. Размещение изображений может отличаться для зрителей мобильного сайта и не имеет смысла для людей, страницы которых читаются с помощью вспомогательного программного обеспечения. Вместо этого используйте подписи для идентификации изображений. (См. WP:Руководство по стилю/изображениям § Ссылки из текста статьи .)
  7. Подробные описания изображений, если они не подходят для статьи, должны быть размещены на странице описания изображения с пометкой о том, что активация ссылки на изображение приведет к более подробному описанию. (См. «Справка: страница описания файла § Сводка изображения ».)
  8. Изображения должны находиться внутри раздела, к которому они относятся (после заголовка и любых примечаний ), а не в самом заголовке или в конце предыдущего раздела. Это гарантирует, что программы чтения с экрана прочитают, а мобильный сайт отобразит изображение (и его текстовую альтернативу) в правильном разделе. (См. раздел WP:Руководство по стилю/изображениям .)
  9. Это руководство включает замещающий текст для уравнений в формате LaTeX в <math>режиме. См. Википедию: Руководство по стилю/математике § Альтернативный текст.
  10. Не размещайте изображения в заголовках ; сюда входят значки и <math>разметка. Это может привести к поломке ссылок на разделы и возникновению других проблем.

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

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

Анимации

Чтобы анимация ( GIF – формат обмена графикой) была доступной, она должна:

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

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

видео

К видео можно добавлять субтитры в текстовом формате с синхронизацией. Соответствующая страница справки находится по адресу :commons:Commons:Video § Субтитры и субтитры. Субтитры предназначены для транскрипции речи.

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

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

Аудио

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

Стили и параметры разметки

  • МОС:ОТКЛОНЕНИЯ

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

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

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

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

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

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

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

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

Статьи Википедии должны быть доступны читателям, использующим браузеры и устройства с ограниченной поддержкой или отсутствием поддержки 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 Уровень жизни . Рабочая группа по технологиям веб-гипертекстовых приложений . 24 декабря 2023 г. Проверено 29 декабря 2023 г.
  3. ^ «H58: Использование языковых атрибутов для выявления изменений в человеческом языке». Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.Уровень доступности: АА.
  4. ^ «G91: Предоставление текста ссылки, описывающего цель ссылки» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.
  5. ^ «F84: Невыполнение критерия успеха 2.4.9 из-за использования неспецифической ссылки, такой как «нажмите здесь» или «подробнее», без механизма изменения текста ссылки на конкретный текст» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.
  6. ^ «Служба проверки разметки: проверьте разметку (HTML, XHTML, ...) веб-документов» . validator.w3.org . v1.3+хг. Консорциум Всемирной паутины . 2017 . Проверено 13 декабря 2017 г.Сообщается об ошибке валидатора: « Ошибка : в элементе dlотсутствует необходимый дочерний элемент».
  7. ^ «H39: Использование элементов заголовка для связи заголовков таблиц данных с таблицами данных» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.Уровень доступности: А.
  8. ^ «H51: Использование разметки таблицы для представления табличной информации» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.
  9. ^ «4.9.10 Элемент» . HTML Уровень жизни . Рабочая группа по технологиям веб-гипертекстовых приложений . 24 декабря 2023 г. Проверено 29 декабря 2023 г.
  10. ^ «HTML-таблицы с JAWS» . FreedomScientific.com . Свобода Научная . Проверено 29 декабря 2023 г.
  11. ^ «H63: Использование атрибута области для связывания ячеек заголовка и ячеек данных в таблицах данных» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 24 декабря 2023 г.
  12. ^ «G152: Настройка анимированных изображений GIF, чтобы они переставали мигать после n циклов (в течение 5 секунд)» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.
  13. ^ «G4: Разрешение приостановки и перезапуска контента с того места, где оно было приостановлено» . Техники для WCAG 2.0 . Консорциум Всемирной паутины . 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 . Консорциум Всемирной паутины . 7 октября 2016 г. Проверено 29 декабря 2023 г.
  18. ^ Файл: Поддержка браузеров, географии и JavaScript на портале Википедии.pdf; и Файл: Анализ трафика портала Википедии и поддержка JavaScript.pdf .

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

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