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

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

Ярлыки МОС: ДОСТУП WP: ДОСТУПНОСТЬ

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

Веб-доступность - это цель облегчения навигации и чтения веб-страниц. Хотя это в первую очередь предназначено для помощи людям с ограниченными возможностями , это может быть полезно для всех читателей. Мы стремимся придерживаться Руководства по обеспечению доступности веб-контента 2.0 (также известного как ISO / IEC 40500: 2012), на котором основаны следующие предложения. Страницы, связанные с ними, легче читать и редактировать для всех.

14 января 2006 г. Правление Фонда Викимедиа приняло следующую резолюцию о недопущении дискриминации : «Фонд Викимедиа запрещает дискриминацию нынешних или потенциальных пользователей и сотрудников по признаку расы, цвета кожи, пола, религии, национального происхождения, возраста, инвалидности, пола. ориентация или любые другие охраняемые законом характеристики. Фонд Викимедиа придерживается принципа равных возможностей, особенно во всех аспектах взаимоотношений с сотрудниками, включая прием на работу, управление заработной платой, развитие сотрудников, продвижение по службе и перевод » . WMF утверждает, что его политику «нельзя обойти, разрушить или проигнорировать ни должностными лицами или сотрудниками Фонда Викимедиа, ни местными политиками любого проекта Викимедиа» .

Структура статьи [ править ]

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

Стандартизация уже стала привычкой в ​​Википедии, поэтому руководящие принципы, которым нужно следовать, - это просто Википедия: Руководство по стилю / макету и Википедия: Ведущий раздел § Элементы ведущего .

Заголовки [ править ]

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

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

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

Плавающие элементы [ править ]

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

Разрешение [ править ]

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

Текст [ править ]

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

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

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

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

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

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

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

Размер шрифта [ править ]

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

Избегайте использования меньшего размера шрифта в элементах страницы, которые уже используют меньший размер шрифта, таких как информационные поля , навигационные блоки и разделы ссылок . Это означает, что <small>...</small>теги и шаблоны, такие как и , не должны применяться к обычному тексту внутри этих элементов. Ни в коем случае результирующий размер шрифта любого текста не должен опускаться ниже 85% от размера шрифта страницы по умолчанию (т.е. 11,9 пикселей в векторной обложке или 10,8 пикселей в монокниге). Обратите внимание, что тег HTML имеет семантическое значение мелкого шрифта ; не используйте его для стилистических изменений.{{small}}{{smaller}}<small>...</small>

Другие языки [ править ]

Неанглийские слова или фразы должны быть заключены в {{ lang }}, в котором используются языковые коды ISO 639 , например:

{{lang|fr|Assemblée nationale}}

который отображается как

Assemblée nationale

или же {{lang-fr|Assemblée nationale}}

который отображается как

Французский : Assemblée nationale .

Обоснование : {{lang}}позволяет синтезаторам речи произносить текст на правильном языке. ^[2] У него много других применений; см. Шаблон: Lang / doc § Обоснование исчерпывающего списка преимуществ.

Оборачивать эти конструкции курсивом курсивом не нужно и не желательно; и шаблоны уже автоматически Курсив.{{lang}}{{lang-xx}}

Ссылки [ править ]

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

Цвет [ редактировать ]

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

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

• Убедитесь, что цвет - не единственный метод передачи важной информации. В частности, не используйте цветной текст или фон, если его статус также не указывается с помощью другого метода, такого как доступный символ, соответствующий легенде, или метки сносок . В противном случае слепые пользователи или читатели, обращающиеся к Википедии с помощью распечатки или устройства без цветного экрана, не получат эту информацию.
• Ссылки должны быть четко идентифицированы как ссылки для наших читателей.
• Некоторые читатели Википедии частично или полностью страдают дальтонизмом или слабовидением. Убедитесь, что контрастность текста с фоном достигает по крайней мере уровня AA в Руководстве по доступности веб-контента (WCAG) 2.0 и, когда это возможно, уровня AAA (см. WCAG «Общие сведения о SC 1.4.3: Контрастность (минимальная)» ). Чтобы использовать именованные цвета CSS для текста на белом фоне, обратитесь к Википедии: Руководство по стилю / специальным возможностям / цветам CSS для текста на белом фоне, чтобы узнать о рекомендуемых цветах. Для другого использования вот набор инструментов, которые можно использовать для проверки правильности контраста:
  • Контраст Analyzer Color позволяет выбрать цвета на странице, а также просматривать их контраст тщательно. Однако убедитесь, что используете только современный алгоритм «яркости», а не устаревший алгоритм «яркость / разность цветов».
  • Вы также можете использовать проверку контрастности цвета Snook , которая актуальна по состоянию на 11 января 2015 года ^{[Обновить]}.
  • Команда дизайнеров Фонда Викимедиа предоставила цветовую палитру, в которой цвета отмечены в соответствии с уровнем соответствия AA. Он используется для всех элементов пользовательского интерфейса в продуктах и ​​в основных темах Викимедиа, настольных и мобильных. Однако он не учитывает связанный текст.
  • Таблица в Википедии: Руководство по стилю / доступности / цветам показывает результаты для 14 оттенков поиска самого темного или самого светлого фона, которые соответствуют AAA, по сравнению с черным текстом, белым текстом, связанным текстом и посещенным связанным текстом.
  • Google Chrome Canary имеет отладчик цветового контраста с наглядным руководством и подборщиком цветов.
  • В сети есть несколько других инструментов, но перед их использованием проверьте, не устарели ли они. Некоторые инструменты основаны на алгоритме WCAG 1.0, в то время как сейчас в качестве ссылки используется алгоритм WCAG 2.0. Если в инструменте конкретно не упоминается, что он основан на WCAG 2.0, предположим, что он устарел.
