Это список действий, разработанный для того, что вы "шаг-за-шагом" смогли сделать вашу вики более доступной для пользователей с ограниченными возможностями. Список охватывает все ключевые области, и, завершив все его пункты, вы принесёте много пользы для читателей вашего проекта.
Как использовать список?
- В можете использовать список непосредственно здесь, на Вики Сообщества, или скопировать его на свою вики, где список можно отредактировать в соответствии с областями, которые важны для вашей вики.
- Вы можете отмечать пройденные "шаги" непосредственно в таблице. Отметки являются персонализированными - только вы можете их видеть.
- Если на вашей вики уже много статей и вам кажется, что вносить рекомендуемые правки займёт слишком много времени, мы рекомендуем начать с Топ-10 страниц из Аналитики. Затем перейдите к страницам, которые относятся к самым свежим релизам по теме вашей вики. Этого будет вполне достаточно для начала.
- В дополнение к таблице, если вы скопируете её на свою вики, вы можете добавить к ней таблицу со списком статей, которые необходимо отредактировать.
- Если вам нужен совет по использованию списка, обратитесь в чат Фэндома в Discord в канал #accessibility.
Список действий
Изображения
| Achieved | Действие | Комментарии/Пример | Помощь |
|---|---|---|---|
|
|
Добавьте к изображениям альтернативный текст с описанием изображения. С его помощью программы чтения с экрана смогут объяснить пользователю, что изображено там. | Например, альтернативный текст для этого изображения может быть таким: "Аанг раскрыл свой планер и готовится взлететь. Сокка стоит рядом и скептически смотрит на него". | См. также эту страницу. |
|
|
Наоборот, подпись к изображению должна не описывать его, а добавлять контекст. Таким образом, пользователи с помощью программы чтения с экрана получат и информацию об изображении, и узнают, что происходит на изображении. В случае, если в подписи вы добавляете описание, то дублировать это альтернативным текстом не нужно. | Например, подпись для того же самого изображения может быть такой: "Аанг доказывает Сокке, что люди могут летать." | |
|
|
Если на изображении показана диаграмма или график, то в альтернативный текст добавьте краткие пояснения к ней. Не нужно описывать всю диаграмму, так как это не уместится в альтернативный текст. | Например, если на графике показано снижение сборов фильмов после релиза в кинотеатрах за последний месяц, укажите фильм, который собрал наибольшую кассу, и фильм, который провалился в прокате, и дайте краткие пояснения. | |
|
|
Если изображение содержит текст, то обязательно продублируйте этот текст или его основные положения в альтернативном тексте, потому что программы чтения с экрана не смогут считать текст непосредственно с изображения. | Например, альтернативный текст для этого изображения может быть таким: "Соло держит листок с текстом "Safeguard Procedure" (на русском "Протокол Защитник")". |
Дизайн и цветовая гамма
| Achieved | Действие | Комментарии/Пример | Помощь |
|---|---|---|---|
|
|
Помните, что контраст между текстом и фоном (вики в целом или фоновым цветом в шаблоне/инфобоксе) должен быть не менее 4,5:1. Это гарантирует, что текст будет хорошо виден для людей с нарушениями зрения или при ярком солнечном свете. |
|
Справка:Контрастность |
|
|
Обязательно настройте для вашей вики тёмную и светлую темы, чтобы читатели смогли выбрать цветовую гамму, которая наиболее удобна для них. | Мы рекомендуем использовать светлые оттенки для фона и текст чёрного цвета для светлой темы и тёмные оттенки для фона и текст белого цвета для тёмной темы. | Справка:Конструктор тем |
|
|
В случае цветового кодирования шаблонов или каких-либо других вещей, обязательно добавляйте контекст, чтобы пояснить читателям, что вы имеете в виду. При разработке цветовой гаммы шаблонов или инфобоксов не забывайте про читателей с дефектами зрения. | Например, на Аватар Вики цвет инфобокса зависит от нации, которой принадлежит персонаж. Однако в инфобоксе информация о нации всё равно продублирована. | Справка:Цветовая слепота |
|
|
Помните, что на Фэндоме используется динамический макет экрана и ширина области с содержимым страницы может меняться. Поэтому убедитесь, что элементы страницы адаптируются под различные размеры экрана. | Избегайте таблиц и шаблонов с фиксированной шириной, так как они могут плохо работать при изменение размера экрана. | Справка:Таблицы |
Форматирование
| Achieved | Действие | Комментарии/Пример | Помощь |
|---|---|---|---|
|
|
Меню локальной навигации на вашей вики должно быть актуально и интуитивно понятно для читателей, обеспечивать быстрый доступ к основным разделам вашей вики и популярному контенту. | Не забывайте периодически обновлять меню и добавлять в него ссылки на актуальный контент, чтобы читатели легко могли найти его. | Справка:Меню вики |
|
|
Чёткая структура заголовков на странице крайне важна для программ чтения с экрана, так как эти программы используют их в качестве навигации. | Читатели с ограниченными возможностями не могут быстро просмотреть текст на странице и используют в качестве ориентиров заголовки внутри страницы. Если перед читателем будет страница с малым числом заголовков и большим количеством текста, то у него возникнут проблемы с тем, чтобы найти важную информацию. | Справка:Работа с текстом |
|
|
Правильно используйте списки на ваших страницах. Не злоупотребляйте цифровыми списками, чтобы не вводить читателей в заблуждение. | Используйте цифровые списки в пошаговых инструкциях или для рейтинга. В остальных случаях применяйте маркированный список. | Справка:Работа с текстом |
|
|
Форматируйте текст только, если вы хотите выделить его каким-либо образом. | Например, вы можете выделить имя персонажа или название объекта в самом начале статьи, но не нужно выделять его на протяжении всей статьи. Также нет необходимости добавлять в текст ссылки на одну и ту же статью. Достаточно добавить под одной ссылке на неё в каждом разделе страницы. Помимо этого не нужно злоупотреблять подчёркиванием, чтобы избежать путаницы с уже автоматически подчёркнутыми ссылками. | Справка:Работа с текстом |
|
|
Текст ссылок должен содержать контекст о самой ссылке, чтобы читатель понимал, что, нажав на ссылку, он попадёт туда, куда он хочет попасть. | Например, ссылка типа [[Справка:Ссылки|см. подробнее]] не объясняет читателю, на какую страницу он переходит. Правильно будет записать эту ссылку следующим образом: [[Справка:Ссылки|узнайте больше о ссылках здесь]]. | Справка:Ссылки |
Шаблоны
| Achieved | Действие | Комментарии/Пример | Помощь |
|---|---|---|---|
|
|
На страницах шаблонов должно присутствовать описание/документация, где рассказывается о том, что это за шаблон и как его использовать, и приведены примеры. | На каждой вики есть набор стандартных шаблонов с описанием. Старайтесь модифицировать шаблоны и описание, а не удалять их полностью. В случае инфобоксов может быть полезно привести описание каждой строчки шаблона. Пример смотрите на этой странице. | Справка:Шаблоны |
|
|
Исходный код на странице не должен быть перегружен. Если страница переполнена дополнительным кодом, новичкам может быть сложно внести правки на такие страницы. | Вместо большого числа кода для оформления старайтесь использовать шаблоны. Например, вместо <div style="border:3px solid black; color:white; padding:2px и т.д.</div> добавьте шаблон типа {{Заголовок|Текст}}.
|
Справка:Викитекст |
Таблицы
| Achieved | Действие | Комментарии/Пример | Помощь |
|---|---|---|---|
|
|
Не оставляйте в таблице пустые ячейки. Программы чтения с экрана могут испытывать трудности с интерпретацией того, что в них содержится, что может запутать читателя. | Добавьте в пустую ячейку слово "Пусто", "Нет данных", "Не используется" и подобное. | См. также эту страницу. |
|
|
Используйте отформатированные заголовки в таблице. Это позволяет программам чтения с экрана определять заголовки и помогает пользователям легче ориентироваться в таблице. | Чтобы выделить заголовок в исходном коде таблицы, используйте восклицательный знак ! Текст вместо стандартной вертикальной черты | Текст.
| |
|
|
Используя цветовую маркировку, дополнительно дублируйте её текстом, чтобы пользователь понимал контекст. Помните, что описание таблицы не поможет людям с проблемами со зрением. | Например, вместо того, чтобы выделить красным победы команды, а зелёным - проигрыши, в дополнение к цвету напишите в ячейках "Победа" и "Поражение". |