• Дополнительные инструменты могут использоваться для создания графических диаграмм и цветовых схем для карт и тому подобного. Эти инструменты не являются точными средствами проверки доступности контраста, но они могут быть полезны для определенных задач.
  • Paletton (ранее Color Scheme Designer) помогает выбрать хороший набор цветов для графической диаграммы.
  • Color Brewer 2.0 предоставляет безопасные цветовые схемы для карт и подробные объяснения.
  • Светлая качественная цветовая схема предоставляет набор из девяти цветов, которые подходят для дальтоников, и с черными текстовыми метками (среди других палитр).
  • Существует несколько инструментов для имитации дальтонизма зрения: Toptal ColorFilter (анализ веб-страниц) и Coblis Color-blindness Simulator (локальный анализ файлов). Существуют также расширения браузера для анализа веб-страниц: Colorblinding (Chrome) NoCoffee (Chrome) NoCoffee (Firefox)
  • Очень простой инструмент с открытым исходным кодом, который может быть полезен для выбора контрастных цветов, - это Color Oracle , «бесплатный симулятор цветовой слепоты для Windows, Mac и Linux». Он позволяет вам просматривать все, что находится на вашем экране, так, как это будет видеть кто-то с одним из трех типов дальтонизма или в оттенках серого.
• Если в статье слишком много цветов, и вы не знаете, как исправить это самостоятельно, вы можете попросить помощи у других редакторов. Поместите ({{ Overcoloured }} или {{ Overcoloured }}) в верхней части статьи.

Блокировать элементы [ править ]

Списки [ править ]

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

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

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

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

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

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

Это Yтакже приемлемая практика (чтобы убрать отметку в ответе):

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

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

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

ни Nэто (переключить тип с маркированного списка на список описаний):

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

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

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

ни Nэто (прыгнуть более чем на один уровень):

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. Также Википедию: Руководство по стилю / глоссарии для богатой, но доступной разметки сложных списков описания / определения / ассоциации .

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

* Это один предмет. <br /> Это тот же абзац с разрывом строки перед ним.* Это еще один предмет.

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

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

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

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

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

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

Отступ [ править ]

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

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

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

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

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

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

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

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

: Текст здесь. {{Pb}} Еще текст. —Пользователь: Example3

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

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

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

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

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

• Белая роза
• Желтая роза

• Розовая роза

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

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

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

Вертикальные списки без маркировки [ править ]

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

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

{{список без маркировки| Белая роза| Желтая роза| Розовая роза| Красная роза}}

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

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

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

См. Также Руководство по стилю: Списки § Списки без маркировки .

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

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

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

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

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

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

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

Заголовки списка [ править ]

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

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

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

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

Таблицы [ править ]

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

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

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

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

Таблицы данных [ править ]

{|| + [текст подписи]| -! scope = "col" | [заголовок столбца 1]! scope = "col" | [заголовок столбца 2]! scope = "col" | [заголовок столбца 3]| -! scope = "row" | [заголовок строки 1]| [нормальная ячейка 1,2] || [нормальная ячейка 1,3]| -! scope = "row" | [заголовок строки 2]| [нормальная ячейка 2,2] || [нормальная ячейка 2,3]...|}

Подпись ( |+)

Заголовок - это заголовок таблицы, описывающий ее характер. ^{[WCAG-TECH 1]} Таблицы данных всегда должны включать заголовок.

Заголовки строк и столбцов (  ! )

Как и заголовок, они помогают представить информацию посетителям в логической структуре. ^{[WCAG-TECH 2]} Заголовки помогают программам чтения с экрана отображать информацию заголовков о ячейках данных. Например, информация заголовка произносится перед данными ячейки, или информация заголовка предоставляется по запросу. ^[6] Поскольку заголовок строки и заголовок столбца могут произноситься перед данными в каждой ячейке при навигации в режиме таблицы, необходимо, чтобы заголовки столбцов и заголовки строк однозначно определяли столбец и строку соответственно. ^[7]

Объем заголовков ( ! scope="col" |и ! scope="row" |)

Это четко определяет заголовки как заголовки строк или столбцов. Заголовки теперь можно связать с соответствующими ячейками. ^{[WCAG-TECH 3]}

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

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

Макетные таблицы [ править ]

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

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

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

Изображения [ править ]

1. Изображения, которые не являются чисто декоративными, должны включать атрибут alt, который действует как замена изображения для слепых читателей, поисковых роботов и других невизуальных пользователей. Если добавлен дополнительный замещающий текст, он должен быть кратким или отсылать читателя к подписи или смежному тексту. См. WP: ALT для получения дополнительной информации.
2. В большинстве случаев изображения должны включать заголовок с использованием встроенного синтаксиса изображения. Подпись должна кратко описывать значение изображения и важную информацию, которую оно пытается передать.
3. Избегайте использования изображений вместо таблиц или диаграмм . По возможности, любые диаграммы или диаграммы должны иметь текстовый эквивалент или должны быть хорошо описаны, чтобы пользователи, которые не могут видеть изображение, могли получить некоторое представление о концепции.
4. Избегайте прослаивая текст между двумя изображениями или, если это абсолютно необходимо, используя фиксированные размеры изображения .
5. Избегайте неизбирательных разделов галереи, потому что размер экрана и форматирование браузера могут повлиять на доступность для некоторых читателей из-за фрагментированного отображения изображений.
6. Избегайте ссылки в тексте на изображения, расположенные слева или справа. Размещение изображений может отличаться для посетителей мобильного сайта и не имеет смысла для людей, страницы которых читаются с помощью вспомогательного программного обеспечения. Вместо этого используйте подписи для обозначения изображений.
7. Подробные описания изображений, если они не подходят для статьи, должны быть размещены на странице описания изображения с пометкой о том, что активация ссылки на изображение приведет к более подробному описанию. ^{[ как? ]}
8. Изображения должны находиться внутри раздела, к которому они относятся (после заголовка и после любых ссылок на другие статьи), а не в самом заголовке или в конце предыдущего раздела. Это гарантирует, что программы чтения с экрана будут читать, а на мобильном сайте изображение (и его текстовую альтернативу) будет отображаться в правильном разделе.
9. Это руководство включает замещающий текст для уравнений в формате LaTeX в <math>режиме. ^{[ требуется разъяснение ]}
10. Не помещайте изображения в заголовки ; это включает значки и <math>разметку. Это может привести к разрыву ссылок на разделы и возникновению других проблем.

Дополнительные сведения о значках см. В Википедии: Руководство по стилям / значкам § Помните о доступности для людей с ослабленным зрением .

Анимация, видео и аудио [ править ]

Анимации [ править ]

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

• Не более пяти секунд (что делает его чисто декоративным элементом) ^[8] или
• Иметь функции управления (остановка, пауза, воспроизведение) ^[9]

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

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

Видео [ править ]

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

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

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

Аудио [ править ]

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

Стили и параметры разметки [ править ]

Лучшая практика: используйте классы Wikimarkup и CSS вместо альтернатив [ править ]

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

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

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

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

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

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

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

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

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

См. Также [ править ]

• Юзабилити: Инициатива доступности (находится на Викимедиа)
• Инициатива веб-доступности (WAI)
• Википедия: что можно и чего нельзя делать в отношении специальных возможностей (ключевые моменты этого руководства)
• Википедия: читатели с дислексией
• Википедия: делайте технические статьи понятными
• Википедия: Использование JAWS
• Справка: мобильный доступ
• Википедия: Защитники доступности
• Википедия: Доступность WikiProject
• Википедия: Юзабилити WikiProject

Примечания и ссылки [ править ]

Конкретный [ править ]

Общие [ править ]

• Кларк, Джо (2003). Создание доступных веб-сайтов . New Riders Press. ISBN 0-7357-1150-X. Проверено 1 января 2011 года .
• Пилигрим, Марк (2002). «Погрузитесь в доступность: 30 дней на более доступный веб-сайт» . Проверено 26 декабря 2013 года .

Технические [ править ]

Внешние ссылки [ править ]

• Руководство по стилю дизайна Викимедиа
• 10 советов по обеспечению доступности веб-сайтов от WAI
• Фильтр веб-страниц для дальтоников
• Основные компоненты веб-доступности от WAI
• Введение в веб-доступность , от WAI
• Ошибка MediaWiki 367: проблемы с доступностью разметки (отслеживание)